/** Shopify CDN: Minification failed

Line 13905:18 Unexpected "{"
Line 13905:27 Expected ":"
Line 13913:18 Unexpected "{"
Line 13913:27 Expected ":"
Line 13914:18 Unexpected "{"
Line 13914:27 Expected ":"
Line 20458:0 Unexpected "}"

**/
/* === Self-hosted Variable Font: Helvetica Now Variable === */
@font-face {
  font-family: "Helvetica Now Var";
  src: url("{{ 'HelveticaNowVar.woff2' | asset_url }}") format("woff2-variations");
  font-weight: 100 900; /* full weight range */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Var";
  src: url("{{ 'HelveticaNowVar.woff2' | asset_url }}") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Apply the font to body text */
body {
  font-family: "Helvetica Now Var", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
*, :before, :after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--text-color) / .12);
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  interpolate-size: allow-keywords;
  scroll-padding-block-start: calc(var(--sticky-area-height)  + 20px);
  line-height: 1.5;
  /* Reserve the scrollbar gutter always so layout doesn't shift
     horizontally when the viewport scrollbar toggles (e.g. during
     the hero intro scroll-lock on home, when modals open/close,
     or between pages with/without overflow). */
  scrollbar-gutter: stable;
}

body {
  --background: var(--background-primary);
  --text-color: var(--text-primary);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
  position: relative;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: 1em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  text-align: inherit;
  background-color: #0000;
  background-image: none;
}

button, label, summary, [role="button"], [type="checkbox"], [type="radio"], [type="submit"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-webkit-inner-spin-button {
  height: auto;
}

::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-webkit-date-and-time-value {
  text-align: start;
}

summary {
  -webkit-user-select: none;
  user-select: none;
  list-style-type: none;
}

summary::-webkit-details-marker {
  display: none;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol, ul, menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

textarea {
  resize: vertical;
}

input::placeholder, textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

:disabled {
  cursor: default;
}

img, video, iframe, object {
  vertical-align: middle;
  display: block;
}

img {
  color: #0000;
  max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%);
  object-fit: inherit;
  object-position: inherit;
  height: auto;
}

picture source {
  display: contents;
}

picture img {
  width: 100%;
  min-height: inherit;
  max-height: 100%;
}

video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

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

[hidden] {
  display: none !important;
}

height-observer, visibility-progress, scroll-area, video-media, model-media, media-carousel, impact-text, recently-viewed-products {
  display: block;
}

@media screen and (min-width: 700px) {
  img {
    max-width: min(var(--image-max-width, 100%), 100%);
  }
}

.pswp {
  --pswp-bg: rgb(var(--background-primary));
  --pswp-placeholder-bg: rgb(var(--background-primary));
  --pswp-root-z-index: 100000;
  --pswp-icon-color: rgb(var(--background-primary));
  --pswp-icon-color-secondary: rgb(var(--background-primary));
  --pswp-icon-stroke-color: rgb(var(--text-primary));
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: rgb(var(--text-primary));
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  touch-action: none;
  opacity: .003;
  contain: layout style size;
  -webkit-tap-highlight-color: #0000;
  outline: 0;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

.pswp img {
  max-width: none;
}

.pswp--open {
  display: block;
}

.pswp, .pswp__bg {
  will-change: opacity;
  transform: translateZ(0);
}

.pswp__bg {
  opacity: .005;
  background: var(--pswp-bg);
}

.pswp, .pswp__scroll-wrap {
  overflow: hidden;
}

.pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pswp__img, .pswp__zoom-wrap {
  width: auto;
  height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
  cursor: var(--cursor-zoom-in-svg-url) 28 28, zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: grabbing;
}

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img {
  cursor: var(--cursor-zoom-out-svg-url) 28 28, zoom-out;
}

.pswp__container, .pswp__img, .pswp__button {
  -webkit-user-select: none;
  user-select: none;
}

.pswp__item {
  z-index: 1;
  overflow: hidden;
}

.pswp__hidden {
  display: none !important;
}

.pswp__content {
  pointer-events: none;
}

.pswp__content > * {
  pointer-events: auto;
}

.pswp__error-msg-container {
  display: grid;
}

.pswp__error-msg {
  color: var(--pswp-error-text-color);
  margin: auto;
  font-size: 1em;
  line-height: 1;
}

.pswp .pswp__hide-on-close {
  opacity: .005;
  will-change: opacity;
  transition: opacity var(--pswp-transition-duration) cubic-bezier(.4, 0, .22, 1);
  z-index: 10;
  pointer-events: none;
}

.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}

.pswp__button {
  -webkit-touch-callout: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.pswp__button:disabled {
  opacity: .3;
  cursor: auto;
}

.pswp__button svg {
  display: block;
}

.pswp__top-bar, .pswp__bottom-bar {
  z-index: 10;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none !important;
}

.pswp__top-bar > *, .pswp__bottom-bar > * {
  pointer-events: auto;
  will-change: opacity;
}

.pswp__bottom-bar {
  justify-content: center;
  top: auto;
  bottom: 24px;
}

.pswp__bottom-bar .pagination {
  border-radius: var(--rounded-full);
}

.pswp__button--close {
  margin-block-start: 24px;
  margin-inline-end: 24px;
  transition: transform .2s;
}

.pswp__preloader {
  display: none;
}

@media screen and (min-width: 700px) {
  .pswp__bottom-bar {
    bottom: 48px;
  }

  .pswp__button--close {
    margin-block-start: 48px;
    margin-inline-end: 48px;
  }
}

@media screen and (pointer: fine) {
  .pswp__button--close:hover {
    transform: rotate(90deg);
  }
}

.accordion {
  --accordion-spacing: var(--spacing-5);
  box-sizing: content-box;
  border-block-start-width: 1px;
  border-block-end-width: 1px;
}

.accordion__toggle {
  gap: var(--spacing-2);
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--accordion-spacing);
  padding-block-end: var(--accordion-spacing);
  display: flex;
}

.accordion__content {
  margin-block-end: var(--accordion-spacing);
  padding-inline-end: var(--spacing-6);
  transform: translateY(-4px);
}

.accordion__content:has(.image-filter-list) {
  padding-inline-end: 0;
}

.accordion--lg {
  --accordion-spacing: var(--spacing-8);
}

.accordion + .accordion {
  border-block-start-width: 0;
}

.accordion-box {
  padding: var(--spacing-1) var(--spacing-6);
}

.accordion-box > :first-child {
  border-block-start-width: 0;
}

.accordion-box > :last-child {
  border-block-end-width: 0;
}

@media screen and (min-width: 1000px) {
  .accordion-box {
    padding: var(--spacing-5) var(--spacing-12);
  }
}

.blog-post-card {
  --blog-post-card-badge-spacing: var(--spacing-3);
  --blog-post-card-figure-gap: var(--spacing-5);
  --blog-post-card-meta-gap: var(--spacing-1) var(--spacing-5);
  gap: var(--blog-post-card-figure-gap);
  align-content: start;
  display: grid;
  overflow: hidden;
}

.blog-post-card__figure {
  display: block;
  position: relative;
  overflow: hidden;
}

.blog-post-card__figure > .badge {
  z-index: 1;
  position: absolute;
  top: var(--blog-post-card-badge-spacing);
}

.blog-post-card__figure > .badge:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--blog-post-card-badge-spacing);
}

.blog-post-card__figure > .badge:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--blog-post-card-badge-spacing);
}

.blog-post-card__meta {
  gap: var(--blog-post-card-meta-gap);
  flex-wrap: wrap;
  display: flex;
}

.blog-post-card--featured {
  grid-column: 1 / -1;
  gap: 0;
}

.blog-post-card--featured .blog-post-card__info {
  padding: var(--spacing-5);
}

@media screen and (min-width: 700px) {
  .blog-post-card {
    --blog-post-card-badge-spacing: var(--spacing-4);
    --blog-post-card-figure-gap: var(--spacing-6);
    --blog-post-card-meta-gap: var(--spacing-2) var(--spacing-6);
  }

  .blog-post-card--featured .blog-post-card__info {
    padding: var(--spacing-12);
  }
}

@media screen and (min-width: 1000px) {
  .blog-post-card--featured {
    grid-template-columns: 1fr .7fr;
    display: grid;
  }
}

@media screen and (min-width: 1150px) {
  .blog-post-card--featured {
    grid-template-columns: 1fr .54fr;
  }

  .blog-post-card--featured .blog-post-card__info {
    padding: var(--spacing-16);
  }
}

.blog-posts {
  --blog-posts-gap: var(--spacing-8) var(--grid-gutter);
  grid: var(--blog-posts-grid);
  gap: var(--blog-posts-gap);
  display: grid;
}

@media screen and (min-width: 700px) {
  .blog-posts {
    --blog-posts-gap: var(--spacing-12) var(--grid-gutter);
  }
}

@media screen and (min-width: 1000px) {
  .blog-posts {
    --blog-posts-gap: var(--spacing-12);
  }
}

@media screen and (min-width: 1400px) {
  .blog-posts {
    --blog-posts-gap: min(var(--section-inner-spacing-inline), var(--spacing-20));
  }
}

.button, .btn {
  --button-background: var(--button-background-primary) / var(--button-background-opacity, 1);
  --button-text-color: var(--button-text-primary);
  --button-outline-color: var(--button-background-primary);
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--rounded-button);
  background-color: rgb(var(--button-background));
  color: rgb(var(--button-text-color));
  text-align: center;
  font-size: var(--text-sm);
  letter-spacing: var(--text-letter-spacing);
  padding-block-start: var(--spacing-2-5);
  padding-block-end: var(--spacing-2-5);
  padding-inline-start: var(--spacing-5);
  padding-inline-end: var(--spacing-5);
  font-weight: bold;
  line-height: 1.6;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out;
  display: inline-block;
  position: relative;
}

.button--sm {
  font-size: var(--text-xs);
  padding-block-start: var(--spacing-2);
  padding-block-end: var(--spacing-2);
  line-height: 1.7;
}

.button--lg {
  font-size: var(--text-base);
  padding-block-start: .8125rem;
  padding-block-end: .8125rem;
  padding-inline-start: var(--spacing-6);
  padding-inline-end: var(--spacing-6);
}

.button--xl {
  font-size: var(--text-base);
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  padding-inline-start: var(--spacing-8);
  padding-inline-end: var(--spacing-8);
}

.button--secondary {
  --button-background: var(--button-background-secondary) / var(--button-background-opacity, 1);
  --button-text-color: var(--button-text-secondary);
  --button-outline-color: var(--button-background-secondary);
}

.button--subdued {
  --button-background: var(--text-color) / .1 !important;
  --button-text-color: var(--text-color) !important;
  --button-outline-color: var(--text-color) !important;
}

.button--outline {
  color: rgb(var(--button-outline-color) / var(--button-background-opacity, 1));
  background: none;
  box-shadow: inset 0 0 0 2px;
}

.button__loader, .button__feedback {
  gap: var(--spacing-1-5);
  opacity: 0;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.button__loader > * {
  width: var(--spacing-1-5);
  height: var(--spacing-1-5);
  border-radius: var(--rounded-full);
  background: currentColor;
}

@media screen and (min-width: 700px) {
  .button, .btn {
    padding-block-start: var(--spacing-3);
    padding-block-end: var(--spacing-3);
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-6);
  }

  .button--sm {
    padding-block-start: var(--spacing-2);
    padding-block-end: var(--spacing-2);
    padding-inline-start: var(--spacing-5);
    padding-inline-end: var(--spacing-5);
  }

  .button--lg {
    padding-block-start: var(--spacing-3-5);
    padding-block-end: var(--spacing-3-5);
    padding-inline-start: var(--spacing-8);
    padding-inline-end: var(--spacing-8);
  }

  .button--xl {
    padding-block-start: 1.075rem;
    padding-block-end: 1.075rem;
    padding-inline-start: var(--spacing-10);
    padding-inline-end: var(--spacing-10);
  }
}

.back-button {
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--rounded-button);
  opacity: .7;
  border-width: 1px;
  transition: all .2s ease-in-out;
  display: flex;
}

@media screen and (pointer: fine) {
  .back-button:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 700px) {
  .back-button {
    padding: var(--spacing-3) var(--spacing-6);
  }
}

.button-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  display: inline-flex;
}

.button-group > * {
  margin: 0;
}

.circle-button {
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--rounded-full);
  place-items: center;
  transition: opacity .15s ease-in;
  display: grid;
}

.circle-button[disabled] {
  opacity: .5;
  pointer-events: none;
}

.circle-button--fill {
  background: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
}

.circle-button--bordered {
  border: 2px solid;
}

.circle-button--sm {
  width: var(--spacing-10);
  height: var(--spacing-10);
}

.circle-button--lg {
  width: var(--spacing-14);
  height: var(--spacing-14);
}

.animated-arrow {
  pointer-events: none;
  place-items: center;
  display: grid;
}

.animated-arrow:before, .animated-arrow:after {
  content: "";
  grid-area: 1 / -1;
  transition: all .2s ease-in-out;
}

.animated-arrow:before {
  border-block-start-width: 2px;
  border-inline-end-width: 2px;
  width: .5rem;
  height: .5rem;
  transform: rotate(calc(var(--transform-logical-flip) * 45deg));
  border-color: currentColor;
  position: relative;
}

.animated-arrow:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  left: -1px;
}

.animated-arrow:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: -1px;
}

.animated-arrow:after {
  width: var(--spacing-2-5);
  height: var(--spacing-0-5);
  transform-origin: center;
  opacity: 0;
  background: currentColor;
  transform: scaleX(.5);
}

@media screen and (pointer: fine) {
  .group:hover .animated-arrow:before {
    transform: translateX(calc(var(--transform-logical-flip) * var(--spacing-0-5))) rotate(calc(var(--transform-logical-flip) * 45deg));
  }

  .group:hover .animated-arrow:after {
    opacity: 1;
    transform: scaleX(1);
  }
}

.animated-arrow--reverse {
  transform: rotate(180deg);
}

.circle-chevron {
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-radius: var(--rounded-full);
  background: rgb(var(--text-color) / .1);
  flex-shrink: 0;
  place-items: center;
  transition: all .2s ease-in-out;
  display: grid;
}

.circle-chevron[disabled] {
  opacity: .5;
}

.group[aria-expanded="true"] .circle-chevron.group-expanded\:colors:not([disabled]) {
  background: rgb(var(--text-color));
  color: rgb(var(--background));
}

.group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate {
  transform: rotate(calc(var(--transform-logical-flip) * 180deg));
}

@media screen and (pointer: fine) {
  .group:hover .circle-chevron.group-hover\:colors:not([disabled]), .circle-chevron.hover\:colors:hover:not([disabled]) {
    background: rgb(var(--text-color));
    color: rgb(var(--background));
  }
}

scroll-carousel {
  position: relative;
}

.content-over-media {
  grid-template: 0 minmax(0, 1fr) 0 / minmax(0, 1fr) minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-gap, var(--content-over-media-column-gap, var(--container-gutter))) * 2)) minmax(0, 1fr);
  gap: var(--content-over-media-row-gap, var(--content-over-media-gap, var(--container-gutter))) var(--content-over-media-column-gap, var(--content-over-media-gap, var(--container-gutter)));
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.content-over-media:before {
  content: "";
  background: rgb(var(--content-over-media-overlay));
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  transition: background .2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content-over-media > :is(picture, img, video, iframe, svg, video-media) {
  height: var(--content-over-media-height, auto);
  transform-origin: top;
  overflow-wrap: anywhere;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  grid-area: 1 / 1 / span 3 / span 3;
  place-self: stretch stretch;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  position: relative;
}

.content-over-media > :is(picture, img, video, iframe, svg, video-media) > * {
  border-radius: inherit;
}

.content-over-media > :not(img, video, iframe, svg, video-media, picture) {
  max-width: var(--content-over-media-content-max-width, 780px);
  z-index: 1;
  grid-area: 2 / 2 / auto / span 1;
  position: relative;
}

[allow-transparent-header] :is(.content-over-media > :not(img, video, iframe, svg, video-media, picture)) {
  padding-block-start: calc(var(--header-height) * var(--section-is-first));
}

.content-over-media > video-media:not([autoplay]) ~ * {
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.content-over-media > video-media:not([autoplay])[loaded] ~ * {
  opacity: 0;
  visibility: hidden;
}

.content-over-media:has( > video-media[loaded]:not([autoplay])):before {
  background: none;
  transition-delay: .1s;
}

.content-over-media--sm {
  --content-over-media-height: 375px;
}

.content-over-media--md {
  --content-over-media-height: 480px;
}

.content-over-media--lg {
  --content-over-media-height: 560px;
}

.content-over-media--fill {
  --content-over-media-height: calc(100vh - var(--sticky-area-height));
}

.shopify-section:first-child [allow-transparent-header] .content-over-media--fill {
  --content-over-media-height: calc(100vh - var(--announcement-bar-height, 0px));
}

@supports (height: 100svh) {
  .content-over-media--fill {
    --content-over-media-height: calc(100svh - var(--sticky-area-height));
  }

  .shopify-section:first-child [allow-transparent-header] .content-over-media--fill {
    --content-over-media-height: calc(100svh - var(--announcement-bar-height, 0px));
  }
}

@media screen and (min-width: 700px) {
  .content-over-media--sm {
    --content-over-media-height: 400px;
  }

  .content-over-media--md {
    --content-over-media-height: 460px;
  }

  .content-over-media--lg {
    --content-over-media-height: 560px;
  }
}

@media screen and (min-width: 1400px) {
  .content-over-media--sm {
    --content-over-media-height: 440px;
  }

  .content-over-media--md {
    --content-over-media-height: 500px;
  }

  .content-over-media--lg {
    --content-over-media-height: 640px;
  }

  .content-over-media--fill > :is(img, video, iframe, svg, video-media, picture) {
    max-height: 1200px;
  }
}

@media screen and (min-width: 1600px) {
  .content-over-media--md {
    --content-over-media-height: 560px;
  }

  .content-over-media--lg {
    --content-over-media-height: 720px;
  }
}

.page-dots {
  justify-content: center;
  gap: var(--spacing-2-5) var(--spacing-4);
  flex-wrap: wrap;
  display: flex;
}

.page-dots > * {
  width: var(--spacing-1-5);
  height: var(--spacing-1-5);
  border-radius: var(--rounded-full);
  opacity: .3;
  background: currentColor;
  transition: opacity .2s ease-in-out;
}

.page-dots > *[aria-current="true"] {
  opacity: 1;
}

.page-dots--blurred {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--rounded-full);
  background: rgb(var(--background) / .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.stretching-dots {
  align-items: center;
  gap: var(--spacing-5);
  display: flex;
}

.stretching-dots > * {
  width: var(--spacing-2);
  height: var(--spacing-2);
  border-radius: var(--spacing-2);
  opacity: .5;
  background: currentColor;
  transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1);
}

.stretching-dots > *[aria-current="true"] {
  width: var(--spacing-6);
  opacity: 1;
}

.numbered-dots {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.numbered-dots__item {
  width: var(--spacing-8);
  height: var(--spacing-8);
  will-change: transform;
  border-radius: 100%;
  place-items: center;
  font-weight: bold;
  transition: color .2s;
  display: grid;
}

.numbered-dots__item > * {
  grid-area: 1 / -1;
}

.numbered-dots__item svg {
  width: inherit;
  height: inherit;
  transform: rotate(-90deg);
}

.numbered-dots__item circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-opacity: .3;
  stroke-width: 2px;
}

.numbered-dots__item[aria-current="true"] circle:last-child {
  --radius: 15;
  --circumference: calc(2px * (22 / 7) * var(--radius));
  stroke-opacity: 1;
  stroke-dasharray: calc(var(--circumference) * var(--progress, 1)), var(--circumference);
}

.prev-next-buttons {
  align-items: center;
  gap: var(--spacing-4);
  display: flex;
}

:is(.drawer, .popover):not(:defined) {
  display: none;
}

:is(.drawer, .popover)::part(outside-close-button), :is(.drawer, .popover)::part(close-button) {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  padding: 0;
}

:is(.drawer, .popover)::part(outside-close-button) {
  width: var(--spacing-12);
  height: var(--spacing-12);
  bottom: 100%;
  left: calc(50% - var(--spacing-6));
  background: rgb(var(--dialog-background));
  color: rgb(var(--text-color));
  border-radius: var(--rounded-full);
  z-index: 1;
  place-items: center;
  margin-block-end: var(--spacing-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
  position: absolute;
}

:is(.drawer, .popover)::part(close-button) {
  color: currentColor;
  background: none;
  margin-inline-start: auto;
  display: none;
}

@media screen and (min-width: 700px) {
  :is(.drawer, .popover)::part(outside-close-button) {
    display: none;
  }

  :is(.drawer, .popover)::part(close-button) {
    display: grid;
  }
}

.popover {
  --background: var(--dialog-background);
  --text-color: var(--text-primary);
  --popover-title-padding: var(--spacing-5);
  --popover-body-padding: var(--spacing-4) 0;
  --popover-content-max-height: 75vh;
  --popover-content-max-width: none;
  --popover-anchor-block-spacing: var(--spacing-4);
  --popover-anchor-inline-spacing: 0;
  visibility: hidden;
  width: 100%;
  padding: var(--spacing-2);
  z-index: 999;
  display: none;
  position: fixed;
}

.popover::part(overlay) {
  min-height: 100lvh;
  cursor: var(--cursor-close-svg-url) 28 28, auto;
  background: #0006;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.popover::part(title) {
  padding: var(--popover-title-padding);
  border-block-end: 1px solid rgb(var(--border-color));
  text-align: center;
}

.popover::part(content) {
  height: 100%;
  max-height: var(--popover-content-max-height);
  max-width: var(--popover-content-max-width);
  background: rgb(var(--dialog-background));
  color: rgb(var(--text-color));
  border-radius: 8px;
  flex-direction: column;
  display: flex;
  position: relative;
}

.popover::part(body) {
  overscroll-behavior-y: contain;
  padding: var(--popover-body-padding);
  text-align: center;
  overflow-y: auto;
}

@media screen and (min-width: 1000px) {
  .popover {
    --popover-content-max-height: 350px;
    --popover-content-max-width: 380px;
    z-index: 10;
    width: auto;
    padding: 0;
    position: absolute;
  }

  .popover::part(content) {
    border-radius: var(--rounded-input);
    width: max-content;
    box-shadow: var(--shadow-md);
    border: 1px solid rgb(var(--border-color));
  }

  .popover::part(title), .popover::part(overlay) {
    display: none;
  }

  .popover::part(body) {
    text-align: start;
  }
}

.popover-listbox__option {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-6);
  color: rgb(var(--text-color) / .7);
  transition: color .2s ease-in-out;
  display: flex;
}

.popover-listbox__option.is-disabled {
  text-decoration: line-through;
}

.popover-listbox__option[aria-selected="true"], .popover-listbox__option:hover {
  color: rgb(var(--text-color));
}

.popover-listbox__option:has(:checked) {
  color: rgb(var(--text-color));
}

@media screen and (min-width: 1000px) {
  .popover-listbox__option {
    justify-content: start;
    padding-block-start: var(--spacing-1-5);
    padding-block-end: var(--spacing-1-5);
    padding-inline-end: var(--spacing-10);
  }

  .popover-listbox--sm .popover-listbox__option {
    line-height: 1.7;
    font-size: var(--text-sm);
    padding-block-start: var(--spacing-1);
    padding-block-end: var(--spacing-1);
  }
}

.drawer {
  --container-outer-width: var(--spacing-6);
  --background: var(--dialog-background);
  --text-color: var(--text-primary);
  --drawer-header-padding: var(--spacing-5);
  --drawer-body-padding: var(--spacing-5) var(--spacing-6);
  --drawer-footer-padding: var(--spacing-6);
  --drawer-content-max-height: none;
  visibility: hidden;
  width: 100%;
  padding: var(--spacing-2);
  z-index: 999;
  position: fixed;
  right: 0;
}

.drawer::part(overlay) {
  background: #0006;
  min-height: 100lvh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.drawer.show-close-cursor::part(overlay) {
  cursor: var(--cursor-close-svg-url) 28 28, auto;
}

.drawer::part(content) {
  height: 100%;
  max-height: var(--drawer-content-max-height);
  border-radius: var(--rounded-sm);
  background: rgb(var(--dialog-background));
  color: rgb(var(--text-color));
  flex-direction: column;
  display: flex;
  position: relative;
}

.drawer::part(header) {
  padding: var(--drawer-header-padding);
}

.drawer::part(body) {
  padding: var(--drawer-body-padding);
  overscroll-behavior-y: contain;
  flex: auto;
  align-items: start;
  display: grid;
  overflow-y: auto;
}

.drawer::part(footer) {
  padding: var(--drawer-footer-padding);
  border-block-start: 1px solid rgb(var(--border-color));
  margin-block-start: auto;
  position: relative;
}

.drawer > [is="close-button"] {
  display: none;
  position: absolute;
  top: 1.5rem;
}

.drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1.5rem;
}

.drawer > [is="close-button"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 1.5rem;
}

@media screen and (max-width: 699px) {
  .drawer {
    --drawer-content-max-height: 75vh;
  }

  .drawer::part(header) {
    text-align: center;
    border-bottom: 1px solid rgb(var(--border-color));
  }
}

@media screen and (min-width: 700px) {
  .drawer {
    --container-outer-width: var(--spacing-10);
    --drawer-header-padding: var(--spacing-8) var(--spacing-10);
    --drawer-body-padding: var(--spacing-8) var(--spacing-10);
    --drawer-footer-padding: var(--spacing-8) var(--spacing-10);
    width: 510px;
    height: 100%;
    padding: var(--spacing-4);
  }

  .drawer::part(header) {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
    position: relative;
  }

  .drawer[header-bordered]::part(header) {
    border-bottom: 1px solid rgb(var(--border-color));
  }

  .drawer:not([header-bordered])::part(header) {
    padding-block-end: 0;
  }

  .drawer:not([header-bordered])::part(header):after {
    content: "";
    width: 100%;
    height: var(--spacing-8);
    background: linear-gradient(to bottom, rgb(var(--dialog-background)), rgb(var(--dialog-background) / .6) 50%, rgb(var(--dialog-background) / 0));
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
  }

  .drawer > [is="close-button"] {
    display: grid;
    top: 2.25rem;
  }

  .drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 2.25rem;
  }

  .drawer > [is="close-button"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 2.25rem;
  }

  .drawer--lg {
    width: 680px;
  }
}

.banner {
  align-items: start;
  gap: var(--spacing-3-5);
  padding: var(--spacing-3-5);
  border-radius: var(--rounded-xs);
  font-size: var(--text-sm);
  color: rgb(var(--banner-color));
  background: rgb(var(--banner-background));
  grid-template-columns: max-content auto;
  display: grid;
}

.banner--error {
  --banner-background: var(--error-background);
  --banner-color: var(--error-text);
}

.banner--success {
  --banner-background: var(--success-background);
  --banner-color: var(--success-text);
}

.banner--warning {
  --banner-background: var(--warning-background);
  --banner-color: var(--warning-text);
}

.banner--sm {
  padding: var(--spacing-2);
  font-size: var(--text-sm);
}

.banner--with-icon > .button {
  grid-column-start: 2;
  justify-self: start;
}

@media screen and (min-width: 700px) {
  .banner--with-icon {
    grid-template-columns: max-content auto max-content;
    align-items: center;
  }

  .banner--with-icon svg {
    --icon-offset: 0;
  }

  .banner--with-icon > .button {
    grid-column-start: 3;
  }
}

.badge {
  --badge-background: var(--text-color) / .05;
  --badge-color: var(--text-color);
  align-items: center;
  gap: var(--spacing-1-5);
  padding: 3px var(--spacing-2);
  background: rgb(var(--badge-background));
  width: max-content;
  color: rgb(var(--badge-color));
  border-radius: var(--rounded-button);
  font-size: 9px;
  font-weight: bold;
  display: flex;
}

.badge--primary {
  --badge-background: var(--primary-badge-background);
  --badge-color: var(--primary-badge-text);
}

.badge--sold-out {
  --badge-background: var(--sold-out-badge-background);
  --badge-color: var(--sold-out-badge-text);
}

.badge--on-sale {
  --badge-background: var(--on-sale-badge-background);
  --badge-color: var(--on-sale-badge-text);
}

.badge--blackweek {
  /* Röd bakgrund, vit text */
  --badge-background: 255 65 54;
  --badge-color: 255 255 255;
}

.badge--current {
  --badge-background: var(--text-color) / .12;
  --badge-color: var(--text-color);
}

.badge--lg {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
}

/* Se till att kortet kan vara parent för absoluta badges */
.product-card {
  position: relative;
}

/* Black Week-badge: overlay i vänstra övre hörnet, påverkar inte layout-höjd */
.product-card .badge--blackweek {
  position: absolute;
  top: var(--spacing-4);
  left: var(--spacing-4);
  margin: 0;
  z-index: 5;
}

/* Finjustera BLACK25-badgen bredvid priset på produktsidan */
.product-info__price .badge--blackweek {
  position: relative;
  top: -3px;   /* testa -1px eller -2px tills det ser perfekt ut */
}

@media screen and (min-width: 700px) {
  .badge:not(.badge--lg) {
    font-size: var(--text-xs);
    padding-block-start: var(--spacing-0-5);
    padding-block-end: var(--spacing-0-5);
  }
}

.progress-bar {
  height: var(--spacing-1);
  border-radius: var(--rounded-full);
  background: rgb(var(--text-color) / .3);
  overflow: hidden;
}

.progress-bar:before {
  content: "";
  height: inherit;
  background: rgb(var(--accent));
  transform-origin: var(--transform-origin-start);
  transform: scaleX(var(--progress, 0));
  transition: transform .5s ease-in-out;
  display: block;
}

.scrollbar {
  align-items: center;
  gap: var(--spacing-10);
  color: rgb(var(--text-color));
  display: flex;
}

.scrollbar__progress {
  width: 100%;
  height: var(--spacing-0-5);
  background: rgb(var(--text-color) / .1);
  display: block;
  position: relative;
}

.scrollbar__progress:before {
  content: "";
  transform-origin: var(--transform-origin-start);
  transform: scaleX(var(--scroll-progress));
  background: rgb(var(--text-color));
  will-change: transform;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scrollbar__buttons {
  display: none;
}

@media screen and (min-width: 1000px) {
  .scrollbar__buttons {
    gap: var(--spacing-4);
    display: flex;
  }
}

.count-bubble {
  --size: var(--spacing-4);
  width: var(--size);
  height: var(--size);
  min-width: min-content;
  border-radius: var(--rounded-full);
  background: rgb(var(--button-background-primary));
  color: rgb(var(--button-text-primary));
  place-items: center;
  padding-inline-start: var(--spacing-1);
  padding-inline-end: var(--spacing-1);
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  display: grid;
}

.count-bubble--md, .count-bubble--lg {
  --size: var(--spacing-5);
  font-size: var(--text-xs);
}

@media screen and (min-width: 700px) {
  .count-bubble--md {
    --size: var(--spacing-6);
  }

  .count-bubble--lg {
    --size: var(--spacing-7);
  }
}

.text-with-bubble {
  position: relative;
}

.text-with-bubble > .count-bubble {
  margin-inline-start: var(--spacing-2);
  position: absolute;
  top: 0;
}

.text-with-bubble > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 100%;
}

.text-with-bubble > .count-bubble:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 100%;
}

.pill-loader {
  background: rgb(var(--background-primary));
  border-radius: var(--rounded-full);
  visibility: hidden;
  width: 2rem;
  height: 1rem;
  display: grid;
}

.pill-loader > * {
  grid-area: 1 / -1;
  place-self: center;
}

.loader-dots {
  justify-items: center;
  gap: .25rem;
  display: flex;
}

.loader-dots > * {
  border-radius: var(--rounded-full);
  background: currentColor;
  width: .25rem;
  height: .25rem;
}

.loader-checkmark {
  opacity: 0;
}

.form {
  align-content: start;
  gap: var(--spacing-4);
  display: grid;
}

.fieldset, .input-row {
  gap: var(--input-gap);
  display: grid;
}

.fieldset-link {
  margin-block-start: var(--spacing-2);
  margin-block-end: var(--spacing-2);
}

.fieldset-with-submit {
  align-items: start;
  gap: var(--spacing-4);
  display: grid;
}

@media screen and (min-width: 700px) {
  .form:not(.form--tight) {
    gap: var(--spacing-6);
  }

  .input-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldset-link {
    margin-block-start: 0;
    margin-block-end: var(--spacing-2);
  }

  .fieldset-with-submit {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}

.input, .textarea, .select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--input-height);
  border-radius: var(--rounded-input);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  text-align: start;
  border-width: 1px;
  padding-inline-start: var(--input-padding-inline);
  padding-inline-end: var(--input-padding-inline);
}

:is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: currentColor;
  outline: none;
  box-shadow: inset 0 0 0 1px;
}

.input.is-floating, .select.is-floating {
  height: calc(var(--input-height)  + .625rem);
  padding-block-start: var(--spacing-4);
}

.textarea {
  height: auto;
  vertical-align: top;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
}

.textarea.is-floating {
  padding-block-start: var(--spacing-6);
  padding-block-end: var(--spacing-2);
}

.select {
  gap: var(--spacing-4);
  justify-content: space-between;
  align-items: center;
  padding-inline-end: calc(var(--input-padding-inline) * 2);
  display: flex;
}

.select-chevron {
  position: absolute;
  top: calc(50% - 3.5px);
}

.select-chevron:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--input-padding-inline);
}

.select-chevron:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--input-padding-inline);
}

.form-control {
  text-align: start;
  position: relative;
}

.block-label {
  width: fit-content;
  margin-block-end: var(--spacing-2);
  display: block;
}

.floating-label {
  height: calc(var(--input-height)  + .625rem);
  top: 0;
  opacity: .5;
  pointer-events: none;
  transform-origin: var(--transform-origin-start);
  grid-auto-flow: column;
  align-items: center;
  column-gap: .5rem;
  margin-inline-start: var(--spacing-4);
  transition: transform .2s ease-in-out;
  display: grid;
  position: absolute;
}

.floating-label:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 1px;
}

.floating-label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 1px;
}

:-webkit-any(:-webkit-any(.input, .textarea):focus ~ .floating-label, :-webkit-any(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :-webkit-any(.input, .textarea, .select):-webkit-autofill ~ .floating-label, .select:valid ~ .floating-label) {
  transform: scale(.65) translateY(calc(-1 * var(--spacing-4)));
}

:is(:is(.input, .textarea):focus ~ .floating-label, :is(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :is(.input, .textarea, .select):autofill ~ .floating-label, .select:valid ~ .floating-label) {
  transform: scale(.65) translateY(calc(-1 * var(--spacing-4)));
}

:-webkit-any(.input, .textarea, .select):-webkit-autofill ~ .floating-label {
  color: #000;
}

:is(.input, .textarea, .select):autofill ~ .floating-label {
  color: #000;
}

.self-submit-button {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

.self-submit-button:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-4);
}

.self-submit-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-4);
}

@media screen and (min-width: 700px) {
  .floating-label {
    margin-inline-start: var(--spacing-5);
  }

  .self-submit-button:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: var(--spacing-5);
  }

  .self-submit-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: var(--spacing-5);
  }
}

.checkbox-container {
  align-items: baseline;
  display: flex;
}

.checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  background: rgb(var(--text-color) / .15) var(--checkmark-svg-url) no-repeat center;
  background-size: 0;
  border-radius: 2px;
  flex-shrink: 0;
  transition: background-color .2s ease-in-out;
  position: relative;
  top: .1875rem;
  box-shadow: inset 1px 1px 2px #0000001a;
}

.checkbox:checked {
  background-color: rgb(var(--accent));
  background-size: 10px 8px;
}

.checkbox:checked ~ label {
  opacity: 1;
  transition: all .2s ease-in-out;
}

.checkbox ~ label {
  opacity: .7;
  padding-inline-start: var(--spacing-3);
}

.checkbox:disabled {
  opacity: .5;
}

.checkbox:disabled ~ label {
  color: rgb(var(--text-color) / .5);
  cursor: default;
}

.fieldset > .checkbox-container {
  margin-block-start: var(--spacing-1);
}

.checkbox-list {
  gap: var(--spacing-2);
  display: grid;
}

@media screen and (min-width: 700px) {
  .checkbox {
    top: var(--spacing-0-5);
  }
}

.switch {
  -webkit-appearance: none;
  appearance: none;
  height: var(--spacing-5);
  width: var(--spacing-10);
  border-radius: var(--rounded-full);
  background: rgb(var(--text-color) / .15);
  padding: 3px;
  transition: background .2s ease-in-out;
  display: grid;
}

.switch:after {
  content: "";
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  background: rgb(var(--background));
  border-radius: var(--rounded-full);
  transition: transform .2s ease-in-out;
  box-shadow: 0 1px 1px #0003;
}

.switch:checked {
  background: rgb(var(--accent));
}

.switch:checked:after {
  transform: translateX(calc(var(--transform-logical-flip) * var(--spacing-5)));
}

.horizontal-product {
  --horizontal-product-image-size: var(--spacing-16);
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  min-width: 0;
  display: flex;
}

.horizontal-product__image {
  width: var(--horizontal-product-image-size);
  flex: 0 0 var(--horizontal-product-image-size);
}

.horizontal-product__info {
  gap: var(--spacing-2);
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  display: grid;
}

@media screen and (min-width: 700px) {
  .horizontal-product {
    --horizontal-product-image-size: var(--spacing-20);
    gap: var(--spacing-5);
    align-items: center;
  }

  .horizontal-product--sm {
    --horizontal-product-image-size: var(--spacing-16);
  }

  .horizontal-product__info {
    gap: var(--spacing-4);
    display: flex;
  }

  .horizontal-product__cta {
    flex-shrink: 0;
    margin-inline-end: var(--spacing-4);
  }
}

.horizontal-product-list.separate {
  gap: var(--spacing-2);
  display: grid;
}

.horizontal-product-list-carousel > .horizontal-product-list {
  grid: auto / auto-flow 73vw;
  display: grid;
}

.horizontal-product-list-carousel > .horizontal-product-list:not(.separate) {
  border-radius: var(--rounded-xs);
  border-width: 1px;
}

@media screen and (min-width: 700px) {
  .horizontal-product-list-carousel {
    border-radius: var(--rounded-xs);
    grid-template-columns: minmax(0, 1fr);
  }

  .horizontal-product-list-carousel > .horizontal-product-list {
    grid: auto / auto-flow var(--horizontal-product-width, 100%);
  }
}

.v-stack {
  display: grid;
}

.h-stack {
  align-items: center;
  display: flex;
}

.container {
  --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--container-gutter) * 2, var(--container-max-width));
  --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width)) / 2);
  margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.container--narrow {
  --container-max-width: var(--container-narrow-max-width);
}

@media screen and (min-width: 700px) {
  .sm\:container {
    --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--container-gutter) * 2, var(--container-max-width));
    --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width)) / 2);
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  }
}

.bleed {
  scroll-padding-inline: var(--container-outer-width);
  margin-inline-start: calc(-1 * var(--container-outer-width));
  margin-inline-end: calc(-1 * var(--container-outer-width));
  padding-inline-start: var(--container-outer-width);
  padding-inline-end: var(--container-outer-width);
  display: grid;
}

.full-bleed {
  margin-inline-start: calc(-1 * var(--container-outer-width));
  margin-inline-end: calc(-1 * var(--container-outer-width));
  display: grid;
}

@media screen and (min-width: 700px) {
  .sm\:unbleed {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    scroll-padding-inline: 0;
  }
}

@media screen and (min-width: 1000px) {
  .md\:unbleed {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    scroll-padding-inline: 0;
  }
}

@media screen and (min-width: 1150px) {
  .lg\:unbleed {
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    scroll-padding-inline: 0;
  }
}

[role="main"] .shopify-section {
  --section-is-first: 0;
  --hash-difference: calc(var(--section-background-hash)  - var(--previous-section-background-hash, -1));
  --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference));
  --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
  background: rgb(var(--background));
  position: relative;
}

[role="main"] .shopify-section:not(.contents) {
  display: flow-root;
}

[role="main"] .shopify-section:empty {
  display: none;
}

[role="main"] .shopify-section:first-child {
  --section-is-first: 1;
}

.section {
  --context-section-spacing-block-start: var(--section-outer-spacing-block);
  --context-section-spacing-block-end: var(--section-outer-spacing-block);
  --context-section-spacing-inline: var(--container-gutter);
  --calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start)));
  --calculated-section-spacing-block-end: var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end)));
  --calculated-section-spacing-inline: var(--section-spacing-inline, var(--context-section-spacing-inline));
  --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width));
  --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width, 0px)) / 2);
  --section-stack-spacing-inline: var(--section-inner-spacing-inline, 0px);
  padding-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
  padding-inline-end: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
}

.section--tight {
  --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start))));
  --calculated-section-spacing-block-end: min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end))));
  --calculated-section-spacing-inline: min(48px, var(--section-spacing-inline, var(--context-section-spacing-inline)));
}

.section--narrow {
  --container-max-width: var(--container-narrow-max-width);
}

.section {
  padding-block-start: calc(var(--background-differs-from-previous) * var(--calculated-section-spacing-block-start));
  padding-block-end: var(--calculated-section-spacing-block-end);
}

@media screen and (min-width: 700px) {
  .section--tight {
    --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start, 0px))));
    --calculated-section-spacing-block-end: min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end, 0px))));
  }

  .section-boxed {
    --context-section-spacing-block-start: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block)));
    --context-section-spacing-block-end: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block)));
    --context-section-spacing-inline: var(--section-inner-spacing-inline);
    --container-inner-width: calc(var(--container-max-width)  - var(--container-outer-width) * 2);
    --container-outer-width: var(--calculated-section-spacing-inline);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-block);
    margin-block-start: calc(var(--background-differs-from-previous) * var(--section-outer-spacing-block-start, var(--section-outer-spacing-block)));
    margin-block-end: var(--section-outer-spacin-block-end, var(--section-outer-spacing-block));
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    padding-block-start: var(--calculated-section-spacing-block-start);
    padding-inline-start: var(--calculated-section-spacing-inline);
    padding-inline-end: var(--calculated-section-spacing-inline);
  }

  .shopify-section:first-child {
    --section-outer-spacing-block-start: 24px;
  }
}

@media screen and (min-width: 1600px) {
  .section--tight {
    --calculated-section-spacing-block-start: min(64px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start, 0px))));
    --calculated-section-spacing-block-end: min(64px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end, 0px))));
  }
}

.section-header {
  gap: var(--spacing-4);
  justify-items: start;
  display: grid;
}

@media screen and (min-width: 1150px) {
  .section-header {
    grid-template-columns: 700px;
    justify-content: space-between;
    align-items: end;
  }

  .section-header > .text-with-icon {
    grid-column-start: 2;
  }
}

.section-stack {
  gap: var(--section-stack-spacing-block, 0px) var(--section-stack-spacing-inline, 0px);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}

@media screen and (min-width: 1150px) {
  .section-stack--horizontal {
    justify-content: center;
    display: flex;
  }

  .section-stack--center {
    justify-items: center;
  }

  .section-stack--reverse {
    flex-direction: row-reverse;
  }

  .section-stack__intro {
    width: var(--section-stack-intro, 50%);
  }

  .section-stack__main {
    width: var(--section-stack-main, 50%);
  }
}

.page-spacer {
  margin-block-start: var(--spacing-8);
  margin-block-end: var(--section-outer-spacing-block);
}

@media screen and (min-width: 700px) {
  .page-spacer {
    margin-block-start: var(--spacing-12);
  }
}

@media screen and (min-width: 1000px) {
  .page-spacer {
    margin-block-start: var(--spacing-16);
  }
}

.box {
  padding: var(--spacing-8);
}

@media screen and (min-width: 700px) {
  .box {
    padding: var(--spacing-12);
  }
}

.empty-state {
  justify-items: center;
  gap: var(--spacing-5);
  text-align: center;
  margin-block-start: var(--spacing-12);
  margin-block-end: var(--spacing-12);
  display: grid;
}

.empty-state__icon-wrapper {
  position: relative;
}

.empty-state__icon-wrapper > .count-bubble {
  position: absolute;
  top: calc(-1 * var(--spacing-1-5));
}

.empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(-1 * var(--spacing-1-5));
}

.empty-state__icon-wrapper > .count-bubble:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(-1 * var(--spacing-1-5));
}

@media screen and (min-width: 700px) {
  .empty-state {
    gap: var(--spacing-8);
    margin-block-start: var(--spacing-32);
    margin-block-end: var(--spacing-32);
  }

  .empty-state__icon-wrapper > svg {
    width: var(--spacing-12);
    height: var(--spacing-12);
  }

  .empty-state__icon-wrapper > .count-bubble {
    top: calc(-1 * var(--spacing-3));
  }

  .empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: calc(-1 * var(--spacing-3));
  }

  .empty-state__icon-wrapper > .count-bubble:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: calc(-1 * var(--spacing-3));
  }
}

.scrollable-with-controls {
  gap: var(--spacing-6);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}

@media screen and (min-width: 700px) {
  .scrollable-with-controls {
    gap: var(--spacing-10);
  }
}

.line-item {
  --line-item-image-width: var(--spacing-20);
  align-items: start;
  gap: var(--spacing-5);
  display: flex;
}

.line-item__media-wrapper {
  width: var(--line-item-image-width);
  min-width: var(--line-item-image-width);
  position: relative;
}

.line-item__media-wrapper > .pill-loader {
  position: absolute;
  top: calc(50% - .5rem);
}

.line-item__media-wrapper > .pill-loader:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(50% - 1rem);
}

.line-item__media-wrapper > .pill-loader:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(50% - 1rem);
}

.line-item__info {
  justify-items: start;
  gap: var(--spacing-1);
  display: grid;
}

.line-item__info line-item-quantity {
  margin-block-start: var(--spacing-1);
}

@media screen and (min-width: 700px) {
  .line-item {
    --line-item-image-width: var(--spacing-32);
    align-items: center;
  }

  .line-item__actions {
    margin-inline-start: auto;
  }
}

video-media, model-media {
  border-radius: inherit;
  aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
  position: relative;
}

@supports not (aspect-ratio: 1) {
  :is(video-media, model-media):before {
    content: "";
    padding-block-end: calc(100% / (var(--aspect-ratio, var(--default-aspect-ratio))));
    display: block;
  }

  :is(video-media, model-media) > * {
    height: 100%;
    top: 0;
    left: 0;
    position: absolute !important;
  }
}

video-media {
  --default-aspect-ratio: 16 / 9;
}

video-media[host] {
  align-items: center;
  display: grid;
}

video-media[autoplay], video-media:not([autoplay]) ~ :not(video-media) {
  pointer-events: none;
}

video-media:not([playing]) {
  cursor: pointer;
}

video-media > :is(video, iframe, img, svg) {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

video-media > video[controls] {
  pointer-events: auto;
}

video-media > img, video-media > svg {
  object-fit: cover;
  object-position: center;
}

video-media > video:not(:-webkit-full-screen) {
  object-fit: cover;
  object-position: center;
}

video-media > video:not(:fullscreen) {
  object-fit: cover;
  object-position: center;
}

video-media > :is(iframe, img, svg) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

video-media:not([loaded]) > :is(video, iframe), video-media[loaded] > img, video-media[loaded] > svg, video-media[loaded]::part(play-button) {
  opacity: 0;
  visibility: hidden;
}

video-media[suspended] ~ * {
  pointer-events: none;
}

video-media::part(play-button) {
  z-index: 1;
  will-change: transform;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)scale(1);
}

video-media:hover::part(play-button) {
  transform: translate(-50%, -50%)scale(1.1);
}

@media screen and (min-width: 700px) {
  video-media::part(play-button) {
    width: 64px;
    height: 64px;
  }
}

model-media {
  --default-aspect-ratio: 1;
}

model-media model-viewer, model-media .shopify-model-viewer-ui {
  width: 100%;
  height: 100%;
}

.video-play-button {
  --play-button-shadow-size: 12px;
  filter: drop-shadow(0 16px 50px #0000000d);
  pointer-events: auto;
  position: relative;
}

.video-play-button:before {
  content: "";
  box-sizing: content-box;
  top: calc(-1 * var(--play-button-shadow-size));
  left: calc(-1 * var(--play-button-shadow-size));
  width: 100%;
  height: 100%;
  padding: var(--play-button-shadow-size);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--text-color) / 0) 0%, rgb(var(--text-color)) 100%);
  opacity: .3;
  border-radius: 100%;
  animation: 2s ease-in-out infinite alternate ping;
  position: absolute;
}

@media screen and (min-width: 700px) {
  .video-play-button {
    --play-button-shadow-size: 20px;
  }

  .video-play-button svg {
    width: 5rem;
    height: 5rem;
  }
}

.order-summary__header {
  display: none;
}

.order-summary__body td {
  border-top-width: 0;
  padding-block-start: 0;
  padding-block-end: var(--spacing-4);
}

.order-summary__body td:first-child {
  width: 60%;
}

@media screen and (min-width: 700px) {
  .order-summary__header {
    display: table-header-group;
  }

  .order-summary__body td {
    padding-block-end: var(--spacing-6);
  }

  .order-summary__body tr:first-child td {
    padding-block-start: var(--spacing-8);
  }

  .order-summary__body tr:last-child td {
    padding-block-end: var(--spacing-8);
  }
}

.quantity-input {
  width: var(--quantity-input-characters-count, 1ch);
  border-radius: var(--rounded-input);
  text-align: center;
  min-width: 44px;
  font-size: var(--text-xs);
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  background: none;
  border-width: 1px;
  outline: none;
  padding-block-start: var(--spacing-1);
  padding-block-end: var(--spacing-1);
}

.quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .quantity-input {
    min-width: 48px;
    padding-block-start: var(--spacing-2);
    padding-block-end: var(--spacing-2);
  }
}

.pagination {
  background: rgb(var(--background));
  border-radius: var(--rounded-button);
  border-width: 1px;
  justify-self: center;
  display: flex;
}

.pagination__item {
  place-content: center;
  padding-inline-start: var(--spacing-4);
  padding-inline-end: var(--spacing-4);
  display: grid;
}

.pagination__item--disabled {
  opacity: .5;
}

.pagination__current {
  padding: var(--spacing-2) var(--spacing-1);
}

@media screen and (min-width: 700px) {
  .pagination__item {
    padding-inline-start: var(--spacing-5);
    padding-inline-end: var(--spacing-5);
  }

  .pagination__current {
    padding: var(--spacing-3) var(--spacing-2);
  }
}

.range {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  width: 100%;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.range::-webkit-slider-thumb {
  background: rgb(var(--text-color));
  cursor: pointer;
  border: 2px solid rgb(var(--background));
  z-index: 1;
  width: 16px;
  height: 16px;
  box-shadow: none;
  border-radius: 100%;
  margin-block-start: -6px;
  position: relative;
}

.range::-webkit-slider-runnable-track {
  cursor: pointer;
  background: rgb(var(--text-color) / .12);
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}

.range::-moz-range-thumb {
  border: 2px solid rgb(var(--background));
  background: rgb(var(--text-color));
  cursor: pointer;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

.range::-moz-range-progress {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}

.range::-moz-range-track {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  width: 100%;
  height: 4px;
}

.range::-moz-range-progress {
  background-color: rgba(var(--text-color));
}

.range::-moz-range-track {
  background-color: rgb(var(--border-color));
}

@media not screen and (pointer: fine) {
  .range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -9px;
  }

  .range::-moz-range-thumb {
    width: 16px;
    height: 16px;
  }
}

.range-group {
  background: linear-gradient(to var(--transform-origin-end), rgb(var(--text-color) / .12) var(--range-min), rgb(var(--text-color)) var(--range-min), rgb(var(--text-color)) var(--range-max), rgb(var(--text-color) / .12) var(--range-max));
  border-radius: 2px;
  height: 4px;
  position: relative;
}

.range-group .range {
  pointer-events: none;
  vertical-align: top;
  height: 4px;
}

.range-group .range::-webkit-slider-runnable-track {
  background: none;
}

.range-group .range::-webkit-slider-thumb {
  pointer-events: auto;
}

.range-group .range::-moz-range-progress {
  background: none;
}

.range-group .range::-moz-range-track {
  background: none;
}

.range-group .range::-moz-range-thumb {
  pointer-events: auto;
}

.range-group .range:last-child {
  position: absolute;
  top: 0;
}

.range-group .range:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.range-group .range:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.input-group {
  align-items: center;
  column-gap: 20px;
  display: flex;
}

.input-prefix {
  border-radius: min(10px, var(--rounded-button));
  border: 1px solid rgb(var(--text-color) / .12);
  flex: 1 0 0;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  padding: 10px 15px;
  display: flex;
}

.input-prefix:focus-within {
  border-color: rgb(var(--text-color));
  box-shadow: inset 0 0 0 1px rgb(var(--text-color));
}

.input-prefix > .field {
  -webkit-appearance: textfield;
  appearance: textfield;
  text-align: end;
  background: none;
  border: none;
  width: 100%;
  min-width: 0;
  margin-inline-start: 10px;
  padding: 0;
}

.input-prefix > .field:focus {
  outline: none;
}

.input-prefix > .field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.input-prefix > .field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.price-range {
  gap: 24px;
  padding-block-start: 4px;
  display: grid;
}

.price-range--inline {
  padding: var(--spacing-1);
  grid-template-columns: minmax(110px, auto) 380px minmax(110px, auto);
  align-items: center;
}

@media screen and not (pointer: fine) {
  .price-range {
    row-gap: 18px;
    padding-block-start: 10px;
  }
}

.product-list {
  grid: var(--product-list-grid);
  gap: var(--product-list-gap);
  scroll-padding-top: calc(var(--sticky-area-height)  + 20px);
  display: grid;
  position: relative;
}

.product-list__promo {
  grid-column: var(--product-list-promo-grid-column, span 2);
  min-height: 200px;
  display: grid;
}

@media screen and (min-width: 700px) {
  @supports (grid-template-rows: subgrid) {
    .product-list {
      grid-template-rows: auto auto;
    }

    .product-list > * {
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap: 0;
    }

    .product-list__promo :is(img, video-media) {
      position: absolute;
    }

    .product-list:not(:has(.product-card--blends)) .product-list__promo .content-over-media {
      grid-row: span 2;
      min-height: 300px;
    }

    .product-card__info {
      align-content: start;
    }
  }
}

.rating {
  align-items: center;
  gap: var(--spacing-1-5);
  display: flex;
}

.rating__stars {
  display: contents;
}

.rating__star {
  color: rgb(var(--star-color));
  position: relative;
  top: -1px;
}

.rating__star--empty {
  filter: grayscale();
}

@media screen and (min-width: 700px) {
  .rating__star {
    width: 15px;
    height: 15px;
  }
}

.rating-with-text {
  gap: var(--spacing-2);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: baseline;
  display: grid;
}

.buy-buttons {
  align-items: start;
  gap: var(--spacing-2);
  display: grid;
}

.buy-buttons--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media screen and (min-width: 700px) {
  .buy-buttons--multiple {
    gap: var(--spacing-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.product-card {
  --product-card-badge-spacing: var(--spacing-2);
  --product-card-info-padding: var(--spacing-4);
  --product-card-quick-buy-inset: var(--spacing-2);
  border-radius: var(--rounded-sm);
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  display: grid;
  position: relative;
}

.product-card__figure {
  display: block;
  position: relative;
}

.product-card__badge-list {
  gap: var(--spacing-2);
  pointer-events: none;
  z-index: 5;
  display: grid;
  position: absolute;
  top: var(--product-card-badge-spacing);
}

.product-card__badge-list:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--product-card-badge-spacing);
}

.product-card__badge-list:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--product-card-badge-spacing);
}

.product-card__image {
  object-fit: contain;
  object-position: center;
  transition: opacity .2s ease-in-out;
}

.product-card__image:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-left-radius: var(--rounded-sm);
  border-top-right-radius: var(--rounded-sm);
}

.product-card__image:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--rounded-sm);
  border-top-left-radius: var(--rounded-sm);
}

.product-card__image--secondary {
  display: none;
}

.product-card__title {
  line-height: 1.5;
}

.product-card__quick-buy {
  position: absolute;
  bottom: var(--product-card-quick-buy-inset);
}

.product-card__quick-buy:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--product-card-quick-buy-inset);
}

.product-card__quick-buy:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--product-card-quick-buy-inset);
}

.product-card__mobile-quick-buy-button {
  background: rgb(var(--background-primary));
  width: 2.25rem;
  height: 2.25rem;
  color: rgb(var(--text-primary) / .7);
  border-radius: var(--rounded-button);
  border-width: 1px;
  place-content: center;
  display: grid;
}

.product-card__mobile-quick-buy-button > .button__loader {
  gap: var(--spacing-1);
}

.product-card__mobile-quick-buy-button > .button__loader > * {
  width: var(--spacing-1);
  height: var(--spacing-1);
}

.product-card__info {
  gap: var(--spacing-1);
  padding: var(--product-card-info-padding);
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  display: grid;
}

.product-card--blends .product-card__info {
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.product-card__info--center {
  text-align: center;
  justify-content: center;
  justify-items: center;
}

.product-card__variant-list {
  display: none;
}

@media screen and (min-width: 700px) {
  .product-card {
    --product-card-badge-spacing: var(--spacing-4);
    --product-card-info-padding: var(--spacing-5);
    --product-card-quick-buy-inset: var(--spacing-4);
  }

  .product-card__aside {
    margin-block-start: var(--spacing-1);
  }

  .product-card__variant-list {
    gap: var(--spacing-2);
    margin-block: var(--spacing-2) 2px;
    flex-wrap: wrap;
    display: flex;
  }
}

@media screen and (min-width: 1400px) {
  .product-card__info {
    --product-card-info-padding: var(--spacing-6) var(--spacing-8) var(--spacing-8) var(--spacing-8);
  }
}

@media screen and (pointer: fine) {
  .product-card--show-secondary-media .product-card__figure:hover .product-card__image--primary {
    opacity: 0;
  }

  .product-card--show-secondary-media .product-card__figure:hover .product-card__image--secondary {
    opacity: 1;
  }

  .product-card__image--secondary {
    opacity: 0;
    display: block;
  }

  .product-card__quick-buy {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s ease-in-out;
    transform: translateY(5px);
  }

  .product-card:hover .product-card__quick-buy {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.model-viewer {
  position: relative;
}

.model-viewer model-viewer {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
}

.model-viewer .shopify-model-viewer-ui {
  display: block;
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: rgb(var(--background-primary));
  border-color: rgb(var(--text-primary) / .25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  color: rgb(var(--text-primary));
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
  color: rgb(var(--text-primary) / .55);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
  color: rgb(var(--text-primary) / .55);
  background: rgb(var(--text-primary) / .25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
  border-color: rgb(var(--text-primary) / .25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  background: rgb(var(--background-primary));
  border-color: rgb(var(--text-primary) / .25);
  border-radius: var(--rounded-button);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
  color: rgb(var(--text-primary) / .55);
}

.price-list {
  align-items: baseline;
  gap: var(--spacing-0-5) var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.price-list--lg {
  gap: var(--spacing-3);
}

.pickup-drawer::part(close-button) {
  align-self: start;
  margin-block-start: .375rem;
}

.pickup-drawer::part(body) {
  padding-block-start: 0;
  padding-block-end: 0;
}

.pickup-availability__closest-location {
  align-items: start;
  gap: var(--spacing-3);
  display: flex;
}

.pickup-availability__media {
  width: var(--spacing-16);
}

.pickup-availability__location {
  gap: var(--spacing-2);
  padding-block-start: var(--spacing-5);
  padding-block-end: var(--spacing-5);
  display: grid;
}

@media screen and (min-width: 700px) {
  .pickup-availability__media {
    width: var(--spacing-20);
  }

  .pickup-availability__location {
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
  }
}

.quantity-selector {
  height: var(--input-height);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  border-radius: var(--rounded-button);
  border-width: 1px;
  display: inline-flex;
}

.quantity-selector__button {
  padding-inline-start: var(--spacing-5);
  padding-inline-end: var(--spacing-5);
}

.quantity-selector__input {
  -webkit-appearance: textfield;
  appearance: textfield;
  min-width: var(--spacing-6);
  width: var(--quantity-input-characters-count, 1ch);
  background: inherit;
  text-align: center;
}

.quantity-selector__input:focus {
  outline: none;
}

.quantity-selector__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .quantity-selector__button {
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-6);
  }
}

.product-quick-add {
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  padding: 1.25rem;
  transition: visibility .15s ease-in, opacity .15s ease-in, transform .15s ease-in;
  position: fixed;
  bottom: 0;
  transform: translateY(10px);
}

.product-quick-add:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.product-quick-add:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.product-quick-add.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (min-width: 700px) {
  .product-quick-add {
    border-radius: var(--rounded-sm);
    background: rgb(var(--dialog-background));
    border-width: 1px;
    width: 35rem;
    padding: 1rem;
    bottom: 1rem;
    transform: translateY(0);
  }

  .product-quick-add:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 1rem;
  }

  .product-quick-add:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 1rem;
  }

  .product-quick-add__variant {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.5rem;
    display: grid;
  }

  .product-quick-add__variant.no-image {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.quick-buy-drawer {
  --drawer-header-padding: var(--spacing-5) var(--spacing-6);
  --drawer-body-padding: var(--spacing-5) var(--spacing-6);
  --shopify-payment-button-padding: .8125rem var(--spacing-6);
  display: none;
}

/* PUMPLAB_QUICKADD_CLOSE_V1 — (styles moved inline to .pl-picker-close) */
.quick-buy-drawer::part(close-button) {
  align-self: start;
  margin-block-start: .25rem;
  margin-inline-end: .25rem;
}
/* End PUMPLAB_QUICKADD_CLOSE_V1 */

.quick-buy-drawer .variant-picker {
  text-align: center;
}

.quick-buy-drawer .variant-picker__option-info, .quick-buy-drawer .variant-picker__option-values {
  justify-content: center;
}

.quick-buy-drawer .variant-picker__option-values--color {
  max-width: 300px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.quick-buy-drawer .block-swatch {
  padding: var(--spacing-2-5) var(--spacing-5);
  height: 2.625rem;
}

.quick-buy-drawer .checkbox-container {
  justify-content: center;
}

.quick-buy-drawer__media {
  max-width: var(--spacing-20);
}

.quick-buy-drawer__info {
  gap: var(--spacing-4);
  margin-block-start: 0.5rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .quick-buy-drawer {
    --drawer-header-padding: var(--spacing-6);
    width: 560px;
    height: auto;
  }

  .quick-buy-drawer .variant-picker__option-info, .quick-buy-drawer .block-swatch {
    font-size: var(--text-sm);
  }

  .quick-buy-drawer .color-swatch {
    --swatch-size: 1.5rem;
  }

  .quick-buy-drawer .color-swatch--rectangle {
    --swatch-size: 2rem;
  }

  .quick-buy-drawer :is(.button, .shopify-payment-button__button--unbranded) {
    padding: var(--spacing-3) var(--spacing-6) !important;
    font-size: var(--text-sm) !important;
  }

  .quick-buy-drawer shopify-accelerated-checkout, .quick-buy-drawer shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 46px;
  }

  .quick-buy-drawer__info {
    gap: var(--spacing-5);
  }
}

.variant-picker {
  gap: var(--spacing-6);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.variant-picker .popover {
  --popover-anchor-block-spacing: var(--spacing-2);
  --popover-content-max-width: none;
}

.variant-picker .popover, .variant-picker .popover::part(content) {
  width: 100%;
}

.variant-picker__option-info {
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: var(--spacing-2);
  display: flex;
}

.variant-picker__option-values {
  display: flex;
}

.variant-picker__option-values.scroll-area {
  padding-block-start: 1px;
  padding-block-end: 1px;
}

@media screen and (max-width: 699px) {
  .variant-picker__option-values:not(.wrap) .block-swatch {
    white-space: nowrap;
  }
}

@media screen and (min-width: 700px) {
  .variant-picker__option-values {
    flex-wrap: wrap;
  }
}

@media (scripting: none) {
  .variant-picker__option {
    display: none;
  }
}

.prose ol, .list-decimal {
  list-style: inside decimal;
}

.prose ul, .list-disc {
  list-style: inside;
}

.prose :is(ol, ul) :is(ol, ul) {
  margin-block-start: 1em;
  margin-inline-start: 1em;
}

.prose > :first-child, .prose > :first-child :first-child {
  margin-block-start: 0 !important;
}

.prose > :last-child, .prose > :last-child :last-child {
  margin-block-end: 0 !important;
}

.prose * + :is(p, div, ul, ol) {
  margin-block-start: var(--spacing-3);
}

.prose * + :is(.h0, .h1, .h2, h1, h2) {
  margin-block-start: var(--spacing-4);
}

.prose * + :is(.h3, .h4, .h5, .h6, h3, h4, h5, h6) {
  margin-block-start: var(--spacing-3);
}

.prose * + .button {
  margin-block-start: var(--spacing-6) !important;
}

.prose * + span:not(:empty, .metafield-multi_line_text_field) {
  display: inline-block;
}

.prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4) + * {
  margin-block-start: var(--spacing-5);
}

.prose :is(.h5, .h6, h5, h6) + * {
  margin-block-start: var(--spacing-4);
}

.prose :is(p img:not([style*="float"]):only-child, div img:not([style*="float"]):only-child, figure, video) {
  margin-block: var(--spacing-8);
}

.prose figcaption {
  font-style: italic;
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / .7);
  margin-block-start: .5em;
}

.prose ul, .prose ol {
  row-gap: .6em;
  display: grid;
}

.prose br {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.prose :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"]) {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 700px) {
  .prose * + :is(p, div, ul, ol) {
    margin-block-start: var(--spacing-4);
  }

  .prose * + :is(.h0, .h1, .h2, h1, h2) {
    margin-block-start: var(--spacing-6);
  }

  .prose * + :is(.h3, .h4, h3, h4) {
    margin-block-start: var(--spacing-5);
  }

  .prose * + :is(.h5, .h6, h5, h6) {
    margin-block-start: var(--spacing-4);
  }

  .prose * + .button {
    margin-block-start: var(--spacing-8) !important;
  }

  .prose .h0 + .button {
    margin-block-start: var(--spacing-10) !important;
  }

  .prose :is(.h0, .h1, .h2, .h3, h1, h2, h3) + * {
    margin-block-start: var(--spacing-6);
  }

  .prose :is(.h4, h4) + * {
    margin-block-start: var(--spacing-5);
  }

  .prose :is(.h5, .h6, h5, h6) + * {
    margin-block-start: var(--spacing-4);
  }

  .prose :is(p img:not([style*="float"]):only-child, div img:not([style*="float"]):only-child, figure, video) {
    margin-block: var(--spacing-12);
  }
}

@media screen and (min-width: 1150px) {
  .prose * + p {
    margin-block-start: var(--spacing-6);
  }

  .prose * + :is(.h0, .h1, h1) {
    margin-block-start: var(--spacing-8);
  }

  .prose * + :is(.h2, .h3, .h4, h2, h3, h4) {
    margin-block-start: var(--spacing-6);
  }

  .prose * + :is(.h5, .h6, h5, h6) {
    margin-block-start: var(--spacing-4);
  }

  .prose :is(.h0, .h1, .h2, h1, h2) + * {
    margin-block-start: var(--spacing-8);
  }

  .prose :is(.h3, .h4, h3, h4) + * {
    margin-block-start: var(--spacing-6);
  }

  .prose :is(.h5, .h6, h5, h6) + * {
    margin-block-start: var(--spacing-4);
  }
}

.link, .prose a:not(.button) {
  text-underline: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  transition: background-size .3s ease-in-out, color .3s ease-in-out;
}

@supports (height: 1lh) {
  :is(.link, .prose a:not(.button)) {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }
}

@media screen and (pointer: fine) {
  :is(.link, .prose a:not(.button)):hover {
    background-size: 0 1px;
  }

  .text-subdued :is(.link, .prose a:not(.button)):hover {
    color: rgb(var(--text-color));
  }
}

.reversed-link {
  text-underline: none;
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
  transition: background-size .3s ease-in-out;
}

@supports (height: 1lh) {
  .reversed-link {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 0 1px no-repeat;
  }
}

@media screen and (pointer: fine) {
  .group:hover .reversed-link, .reversed-link.hover\:show:hover {
    background-size: 100% 1px;
  }
}

.link-faded {
  color: #BCBCBC;
  transition: color .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-faded:hover {
    color: #fff;
  }
}

.link-faded-reverse {
  transition: opacity .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-faded-reverse:hover {
    opacity: .7;
  }
}

table {
  width: 100%;
}

table caption {
  text-align: inherit;
  margin-block-end: .5rem;
}

th {
  text-align: start;
}

th, td {
  padding: var(--spacing-4);
  vertical-align: top;
}

table:not(.table--bordered) :is(th, td):first-child {
  padding-inline-start: 0;
}

table:not(.table--bordered) :is(th, td):last-child {
  padding-inline-end: 0;
}

thead th {
  border-block-end-width: 1px;
}

tbody tr + tr > *, thead + tbody tr > * {
  border-top-width: 1px;
}

tfoot td {
  border-top-width: 1px;
  padding-block-start: var(--spacing-6);
  padding-block-end: 0;
}

.table-row-hover {
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.table--bordered tr {
  border-width: 1px;
}

.table--sm td {
  padding: var(--spacing-2);
}

@media screen and (pointer: fine) {
  .table-row-hover:hover {
    background: rgb(var(--text-color) / .05);
  }
}

@media screen and (min-width: 700px) {
  th, td {
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
  }

  tfoot td {
    padding-block-start: var(--spacing-8);
  }
}

.blockquote, .prose blockquote {
  --quote-width: 51px;
  --quote-height: 37px;
  --quote-inset-block-start: calc(var(--spacing-5) * -1);
  --quote-inset-inline-start: var(--spacing-1);
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: bold;
  position: relative;
}

:is(.blockquote, .prose blockquote):before {
  content: "";
  width: var(--quote-width);
  height: var(--quote-height);
  background: rgb(var(--text-color) / .1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='86' height='55' viewBox='0 0 86 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.3163 54.6H42.5163L60.3163 0.400024H85.5163L71.3163 54.6ZM29.3163 54.6H0.716309L18.9163 0.400024H44.1163L29.3163 54.6Z' fill='%23252627'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='86' height='55' viewBox='0 0 86 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.3163 54.6H42.5163L60.3163 0.400024H85.5163L71.3163 54.6ZM29.3163 54.6H0.716309L18.9163 0.400024H44.1163L29.3163 54.6Z' fill='%23252627'/%3E%3C/svg%3E%0A");
  -webkit-mask-size: var(--quote-width) var(--quote-height);
  mask-size: var(--quote-width) var(--quote-height);
  position: absolute;
  top: var(--quote-inset-block-start);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:is(.blockquote, .prose blockquote):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  left: var(--quote-inset-inline-start);
}

:is(.blockquote, .prose blockquote):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: var(--quote-inset-inline-start);
}

.blockquote {
  margin-block-start: var(--spacing-5);
}

.prose blockquote {
  --quote-inset-block-start: calc(var(--spacing-4) * -1);
  --quote-inset-inline-start: calc(50% - (var(--quote-width) / 2));
  text-align: center;
  font-size: var(--text-h3);
  margin-block-start: var(--spacing-14);
  margin-block-end: var(--spacing-10);
  line-height: 1.2;
}

@media screen and (min-width: 700px) {
  .blockquote, .prose blockquote {
    --quote-width: 70px;
    --quote-height: 45px;
  }

  .blockquote {
    --quote-inset-block-start: calc(var(--spacing-6) * -1);
    margin-block-start: var(--spacing-8);
  }
}

@media screen and (min-width: 1150px) {
  .prose blockquote {
    --quote-width: 85px;
    --quote-height: 55px;
    --quote-inset-block-start: calc(var(--spacing-5) * -1);
    margin-block-start: var(--spacing-18);
    margin-block-end: var(--spacing-12);
  }

  .blockquote {
    --quote-inset-inline-start: var(--spacing-2-5);
  }
}

.shape-circle, .shape-square, .shape-diamond {
  --size: var(--spacing-1-5);
  width: var(--size);
  height: var(--size);
  background: currentColor;
  display: block;
}

.shape-circle {
  border-radius: var(--rounded-full);
}

.shape-diamond {
  transform: rotateZ(45deg);
}

.shape-line {
  background: rgb(var(--text-color) / .1);
  width: 1px;
  height: 100%;
}

.shape--sm {
  --size: var(--spacing-1);
}

.shape--lg {
  --size: var(--spacing-2);
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.skeleton {
  background: rgb(var(--text-color) / .15);
  border-radius: 4px;
  flex-shrink: 0;
  animation: 2.5s cubic-bezier(.4, 0, .6, 1) infinite pulse;
  display: block;
}

.skeleton--tab {
  width: 88px;
  height: 20px;
}

.skeleton--thumbnail {
  width: 80px;
  height: 80px;
}

.skeleton--text {
  height: 12px;
  width: var(--skeleton-text-width, 100%);
}

@media screen and (min-width: 700px) {
  .skeleton--tab {
    width: 148px;
    height: 34px;
  }

  .skeleton--thumbnail {
    width: 96px;
    height: 96px;
  }
}

.color-swatch {
  --swatch-offset: 3px;
  --swatch-size: var(--spacing-7);
  --swatch-margin: calc(var(--swatch-offset) * 2);
  width: var(--swatch-size);
  height: var(--swatch-size);
  margin: var(--swatch-margin);
  background: var(--swatch-background) center / cover;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  position: relative;
}

.color-swatch.is-disabled {
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--background)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--swatch-background) center / cover;
}

:disabled + .color-swatch {
  display: none;
}

.color-swatch:before {
  content: "";
  inset: calc(-1 * var(--swatch-offset));
  opacity: 0;
  border-radius: inherit;
  will-change: transform;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  transform: scale(.75);
  box-shadow: 0 0 0 2px;
}

:checked + .color-swatch:before, .color-swatch.is-selected:before {
  opacity: 1;
  transform: scale(1);
}

:focus-visible + .color-swatch {
  outline-offset: calc(2px + var(--swatch-offset) * 2);
}

.color-swatch--rectangle {
  --swatch-size: var(--spacing-10);
  height: calc(var(--swatch-size) * .4);
  margin: 0;
}

.color-swatch--rectangle:before {
  width: 100%;
  bottom: -3px;
  box-shadow: 0 2px;
}

.color-swatch--rectangle:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  left: 0;
}

.color-swatch--rectangle:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  right: 0;
}

.color-swatch--sm {
  --swatch-size: var(--spacing-3-5);
  --swatch-offset: 2px;
}

.color-swatch--rectangle.color-swatch--sm {
  --swatch-size: var(--spacing-5);
  margin-block-start: 7px;
  margin-block-end: 6px;
}

.color-swatch--rectangle.color-swatch--sm:before {
  bottom: -2px;
}

.color-swatch__view-more {
  padding: 1px var(--spacing-2);
  color: rgb(var(--text-color) / .7);
  border-width: 1px;
  margin-inline-start: var(--spacing-1-5);
}

.thumbnail-swatch {
  --swatch-size: 60px;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: min(4px, var(--rounded-input));
  flex-shrink: 0;
  display: block;
  position: relative;
}

.thumbnail-swatch:before {
  content: "";
  border-radius: inherit;
  opacity: 0;
  will-change: transform;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(.95);
  box-shadow: 0 0 0 2px;
}

:disabled + .thumbnail-swatch {
  display: none;
}

.thumbnail-swatch.is-disabled:after {
  content: "";
  background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--text-color) / .5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.thumbnail-swatch > img {
  border-radius: inherit;
  height: 100%;
}

:checked + .thumbnail-swatch:before, .thumbnail-swatch.is-selected:before {
  opacity: 1;
  transform: scale(1);
}

:focus-visible + .thumbnail-swatch {
  outline-offset: 4px;
}

.thumbnail-swatch--sm {
  --swatch-size: 48px;
}

.thumbnail-swatch__view-more {
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: min(4px, var(--rounded-input));
  border-width: 1px;
  place-items: center;
  display: grid;
}

.block-swatch {
  place-items: center;
  gap: var(--spacing-3);
  height: var(--input-height);
  border-radius: var(--rounded-button);
  background: rgb(var(--input-background, var(--background))) no-repeat;
  border-width: 1px;
  padding-inline-start: var(--spacing-5);
  padding-inline-end: var(--spacing-5);
  display: flex;
  position: relative;
}

.block-swatch.is-disabled {
  color: rgb(var(--text-color) / .5);
  background-image: linear-gradient(to bottom right, #0000 50%, currentColor 50% calc(50% + 2px), #0000 calc(50% + 2px));
}

:disabled + .block-swatch {
  display: none;
}

.block-swatch:before {
  content: "";
  box-shadow: 0 0 0 2px rgb(var(--text-color));
  border-radius: inherit;
  opacity: 0;
  will-change: transform;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(.95);
}

:checked + .block-swatch.is-disabled {
  background-image: linear-gradient(to bottom right, transparent 50%, rgb(var(--text-color)) 50% calc(50% + 2px), transparent calc(50% + 2px));
}

:checked + .block-swatch:before, .block-swatch.is-selected:before {
  opacity: 1;
  transform: scale(1);
}

:focus-visible + .block-swatch {
  outline-offset: 4px;
}

.block-swatch__color {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  border-radius: var(--rounded-full);
  background: var(--swatch-background) center / cover;
}

@media screen and (min-width: 700px) {
  .block-swatch {
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-6);
  }
}

.image-filter-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  display: grid;
}

.facet-dialog .image-filter-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.image-filter {
  text-align: center;
  border-width: 1px;
  border-radius: 2px;
  flex-direction: column;
  align-items: center;
  row-gap: .5rem;
  padding: 1rem 1rem .75rem;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  display: flex;
}

:checked + .image-filter, .image-filter.is-selected {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px;
}

.image-filter__image {
  width: 2rem;
}

[data-tooltip] {
  position: relative;
}

@media screen and (pointer: fine) {
  [data-tooltip]:after {
    content: attr(data-tooltip);
    bottom: calc(100% + var(--spacing-2));
    border-radius: min(24px, var(--rounded-button));
    background: rgb(var(--text-color));
    width: max-content;
    color: rgb(var(--background));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: bold;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s ease-in-out;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)scale(.9);
  }

  [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
    will-change: transform;
    transform: translateX(-50%)scale(1);
  }
}

.lock {
  overflow: hidden;
  scrollbar-gutter: stable; /* PUMPLAB_QUICKADD_V1 — prevent layout shift when scrollbar disappears */
}

.text-with-icon {
  gap: var(--spacing-3);
  align-items: center;
  display: flex;
}

.text-with-icon > svg {
  flex-shrink: 0;
}

.offer {
  gap: var(--spacing-2);
  padding: var(--spacing-5);
  border-radius: var(--rounded-sm);
  display: grid;
}

.offer--center {
  text-align: center;
  justify-items: center;
}

.social-media {
  gap: var(--spacing-3) var(--spacing-6);
  flex-wrap: wrap;
  display: flex;
}

.social-media--sm svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media screen and (min-width: 700px) {
  .social-media--sm svg {
    width: 1.7rem;
    height: 1.7rem;
  }
}

.share-buttons {
  align-items: center;
  gap: var(--spacing-2-5);
  display: flex;
}

.share-buttons__item {
  width: var(--spacing-8-5);
  height: var(--spacing-8-5);
  opacity: .7;
  background: rgb(var(--text-color) / 0);
  border-radius: var(--rounded-full);
  place-content: center;
  transition: opacity .2s ease-in-out, background .2s ease-in-out;
  display: grid;
}

.share-buttons__item:hover {
  opacity: 1;
  background: rgb(var(--text-color) / .1);
}

.floating-controls-container {
  position: relative;
}

.floating-controls-container .circle-button {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out;
  position: absolute;
  top: calc(50% - 24px);
  transform: scale(.8);
}

.floating-controls-container .circle-button:first-of-type:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-5);
}

.floating-controls-container .circle-button:first-of-type:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-5);
}

.floating-controls-container .circle-button:last-of-type:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-5);
}

.floating-controls-container .circle-button:last-of-type:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-5);
}

@media screen and (pointer: fine) {
  .floating-controls-container:hover .is-scrollable ~ .circle-button:not([disabled]) {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

.icon {
  vertical-align: middle;
  display: block;
}

[dir="rtl"] .reverse-icon {
  transform: rotate(180deg);
}

.offset-icon {
  --icon-baseline-distance: calc(1em * 1.6);
  --icon-offset: calc((var(--icon-baseline-distance)  - var(--icon-height)) / 2);
  top: var(--icon-offset);
  position: relative;
}

.icon-chevron-bottom {
  transition: transform .2s ease-in-out;
}

.group[aria-expanded="true"] > .icon-chevron-bottom {
  transform: rotate(180deg);
}

.icon-block {
  padding: var(--spacing-6);
  background: rgb(var(--background));
}

.image-icon {
  width: var(--mobile-icon-max-width, var(--icon-max-width));
}

@media screen and (min-width: 700px) {
  .image-icon {
    width: var(--icon-max-width);
  }
}

custom-cursor {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  scale: .5;
  transition: opacity .1s, scale .1s, visibility .1s !important;
}

@media screen and (pointer: fine) {
  custom-cursor {
    display: block;
  }

  custom-cursor.is-visible {
    opacity: 1;
    visibility: visible;
    scale: 1;
  }
}

:has( > custom-cursor:not([hidden])) {
  cursor: none;
}

scroll-shadow {
  --scroll-shadow-size: 30px;
}

split-lines {
  overflow-wrap: anywhere;
}

product-rerender {
  display: contents;
}

.customer-form__image {
  display: none;
}

.customer-form__box {
  padding: var(--spacing-14) var(--container-gutter);
}

.customer-form__box-inner {
  max-width: 440px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: block;
}

@media screen and (min-width: 700px) {
  .customer-form {
    margin-block-start: var(--spacing-10);
    margin-block-end: var(--spacing-10);
  }

  .customer-form__box {
    border-radius: var(--rounded);
    padding-inline-start: var(--spacing-16);
    padding-inline-end: var(--spacing-16);
  }
}

@media screen and (min-width: 1000px) {
  .customer-form {
    gap: var(--spacing-6);
    grid: auto / auto-flow minmax(0, 680px);
    justify-content: center;
    display: grid;
  }

  .customer-form__image {
    object-fit: cover;
    object-position: center;
    height: 100%;
    display: block;
  }
}

.account {
  gap: var(--spacing-6);
  max-width: 1350px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

.account-nav__item {
  padding-block-start: var(--spacing-4-5);
  padding-block-end: var(--spacing-4-5);
}

.account-nav__item[aria-current="page"] {
  border-color: currentColor;
  border-bottom-width: 2px;
}

.account-header, .account__block-list {
  gap: var(--spacing-6);
  display: grid;
  position: relative;
}

@media screen and (min-width: 700px) {
  .account {
    gap: var(--spacing-12);
  }

  .account-nav__item--logout {
    position: absolute;
  }

  .account-nav__item--logout:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .account-nav__item--logout:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .account-header--back {
    text-align: center;
    justify-content: center;
  }

  .account-header--back > .back-button {
    position: absolute;
  }
}

.order-table-list {
  display: none;
}

.order-grid-list {
  gap: var(--spacing-5);
  display: grid;
}

.order-grid-item {
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  border-width: 1px;
  padding-block-start: var(--spacing-5);
  display: grid;
}

.order-grid-item__categories {
  gap: var(--spacing-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

@media screen and (min-width: 700px) {
  .order-grid-list {
    display: none;
  }

  .order-table-list {
    max-width: 1024px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: table;
  }

  .order-table-list th, .order-table-list td {
    padding-inline-start: var(--spacing-4);
    padding-inline-end: var(--spacing-4);
  }
}

.addresses-list {
  --addresses-per-row: 1;
  gap: var(--spacing-5);
  display: grid;
}

.address {
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-6);
  border-width: 1px;
  flex-direction: column;
  display: flex;
}

.address__actions {
  gap: var(--spacing-6);
  margin-block-start: auto;
  padding-block-start: var(--spacing-2);
  display: flex;
}

.address-form {
  gap: var(--spacing-3);
  display: grid;
}

@media screen and (min-width: 700px) {
  .addresses-list {
    --addresses-per-row: 2;
    grid-template-columns: repeat(auto-fit, minmax(0, calc(100% / var(--addresses-per-row)  - var(--spacing-6) / var(--addresses-per-row) * (var(--addresses-per-row)  - 1))));
    gap: var(--spacing-6);
    justify-content: center;
    justify-items: center;
  }

  .address {
    padding: var(--spacing-8) var(--spacing-10);
  }

  .address-form {
    gap: var(--spacing-6);
  }
}

@media screen and (min-width: 1000px) {
  .addresses-list {
    --addresses-per-row: 4;
  }
}

.order {
  align-items: start;
  gap: var(--spacing-6);
  display: grid;
}

.order-addresses-list {
  gap: var(--spacing-5);
  display: grid;
}

@media screen and (min-width: 700px) {
  .order {
    gap: var(--spacing-12);
  }

  .order-addresses-list {
    gap: var(--spacing-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1150px) {
  .order {
    grid-template-columns: 1fr 380px;
  }

  .order-addresses-list {
    grid-template-columns: none;
  }
}

@media screen and (min-width: 1400px) {
  .order {
    gap: var(--spacing-24);
  }
}

.announcement-bar {
  padding-block-start: var(--spacing-2-5);
  padding-block-end: var(--spacing-2-5);
}

.announcement-bar__wrapper {
  gap: var(--spacing-4);
  max-width: 450px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: flex;
}

.announcement-bar__scrolling-list {
  grid: auto / auto-flow max-content;
  justify-content: center;
  display: grid;
  overflow: hidden;
}

.announcement-bar__static-list {
  text-align: center;
  place-items: center;
  display: grid;
}

.announcement-bar__static-list > * {
  grid-area: 1 / -1;
}

.announcement-bar__item {
  grid: auto / auto-flow auto var(--spacing-20);
  place-items: center;
  display: grid;
}

@media screen and (min-width: 700px) {
  .announcement-bar {
    padding-block-start: var(--spacing-3-5);
    padding-block-end: var(--spacing-3-5);
  }

  .announcement-bar__item {
    grid-auto-columns: auto var(--spacing-40);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .announcement-bar__item {
    animation: translateFull var(--marquee-animation-duration, 0s) linear infinite;
  }
}

.article {
  --article-margin-block-end: var(--spacing-14);
}

.article > .container {
  justify-content: safe center;
  gap: var(--spacing-10);
  margin-block-end: var(--article-margin-block-end);
  display: grid;
}

@media screen and (min-width: 700px) {
  .article {
    --article-margin-block-end: var(--spacing-28);
  }

  .article > .container {
    gap: var(--spacing-16);
  }
}

.article-banner {
  grid: var(--article-banner-grid);
  column-gap: var(--article-banner-column-gap);
  align-items: var(--article-banner-horizontal-alignement, center);
  max-width: var(--article-banner-max-width);
  box-sizing: content-box;
  justify-items: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-block-start: var(--article-banner-padding-block-start, 0);
  display: grid;
  position: relative;
}

.article-banner:before {
  content: "";
  width: calc((100vw - var(--scrollbar-width, 0px)));
  height: var(--article-banner-before-height);
  pointer-events: none;
  background-color: rgb(var(--article-banner-background));
  position: absolute;
  top: 0;
}

.article-banner__image {
  z-index: 1;
  width: 100%;
}

.article-banner__image > img {
  width: 100%;
}

.article-banner__content {
  gap: var(--spacing-6);
  padding: var(--article-banner-content-padding-block-start) var(--article-banner-content-padding-inline) var(--article-banner-content-padding-block-end);
  justify-items: var(--article-banner-vertical-alignement, center);
  text-align: var(--article-banner-vertical-alignement, center);
  z-index: 2;
  display: grid;
}

.article-banner__content > .badge {
  --badge-background: var(--article-banner-badge-background);
  padding: var(--spacing-1) var(--spacing-3);
  display: inline-block;
}

.article__meta {
  justify-content: var(--article-banner-meta-vertical-alignment, center);
  row-gap: var(--spacing-2);
  column-gap: var(--spacing-4);
  flex-wrap: wrap;
  display: flex;
}

.article__meta .text-with-icon {
  gap: var(--spacing-2);
}

@media screen and (min-width: 1150px) {
  .article-banner {
    padding-inline-start: var(--container-gutter);
    padding-inline-end: var(--container-gutter);
  }

  .article-banner__content {
    grid-area: var(--article-banner-grid-area, content);
  }

  .article-banner__image {
    grid-area: var(--article-banner-grid-area, image);
    position: relative;
  }

  .article-banner__image:before {
    content: "";
    background: rgb(var(--article-banner-image-overlay));
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    transition: background .2s ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .article__meta {
    column-gap: var(--spacing-6);
  }

  .article__meta .text-with-icon {
    gap: var(--spacing-2-5);
  }
}

.article-content {
  width: 100%;
  max-width: var(--article-max-width);
  grid-template-columns: minmax(0, 1fr);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-block-start: var(--spacing-10);
}

.article-content > .share-buttons .share-buttons__item {
  width: var(--spacing-10);
  height: var(--spacing-10);
  opacity: 1;
}

@media screen and (min-width: 1000px) {
  .article-content {
    border-bottom-width: 1px;
    padding-block-start: var(--spacing-16);
    padding-block-end: var(--spacing-18);
  }
}

.article-navigation {
  gap: var(--spacing-6);
  max-width: var(--article-max-width);
  display: grid;
}

.article-prev-next {
  gap: var(--spacing-5);
  grid: auto / auto-flow 75vw;
  display: grid;
}

@media screen and (min-width: 700px) {
  .article-navigation {
    --navigation-margin-block: var(--spacing-16);
    gap: var(--spacing-10);
  }

  .article-navigation__title > svg {
    width: 27px;
    height: 24px;
  }

  .article-prev-next {
    gap: var(--spacing-12);
    grid: auto / repeat(2, minmax(0, 1fr));
  }
}

.article-comments {
  --comments-padding-inner: var(--spacing-6);
  gap: var(--spacing-12);
  max-width: var(--article-max-width);
  display: grid;
}

.comments-list {
  gap: var(--spacing-4);
  padding: var(--comments-padding-inner);
  display: grid;
}

.comment {
  gap: var(--spacing-3);
  display: grid;
}

.comment:not(:first-child) {
  padding-block-start: var(--spacing-4);
}

.article-comments__form {
  padding: var(--comments-padding-inner);
}

@media screen and (min-width: 700px) {
  .article-comments {
    --comments-padding-inner: var(--spacing-12);
  }

  .comments-list {
    gap: var(--spacing-8);
  }

  .comment {
    gap: var(--spacing-6);
    display: flex;
  }

  .comment:not(:first-child) {
    padding-block-start: var(--spacing-8);
  }

  .comment__gravatar {
    width: var(--spacing-12);
    height: var(--spacing-12);
  }
}

.before-after {
  --before-after-label-spacing: var(--spacing-5);
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

.before-after__label {
  position: absolute;
}

.before-after__label--left:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--before-after-label-spacing);
}

.before-after__label--left:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--before-after-label-spacing);
}

.before-after__label--right:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--before-after-label-spacing);
}

.before-after__label--right:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--before-after-label-spacing);
}

.before-after__label--top {
  top: var(--before-after-label-spacing);
}

.before-after__label--bottom {
  bottom: var(--before-after-label-spacing);
}

.before-after__after-image {
  clip-path: inset(0 0 0 calc(var(--before-after-initial-drag-position, 50%)  + var(--clip-path-offset, 0px)));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

[dir="rtl"] .before-after__after-image {
  clip-path: inset(0 calc(var(--before-after-initial-drag-position, 50%)  - var(--clip-path-offset, 0px)) 0 0);
}

.before-after__cursor-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.before-after__cursor {
  touch-action: none;
  width: max-content;
  height: 100%;
  transform: translate(calc(var(--transform-logical-flip) * -50% + var(--clip-path-offset, 0px)), -50%);
  cursor: grab;
  filter: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
  will-change: transform;
  place-items: center;
  display: grid;
  position: relative;
}

.before-after__cursor:before {
  content: "";
  height: 100%;
  width: var(--spacing-0-5);
  background: rgb(var(--background));
  z-index: -1;
  position: absolute;
}

.before-after__cursor {
  top: 50%;
}

.before-after__cursor:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--before-after-initial-drag-position, 0px);
}

.before-after__cursor:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--before-after-initial-drag-position, 0px);
}

.before-after__cursor:active {
  cursor: grabbing;
}

@media screen and (min-width: 700px) {
  .before-after {
    --before-after-label-spacing: var(--spacing-8);
  }

  .before-after__cursor svg {
    width: var(--spacing-10);
    height: var(--spacing-10);
  }
}

.blog-posts__container {
  gap: var(--spacing-8);
  margin-block-start: var(--spacing-10);
  margin-block-end: var(--spacing-14);
  display: grid;
}

@media screen and (min-width: 700px) {
  .blog-posts__container {
    gap: var(--spacing-10);
  }
}

@media screen and (min-width: 1400px) {
  .blog-posts__container {
    gap: var(--spacing-20);
    margin-block-start: var(--spacing-20);
    margin-block-end: var(--spacing-28);
  }
}

.blog-banner {
  --banner-container-gap: var(--spacing-16);
  padding-block-start: var(--banner-spacing-block-added, 0px);
}

.blog-banner-content {
  padding-block-start: var(--banner-content-padding-block-start);
  padding-block-end: var(--spacing-16);
}

.blog-filter-list {
  --filter-list-item-padding: var(--spacing-2-5) var(--spacing-5);
  white-space: nowrap;
}

.blog-filter-list [aria-selected="true"] {
  background-color: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
}

.blog-filter-list [aria-selected="false"] {
  opacity: .5;
  transition: opacity .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .blog-filter-list [aria-selected="false"]:hover {
    opacity: 1;
  }
}

.blog-filter-list a {
  padding: var(--filter-list-item-padding);
  display: block;
}

.blog-banner__form {
  width: 100%;
  max-width: 500px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--spacing-6);
  padding-inline-end: var(--spacing-6);
}

@media screen and (min-width: 700px) {
  .blog-banner {
    --banner-container-gap: var(--spacing-28);
  }

  .blog-banner-content {
    padding-block-end: var(--spacing-28);
  }

  .blog-banner__form {
    box-sizing: content-box;
  }

  .blog-filter-list {
    --filter-list-item-padding: var(--spacing-4) var(--spacing-6);
  }
}

.blog-posts {
  --blog-articles-gap: var(--spacing-8);
  align-items: flex-start;
  gap: var(--blog-articles-gap);
  display: grid;
}

.blog-posts-newsletter {
  padding: var(--spacing-8);
  align-content: flex-start;
}

.blog-posts-newsletter > .form {
  gap: var(--spacing-2);
}

@media screen and (min-width: 700px) {
  .blog-posts {
    --article-per-row: var(--blog-posts-per-row, 2);
    --blog-articles-gap: var(--spacing-10);
    --blog-articles-margin-block: var(--spacing-14);
    grid: auto / repeat(var(--article-per-row), minmax(0, 1fr));
  }

  .blog-posts-newsletter {
    padding: var(--spacing-10);
  }

  .blog-posts-newsletter > .form {
    gap: var(--spacing-4);
  }

  .blog-posts-newsletter__content > svg {
    width: var(--spacing-8);
    height: var(--spacing-8);
  }
}

@media screen and (min-width: 1150px) {
  .blog-posts {
    --article-per-row: var(--blog-posts-per-row, 3);
  }
}

@media screen and (min-width: 1400px) {
  .blog-posts {
    --blog-articles-gap: var(--spacing-20);
  }
}

.cart {
  gap: var(--section-stack-spacing-block);
  max-width: 1350px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

.cart-header {
  gap: var(--spacing-6);
  text-align: center;
  justify-items: center;
  display: grid;
}

.cart-header .free-shipping-bar {
  max-width: 450px;
}

.cart-order {
  align-items: start;
  gap: var(--spacing-6);
  display: grid;
}

.cart-form {
  gap: var(--spacing-5);
  padding: var(--spacing-6);
  border-width: 1px;
  display: grid;
}

@media screen and (min-width: 700px) {
  .cart-order {
    gap: var(--spacing-12);
  }

  .cart-form {
    gap: var(--spacing-6);
    padding: var(--spacing-10) var(--spacing-12);
  }
}

@media screen and (min-width: 1150px) {
  .cart-order {
    grid-template-columns: 1fr 380px;
  }

  .cart-order__recap {
    top: calc(var(--sticky-area-height)  + 20px);
    position: sticky;
  }
}

@media screen and (min-width: 1400px) {
  .cart-order {
    gap: var(--spacing-24);
  }
}

.free-shipping-bar {
  gap: var(--spacing-2);
  width: 100%;
  display: grid;
}

@media screen and (min-width: 700px) {
  .free-shipping-bar {
    gap: var(--spacing-4);
  }
}

.shipping-estimator {
  gap: var(--spacing-6);
  display: grid;
}

@media screen and (min-width: 700px) {
  .shipping-estimator__form {
    flex-wrap: wrap;
    margin-inline-end: var(--spacing-6);
    display: flex;
  }
}

.cart-drawer {
  --drawer-footer-padding: 1rem 1.5rem 1.5rem 1.5rem;
  --drawer-content-max-height: none;
  height: 100%;
  top: 0;
}

.cart-drawer::part(outside-close-button) {
  display: none;
}

.cart-drawer > [is="close-button"] {
  display: grid;
}

.cart-drawer__top {
  gap: var(--spacing-2);
  padding-block-end: var(--spacing-6);
  display: grid;
}

.cart-drawer__line-items > * + * {
  padding-block-start: var(--spacing-4);
}

.cart-drawer__note {
  visibility: hidden;
  width: 100%;
  transition: visibility .2s ease-in-out;
  position: absolute;
  bottom: calc(100% + 1px);
  overflow: hidden;
}

.cart-drawer__note:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.cart-drawer__note:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.cart-drawer__note-inner {
  padding: var(--spacing-5);
  background: rgb(var(--dialog-background));
  border-block-start-width: 1px;
  transition: transform .2s ease-in-out;
  transform: translateY(100%);
}

.cart-drawer__note[open] {
  visibility: visible;
}

.cart-drawer__note[open] > .cart-drawer__note-inner {
  transform: translateY(0);
}

.cart-drawer__inner {
  overflow-x: hidden;
}

.cart-drawer::part(body) {
  scrollbar-gutter: stable;
}

.cart-drawer__recommendations {
  margin-block-start: var(--spacing-4);
}

/* Cards size to their content so long titles never overflow — capped at 340px */
.cart-drawer__recommendations .horizontal-product-list {
  grid: auto / auto-flow max-content;
}

.cart-drawer__recommendations .horizontal-product {
  max-width: 340px;
}

/* Vertical padding + edge fade mask (cards start at --container-outer-width ≥ 24px, so 20px fade clears them) */
.cart-drawer__recommendations .horizontal-product-list-carousel {
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}

.cart-drawer__recommendations .horizontal-product {
  --horizontal-product-image-size: 150px;
  --background: 30, 30, 30;
  padding: 0;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
  background-color: rgb(30, 30, 30);
  transition: background-color 200ms ease;
}

/* Glow border sweep on hover — reuses pumplab-card-lift keyframes */
.cart-drawer__recommendations .horizontal-product::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.06)) padding-box,
    repeating-linear-gradient(
      110deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 35%,
      rgb(255 255 255 / 0.35) 50%,
      rgb(255 255 255 / 0) 65%,
      rgb(255 255 255 / 0) 100%
    ) border-box;
  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;
  opacity: 0;
  transition: opacity 220ms ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  will-change: opacity, background-position;
  animation-name: pl_plab_intro_v9, pl_plab_loop_v9;
  animation-duration: 950ms, 5200ms;
  animation-timing-function: linear, linear;
  animation-delay: 0ms, 950ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .cart-drawer__recommendations .horizontal-product:hover::before {
    opacity: 1;
    transition-delay: 70ms;
    animation-play-state: running;
  }

  /* Background darkening on hover */
  .cart-drawer__recommendations .horizontal-product:hover {
    background-color: rgb(22, 22, 22);
  }

  /* ATC button: invert to white fill on hover instead of blending into the dark card */
  .cart-drawer__recommendations .button--subdued:not([disabled]) {
    transition: background-color 180ms ease, color 180ms ease;
  }

  .cart-drawer__recommendations .button--subdued:not([disabled]):hover {
    background-color: rgba(255, 255, 255, 0.88) !important;
    color: #1a1a1a !important;
  }
}

.cart-drawer__recommendations .horizontal-product > a {
  display: flex;
  align-self: stretch;
  flex-shrink: 0;
}

.cart-drawer__recommendations .horizontal-product__image {
  width: var(--horizontal-product-image-size);
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  border-radius: 0 !important;
}

.cart-drawer__recommendations .horizontal-product__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px 12px 12px 14px;
}

/* Full-card click: title link ::after covers the whole card */
.cart-drawer__recommendations .horizontal-product__info .text-sm.bold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ATC button and image link stay interactive above the overlay */
.cart-drawer__recommendations .horizontal-product__cta,
.cart-drawer__recommendations .horizontal-product > a {
  position: relative;
  z-index: 2;
}

.cart-drawer__recommendations .horizontal-product__cta {
  margin-inline-end: 0;
  margin-block-start: 0.5rem;
}

.cart-drawer__recommendations .horizontal-product__info .text-sm.bold {
  font-size: 1rem;
  line-height: 1.2;
}

/* Rating: left-aligned, smaller stars, spaced from subtitle */
.cart-drawer__recommendations .pl-rating-badge {
  margin-left: 0 !important;
  justify-content: flex-start !important;
  column-gap: 6px;
  margin-top: 4px;
}

.cart-drawer__recommendations .pl-rating-badge__stars {
  gap: 3px;
}

.cart-drawer__recommendations .pl-rating-badge__star {
  width: 11px;
  height: 11px;
}

.cart-drawer__recommendations .pl-rating-badge__value,
.cart-drawer__recommendations .pl-rating-badge__count-inline {
  font-size: 0.72rem;
}

/* Subtitle in cart recommendation cards */
.horizontal-product__subtitle {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
  display: block;
}

.cart-drawer__recommendations .horizontal-product__subtitle {
  font-size: 0.82rem;
}

/* Divider lives on __inner so __body (height-animated) has no border/padding */
.pl-recs-toggle__inner {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 0.75rem;
}

/* Nav arrows sit below carousel */
.pl-recs-toggle__nav {
  margin-top: 0.625rem;
  margin-bottom: 0;
}

@media screen and (min-width: 700px) {
  .cart-drawer {
    --drawer-footer-padding: 1.5rem 2.5rem 2.5rem 2.5rem;
  }

  .cart-drawer .free-shipping-bar {
    gap: var(--spacing-2-5);
  }

  .cart-drawer .horizontal-product-list-carousel {
    grid-template-columns: none;
  }

  .cart-drawer__top {
    gap: var(--spacing-4);
    padding-block-end: var(--spacing-8);
  }

  .cart-drawer__line-items > * + * {
    padding-block-start: var(--spacing-6);
  }

  .cart-drawer__note-inner {
    padding: var(--spacing-8) var(--spacing-10) var(--spacing-10) var(--spacing-10);
  }
}

.collection {
  --collection-sidebar-width: 250px;
  gap: var(--spacing-8);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--spacing-8);
  margin-block-end: var(--section-outer-spacing-block);
  display: grid;
}

.collection__top-bar, .collection__facets {
  display: none;
}

.collection__results {
  scroll-padding-top: calc(var(--sticky-area-height)  + 20px);
  transition: opacity .1s;
}

.is-loading .collection__results {
  opacity: .4;
}

@media screen and (min-width: 700px) {
  .collection {
    margin-block-start: var(--spacing-12);
  }
}

@media screen and (min-width: 1000px) {
  .collection {
    column-gap: var(--spacing-12);
  }

  .collection--filters-sidebar {
    grid-template-columns: var(--collection-sidebar-width) minmax(0, 1fr);
  }

  .collection__top-bar {
    column-gap: var(--spacing-6);
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    display: grid;
  }

  .collection--filters-sidebar .collection__top-bar {
    grid-template-columns: inherit;
    column-gap: inherit;
  }

  .collection--filters-horizontal .collection__top-bar {
    row-gap: var(--spacing-8);
    grid-template-columns: 100%;
  }

  .collection__facets {
    display: block;
  }

  .facets-summary {
    align-items: start;
    gap: var(--spacing-4);
    grid-column-end: -1;
    display: flex;
  }

  .collection__facets-scroller {
    display: block;
    position: sticky;
    top: calc(var(--sticky-area-height)  + 20px);
  }

  .collection__pagination {
    grid-column-end: -1;
  }

  .availability-facet {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
  }

  .collection--filters-horizontal .availability-facet, .collection--filters-horizontal .sort-by-facet {
    flex: 1 0 0;
    min-width: max-content;
  }
}

@media screen and (min-width: 1400px) {
  .collection {
    --collection-sidebar-width: 300px;
  }
}

.sort-by-facet {
  justify-content: end;
  gap: var(--spacing-1);
  flex-shrink: 0;
  margin-inline-start: auto;
  display: flex;
  position: relative;
}

.facets__floating-filter {
  text-align: center;
  z-index: 2;
  width: 100%;
  position: fixed;
  bottom: var(--spacing-8);
}

.facets__floating-filter:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.facets__floating-filter:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.facets-drawer::part(header) {
  padding-block: var(--spacing-6);
}

.facets-drawer::part(body) {
  flex-grow: 1;
  padding-block-start: 0;
  padding-block-end: 0;
}

.facets-drawer .facets-vertical {
  flex-direction: column;
  min-height: 100%;
  display: flex;
}

.facets-drawer .accordion {
  border-block-start-width: 0;
}

.facets-drawer__floating-apply {
  background: linear-gradient(180deg, rgb(var(--background-primary) / 0), rgb(var(--background)));
  margin-block-start: auto;
  margin-inline-start: calc(-1 * var(--spacing-3));
  margin-inline-end: calc(-1 * var(--spacing-3));
  padding-block-start: var(--spacing-5);
  padding-block-end: var(--spacing-5);
  position: sticky;
  bottom: 0;
}

@media screen and (max-width: 699px) {
  .facets-drawer::part(header) {
    display: none;
  }

  .facets-drawer::part(content) {
    height: 65vh;
    max-height: none;
  }
}

@media screen and (min-width: 700px) {
  .facets-drawer__floating-apply {
    margin-inline-start: calc(-1 * var(--spacing-4));
    margin-inline-end: calc(-1 * var(--spacing-4));
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
  }
}

.facets-horizontal {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-5) var(--spacing-10);
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.facets-horizontal > [aria-expanded] {
  transition: opacity .2s ease-in-out;
}

@supports selector(:has(*)) {
  .facets-horizontal > [aria-expanded="true"] ~ [aria-expanded] {
    opacity: .5;
  }

  .facets-horizontal > :has( ~ [aria-expanded="true"]) {
    opacity: .5;
  }
}

.active-facets {
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.active-facets > .facet-clear-all {
  margin-inline-start: var(--spacing-2);
}

@media screen and (min-width: 1000px) {
  .active-facets {
    margin-block-start: -12px;
    margin-block-end: -12px;
  }

  .active-facets > .facet-clear-all {
    margin-inline-start: var(--spacing-4);
  }

  .collection--filters-horizontal .active-facets {
    margin-block-start: 0;
    margin-block-end: 0;
  }
}

.removable-facet {
  gap: var(--spacing-3);
  padding: var(--spacing-2-5) var(--spacing-4);
  background: rgb(var(--text-color) / .1);
  color: rgb(var(--text-color));
  border-radius: var(--rounded-button);
  flex-shrink: 0;
  align-items: baseline;
  display: flex;
}

@media screen and (min-width: 700px) {
  .removable-facet {
    padding: var(--spacing-3) var(--spacing-5);
    gap: var(--spacing-4);
  }
}

.facet-dialog {
  width: max-content;
  max-width: min(1100px, 80vw);
  padding: var(--spacing-4);
  border-radius: min(8px, var(--rounded-button));
  background: rgb(var(--background-primary));
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  border-width: 1px;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: absolute;
  top: calc(100% + var(--spacing-6));
}

.facet-dialog:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.facet-dialog:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.facet-dialog > .color-list {
  margin: var(--spacing-1) var(--spacing-2);
  max-width: 550px;
}

.availability-facet + .facets-horizontal > .facet-dialog:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: auto;
}

.availability-facet + .facets-horizontal > .facet-dialog:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: auto;
}

.facet-dialog[open] {
  visibility: visible;
  opacity: 1;
}

.facet-dialog-option {
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: var(--rounded-full);
  opacity: .7;
  transition: opacity .2s ease-in-out, background .2s ease-in-out;
  display: block;
}

:checked + .facet-dialog-option, .facet-dialog-option:hover {
  background: rgb(var(--text-primary) / .04);
  opacity: 1;
}

.collection-header {
  text-align: center;
  margin-block-start: var(--spacing-8);
  margin-block-end: var(--spacing-8);
}

@media screen and (min-width: 700px) {
  .collection-header {
    margin-block-start: var(--spacing-16);
    margin-block-end: var(--spacing-16);
  }
}

.collection-featured-product {
  max-width: 290px;
  display: grid;
}

.collection-featured-product > * {
  background: rgb(var(--text-primary) / .2);
  -webkit-backdrop-filter: blur(80px);
  backdrop-filter: blur(80px);
}

.collection-featured-product__title {
  padding: var(--spacing-1-5) var(--spacing-4);
  border-top-left-radius: var(--rounded-xs);
  border-top-right-radius: var(--rounded-xs);
  justify-self: end;
}

.collection-featured-product__content {
  border-radius: var(--rounded-xs);
  border-top-right-radius: 0;
}

.collection-list {
  grid: var(--collection-list-grid, none);
  align-items: start;
  gap: var(--grid-gutter);
  display: grid;
}

.collection-card {
  --transition-direction: 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
}

.collection-card--reverse-transition {
  --transition-direction: -1;
}

.collection-card__content-wrapper svg {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, transform .2s;
  display: inline-block;
}

.collection-card__content + svg {
  transform: translateY(calc(var(--transition-direction) * 48px));
}

.collection-card__content {
  transition: transform .2s;
}

.collection-card__content:first-child {
  margin-block-end: -3rem;
}

@media screen and (min-width: 1000px) {
  .collection-card {
    scroll-snap-align: none;
  }
}

@media screen and (pointer: fine) {
  .collection-card:hover .collection-card__content {
    transform: translateY(calc(var(--transition-direction) * -8px));
  }

  .collection-card:hover .collection-card__content-wrapper svg {
    opacity: 1;
    visibility: visible;
    transform: translateY(-8px);
  }

  .collection-card:hover .collection-card__content + svg {
    transform: translateY(56px);
  }
}

@supports selector(:has(.selector)) {
  .shopify-section--collection-banner + .shopify-section--collection-list:not(:has(.section-header)) {
    --section-outer-spacing-block: var(--grid-gutter);
  }
}

@supports not selector(:has(.selector)) {
  .shopify-section--collection-banner + .shopify-section--collection-list {
    --section-outer-spacing-block: var(--grid-gutter);
  }
}

.contact-form {
  padding: var(--spacing-6);
}

@media screen and (min-width: 700px) {
  .contact-form {
    padding: var(--spacing-10) var(--spacing-12);
  }
}

.faq-availability {
  gap: var(--spacing-6);
  text-align: center;
  justify-items: center;
  display: grid;
}

.faq-availability > * {
  justify-items: inherit;
}

.section-stack__intro .faq-availability {
  text-align: start;
  justify-items: start;
}

.feature-chart {
  padding: 0 var(--container-gutter);
  scroll-padding-top: var(--sticky-area-height);
  display: block;
}

.feature-chart__table-row {
  --feature-chart-heading-width: 140px;
  grid-template-columns: var(--feature-chart-heading-width) repeat(var(--feature-chart-values-columns-count), minmax(140px, 1fr));
  gap: var(--spacing-1) var(--spacing-5);
  min-width: min-content;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  display: grid;
}

.feature-chart__toggle {
  text-align: center;
  border-top-width: 1px;
  justify-content: center;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
  display: grid;
}

.feature-chart.is-expanded .feature-chart__toggle .circle-chevron {
  transform: rotate(180deg);
}

.feature-chart__product {
  --feature-chart-product-image-width: 80px;
  gap: var(--spacing-5);
  place-content: start;
  display: grid;
  position: relative;
}

.feature-chart__product :is(img, svg) {
  width: var(--feature-chart-product-image-width);
}

.feature-chart__product .color-swatch {
  margin: 0;
}

.feature-chart__product .badge {
  position: absolute;
  top: 0;
}

.feature-chart__product .badge:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.feature-chart__product .badge:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.feature-chart__product-placeholder {
  height: auto;
}

.feature-chart__table-row--sticky {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  background: rgb(var(--background));
  padding-block: var(--spacing-5);
  border-bottom-width: 1px;
  transition: opacity .2s, visibility .2s, top .2s;
  position: fixed;
  top: calc(var(--header-is-visible, 1) * var(--sticky-area-height));
  border-top-width: 0 !important;
}

.feature-chart__table-row--sticky.is-visible {
  opacity: 1;
  visibility: visible;
}

.feature-chart__table-row--sticky .feature-chart__product img {
  max-width: 48px;
}

.feature-chart__table-row--sticky .feature-chart__view-button-container {
  display: none;
}

@media screen and (max-width: 699px) {
  .feature-chart, .feature-chart__table {
    margin-inline-start: calc(-1 * var(--container-gutter));
    margin-inline-end: calc(-1 * var(--container-gutter));
    padding-inline-start: var(--container-gutter);
    padding-inline-end: var(--container-gutter);
    display: grid;
  }

  .feature-chart__table-row {
    grid-template-columns: repeat(var(--feature-chart-values-columns-count), minmax(140px, 1fr));
  }

  .feature-chart__table--multi-columns .feature-chart__table-row {
    grid-template-columns: repeat(var(--feature-chart-values-columns-count), 150px);
  }

  .feature-chart__heading {
    position: sticky;
  }

  .feature-chart__heading:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .feature-chart__heading:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .feature-chart__value {
    grid-row: 2;
  }
}

@media screen and (min-width: 700px) {
  .feature-chart {
    border-radius: var(--rounded);
  }

  .feature-chart__table-row--product > :first-child {
    grid-column-start: 2;
  }
}

@media screen and (min-width: 1000px) {
  .feature-chart {
    padding: var(--spacing-4) var(--spacing-12);
  }

  .feature-chart__table-row {
    --feature-chart-heading-width: 180px;
    column-gap: var(--spacing-6);
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
  }

  .feature-chart__table-row--product {
    padding-block-end: var(--spacing-10);
  }

  .feature-chart__table-row--sticky {
    padding-block: var(--spacing-6);
  }

  .feature-chart__toggle {
    padding-block-start: var(--spacing-5);
    padding-block-end: var(--spacing-6);
  }

  .feature-chart__product {
    --feature-chart-product-image-width: 150px;
    max-width: 260px;
  }

  .feature-chart__table-row--sticky .feature-chart__product {
    grid-auto-flow: column;
    justify-content: start;
  }

  .feature-chart__table-row--sticky .feature-chart__product img {
    max-width: 80px;
  }
}

.footer {
  --background: var(--footer-background);
  --text-color: var(--footer-text);
  --footer-padding-block: var(--spacing-12);
  --footer-part-gap: var(--spacing-10);
  --footer-block-list-gap: var(--spacing-10);
  --footer-block-gap: var(--spacing-4);
  --footer-aside-gap: var(--spacing-10);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  padding-block-start: var(--footer-padding-block);
  padding-block-end: var(--footer-padding-block);
}

.footer__wrapper {
  gap: var(--footer-part-gap);
  display: grid;
}

.footer__block-list {
  gap: var(--footer-block-list-gap);
  align-items: start;
  justify-content: var(--footer-block-list-justify-content, start);
  grid: auto-flow dense / repeat(2, minmax(0, 1fr));
  display: grid;
}

.footer__block {
  gap: var(--footer-block-gap);
  display: grid;
}

.footer__block--text, .footer__block--newsletter, .footer__block--app {
  grid-column: span 2;
}

.footer__block--newsletter {
  gap: var(--spacing-8);
  display: grid;
}

.footer__block--menu {
  max-width: 250px;
}

.footer__aside {
  gap: var(--footer-aside-gap);
  display: grid;
}

.footer__aside-top, .footer__aside-bottom {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-8);
  display: grid;
}

.footer__policy-links {
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.footer__policy-links li + li:before {
  content: "•";
  margin-inline-start: .5rem;
  margin-inline-end: .5rem;
  font-size: .75rem;
}

@media screen and (min-width: 700px) {
  .footer {
    --footer-padding-block: var(--spacing-16);
    --footer-part-gap: var(--spacing-16);
    --footer-block-list-gap: var(--spacing-10) var(--spacing-24);
    --footer-block-gap: var(--spacing-6);
    --footer-aside-gap: var(--spacing-12);
  }

  .footer__block-list {
    flex-wrap: wrap;
    display: flex;
  }

  .footer__block--text {
    flex-basis: 25%;
  }

  .footer__block--newsletter, .footer__block--app {
    flex-basis: 100%;
  }

  .footer__block--menu {
    flex-shrink: 0;
  }

  .footer__aside-top, .footer__aside-bottom {
    display: flex;
  }

  .footer__copyright {
    order: -1;
  }
}

@media screen and (min-width: 1000px) {
  .footer {
    --footer-block-list-gap: var(--spacing-10) var(--spacing-12);
  }

  .footer__block-list {
    flex-wrap: nowrap;
  }

  .footer__block--newsletter, .footer__block--app {
    flex-basis: 33.3333%;
  }

  :is(.footer__block--newsletter, .footer__block--app):only-child {
    flex-basis: 50%;
  }

  .footer__newsletter-form {
    max-width: 400px;
  }
}

@media screen and (min-width: 1150px) {
  .footer {
    --footer-block-list-gap: var(--spacing-10) var(--spacing-24);
  }

  .footer__block--menu:last-child {
    margin-inline-end: var(--spacing-10);
  }
}

.shopify-section--privacy-banner {
  z-index: 2;
  position: relative;
}

.privacy-bar {
  margin: var(--spacing-2);
  z-index: 1;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: fixed;
  bottom: 0;
  display: block !important;
}

.privacy-bar:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.privacy-bar:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.privacy-bar[hidden] {
  visibility: hidden;
  opacity: 0;
}

.privacy-bar__inner {
  width: 100%;
  padding: var(--spacing-6);
  background: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
  border-radius: var(--rounded-sm);
  border-width: 1px;
}

.privacy-bar__close {
  position: absolute;
  top: var(--spacing-6);
}

.privacy-bar__close:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-6);
}

.privacy-bar__close:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-6);
}

@media screen and (min-width: 700px) {
  .privacy-bar {
    margin: var(--spacing-4);
  }

  .privacy-bar__inner {
    max-width: 445px;
  }
}

.gift-card {
  gap: var(--spacing-8);
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-14);
  display: grid;
}

.gift-card__image-wrapper {
  justify-items: center;
  gap: var(--spacing-6);
  display: grid;
}

.gift-card__image {
  max-width: 160px;
}

.gift-card__info {
  gap: var(--spacing-5);
  display: grid;
}

.gift-card__issued-info {
  place-content: center;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-6);
  text-align: center;
  display: grid;
}

.gift-card__balance {
  line-height: 1;
  font-size: var(--gift-card-balance-font-size);
}

.gift-card__redeem-info:last-child {
  border-width: 1px;
}

.gift-card__redeem-box {
  padding: var(--spacing-6);
  align-items: center;
  gap: var(--spacing-4);
  display: grid;
}

.gift-card__redeem-box:last-child:not(:only-child) {
  border-top-width: 1px;
}

.gift-card__redeem-code {
  padding: var(--spacing-3-5);
  text-align: center;
  border-radius: var(--rounded-xs);
  border-width: 1px;
  font-weight: bold;
}

.gift-card__qr-code {
  aspect-ratio: 1;
  width: 120px;
  display: block;
}

.gift-card__qr-code > canvas {
  display: none;
}

.gift-card__scan {
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  display: flex;
}

@media screen and (min-width: 700px) {
  .gift-card {
    gap: var(--spacing-12);
    padding-block-start: var(--spacing-12);
    padding-block-end: var(--spacing-32);
  }

  .gift-card__image-wrapper {
    gap: var(--spacing-12);
  }

  .gift-card__image {
    max-width: 270px;
  }

  .gift-card__info {
    gap: var(--spacing-12);
  }

  .gift-card__issued-info {
    padding: var(--spacing-12);
  }

  .gift-card__redeem-info {
    display: flex;
  }

  .gift-card__redeem-box {
    padding: var(--spacing-12);
    gap: var(--spacing-6);
    max-width: 380px;
  }

  .gift-card__scan {
    justify-items: center;
    display: grid;
  }
}

@media screen and (min-width: 1000px) {
  .gift-card__info {
    justify-content: center;
    display: flex;
  }

  .gift-card__redeem-box:last-child:not(:only-child) {
    border-top-width: 0;
    border-inline-start-width: 1px;
  }
}

@media screen and (min-width: 1150px) {
  .gift-card__issued-info {
    flex-basis: var(--spacing-80);
  }
}

.header {
  --background: var(--header-background);
  --text-color: var(--header-text);
  --header-part-gap: var(--spacing-3);
  --header-icon-list-spacing: var(--spacing-4);
  --header-link-list-spacing: var(--spacing-6);
  --header-logo-opacity: 1;
  margin-inline-start: auto;
  margin-inline-end: auto;
  transition: background .25s;
  display: block;
}

.header__wrapper {
  grid-template: var(--header-grid-template);
  align-items: center;
  gap: var(--header-part-gap);
  padding: var(--header-padding-block) max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  color: rgb(var(--text-color));
  background: rgb(var(--background) / var(--header-background-opacity));
  -webkit-backdrop-filter: blur(var(--header-background-blur-radius));
  backdrop-filter: blur(var(--header-background-blur-radius));
  border-radius: inherit;
  transition: inherit;
  display: grid;
}

.header__logo {
  grid-area: logo;
  max-width: max-content;
  display: block;
  position: relative;
  align-self: center;
}

.header__logo-image {
  width: var(--header-logo-width);
  height: auto;
  opacity: var(--header-logo-opacity, 1);
}

/* PUMPLAB_MOBILE_HEADER_V1 — bigger logo on mobile, consistent alignment */
@media screen and (max-width: 699px) {
  h1.header__logo {
    margin: 0;
  }

  .header__logo {
    display: flex;
    align-items: center;
    justify-self: start;
  }

  .header__logo-image {
    width: calc(var(--header-logo-width) * 1.3) !important;
    margin-inline-start: 12px;
  }
}

.header__logo-image--transparent {
  opacity: calc(1 - var(--header-logo-opacity));
  position: absolute;
  top: 0;
}

.header__logo-image--transparent:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.header__logo-image--transparent:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.header__logo-image:not(.header__logo-image--transparent):last-child {
  --header-logo-opacity: 1;
}

.header__logo-text {
  max-width: min(50vw, 350px);
  display: block;
}

.header__main-nav {
  grid-area: main-nav;
}

.header__secondary-nav {
  justify-content: flex-end;
  justify-self: end;
  align-items: center;
  gap: var(--spacing-3) var(--header-part-gap);
  flex-wrap: wrap;
  grid-area: secondary-nav;
  display: flex;
}

.header__link-list {
  display: none;
}

.header__link-list .icon-chevron-bottom {
  position: relative;
  top: 1px;
}

.header__icon-list {
  align-items: center;
  gap: var(--header-icon-list-spacing);
  display: flex;
}

.header__cart-count {
  top: -.3125rem;
  position: absolute;
}

.header__cart-count:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: .875rem;
}

.header__cart-count:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: .875rem;
}

@media screen and (min-width: 700px) {
  .header {
    --header-part-gap: var(--spacing-6);
    --header-icon-list-spacing: var(--spacing-3);
  }
}

@media screen and (min-width: 1150px) {
  .header__link-list {
    gap: var(--spacing-4) var(--header-link-list-spacing);
    display: flex;
  }
}

@media screen and (min-width: 1400px) {
  .header {
    --header-part-gap: var(--spacing-10);
    --header-link-list-spacing: var(--spacing-10);
  }
}

.header[allow-transparency] {
  transition: color .25s, background .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s;
}

.header[allow-transparency]:not(.is-filled) {
  --header-background-opacity: 0;
  --header-logo-opacity: 0;
  --header-background-blur-radius: 0px;
  --text-color: var(--header-transparent-text-color);
}

.header[allow-transparency] .header__logo-image {
  transition: opacity .25s;
}

@supports selector(:has(> *)) {
  :has(.shopify-section:first-child [allow-transparent-header]) .header:not(.is-filled) {
    --header-background-opacity: 0;
    --header-logo-opacity: 0;
    --text-color: var(--header-transparent-text-color);
  }

  :has(.shopify-section:first-child [allow-transparent-header]) .shopify-section--header:not(:has(.header.is-filled)) {
    position: relative !important;
    top: 0 !important;
  }

  .header:has([open]) {
    --header-background-opacity: 1;
  }
}

.dropdown-menu {
  gap: var(--spacing-3);
  width: max-content;
  max-width: 350px;
  padding: var(--spacing-5) var(--spacing-7);
  background: rgb(var(--header-background));
  color: rgb(var(--header-text));
  border-radius: var(--rounded-sm);
  opacity: 0;
  box-shadow: var(--shadow), 0 0 0 1px rgb(var(--text-color) / .12);
  z-index: 1;
  display: grid;
  position: absolute;
  top: calc(100% + var(--spacing-4-5));
}

.dropdown-menu:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(-1 * var(--spacing-4));
}

.dropdown-menu:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(-1 * var(--spacing-4));
}

.dropdown-menu:before {
  content: "";
  width: 100%;
  height: var(--spacing-4-5);
  position: absolute;
  bottom: 100%;
}

.dropdown-menu--restrictable {
  max-height: 80vh;
  overflow-y: auto;
}

.dropdown-menu .dropdown-menu {
  top: calc(-1 * var(--spacing-5));
}

.dropdown-menu .dropdown-menu:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: calc(100% + var(--spacing-7));
}

.dropdown-menu .dropdown-menu:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: calc(100% + var(--spacing-7));
}

.dropdown-menu__item {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-6);
  opacity: .7;
  transition: opacity .2s ease-in-out;
  display: flex;
}

[open] > .dropdown-menu__item, .dropdown-menu__item:hover {
  opacity: 1;
}

.mega-menu__promo-carousel {
  max-width: 300px;
  position: relative;
}

.mega-menu__carousel {
  grid: auto / auto-flow 45vw;
  display: grid;
}

@media screen and (min-width: 700px) {
  .mega-menu__carousel {
    --content-over-media-column-gap: var(--spacing-8);
    --content-over-media-row-gap: var(--spacing-6);
    --content-over-media-content-max-width: 70%;
    grid: none;
  }

  .mega-menu__carousel > * {
    grid-area: 1 / -1;
  }

  .mega-menu__carousel-controls button {
    transition: transform .2s;
  }

  .mega-menu__carousel-controls button:hover {
    transform: scale(1.1);
  }
}

@media screen and (min-width: 1400px) {
  .mega-menu__promo-carousel {
    max-width: 360px;
  }
}

.mega-menu {
  --mega-menu-block-padding: var(--spacing-10);
  --mega-menu-gap: var(--spacing-12);
  --mega-menu-nav-column-gap: var(--spacing-8);
  gap: var(--mega-menu-gap);
  justify-content: var(--mega-menu-justify-content);
  width: 100%;
  padding: var(--mega-menu-block-padding) max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  max-height: calc(100vh - var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px)  - var(--header-height, 0px)  - 20px);
  overscroll-behavior-y: contain;
  opacity: 0;
  background: rgb(var(--header-background));
  color: rgb(var(--header-text));
  mix-blend-mode: plus-lighter;
  border-block-start-width: 1px;
  align-items: flex-start;
  display: flex;
  position: absolute;
  top: 100%;
  overflow: hidden auto;
  box-shadow: 0 9999px 0 9999px #0006;
}

.mega-menu:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.mega-menu:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.mega-menu__nav {
  max-width: var(--column-list-max-width, max-content);
  gap: var(--mega-menu-nav-gap);
  flex-wrap: wrap;
  flex: auto;
  align-items: start;
  justify-content: center;
  display: flex;
}

.mega-menu__nav > li {
  width: var(--mega-menu-nav-column-max-width);
}

@media screen and (min-width: 1400px) {
  .mega-menu {
    --mega-menu-gap: var(--spacing-16);
    --mega-menu-nav-column-gap: var(--spacing-12);
  }
}

@media screen and (min-width: 1600px) {
  .mega-menu {
    --mega-menu-gap: var(--spacing-20);
    --mega-menu-nav-column-gap: var(--spacing-16);
  }
}

.navigation-drawer {
  --panel-link-image-size: var(--spacing-12);
  --drawer-body-padding: var(--spacing-6);
  --navigation-drawer-width: 100vw;
  width: var(--navigation-drawer-width);
}

.navigation-drawer::part(body) {
  gap: var(--spacing-6);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  display: grid;
  overflow-y: hidden;
}

.navigation-drawer::part(content) {
  grid-template-rows: minmax(0, 1fr);
  min-height: 70vh;
  display: grid;
}

.navigation-drawer .panel__scroller {
  align-content: flex-start;
  height: 100%;
  overflow-y: auto;
}

.navigation-drawer > [is="close-button"] {
  margin-inline-start: var(--drawer-body-padding);
}

.navigation-drawer[mobile-opening="bottom"] .panel__scroller {
  margin-block-start: calc(var(--drawer-body-padding) * -1);
  padding-block-start: var(--drawer-body-padding);
}

.navigation-drawer[mobile-opening="left"] {
  height: 100%;
}

.navigation-drawer[mobile-opening="left"]::part(body) {
  grid-template-rows: auto minmax(0, 1fr);
  padding-block-start: var(--drawer-body-padding);
}

.navigation-drawer[mobile-opening="left"] > [is="close-button"] {
  display: grid;
}

.navigation-drawer[mobile-opening="left"] .panel__wrapper {
  padding-block-start: 0;
}

.navigation-drawer [is="close-button"] {
  width: var(--spacing-10);
  height: var(--spacing-10);
  border-radius: var(--rounded-full);
  border-width: 1px;
  place-items: center;
  position: static;
}

.panel-list__wrapper {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.panel {
  gap: var(--spacing-8);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.panel + .panel {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
}

.panel__wrapper {
  justify-content: var(--panel-wrapper-justify-content, space-between);
  gap: var(--spacing-6);
  padding: var(--drawer-body-padding);
  flex-direction: column;
  height: 100%;
  display: flex;
  overflow-y: auto;
}

.panel-footer {
  background-color: rgb(var(--background));
}

.panel-footer__localization-wrapper {
  padding-block-start: var(--spacing-4);
}

.panel-footer__account-link:not(:only-child) {
  margin-inline-start: auto;
}

.panel-link__image {
  min-width: var(--panel-link-image-size);
  width: var(--panel-link-image-size);
  height: var(--panel-link-image-size);
  object-fit: contain;
}

@media screen and (min-width: 700px) {
  .navigation-drawer {
    --panel-link-image-size: 3.25rem;
    --drawer-body-padding: var(--spacing-8);
    --navigation-drawer-width: 412px;
  }

  .navigation-drawer::part(body) {
    gap: var(--spacing-8);
    grid-template-rows: auto minmax(0, 1fr);
    padding-block-start: var(--drawer-body-padding);
  }

  .navigation-drawer [is="close-button"] {
    width: var(--spacing-12);
    min-height: var(--spacing-12);
    height: var(--spacing-12);
  }

  .navigation-drawer[mobile-opening="bottom"] .panel__scroller {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .panel__wrapper {
    padding-block-start: 0;
  }
}

@media screen and (min-width: 1150px) {
  .navigation-drawer[mega-menu] {
    --panel-link-image-size: 3.75rem;
    --drawer-body-padding: var(--spacing-10);
    --navigation-drawer-width: 472px;
  }

  .navigation-drawer[mega-menu]::part(body) {
    grid-template-rows: auto;
    padding: 0;
  }

  .navigation-drawer[mega-menu]::part(content):before {
    content: "";
    background-color: rgb(var(--text-color) / .12);
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 440px;
  }

  .navigation-drawer[mega-menu] [is="close-button"] {
    display: grid;
  }

  .navigation-drawer[mega-menu] > .panel-list__wrapper {
    grid-template-columns: repeat(2, minmax(440px, 1fr));
    display: grid;
  }

  .navigation-drawer[mega-menu] > .panel-list__wrapper > .panel {
    position: static;
  }

  .navigation-drawer[mega-menu] .panel + .panel > .panel__wrapper {
    padding-block-start: 6.5rem;
  }

  .navigation-drawer[mega-menu] .panel__wrapper {
    padding: var(--drawer-body-padding);
  }

  .navigation-drawer[mega-menu] .panel__scroller {
    overflow-y: initial;
  }

  .navigation-drawer [is="close-button"] {
    transition: transform .2s ease-in-out;
  }

  .navigation-drawer [is="close-button"]:hover {
    transform: rotate(90deg);
  }

  [dir="rtl"] .navigation-drawer[mega-menu]::part(content):before {
    left: auto;
    right: 440px;
  }
}

.mega-menu .navigation-promo__wrapper {
  flex: 1;
  max-width: max-content;
}

.navigation-promo {
  grid: var(--navigation-promo-grid);
  align-content: start;
  align-items: start;
  gap: var(--navigation-promo-gap);
  display: grid;
}

.navigation-promo.navigation-promo--carousel .content-over-media p {
  max-width: 75%;
}

.navigation-promo .product-card {
  padding: var(--spacing-8);
  flex-direction: column;
  justify-content: center;
  height: 100%;
  display: flex;
}

.navigation-promo .product-card__figure {
  max-width: 160px;
  margin-block-end: var(--spacing-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.navigation-promo .product-card__quick-buy {
  display: none;
}

.navigation-promo .product-card__info {
  padding: 0;
}

.navigation-promo .product-card__image {
  border-radius: 0;
}

.navigation-promo__carousel-controls {
  gap: var(--spacing-2);
  color: rgb(var(--text-color));
  z-index: 1;
  transition: color .2s ease-in-out;
  display: flex;
  position: absolute;
}

.navigation-promo__carousel-controls:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--content-over-media-column-gap);
}

.navigation-promo__carousel-controls:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--content-over-media-column-gap);
}

@media screen and (min-width: 1150px) {
  .navigation-promo__carousel-controls > button svg {
    transition: scale .2s ease-in-out;
  }

  .navigation-promo__carousel-controls > button:hover svg {
    scale: 1.1;
  }
}

.shopify-section--hot-spots {
  z-index: 1;
}

.hot-spot {
  --hot-spot-dot-size: var(--spacing-8);
  --hot-spot-dot-shadow-size: var(--spacing-2-5);
  top: var(--hot-spot-vertical-position);
  left: var(--hot-spot-horizontal-position);
  grid-area: unset !important;
  z-index: unset !important;
  position: absolute !important;
}

.hot-spot__dot {
  width: var(--hot-spot-dot-size);
  height: var(--hot-spot-dot-size);
  border-radius: var(--rounded-full);
  background: rgb(var(--hot-spot-background));
  color: rgb(var(--hot-spot-text-color));
  place-items: center;
  transition: transform .2s ease-in-out;
  display: grid;
  position: relative;
}

.hot-spot__dot:after {
  content: "";
  box-sizing: content-box;
  top: calc(-1 * var(--hot-spot-dot-shadow-size));
  left: calc(-1 * var(--hot-spot-dot-shadow-size));
  width: 100%;
  height: 100%;
  padding: var(--hot-spot-dot-shadow-size);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--hot-spot-background) / 0) 0%, rgb(var(--hot-spot-background) / .3) 100%);
  border-radius: inherit;
  animation: 2s ease-in-out infinite alternate ping;
  position: absolute;
}

.hot-spot__dot[aria-expanded="true"] {
  transform: rotate(45deg);
}

.hot-spot-popover {
  --popover-body-padding: var(--spacing-6);
}

.hot-spot-popover::part(title) {
  display: none;
}

.hot-spot-popover::part(body) {
  text-align: start;
}

@media screen and (min-width: 700px) {
  .hot-spot {
    --hot-spot-dot-size: var(--spacing-12);
    --hot-spot-dot-shadow-size: var(--spacing-4);
  }

  .hot-spot__dot svg {
    width: 12px;
    height: 12px;
  }

  .hot-spot-popover {
    --popover-body-padding: var(--spacing-8);
  }
}

@media screen and (min-width: 1000px) {
  .hot-spot-popover {
    --popover-anchor-inline-spacing: calc(100% + var(--spacing-4-5));
  }

  .hot-spot-popover::part(content) {
    background: rgb(var(--hot-spot-content-background) / var(--hot-spot-content-opacity));
    color: rgb(var(--hot-spot-content-text-color));
    -webkit-backdrop-filter: blur(var(--hot-spot-content-blur-radius));
    backdrop-filter: blur(var(--hot-spot-content-blur-radius));
  }
}

.image-link-blocks {
  grid: var(--image-link-blocks-grid);
  gap: var(--spacing-2);
  align-items: start;
  display: grid;
}

.image-link-blocks__item .content-over-media .circle-chevron {
  background: rgb(var(--text-color));
  color: rgb(var(--background));
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.image-link-blocks__item .icon-circle-button-right-clipped {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.image-link-blocks__inner {
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.image-link-blocks__inner .circle-chevron {
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.image-link-blocks__title {
  gap: var(--spacing-2-5);
  justify-content: center;
  align-items: center;
  margin-block-end: calc(-1 * var(--spacing-1));
  display: flex;
}

.image-link-blocks__title--animate {
  transform: translateX(calc(var(--transform-logical-flip) * 16px));
  transition: transform .2s;
}

@media screen and (min-width: 700px) {
  .image-link-blocks {
    gap: var(--grid-gutter);
  }

  .image-link-blocks__inner {
    gap: var(--spacing-5);
    padding: var(--spacing-10);
  }

  .image-link-blocks__title {
    margin-block-end: calc(-1 * var(--spacing-4));
  }
}

@media screen and (min-width: 1000px) {
  .image-link-blocks__item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media screen and (pointer: fine) {
  .image-link-blocks__item:hover .content-over-media .circle-chevron {
    background: rgb(var(--text-color));
    color: rgb(var(--background));
    opacity: 1;
  }

  .image-link-blocks__item:hover .image-link-blocks__inner .circle-chevron, .image-link-blocks__item:hover .icon-circle-button-right-clipped {
    opacity: 1;
  }

  .image-link-blocks__item:hover .image-link-blocks__title--animate {
    transform: translateX(0);
  }
}

.shopify-section--collection-banner + .shopify-section--image-link-blocks {
  --section-outer-spacing-block: var(--grid-gutter);
}

.images-scrolling__content {
  gap: var(--spacing-4);
  display: grid;
}

.images-scrolling__counter {
  align-items: center;
  gap: var(--spacing-4);
  display: flex;
}

.images-scrolling__counter:before {
  content: "";
  background: currentColor;
  width: 1.5rem;
  height: .125rem;
}

.images-scrolling__icon {
  max-width: calc(var(--images-scrolling-item-icon-width) / 1.5);
}

@media screen and (min-width: 700px) {
  .images-scrolling__content {
    gap: var(--spacing-8);
    padding-block: var(--spacing-8);
    order: -1;
    align-content: start;
  }

  .images-scrolling__counter {
    gap: var(--spacing-6);
  }

  .images-scrolling__counter:before {
    width: 2.5rem;
  }

  .images-scrolling__icon {
    max-width: calc(var(--images-scrolling-item-icon-width));
  }
}

.images-scrolling-mobile {
  grid: var(--images-scrolling-grid);
  gap: var(--spacing-12) var(--container-gutter);
  display: grid;
}

.images-scrolling-mobile__item {
  align-content: start;
  gap: var(--spacing-4);
  display: grid;
}

@media screen and (min-width: 700px) {
  .images-scrolling-mobile {
    display: none;
  }
}

.images-scrolling-desktop {
  grid-template-columns: var(--images-scrolling-grid-template-columns);
  grid-template-rows: repeat(var(--images-scrolling-block-count), minmax(0, 1fr));
  column-gap: var(--spacing-8);
  display: grid;
}

.images-scrolling-desktop__media-wrapper {
  top: calc(var(--sticky-area-height)  + 20px);
  grid-column: media;
  position: sticky;
}

.images-scrolling-desktop__media-wrapper > * {
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.images-scrolling-desktop__media-wrapper > :first-child {
  max-height: calc(100vh - var(--sticky-area-height)  - 40px);
}

@supports (max-height: 100svh) {
  .images-scrolling-desktop__media-wrapper > :first-child {
    max-height: calc(100svh - var(--sticky-area-height)  - 40px);
  }
}

.images-scrolling-desktop__media-wrapper > :not(:first-child) {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.images-scrolling-desktop__content-list {
  grid-area: 1 / content / -1;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  display: grid;
}

@media screen and (min-width: 1000px) {
  .images-scrolling-desktop {
    column-gap: var(--spacing-16);
  }
}

@media screen and (min-width: 1150px) {
  .images-scrolling-desktop {
    column-gap: var(--spacing-28);
  }
}

@media screen and (max-width: 699px) {
  .images-scrolling-desktop {
    display: none;
  }
}

.impact-text {
  --impact-text-spacing: var(--spacing-10);
  gap: var(--impact-text-spacing);
  align-items: start;
  display: grid;
}

.impact-text--scroll {
  grid: auto / auto-flow var(--impact-text-auto-columns);
}

.impact-text--center {
  text-align: center;
  justify-content: safe center;
}

.impact-text--end {
  text-align: end;
  justify-content: end;
}

.impact-text__text {
  font-size: var(--impact-text-font-size);
  letter-spacing: 0;
  line-height: 1;
}

.impact-text__text:not(:only-child) {
  margin-bottom: .2em;
}

.impact-text__content {
  max-width: 750px;
}

.impact-text--center .impact-text__content {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.impact-text--end .impact-text__content {
  margin-inline-start: auto;
}

@media screen and (min-width: 700px) {
  .impact-text {
    --impact-text-spacing: var(--spacing-8);
    grid: auto / auto-flow var(--impact-text-auto-columns);
  }

  .impact-text--center {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 1150px) {
  .impact-text {
    --impact-text-spacing: var(--spacing-12);
  }
}

.logo-list {
  grid: var(--logo-list-grid);
  gap: var(--spacing-2);
  display: grid;
}

.logo-list__item {
  padding: var(--spacing-6);
  border: 1px solid rgb(var(--logo-list-items-border));
  justify-content: center;
  align-items: center;
  display: flex;
}

.logo-list__image {
  width: 100%;
  max-width: var(--logo-list-image-max-width, none);
}

@media screen and (min-width: 700px) {
  .logo-list {
    gap: var(--spacing-6);
  }

  .logo-list__item {
    padding: var(--spacing-11);
  }
}

.media-grid {
  align-items: start;
  gap: calc(var(--grid-gutter) / 2);
  grid: auto-flow dense var(--media-grid-row-height) / repeat(2, minmax(0, 1fr));
  display: grid;
}

.media-grid__item {
  grid-area: span min(2, var(--media-grid-row-span)) / span min(2, var(--media-grid-column-span));
  height: 100%;
}

.media-grid__item > * {
  height: 100%;
}

@media screen and (min-width: 700px) {
  .media-grid {
    --calculated-row-height: max(150px, min(100vw / 5, var(--media-grid-row-height)));
    grid: auto-flow dense var(--calculated-row-height) / repeat(4, minmax(0, 1fr));
  }

  .media-grid__item {
    grid-area: span var(--media-grid-row-span) / span var(--media-grid-column-span);
  }
}

@media screen and (min-width: 1000px) {
  .media-grid {
    gap: var(--grid-gutter);
  }
}

.media-with-text {
  --media-with-text-content-padding: var(--spacing-10) var(--spacing-8);
  gap: var(--media-with-text-gap);
  display: grid;
  overflow: hidden;
}

.media-with-text__item {
  gap: min(var(--media-with-text-gap), var(--grid-gutter));
  grid-template: var(--media-with-text-item-grid-template);
  display: grid;
}

.media-with-text__media {
  grid-area: media;
  position: relative;
  overflow: hidden;
}

.media-with-text__media > * {
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.media-with-text__content {
  padding: var(--media-with-text-content-padding);
  grid-area: content;
  display: grid;
}

.media-with-text__icon {
  max-width: calc(var(--media-with-text-item-icon-width) / 1.5);
  margin-block-end: var(--spacing-1);
  display: inline-block;
}

@media screen and (min-width: 700px) {
  .media-with-text {
    --media-with-text-content-padding: var(--spacing-16);
  }

  .media-with-text__icon {
    max-width: var(--media-with-text-item-icon-width);
    margin-block-end: var(--spacing-2);
  }
}

@media screen and (min-width: 1000px) {
  .media-with-text {
    --media-with-text-content-padding: var(--spacing-12);
  }

  .media-with-text__item {
    gap: var(--media-with-text-gap);
  }
}

@media screen and (min-width: 1150px) {
  .media-with-text {
    --media-with-text-content-padding: var(--spacing-18);
  }
}

@media screen and (min-width: 1400px) {
  .media-with-text {
    --media-with-text-content-padding: var(--spacing-20);
  }
}

.multi-column {
  --multi-column-list-column-max-gap: var(--grid-gutter);
  --multi-column-list-row-min-gap: var(--grid-gutter);
  --multi-column-item-gap: var(--spacing-6);
  grid: var(--multi-column-grid);
  gap: max(var(--multi-column-list-gap), var(--multi-column-list-row-min-gap)) min(var(--multi-column-list-column-max-gap), var(--multi-column-list-gap));
  display: grid;
}

.multi-column__item {
  align-content: start;
  gap: var(--multi-column-item-gap);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

@media screen and (min-width: 700px) {
  .multi-column {
    --multi-column-list-column-max-gap: var(--spacing-16);
    grid: auto / auto-flow 38vw;
  }
}

@media screen and (min-width: 1000px) {
  .multi-column {
    --multi-column-list-row-min-gap: var(--spacing-16);
    grid: auto / repeat(12, minmax(0, 1fr));
  }

  .multi-column__item {
    grid-column: var(--multi-column-item-column-count);
  }
}

@media screen and (min-width: 1400px) {
  .multi-column {
    --multi-column-list-column-max-gap: var(--multi-column-list-gap);
  }
}

.multiple-images-with-text {
  grid-template-columns: var(--multiple-images-with-text-grid-template-columns, none);
  gap: var(--section-stack-spacing-block) var(--multiple-images-with-text-column-gap, 0px);
  max-width: var(--multiple-images-with-text-max-width);
  isolation: isolate;
  justify-content: center;
  place-items: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

.multiple-images-with-text__content-with-nav {
  row-gap: var(--spacing-8);
  text-align: var(--multiple-images-with-text-alignment, center);
  justify-items: var(--multiple-images-with-text-alignment, center);
  justify-self: start;
  width: 100%;
  max-width: 600px;
  display: grid;
}

.multiple-images-with-text__image-list[layout="stacked"], .multiple-images-with-text__content-list {
  place-items: center;
  width: 100%;
  display: grid;
}

:is(.multiple-images-with-text__image-list[layout="stacked"], .multiple-images-with-text__content-list) > * {
  grid-area: 1 / -1;
  width: 100%;
}

.multiple-images-with-text__image-list {
  grid-template: var(--multiple-images-with-text-images-grid-template, none);
  align-items: var(--multiple-images-with-text-images-alignment, center);
  width: 100%;
  display: grid;
}

.multiple-images-with-text__image-list > img {
  width: 100%;
  max-width: var(--multiple-images-with-text-image-max-width, 390px);
  will-change: transform;
  outline: 1px solid #0000;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.multiple-images-with-text__image-list:not([layout="stacked"]) > img:first-child {
  grid-area: 1 / 2 / -1;
  margin-block-start: var(--multiple-images-with-text-main-image-offset, 0px);
}

.multiple-images-with-text__content-list {
  place-items: end start;
}

.multiple-images-with-text__image-list[layout="stacked"] {
  --multiple-images-with-text-image-max-width: 520px;
}

.multiple-images-with-text__image-list[layout="collage"] {
  gap: var(--grid-gutter);
}

@media screen and (max-width: 699px) {
  .multiple-images-with-text__content-with-nav .circle-button {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media screen and (min-width: 700px) {
  .multiple-images-with-text__content-with-nav {
    row-gap: var(--spacing-12);
  }
}

@media screen and (min-width: 1150px) {
  .multiple-images-with-text {
    --multiple-images-with-text-image-max-width: 500px;
  }
}

.newsletter-content {
  gap: var(--spacing-6);
  max-width: 780px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

.newsletter-box {
  padding: var(--spacing-6);
}

.newsletter-content > .form {
  width: 100%;
}

@media screen and (min-width: 700px) {
  .newsletter {
    border-radius: inherit;
    overflow: hidden;
  }

  .newsletter-content {
    gap: var(--spacing-8);
  }

  .newsletter-content__icon {
    width: 48px;
    height: 48px;
  }

  .newsletter-box {
    padding: var(--spacing-12);
  }
}

@media screen and (min-width: 1000px) {
  .newsletter {
    grid-template-columns: .5fr .5fr;
    display: grid;
  }

  .newsletter-content > .form {
    max-width: 490px;
  }

  .newsletter > .newsletter-box {
    justify-content: start;
    align-items: center;
    display: grid;
  }

  .section-full .newsletter-box {
    background: none;
  }
}

@media screen and (min-width: 1150px) {
  .newsletter-box {
    padding: var(--spacing-16);
  }
}

@media screen and (min-width: 1400px) {
  .newsletter-box {
    padding: var(--spacing-20);
  }
}

.newsletter-drawer {
  --drawer-content-max-height: 80vh;
  --drawer-body-padding: 0;
  height: auto;
}

.newsletter-drawer__content {
  padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
}

@media screen and (min-width: 700px) {
  .newsletter-drawer {
    --drawer-content-max-height: calc(100vh - var(--spacing-8));
    width: calc(445px + var(--spacing-8));
  }

  .newsletter-drawer button[is="close-button"] {
    top: var(--spacing-8);
  }

  .newsletter-drawer button[is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: var(--spacing-8);
  }

  .newsletter-drawer button[is="close-button"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: var(--spacing-8);
  }

  .newsletter-drawer__content {
    padding: var(--spacing-10) var(--spacing-12) var(--spacing-12);
  }
}

.not-found {
  --not-found-font-size: 210px;
  padding-block-start: var(--spacing-48);
  padding-block-end: var(--spacing-48);
  position: relative;
  overflow: hidden;
}

.not-found:before {
  content: "404";
  letter-spacing: 0;
  opacity: .1;
  pointer-events: none;
  font-weight: bold;
  font-size: var(--not-found-font-size);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 700px) {
  .not-found {
    --not-found-font-size: 400px;
    padding-block-start: var(--spacing-80);
    padding-block-end: var(--spacing-80);
  }
}

.page {
  gap: var(--spacing-12);
  max-width: var(--page-max-width, 80ch);
  grid-auto-columns: minmax(0, 1fr);
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

.password {
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: 1fr;
  align-items: center;
  padding-block-start: var(--spacing-10);
  padding-block-end: var(--spacing-10);
  display: grid;
  position: relative;
}

.password:after {
  content: "";
  width: calc(100vw - var(--scrollbar-width, 0px));
  pointer-events: none;
  background-image: linear-gradient(#0000 0%, #0003 100%);
  height: 60px;
  margin-inline-start: calc(50% - 50vw);
  position: absolute;
  bottom: 0;
}

.password:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
  left: 0;
}

.password:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
  right: 0;
}

.password__main {
  gap: var(--spacing-10);
  width: 100%;
  max-width: 500px;
  display: grid;
}

.password__social-box {
  gap: var(--spacing-4);
  padding: var(--spacing-5) var(--spacing-8);
  justify-content: center;
  display: grid;
}

.password__aside {
  align-self: end;
  justify-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-8);
  display: grid;
  position: relative;
}

.password__storefront-drawer {
  --drawer-body-padding: var(--spacing-8);
}

.password__storefront-form {
  gap: var(--spacing-6);
  display: grid;
}

@media screen and (min-width: 700px) {
  .password--center {
    justify-items: center;
  }

  .password--end {
    justify-items: end;
  }

  .password__main {
    gap: var(--spacing-12);
  }

  .password__social-box {
    gap: var(--spacing-6);
    padding: var(--spacing-8) var(--spacing-12);
    align-items: center;
    display: flex;
  }

  .password__aside {
    justify-self: end;
    display: flex;
  }

  .password--center .password__aside {
    justify-self: center;
  }

  .password--end .password__aside {
    justify-self: start;
  }

  .password__storefront-drawer {
    --drawer-body-padding: var(--spacing-10);
  }
}

.press {
  --press-padding-inline: var(--spacing-5);
  gap: var(--spacing-6);
  max-width: var(--press-max-width);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--press-padding-inline);
  padding-inline-end: var(--press-padding-inline);
  display: grid;
}

.press__list {
  align-items: flex-start;
  display: grid;
}

.press__list > * {
  grid-area: 1 / -1;
}

.press__list-item {
  gap: var(--spacing-8);
  justify-items: center;
  display: grid;
}

.press__list-item:not(.is-selected) {
  opacity: 0;
  visibility: hidden;
}

.press__list-item .rating {
  margin-block-end: calc(var(--press-padding-inline) * -1);
}

.press__list-item .blockquote:first-child {
  margin-block-start: 0;
}

.press__logo {
  border: 1px solid rgb(var(--press-items-border));
  justify-content: center;
  align-items: center;
  display: flex;
}

.press__logo.bg-custom {
  padding: var(--spacing-6);
}

.press__image {
  width: 100%;
  max-width: var(--press-image-max-width, none);
}

.press__controls {
  gap: var(--spacing-5);
  grid: auto / auto-flow;
  justify-content: center;
  align-items: center;
  display: grid;
}

@media screen and (min-width: 700px) {
  .press {
    --press-padding-inline: var(--spacing-8);
    gap: var(--spacing-10);
  }

  .press__list-item {
    gap: var(--spacing-10);
  }

  .press .rating__stars svg {
    width: 20px;
    height: 20px;
  }
}

.product {
  grid: var(--product-grid);
  gap: var(--container-gutter) var(--spacing-10);
  align-items: start;
  display: grid;
}

@media screen and (min-width: 1150px) {
  .product {
    column-gap: var(--spacing-12);
  }
}

@media screen and (min-width: 1600px) {
  .product {
    column-gap: var(--spacing-24);
  }
}

.product-info {
  --product-info-block-spacing: var(--spacing-6);
}

.product-info > * + * {
  margin-block-start: var(--product-info-block-spacing);
  margin-block-end: var(--product-info-block-spacing);
}

.product-info > * + *:last-child {
  margin-block-end: 0;
}

.product-info__accordion {
  --product-info-block-spacing: 0;
}

.product-info__block-item:where([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"], [data-block-type="rating"], [data-block-type="payment-terms"]) {
  --product-info-block-spacing: var(--spacing-2);
}

.product-info__block-item:where([data-block-type="badges"]) {
  --product-info-block-spacing: var(--spacing-4);
}

.product-info__sku {
  display: block;
}

.product-info__badge-list {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.product-info__price .rating-with-text {
  justify-content: flex-start;
  display: flex;
}

.product-info__price .product-info__badge-list {
  align-self: center;
  margin-inline-start: var(--spacing-1);
}

.product-info__price .rating {
  margin-inline-start: auto;
}

.product-info__offer-list {
  gap: var(--spacing-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  display: grid;
}

.product-form__share {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.product-info__share-buttons {
  display: none;
}

.native-share--disabled .product-info__share-buttons {
  display: block;
}

.product-info__native-share {
  display: none;
}

.native-share--enabled .product-info__native-share {
  align-items: center;
  gap: var(--spacing-2-5);
  opacity: .7;
  transition: opacity .2s ease-in-out;
  display: flex;
}

.native-share--enabled .product-info__native-share:hover {
  opacity: 1;
}

.product-info__block-item:empty {
  display: none;
}

.product-info__block-item:has(.accordion) + .product-info__block-item:has(.accordion) .accordion {
  border-block-start-width: 0;
}

@media screen and (min-width: 700px) {
  .product-info__block-item:where([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"], [data-block-type="rating"], [data-block-type="payment-terms"]) {
    --product-info-block-spacing: var(--spacing-4);
  }

  .product-info__block-item:where([data-block-type="buy-buttons"]) {
    --product-info-block-spacing: var(--spacing-8);
  }

  .product-info__offer-list {
    gap: var(--spacing-4);
  }

  .product-info__complementary-products .horizontal-product-list-carousel:not(.separate) {
    border-width: 1px;
  }

  .product-info__complementary-products .horizontal-product-list-carousel > .horizontal-product-list, .product-info__complementary-products .horizontal-product-list-carousel .horizontal-product {
    border: none;
  }
}

@media screen and (min-width: 1000px) {
  .product-info {
    top: calc(var(--sticky-area-height)  + 20px);
    z-index: 1;
    position: sticky;
  }
}

.product-gallery {
  gap: var(--spacing-5);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}

.product-gallery__ar-wrapper {
  gap: var(--spacing-2-5);
  display: grid;
}

.product-gallery__media-list-wrapper {
  display: grid;
  position: relative;
}

.product-gallery__media-list {
  grid: var(--product-gallery-media-list-grid);
  gap: var(--product-gallery-media-list-gap);
  align-items: start;
  transition: height .1s;
  display: grid;
}

.product-gallery__media {
  position: relative;
}

.product-gallery__media img {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.product-gallery .page-dots--blurred {
  z-index: 1;
  justify-self: center;
  margin-inline-start: var(--spacing-2);
  margin-inline-end: var(--spacing-2);
  position: absolute;
  bottom: var(--spacing-2);
}

.product-gallery__thumbnail-list {
  align-items: end;
  gap: var(--spacing-2);
  grid-auto-columns: 56px;
  grid-auto-flow: column;
  display: grid;
}

.product-gallery__thumbnail {
  position: relative;
}

.product-gallery__thumbnail:after {
  content: "";
  opacity: 0;
  background: currentColor;
  width: 100%;
  height: 2px;
  margin-block-start: 4px;
  transition: opacity .15s;
  display: block;
}

.product-gallery__thumbnail[aria-current="true"]:after {
  opacity: 1;
}

.product-gallery__media-badge {
  width: var(--spacing-5);
  height: var(--spacing-5);
  background: rgb(var(--background-primary));
  border-radius: var(--rounded-button);
  border: 1px solid rgb(var(--text-color) / .12);
  place-content: center;
  display: grid;
  position: absolute;
  bottom: var(--spacing-2-5);
}

.product-gallery__media-badge:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-1);
}

.product-gallery__media-badge:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-1);
}

.product-gallery__zoom {
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  top: var(--spacing-4);
}

.product-gallery__zoom:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--spacing-4);
}

.product-gallery__zoom:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--spacing-4);
}

.product-gallery__zoom > .circle-button {
  width: 2.1875rem;
  height: 2.1875rem;
}

.product-gallery__cursor.is-half-start svg {
  transform: rotate(180deg);
}

[data-shopify-xr-hidden] {
  visibility: hidden;
}

@media screen and (min-width: 700px) {
  .product-gallery__thumbnail-list {
    grid-auto-columns: 64px;
  }
}

@media screen and (max-width: 999px) {
  .product-gallery__thumbnail-list-wrapper {
    --scroll-shadow-size: 0px;
  }

  .product-gallery--mobile-dots .product-gallery__thumbnail-list-wrapper {
    display: none;
  }

  .product-gallery:has([data-media-type*="video"].is-selected) .product-gallery__zoom {
    opacity: 0;
    visibility: hidden;
    transform: scale(.8);
  }

  .product-gallery--mobile-expanded .product-gallery__media, .product-gallery--mobile-expanded .product-gallery__media > * {
    border-radius: 0;
  }

  .product-gallery--mobile-expanded .product-gallery__zoom:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .product-gallery--mobile-expanded .product-gallery__zoom:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery {
    gap: var(--spacing-6) var(--spacing-12);
  }

  .product-gallery__thumbnail-list-wrapper {
    align-items: center;
    gap: var(--spacing-4);
    grid-auto-flow: column;
    display: grid;
    position: relative;
  }

  .product-gallery__thumbnail-list {
    gap: var(--spacing-4);
  }

  .product-gallery__thumbnail-list-wrapper > button {
    z-index: 1;
    opacity: 0;
    margin-top: -3px;
    transition: opacity .1s, transform .1s;
    position: absolute;
    transform: scale(.6);
  }

  .product-gallery__thumbnail-list-wrapper > button:first-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 8px;
  }

  .product-gallery__thumbnail-list-wrapper > button:first-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 8px;
  }

  .product-gallery__thumbnail-list-wrapper > button:last-child:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 8px;
  }

  .product-gallery__thumbnail-list-wrapper > button:last-child:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 8px;
  }

  .product-gallery__thumbnail-list-wrapper > button[disabled] {
    opacity: 0;
  }

  .product-gallery__thumbnail-list-wrapper:hover > button:not([disabled]) {
    opacity: 1;
    transform: scale(1);
  }

  .product-gallery--desktop-grid .product-gallery__thumbnail-list-wrapper {
    display: none;
  }

  .product-gallery__media--expand {
    grid-column: span 2;
  }

  .product-gallery__zoom {
    opacity: 0;
    position: absolute;
    top: auto;
    bottom: var(--spacing-6);
    transform: scale(.8);
  }

  .product-gallery__zoom:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: var(--spacing-6);
  }

  .product-gallery__zoom:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: var(--spacing-6);
  }

  .product-gallery__zoom svg {
    width: 17px;
    height: 17px;
  }

  .product-gallery__zoom > .circle-button {
    width: 3.5rem;
    height: 3.5rem;
  }

  .product-gallery--desktop-grid .product-gallery__media:hover .product-gallery__zoom {
    opacity: 1;
    transform: scale(1);
  }

  .product-gallery--desktop-carousel .product-gallery__zoom {
    opacity: 1;
    visibility: visible;
  }

  .product-gallery--desktop-carousel:has([data-media-type*="video"].is-selected) .product-gallery__zoom {
    opacity: 0;
    visibility: hidden;
  }

  [data-shopify-xr-hidden] {
    display: none;
  }
}

@media screen and (min-width: 1150px) {
  .product-gallery--desktop-thumbnails-left {
    grid: auto / auto-flow auto minmax(0, 1fr);
    align-items: start;
  }

  .product-gallery--desktop-thumbnails-left .product-gallery__thumbnail-list-wrapper {
    order: -1;
    grid-auto-flow: row;
    justify-items: center;
    overflow: auto;
  }

  .product-gallery--desktop-thumbnails-left .product-gallery__thumbnail-list {
    gap: var(--spacing-2-5);
    grid-auto-flow: row;
    max-height: 600px;
    overflow: auto;
  }

  .product-gallery--desktop-thumbnails-left .product-gallery__thumbnail-list-wrapper > button {
    transform: rotate(90deg);
  }
}

.revealed-image {
  z-index: -1;
  display: inline;
  position: relative;
}

.revealed-image__scroll-tracker {
  height: 100%;
  position: absolute;
  top: 0;
}

.revealed-image__scroller {
  height: 180vh;
  height: 180lvh;
  display: block;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.revealed-image__wrapper {
  height: 100vh;
  height: 100lvh;
  top: calc(var(--sticky-area-height) / 2);
  grid-auto-rows: minmax(0, 1fr);
  place-items: center;
  display: grid;
  position: relative;
}

.revealed-image__wrapper > * {
  grid-area: 1 / -1;
}

.revealed-image__wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.revealed-image__wrapper > .revealed-image__image-clipper, .revealed-image__wrapper > .revealed-image__content--inside {
  clip-path: inset(37% 37% 41%);
  width: 100%;
  height: 100%;
}

.revealed-image__content {
  width: 100%;
  height: 100%;
  padding-inline: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  text-align: center;
  z-index: 1;
  opacity: 0;
  place-content: center;
  display: grid;
}

.revealed-image__content-inner {
  max-width: 1300px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.rich-text {
  display: flex;
}

.rich-text__wrapper {
  max-width: var(--rich-text-max-width);
}

.rich-text .prose, .split-rich-text .prose {
  align-items: start;
  display: grid;
}

.rich-text .image-icon {
  margin-block-end: 0 !important;
}

.split-rich-text {
  display: none;
}

@media screen and (min-width: 1000px) {
  .split-rich-text {
    gap: var(--spacing-24);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

@media screen and (min-width: 1150px) {
  .split-rich-text {
    gap: var(--spacing-32);
  }
}

.scrolling-text {
  overflow: hidden;
}

.scrolling-text__wrapper {
  display: grid;
}

.scrolling-text__text {
  line-height: normal;
  font-size: var(--scrolling-text-font-size);
  padding-inline-start: min(1em, 2rem);
  padding-inline-end: min(1em, 2rem);
}

@supports (overflow: clip) {
  .scrolling-text {
    overflow: clip visible;
  }

  .scrolling-text__text {
    line-height: 1;
  }
}

@media screen and (min-width: 700px) {
  .scrolling-text__text {
    padding-inline-start: min(1.5em, 4rem);
    padding-inline-end: min(1.5em, 4rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .scrolling-text__wrapper {
    grid: auto / auto-flow max-content;
  }

  .scrolling-text--auto .scrolling-text__text {
    animation: translateFull var(--marquee-animation-duration, 0s) linear infinite;
  }

  .scrolling-text--scroll .scrolling-text__wrapper {
    min-width: min-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrolling-text {
    --scrolling-text-font-size: var(--text-h0);
  }

  .scrolling-text__wrapper {
    text-align: center;
    justify-content: center;
  }
}

.search-input {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
  border-bottom-width: 2px;
  padding-block-end: var(--spacing-2-5);
  transition: border-bottom-color .1s;
  display: flex;
}

.search-input:focus-within {
  border-bottom-color: rgb(var(--text-color));
}

.search-input > input {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  font-size: var(--text-h5);
  background: none;
  border-radius: 0;
  outline: none;
  flex-grow: 1;
  font-weight: bolder;
}

.search-input > input::placeholder {
  color: rgb(var(--text-color) / .5);
}

.search-input > input[type="search"]::-webkit-search-decoration {
  display: none;
}

.search-input > input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.search-input > [type="reset"] {
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity .2s;
}

.search-input > input:not(:placeholder-shown) ~ [type="reset"] {
  opacity: 1;
}

@media screen and (min-width: 700px) {
  .search-input {
    padding-block-end: var(--spacing-3);
  }

  .search-input > input {
    font-size: var(--text-h4);
  }

  .search-input > [type="reset"] {
    font-size: var(--text-base);
  }
}

.search-drawer {
  --drawer-body-padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  --drawer-content-max-height: 100%;
  height: 100%;
}

.search-drawer::part(content) {
  height: max-content;
  overflow: auto;
}

.search-drawer::part(outside-close-button), .search-drawer::part(close-button) {
  display: none;
}

@media screen and (min-width: 700px) {
  .search-drawer {
    --drawer-body-padding: 2rem 2.5rem 2.5rem 2.5rem;
  }

  .search-drawer::part(content) {
    height: 100%;
  }
}

.predictive-search {
  min-width: 0;
  display: block;
}

.predictive-search__tabs {
  gap: var(--spacing-4);
  display: grid;
}

.predictive-search__tabs::part(tab-list) {
  white-space: nowrap;
  scrollbar-width: none;
  gap: var(--spacing-4);
  margin-inline: calc(-1 * var(--container-outer-width));
  padding-inline: var(--container-outer-width);
  scroll-padding-inline: var(--container-outer-width);
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  display: grid;
  overflow: auto hidden;
}

.predictive-search__tab-item {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.predictive-search__tab-item [aria-selected] {
  transition: opacity .2s ease-in-out;
}

.predictive-search__tab-item [aria-selected="false"]:not(:hover) {
  opacity: .3;
}

.predictive-search-result {
  align-items: center;
  gap: var(--spacing-5);
  display: flex;
}

.predictive-search-result > img {
  flex-shrink: 0;
  width: 5rem;
}

@media screen and (min-width: 700px) {
  .predictive-search__tabs {
    gap: var(--spacing-6);
  }

  .predictive-search__tabs::part(tab-list) {
    gap: var(--spacing-5);
  }

  .predictive-search-result {
    gap: var(--spacing-6);
  }

  .predictive-search-result > img {
    width: 6rem;
  }
}

@media screen and (min-width: 1000px) {
  .search-drawer--full {
    --search-full-gap: 40px;
    width: 100%;
  }

  .search-drawer--full .search-input {
    padding-block-end: var(--spacing-6);
  }

  .search-drawer--full .predictive-search__tabs {
    gap: var(--spacing-8);
  }

  .search-drawer--full .predictive-search__tabs::part(tab-list), .search-drawer--full .predictive-search__tabs::part(tab-panels), .search-drawer--full .predictive-search__skeleton-full-width {
    grid-template-columns: repeat(var(--predictive-search-column-count, 4), minmax(var(--predictive-search-column-width, 0px), 1fr));
    gap: 0 var(--search-full-gap);
    display: grid;
  }

  .search-drawer--full .predictive-search__tab-content {
    display: grid !important;
  }

  .search-drawer--full .predictive-search__tab-item {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .search-drawer--full .predictive-search__tab-content {
    align-content: start;
  }

  .search-drawer--full .predictive-search__tab-content ~ .predictive-search__tab-content:before {
    content: "";
    margin-left: calc(-1 * var(--search-full-gap) / 2);
    background: rgb(var(--text-color) / .12);
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
  }

  .search-drawer--full [role="tab"] {
    pointer-events: none;
    opacity: 1 !important;
  }
}

@media screen and (min-width: 1400px) {
  .search-drawer--full {
    --search-full-gap: 96px;
  }
}

.main-search-form .search-input {
  width: 260px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

@media screen and (min-width: 700px) {
  .main-search-form .search-input {
    width: 490px;
  }
}

.shop-the-look {
  --shop-the-look-gap: var(--spacing-5);
  --shop-the-look-grid: auto-flow / auto;
  grid: var(--shop-the-look-grid);
  align-items: flex-start;
  gap: var(--shop-the-look-gap);
  display: grid;
}

.shop-the-look__dot {
  --dot-size: 10px;
  top: calc(var(--shop-the-look-dot-top)  - (var(--dot-size) / 2));
  left: calc(var(--shop-the-look-dot-left)  - (var(--dot-size) / 2));
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--rounded-full);
  background-color: rgb(var(--shop-the-look-dot-background));
  transition: transform .2s ease-in-out;
  position: absolute;
}

.shop-the-look__dot:after {
  content: "";
  top: calc(50% + (var(--spacing-6) * -1));
  left: calc(50% + (var(--spacing-6) * -1));
  width: var(--spacing-12);
  height: var(--spacing-12);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--shop-the-look-dot-background) / 0), rgb(var(--shop-the-look-dot-background) / .3));
  border-radius: var(--rounded-full);
  animation: 2s ease-in-out infinite alternate ping;
  position: absolute;
}

.shop-the-look__dot[aria-current="true"] {
  transform: scale(1.3);
}

.shop-the-look__products {
  display: grid;
}

.shop-the-look__carousel > .horizontal-product-list {
  grid: var(--shop-the-look-carousel-grid);
  display: grid;
}

@media screen and (pointer: fine) {
  .shop-the-look__dot:hover {
    transform: scale(1.3);
  }
}

@media screen and (min-width: 700px) {
  .section-boxed .shop-the-look {
    --shop-the-look-gap: var(--calculated-section-spacing-inline);
    --shop-the-look-grid: auto / 55% minmax(0, 1fr);
  }

  .shop-the-look {
    --shop-the-look-gap: var(--spacing-18);
    --shop-the-look-grid: auto / minmax(0, 1fr) 40%;
  }

  .shop-the-look__products {
    justify-items: flex-end;
    gap: var(--spacing-8);
    display: grid;
  }

  .shop-the-look__carousel {
    width: 100%;
    display: grid;
  }

  .shop-the-look__carousel > * {
    grid-area: 1 / -1;
  }

  .shop-the-look__controls {
    gap: var(--spacing-4);
    grid: auto / auto-flow;
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: grid;
  }
}

@media screen and (min-width: 1000px) {
  .section-boxed .shop-the-look__carousel {
    --shop-the-look-carousel-width: 100%;
  }

  .shop-the-look {
    --shop-the-look-gap: 0;
    --shop-the-look-grid: auto / repeat(2, minmax(0, 1fr));
  }

  .shop-the-look__products {
    justify-items: center;
  }

  .shop-the-look__carousel {
    --shop-the-look-carousel-width: 60%;
    width: var(--shop-the-look-carousel-width);
  }
}

@media screen and (min-width: 1150px) {
  .section-boxed .shop-the-look {
    --shop-the-look-grid: auto / repeat(2, 1fr);
  }

  .section-boxed .shop-the-look__carousel {
    --shop-the-look-carousel-width: 60%;
  }
}

.slideshow {
  background: var(--slideshow-background);
}

.slideshow, .slideshow__carousel {
  color: rgb(var(--text-color));
  display: block;
  position: relative;
}

.slideshow__slide {
  position: relative;
}

.slideshow__slide:not(.is-selected) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.slideshow__slide-background {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.slideshow__slide.is-selected video-media ~ * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.slideshow__slide.is-selected .content-over-media:before {
  background: rgb(var(--content-over-media-overlay)) !important;
}

.slideshow__controls {
  z-index: 1;
  position: absolute;
  bottom: var(--container-gutter);
}

.slideshow__controls:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.slideshow__controls:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.slideshow__controls .circle-button--fill {
  background: rgb(var(--slideshow-controls-background));
  color: rgb(var(--slideshow-controls-color));
}

.slideshow__controls .circle-button--bordered {
  color: rgb(var(--slideshow-controls-color));
}

.slideshow__controls .numbered-dots > * {
  color: rgb(var(--slideshow-controls-color) / .7);
  border-color: rgb(var(--slideshow-controls-color) / .3);
}

.slideshow__controls .numbered-dots > [aria-current="true"] {
  color: rgb(var(--slideshow-controls-color));
}

.slideshow__controls .stretching-dots > * {
  background: rgb(var(--slideshow-controls-color));
}

.slideshow__cursor.is-half-start .icon-chevron-right {
  transform: rotate(180deg);
}

.slideshow__cursor-ring {
  --radius: 27;
  --circumference: calc(2px * (22 / 7) * var(--radius));
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow__cursor-ring circle {
  stroke-opacity: 1;
  stroke-dashoffset: 0;
  stroke-dasharray: calc(var(--circumference) * var(--progress, 0)), var(--circumference);
  transform: rotate(-90deg);
}

.slideshow .content-over-media--auto svg {
  height: min(700px, 50vmax);
}

@media screen and (max-width: 699px) {
  .slideshow__controls .circle-button {
    width: var(--spacing-10);
    height: var(--spacing-10);
  }

  .slideshow--multiple-slides :is(.place-self-end-start, .place-self-end-center) {
    padding-block-end: 2.5rem;
  }
}

.slideshow--boxed {
  --content-over-media-gap: var(--section-inner-spacing-inline);
  background: var(--slideshow-background);
  padding-block-start: var(--section-inner-max-spacing-block);
  padding-block-end: var(--section-inner-max-spacing-block);
  padding-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  padding-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.slideshow--boxed .content-over-media > :not(img, svg) {
  padding-block-start: 0 !important;
}

.shopify-section:first-child .slideshow--boxed[allow-transparent-header] {
  padding-block-start: max(var(--section-inner-max-spacing-block), var(--header-height));
}

@media screen and (min-width: 1400px) {
  .slideshow__controls {
    bottom: var(--spacing-14);
  }

  .slideshow__controls:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: var(--spacing-14);
  }

  .slideshow__controls:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: var(--spacing-14);
  }
}

.shopify-payment-button__button {
  height: auto !important;
}

.shopify-payment-button__button[disabled] {
  opacity: 1 !important;
}

.shopify-payment-button__button--branded {
  border-radius: var(--rounded-button) !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.shopify-payment-button__button--unbranded {
  --button-outline-color: var(--button-background, --button-background-primary);
  padding: var(--shopify-payment-button-padding, var(--spacing-4) var(--spacing-8)) !important;
  -webkit-appearance: none !important;
  border-radius: var(--rounded-button) !important;
  background: rgb(var(--button-background, var(--button-background-primary)) / var(--button-background-opacity, 1)) !important;
  color: rgb(var(--button-text-color, var(--button-text-primary))) !important;
  font-family: var(--text-font-family) !important;
  font-style: var(--text-font-style) !important;
  font-weight: bolder !important;
  font-size: var(--shopify-payment-button-font-size, var(--text-base)) !important;
  text-align: center !important;
  line-height: inherit !important;
  letter-spacing: var(--text-letter-spacing) !important;
  text-decoration: none !important;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out !important;
  display: inline-block !important;
  position: relative !important;
  box-shadow: inset 0 0 0 2px #0000 !important;
}

shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 54px;
  --shopify-accelerated-checkout-button-border-radius: var(--rounded-button);
  --shopify-accelerated-checkout-button-box-shadow: none;
}

@media screen and (min-width: 700px) {
  .shopify-payment-button__button--unbranded {
    padding: var(--shopify-payment-button-padding, 1.075rem var(--spacing-10)) !important;
  }

  shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 60px;
  }
}

.shopify-policy__container {
  gap: var(--spacing-12) !important;
  max-width: none !important;
  padding: var(--spacing-14) 0 !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  margin-inline-start: max(var(--container-gutter), 50% - 80ch / 2) !important;
  margin-inline-end: max(var(--container-gutter), 50% - 80ch / 2) !important;
  display: grid !important;
}

.shopify-challenge__container, .shopify-email-marketing-confirmation__container {
  padding: var(--spacing-14) 0 !important;
}

@media screen and (min-width: 700px) {
  .shopify-policy__container, .shopify-challenge__container, .shopify-email-marketing-confirmation__container {
    padding-block-start: var(--spacing-16) !important;
    padding-block-end: var(--spacing-16) !important;
  }
}

.tabs {
  max-width: var(--tabs-max-width);
  margin-inline-start: auto;
  margin-inline-end: auto;
  display: grid;
}

@media screen and (max-width: 699px) {
  .tabs-inner {
    display: none;
  }
}

@media screen and (min-width: 700px) {
  .tabs-inner {
    gap: var(--spacing-10);
    display: grid;
  }

  .tabs-inner::part(tab-list) {
    box-shadow: inset 0 -2px rgb(var(--text-color) / .1);
    grid: auto / auto-flow 1fr;
    align-items: end;
    display: grid;
    position: relative;
  }

  .tabs-inner::part(tab-list):after {
    content: "";
    height: 2px;
    width: calc(100% / var(--item-count));
    background: rgb(var(--text-color));
    transform: translateX(calc(var(--selected-index) * var(--transform-logical-flip) * 100%));
    transition: transform .3s;
    position: absolute;
    bottom: 0;
  }

  .tabs-inner::part(tab-list):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 0;
  }

  .tabs-inner::part(tab-list):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 0;
  }

  .tabs-nav__button {
    padding-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
    transition: color .2s ease-in-out;
  }

  .tabs-nav__button[aria-selected="true"] {
    color: rgb(var(--text-color));
  }
}

.testimonial-list {
  grid: var(--testimonial-list-grid);
  gap: var(--grid-gutter);
  align-items: start;
  display: grid;
}

.testimonial {
  align-content: start;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
}

.testimonial__image {
  width: var(--spacing-10);
}

@media screen and (min-width: 700px) {
  .testimonial {
    gap: var(--spacing-5);
    padding: var(--spacing-8);
  }

  .testimonial__image {
    width: var(--spacing-14);
  }
}

@media screen and (min-width: 1150px) {
  .testimonial {
    scroll-snap-align: none;
  }
}

@media screen and (min-width: 1400px) {
  .testimonial {
    gap: var(--spacing-6);
    padding: var(--spacing-10);
  }
}

.text-with-icons {
  gap: var(--spacing-8);
  text-align: var(--text-with-icons-text-align);
  justify-content: var(--text-with-icons-justify);
  display: grid;
}

.text-with-icons__list {
  grid: auto / var(--text-with-icons-template);
  row-gap: var(--spacing-6);
  align-items: start;
  min-width: 0;
  display: grid;
}

.text-with-icons__item {
  gap: var(--text-with-icons-gap);
  justify-items: var(--text-with-icons-justify);
  padding-inline-start: var(--spacing-6);
  padding-inline-end: var(--spacing-6);
  display: grid;
}

@media screen and (min-width: 1000px) {
  :not(.is-scrollable) .text-with-icons__list {
    gap: var(--spacing-6);
  }

  :not(.is-scrollable) .text-with-icons__item {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

@media screen and (min-width: 1400px) {
  :not(.is-scrollable) .text-with-icons__list {
    gap: var(--spacing-10);
  }
}

.timeline {
  gap: var(--spacing-8);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.timeline__slider {
  align-items: start;
  display: grid;
}

.timeline__slider > * {
  grid-area: 1 / -1;
}

.timeline__slide {
  gap: var(--spacing-6);
  text-align: center;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.timeline__image {
  width: 100%;
  max-width: 410px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  position: relative;
}

.timeline__controls {
  --timeline-dot-size: var(--spacing-4);
  --timeline-dot-padding-inline-end: var(--spacing-4);
  padding-block-start: calc((var(--timeline-dot-size) / 2));
}

.timeline__nav {
  grid: auto / repeat(var(--timeline-nav-item-count), minmax(0, 1fr));
  width: max-content;
  min-width: 100%;
  display: grid;
}

.timeline__nav-bar {
  background-color: rgb(var(--text-color) / .12);
  width: 100%;
  height: 2px;
  position: absolute;
  top: -1px;
}

.timeline__nav-bar:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.timeline__nav-bar:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.timeline__nav-item {
  gap: var(--spacing-3);
  align-content: flex-start;
  min-width: 100px;
  max-width: 200px;
  padding-inline-end: var(--timeline-dot-padding-inline-end);
  display: grid;
  position: relative;
}

.timeline__nav-item:before {
  content: "";
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: var(--rounded-full);
  background-color: rgb(var(--background));
  border-width: 2px;
  margin-block-start: calc((var(--timeline-dot-size) / 2) * -1);
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}

.timeline__nav-item[aria-current="true"]:before {
  border-color: rgb(var(--text-color));
  background-color: rgb(var(--text-color));
}

.timeline__nav-label {
  opacity: .5;
  transition: opacity .2s ease-in-out;
}

.timeline__nav-item[aria-current="true"] .timeline__nav-label {
  opacity: 1;
}

@media screen and (min-width: 700px) {
  .timeline {
    gap: var(--spacing-14);
  }

  .timeline__slide {
    gap: var(--spacing-10);
  }

  .timeline__slide > .prose {
    padding-inline-start: var(--spacing-14);
    padding-inline-end: var(--spacing-14);
  }

  .timeline__content {
    gap: var(--spacing-6);
  }

  .timeline__controls {
    --timeline-dot-size: var(--spacing-5);
    --timeline-dot-padding-inline-end: var(--spacing-5);
  }

  .timeline__nav-item {
    min-width: 160px;
  }
}

@media screen and (min-width: 1000px) {
  .timeline__slide {
    text-align: start;
    grid: auto / repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .timeline__slide > .timeline__image-wrapper {
    padding-inline-end: 16.5%;
  }

  .timeline__slide > .prose {
    z-index: 1;
    padding-inline-start: 0;
    padding-inline-end: 0;
    position: relative;
  }

  .timeline__image {
    max-width: initial;
  }

  .timeline__image-wrapper {
    position: relative;
  }

  .timeline__controls {
    align-items: flex-start;
    gap: var(--spacing-10);
    display: flex;
  }

  .timeline__controls.scroll-area {
    overflow: visible;
  }

  .timeline__buttons {
    gap: var(--spacing-4);
    margin-block-start: calc(var(--spacing-6) * -1);
    display: flex;
  }

  .timeline__nav {
    width: 100%;
    min-width: auto;
    padding-block-start: 0;
  }

  .timeline__nav-item {
    min-width: auto;
  }
}

@media screen and (min-width: 1150px) {
  .timeline__slide > .prose {
    padding-inline-end: 16.5%;
  }

  .timeline__content {
    gap: var(--spacing-8);
  }
}

@media screen and (min-width: 1400px) {
  .timeline__slide > .prose {
    max-width: 85%;
  }
}

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

:is(.sr-only[type="checkbox"]:focus-visible + label, .sr-only[type="radio"]:focus-visible + label) {
  outline: 2px solid highlight;
  outline: 2px solid -webkit-focus-ring-color;
}

.skip-to-content:focus-visible {
  z-index: 9999;
  clip: auto;
  color: #fff;
  background: #000;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-weight: bold;
  overflow: auto;
}

.tap-area {
  position: relative;
}

.tap-area:before {
  content: "";
  inset: calc(-1 * var(--spacing-2-5));
  position: absolute;
}

@media print {
  .print\:hidden {
    display: none;
  }
}

@keyframes translateFull {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% * var(--transform-logical-flip)));
  }
}

@keyframes ping {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(.8);
  }
}

@media screen and (pointer: fine) {
  .zoom-image--enabled .zoom-image {
    transform-origin: center;
    transition: transform 1.5s cubic-bezier(.22, 1, .36, 1);
  }

  .zoom-image--enabled .group:hover .zoom-image {
    transform: scale(1.06);
  }
}

.reveal {
  opacity: 0;
}

.reveal-invisible {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  [reveal-js], [reveal-on-scroll="true"] {
    opacity: 0;
  }
}

@media (scripting: none) {
  [reveal-js], [reveal-on-scroll="true"] {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  reveal-items {
    opacity: var(--stagger-products-reveal-opacity);
  }
}

@media (scripting: none) {
  reveal-items {
    opacity: 1;
  }
}

.border {
  border-width: 1px;
}

.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}

.border-y {
  border-block-start-width: 1px;
  border-block-end-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-s {
  border-block-start-width: 1px;
}

.border-e {
  border-block-end-width: 1px;
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  border-inline-start-width: 1px;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-block-start-width: 1px;
}

.ring {
  box-shadow: 0 0 0 1px rgb(var(--text-color) / .12);
}

.ring-current {
  box-shadow: 0 0 0 1px rgb(var(--text-color));
}

.ring-inset {
  box-shadow: inset 0 0 0 1px rgb(var(--text-color) / .12);
}

.rounded-xs {
  border-radius: var(--rounded-xs);
}

.rounded-sm {
  border-radius: var(--rounded-sm);
}

.rounded {
  border-radius: var(--rounded);
}

.rounded-lg {
  border-radius: var(--rounded-lg);
}

.rounded-full {
  border-radius: var(--rounded-full);
}

.text-custom {
  color: rgb(var(--text-color));
}

.text-accent {
  color: rgb(var(--accent));
}

.text-success {
  color: rgb(var(--success-text));
}

.text-warning {
  color: rgb(var(--warning-text));
}

.text-error {
  color: rgb(var(--error-text));
}

.text-subdued {
  color: rgb(var(--text-color) / .7);
}

.text-on-sale {
  color: rgb(var(--on-sale-text));
}

.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.text-gradient {
  background-image: var(--gradient);
  color: #0000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-stroke.text-gradient {
  color: rgb(var(--background));
  -webkit-text-stroke-color: transparent;
  -webkit-text-fill-color: unset;
}

.bg-custom {
  background: rgb(var(--background));
}

.bg-gradient {
  background-image: var(--gradient);
}

.bg-text {
  background: rgb(var(--text-color));
}

.bg-error {
  background: rgb(var(--error-background));
}

.bg-success {
  background: rgb(var(--success-background));
}

.bg-warning {
  background: rgb(var(--warning-background));
}

.bg-secondary {
  background: rgb(var(--text-color) / .05);
}

.opacity-0 {
  opacity: 0;
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(var(--backdrop-blur, 0px));
  backdrop-filter: blur(var(--backdrop-blur, 0px));
}

.filter-invert {
  filter: invert();
}

.shadow-sm {
  filter: drop-shadow(var(--shadow-sm));
}

.shadow {
  filter: drop-shadow(var(--shadow));
}

.shadow-md {
  filter: drop-shadow(var(--shadow-md));
}

.shadow-block {
  box-shadow: var(--shadow-block);
}

.cross-fade {
  display: block;
}

.cross-fade > * {
  transition: opacity .2s ease-in-out;
}

.cross-fade > :last-child {
  display: none;
}

@media screen and (pointer: fine) {
  .cross-fade > :last-child {
    opacity: 0;
    display: block;
  }

  .cross-fade:hover > :first-child {
    opacity: 0;
  }

  .cross-fade:hover > :last-child {
    opacity: 1;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.scroll-area {
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  overflow: auto hidden;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

.snap-start {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-center {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

:not(.is-scrollable) ~ .peer-not-scrollable\:hidden, .hidden, .empty\:hidden:empty {
  display: none;
}

.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

.contents {
  display: contents;
}

@media screen and (min-width: 700px) {
  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:contents {
    display: contents;
  }
}

@media screen and (min-width: 1000px) {
  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:contents {
    display: contents;
  }
}

@media screen and (min-width: 1150px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:contents {
    display: contents;
  }
}

@media screen and (min-width: 1400px) {
  .xl\:hidden {
    display: none;
  }

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:table-cell {
    display: table-cell;
  }

  .xl\:contents {
    display: contents;
  }
}

@media screen and (min-width: 1600px) {
  .\32 xl\:hidden {
    display: none;
  }

  .\32 xl\:block {
    display: block;
  }

  .\32 xl\:flex {
    display: flex;
  }

  .\32 xl\:grid {
    display: grid;
  }

  .\32 xl\:table-cell {
    display: table-cell;
  }

  .\32 xl\:contents {
    display: contents;
  }
}

@media screen and (max-width: 699px) {
  .sm-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 999px) {
  .md-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1149px) {
  .lg-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1399px) {
  .xl-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1599px) {
  .\32 xl-max\:hidden {
    display: none;
  }
}

@media screen and (pointer: fine) {
  .pointer-fine\:hidden {
    display: none;
  }

  .pointer-fine\:block {
    display: block;
  }
}

@media not screen and (pointer: fine) {
  .pointer-coarse\:hidden {
    display: none;
  }

  .pointer-coarse\:block {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:hidden {
    display: none;
  }

  .motion-reduce\:block {
    display: block;
  }
}

.invisible {
  visibility: hidden;
}

.relative {
  position: relative;
}

.wrap {
  flex-wrap: wrap;
}

.grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: safe center;
}

.justify-end {
  justify-content: end;
}

.justify-between {
  justify-content: space-between;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: end;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: safe center;
}

.justify-items-end {
  justify-items: end;
}

.align-start {
  align-items: start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

.align-self-start {
  align-self: start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: end;
}

.align-self-stretch {
  align-self: stretch;
}

.place-self-start {
  place-self: start;
}

.place-self-start-center {
  place-self: start center;
}

.place-self-start-end {
  place-self: start end;
}

.place-self-center {
  place-self: center;
}

.place-self-center-start {
  place-self: center start;
}

.place-self-center-end {
  place-self: center end;
}

.place-self-end {
  place-self: end;
}

.place-self-end-start {
  place-self: end start;
}

.place-self-end-center {
  place-self: end center;
}

@media screen and (min-width: 700px) {
  .sm\:text-start {
    text-align: start;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:text-end {
    text-align: end;
  }

  .sm\:place-self-start {
    place-self: start;
  }

  .sm\:place-self-start-center {
    place-self: start center;
  }

  .sm\:place-self-start-end {
    place-self: start end;
  }

  .sm\:place-self-center {
    place-self: center;
  }

  .sm\:place-self-center-start {
    place-self: center start;
  }

  .sm\:place-self-center-end {
    place-self: center end;
  }

  .sm\:place-self-end {
    place-self: end;
  }

  .sm\:place-self-end-start {
    place-self: end start;
  }

  .sm\:place-self-end-center {
    place-self: end center;
  }

  .sm\:justify-items-center {
    justify-items: safe center;
  }
}

.align-top {
  vertical-align: top;
}

.align-center {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-0 {
  width: 0;
}

.min-w-full {
  min-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.mx-auto {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.my-auto {
  margin-block-start: auto;
  margin-block-end: auto;
}

.aspect-short {
  aspect-ratio: 4 / 3;
}

.aspect-tall {
  aspect-ratio: 2 / 3;
}

.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-video iframe {
  width: 100%;
  height: 100%;
}

.gap-0\.5 {
  gap: var(--spacing-0-5);
}

.gap-1 {
  gap: var(--spacing-1);
}

.gap-1\.5 {
  gap: var(--spacing-1-5);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-2\.5 {
  gap: var(--spacing-2-5);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-3\.5 {
  gap: var(--spacing-3-5);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-4\.5 {
  gap: var(--spacing-4-5);
}

.gap-5 {
  gap: var(--spacing-5);
}

.gap-5\.5 {
  gap: var(--spacing-5-5);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-8 {
  gap: var(--spacing-8);
}

.gap-10 {
  gap: var(--spacing-10);
}

.gap-12 {
  gap: var(--spacing-12);
}

@media screen and (min-width: 700px) {
  .sm\:gap-0\.5 {
    gap: var(--spacing-0-5);
  }

  .sm\:gap-1 {
    gap: var(--spacing-1);
  }

  .sm\:gap-1\.5 {
    gap: var(--spacing-1-5);
  }

  .sm\:gap-2 {
    gap: var(--spacing-2);
  }

  .sm\:gap-2\.5 {
    gap: var(--spacing-2-5);
  }

  .sm\:gap-3 {
    gap: var(--spacing-3);
  }

  .sm\:gap-3\.5 {
    gap: var(--spacing-3-5);
  }

  .sm\:gap-4 {
    gap: var(--spacing-4);
  }

  .sm\:gap-4\.5 {
    gap: var(--spacing-4-5);
  }

  .sm\:gap-5 {
    gap: var(--spacing-5);
  }

  .sm\:gap-5\.5 {
    gap: var(--spacing-5-5);
  }

  .sm\:gap-6 {
    gap: var(--spacing-6);
  }

  .sm\:gap-8 {
    gap: var(--spacing-8);
  }

  .sm\:gap-10 {
    gap: var(--spacing-10);
  }

  .sm\:gap-12 {
    gap: var(--spacing-12);
  }
}

.overflow-hidden {
  overflow: hidden;
}

.object-fill {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.object-fill:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: 0;
}

.object-fill:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: 0;
}

.object-fill, .object-fill-safe, .object-cover {
  object-fit: cover;
  object-position: center;
}

.object-contain {
  object-fit: contain;
  object-position: center;
}

.placeholder {
  background: rgb(var(--text-primary) / .3);
  fill: rgb(var(--text-primary) / .7);
  color: rgb(var(--text-primary) / .7);
  display: block;
}

.bold {
  font-weight: bold;
}

.text-xxs {
  font-size: 10px;
  line-height: 1.7;
}

.text-xs {
  font-size: var(--text-xs);
  line-height: 1.7;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.text-base {
  font-size: var(--text-base);
  line-height: 1.6;
}

.text-lg {
  font-size: var(--text-lg);
  line-height: 1.6;
}

.subheading {
  font-weight: bold;
}

.heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  overflow-wrap: anywhere;
}

.h0 {
  font-size: var(--text-h0);
  line-height: 1;
}

.h1, .prose h1:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h1);
  line-height: 1.1;
}

.h2, .prose h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h2);
  line-height: 1.1;
}

.h3, .prose h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h3);
  line-height: 1.2;
}

.h4, .prose h4:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h4);
  line-height: 1.3;
}

.h5, .prose h5:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h5);
  line-height: 1.4;
}

.h6, .prose h6:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h6);
  line-height: 1.4;
}

@media screen and (min-width: 700px) {
  .sm\:text-xxs {
    font-size: 10px;
    line-height: 1.7;
  }

  .sm\:text-xs {
    font-size: var(--text-xs);
    line-height: 1.7;
  }

  .sm\:text-sm {
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .sm\:text-base {
    font-size: var(--text-base);
    line-height: 1.6;
  }

  .sm\:text-lg {
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .sm\:h0 {
    font-size: var(--text-h0);
    line-height: 1;
  }

  .sm\:h1 {
    font-size: var(--text-h1);
    line-height: 1.1;
  }

  .sm\:h2 {
    font-size: var(--text-h2);
    line-height: 1.1;
  }

  .sm\:h3 {
    font-size: var(--text-h3);
    line-height: 1.2;
  }

  .sm\:h4 {
    font-size: var(--text-h4);
    line-height: 1.3;
  }

  .sm\:h5 {
    font-size: var(--text-h5);
    line-height: 1.4;
  }

  .sm\:h6 {
    font-size: var(--text-h6);
    line-height: 1.4;
  }
}

.line-through {
  text-decoration: line-through;
}

.break-all {
  overflow-wrap: anywhere;
}

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* ===== Xmas calendar special card ===== */

.product-card--xmas {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 0 0, #fff7d9 0, #f6cf6a 35%, #7a5620 100%);
  border: 1px solid rgba(255, 235, 180, 0.95);
  color: #fff;
  transform-origin: left bottom;
  transform: perspective(900px) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1);
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

/* White text on the gold bar */
.product-card--xmas .product-card__title a,
.product-card--xmas .price,
.product-card--xmas .product-card__info,
.product-card--xmas .rating-with-text,
.product-card--xmas .price-item,
.product-card--xmas .price--compare-at {
  color: #fff;
}

.product-card--xmas .product-card__figure {
  background: radial-gradient(circle at 50% 0, rgba(255,255,255,0.15), transparent 70%);
}

.product-card--xmas:hover,
.product-card--xmas:focus-within {
  transform: perspective(900px)
             translateY(-1px)
             translateZ(4px)
             rotateX(0.9deg)
             rotateY(0.5deg)
             scale(1.005) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(255, 223, 150, 0.55);
  border-color: #ffe7a2;
}

/* --- Shine only on the gold info area --- */

.product-card--xmas .product-card__info {
  position: relative;
  overflow: hidden;
}

/* Shine overlay on the bottom part of the whole card */
.product-card--xmas::before {
  content: "";
  position: absolute;
  left: -50%;
  width: 60%;
  height: 60%;         /* bottom 60% of the card = guldpanelen */
  bottom: -20px;       /* extend slightly past the rounded bottom */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  transform: translateX(-180%);
  opacity: 0;
  pointer-events: none;
  animation: xmas-card-shine-ambient 5s linear infinite;
}

/* Hover/tap: stronger, faster sweep */
.product-card--xmas:hover::before,
.product-card--xmas:focus-within::before {
  animation: xmas-card-shine-hover 1.2s linear;
}


@keyframes xmas-card-shine-ambient {
  0%   { transform: translateX(-150%); opacity: 0; }
  8%   { opacity: 0.9; }
  22%  { transform: translateX(250%); opacity: 0; }
  100% { transform: translateX(250%); opacity: 0; }
}

@keyframes xmas-card-shine-hover {
  0%   { transform: translateX(-150%); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translateX(250%); opacity: 0; }
  100% { transform: translateX(250%); opacity: 0; }
}
/* Give featured collection cards breathing room for 3D lift */
.shopify-section--featured-collection .scroll-area {
  padding-top: 12px;
  padding-bottom: 16px;
}

/* A bit more space on larger screens if needed */
@media screen and (min-width: 700px) {
  .shopify-section--featured-collection .scroll-area {
    padding-top: 16px;
    padding-bottom: 20px;
  }
}

/* PUMPLAB_OVERFLOW_FIX_V2 — prevent horizontal scroll without breaking position:sticky.
   overflow-x:hidden makes the browser set overflow-y:auto, which kills sticky.
   overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll container.
   Applied to BOTH html and body: body catches normal-flow overflow, html catches
   anything that escapes body (position:fixed descendants, elements using the
   `width:100vw; margin-inline:-50vw` full-bleed escape pattern, etc.). On mobile
   the body-only rule wasn't catching everything because fixed elements are
   positioned relative to the viewport (html) not body, so body's clip context
   couldn't contain them. */
html,
body {
  overflow-x: clip;
}
/* End PUMPLAB_OVERFLOW_FIX_V2 */

/* PUMPLAB_COLLECTION_LIST_V1 — Category cards: no images, match product card style */

/* Section background — subtle warm/pink gradient */
.shopify-section--collection-list {
  background: linear-gradient(165deg, rgb(22 20 26) 0%, rgb(28 22 30) 40%, rgb(24 20 28) 100%) !important;
}

/* Hide images */
.shopify-section--collection-list .collection-card .content-over-media img,
.shopify-section--collection-list .collection-card .content-over-media .zoom-image {
  display: none !important;
}

/* Card base */
.shopify-section--collection-list .collection-card {
  position: relative;
  border-radius: var(--rounded);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 260ms ease;
}

/* Near-black premium fill */
.shopify-section--collection-list .collection-card .content-over-media {
  background: rgb(12 12 12);
  border: 2px solid rgb(255 255 255 / 0.10);
  border-radius: var(--rounded);
  aspect-ratio: 1 / 1;
  --content-over-media-overlay: 0 0 0 / 0 !important;
  transition: border-color 260ms ease;
}

/* Center title text properly */
.shopify-section--collection-list .collection-card__content {
  transition: none;
  position: relative;
  z-index: 3;
}
.shopify-section--collection-list .collection-card__content:first-child {
  margin-block-end: 0;
}

/* Titles — single line, no wrap */
.shopify-section--collection-list .collection-card__content p {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Remove the circle-button arrow icon */
.shopify-section--collection-list .collection-card__content-wrapper svg {
  display: none !important;
}

/* Kill the theme's default overlay glow on content-over-media */
.shopify-section--collection-list .collection-card .content-over-media::before {
  display: none !important;
}

/* Remove the theme drop-shadow on cards */
.shopify-section--collection-list .collection-card.shadow {
  filter: none !important;
}

/* ── Sweep border — thicker ── */
.shopify-section--collection-list .collection-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  z-index: 6;

  background:
    linear-gradient(rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.06)) padding-box,
    repeating-linear-gradient(
      110deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 35%,
      rgb(255 255 255 / 0.35) 50%,
      rgb(255 255 255 / 0) 65%,
      rgb(255 255 255 / 0) 100%
    ) border-box;

  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;

  opacity: 0;
  transition: opacity 220ms ease;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation-name: pl_plab_intro_v9, pl_plab_loop_v9;
  animation-duration: 950ms, 5200ms;
  animation-timing-function: linear, linear;
  animation-delay: 0ms, 950ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-play-state: paused;
}

/* ── Wavy sweep-up fill from bottom ──
   Uses an inline SVG clip-path with a sine-wave top edge so the
   leading edge looks liquid/organic instead of a flat line. */
.shopify-section--collection-list .collection-card::after {
  content: "";
  position: absolute;
  inset: -15% 0 0 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.03);
  transform: translateY(calc(100% + 15%));
  transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  z-index: 1;
  clip-path: url(#pl-wave-clip);
}

/* ── Hover states ── */
@media (hover: hover) and (pointer: fine) {
  .shopify-section--collection-list .collection-card:hover {
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.18),
      0 18px 40px rgba(0, 0, 0, 0.32);
  }

  .shopify-section--collection-list .collection-card:hover .content-over-media {
    border-color: transparent;
  }

  .shopify-section--collection-list .collection-card:hover::before {
    opacity: 1;
    transition-delay: 70ms;
    animation-play-state: running;
  }

  .shopify-section--collection-list .collection-card:hover::after {
    transform: translateY(0);
  }

  .shopify-section--collection-list .collection-card:hover .collection-card__content {
    transform: none;
  }
}

/* ── Click bounce ── */
.shopify-section--collection-list .collection-card:active {
  transform: scale(0.97);
  transition: transform 70ms ease-in;
}

/* Grid gap */
.shopify-section--collection-list .collection-list {
  gap: var(--spacing-4);
}

/* Mobile: single column, full width, shorter aspect ratio */
@media screen and (max-width: 699px) {
  .shopify-section--collection-list .collection-list {
    --collection-list-grid: auto / 1fr !important;
    gap: var(--spacing-3);
  }

  .shopify-section--collection-list .collection-card .content-over-media {
    aspect-ratio: 3 / 4;
  }

  .shopify-section--collection-list .collection-card__content p {
    font-size: 2.2rem;
  }
}

/* ── Staggered entrance — initial hidden state (JS drives the reveal) ── */
/* End PUMPLAB_COLLECTION_LIST_V1 */

/* PUMPLAB_CATEGORY_SCROLL_V1 — Horizontal swipe carousel */
.shopify-section--category-scroll {
  --section-outer-spacing-block: 0 !important;
  --section-inner-spacing-block: 0 !important;
  padding-top: 0 !important;
}

/* Hide the old "Vad letar du efter?" heading section */
[id$="__97ce7384-258d-409f-a955-4647f19a01a0"],
[id$="97ce7384-258d-409f-a955-4647f19a01a0"] {
  display: none !important;
}

/* Hide "Varför Pumplab?" slideshow */
[id$="__052d59fb-7ddf-4acd-82c2-23481fdcaba7"],
[id$="052d59fb-7ddf-4acd-82c2-23481fdcaba7"] {
  display: none !important;
}

.pl-catscroll {
  position: relative;
  background: #141414;
  padding-bottom: var(--spacing-6);
}


/* Keep below header */
.shopify-section--category-scroll {
  overflow-x: clip;
  position: relative;
  z-index: 1;
}

/* Desktop: allow overlay to extend full viewport width */
@media screen and (min-width: 1000px) {
  .shopify-section--category-scroll {
    overflow: visible;
  }
}

/* Product overlay — individual images behind cards on hover */
.pl-catscroll-overlay {
  position: absolute;
  inset: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

/* PUMPLAB_CATSCROLL_OVERLAY_COMPOSITOR_FIX_V1 —
   translate3d (not translate) + will-change: opacity forces a
   permanent GPU compositor layer on each overlay image. Without
   this, iOS Safari promotes the layer when opacity crosses 0 and
   demotes it when it returns, and the sub-pixel position re-snaps
   on each cycle — images "jump up slightly" on card switch. This
   is the same fix family as the 1px-jump fix on the cards
   themselves (2026-04-08 session 3). */
.pl-catscroll-overlay__img {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.pl-catscroll-overlay.is-visible .pl-catscroll-overlay__img {
  opacity: 0.18;
}

/* Vitamins pair — brighter front + darker back so the overlap zone doesn't
   read as a brightness jump. MAGNESIUM is the front product. D3 mirrors it on the right. */
.pl-catscroll-overlay.is-visible .pl-overlay-vitamins-magnesium,
.pl-catscroll-overlay.is-visible .pl-overlay-vitamins-d3 {
  opacity: 0.35;
}
.pl-catscroll-overlay.is-visible .pl-overlay-vitamins-multi,
.pl-catscroll-overlay.is-visible .pl-overlay-vitamins-omega {
  opacity: 0.15;
}

/* Recovery icons — wrapper handles position + entrance fade-up via transitions
   (smooth in AND out, no snaps), inner img runs continuous float animation
   on a separate property so the two never fight each other.
   Different in/out timings: very snappy exit (0.22s, zero delay) vs smooth
   staggered entrance (0.55s, per-icon --enter-delay).
   The base transition is the EXIT speed; .is-visible overrides with the IN speed. */
/* PUMPLAB_CATSCROLL_OVERLAY_COMPOSITOR_FIX_V1 — same layer-pinning
   treatment as .pl-catscroll-overlay__img above. Recovery icons
   use a wrapper with an independent transition so they need the
   same will-change + 3D transform to avoid the jump. */
.pl-overlay-recovery-wrap {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.22s ease-out, translate 0.22s ease-out;
  transition-delay: 0s;
  will-change: opacity, translate;
  backface-visibility: hidden;
  pointer-events: none;
}
.pl-catscroll-overlay.is-visible .pl-overlay-recovery-wrap {
  opacity: 0.18;
  translate: 0 0;
  transition: opacity 0.55s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--enter-delay, 0ms);
}
.pl-overlay-recovery-icon {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  animation: pl-recovery-float 4s ease-in-out infinite;
}
@keyframes pl-recovery-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--float-y, -7px); }
}

/* Vitamins — individual product positioning (moved from inline JS so widths
   can be overridden per breakpoint and the pair wrappers can rotate them together) */
.pl-overlay-vitamins-multi {
  left: 10%;
  top: 59%;
  width: 26%;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 18%, #000 33%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 18%, #000 33%);
}
.pl-overlay-vitamins-magnesium {
  left: 20%;
  top: 55%;
  width: 38%;
}
.pl-overlay-vitamins-d3 {
  left: 80%;
  top: 52%;
  width: 41%;
}
.pl-overlay-vitamins-omega {
  left: 90%;
  top: 56%;
  width: 29%;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 18%, #000 33%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 18%, #000 33%);
}

/* Vitamins — fast exit transition (overrides the base 0.6s on the overlay__img class).
   Used when .is-visible is removed: vitamins fade out in 0.18s instead of lingering.
   Entrance is handled by the slide-in animation below; this transition only kicks
   in when there's no animation matching, i.e. on exit. */
.pl-overlay-vitamins-multi,
.pl-overlay-vitamins-magnesium,
.pl-overlay-vitamins-d3,
.pl-overlay-vitamins-omega {
  transition: opacity 0.18s ease-out;
}

/* Vitamins pair wrappers — rotate each pair as a single unit around a shared
   transform-origin (the visual center of the pair). The wrapper has inset:0 so
   percentages on its child imgs match the section coordinates exactly. */
.pl-overlay-vitamins-pair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pl-overlay-vitamins-pair-left {
  transform: rotate(-8deg);
  transform-origin: 15% 57%;
}
.pl-overlay-vitamins-pair-right {
  transform: rotate(8deg);
  transform-origin: 85% 54%;
}

/* Vitamins entrance animation — slide-up via translate property, only fires
   when .is-visible is added. The imgs return to translate:0 (default) on exit
   so there's no slide-back; existing opacity transition handles the fade out.
   Slight per-img stagger so they enter in a wave rather than all at once.
   Opacity is included in 0% so rapid re-triggers reset the element to fully
   invisible at animation start (instead of beginning the slide-in mid-fade-out).
   100% omits opacity so it interpolates to the element's matched .is-visible
   opacity value (0.15 / 0.35 depending on which product). */
@keyframes pl-vitamins-slide-in {
  0%   { translate: 0 28px; opacity: 0; }
  100% { translate: 0 0; }
}
/* Vitamins entrance/exit is handled by WAAPI in JS (vitaminsAnimateIn /
   vitaminsAnimateOut) — see category-scroll.liquid. CSS animation removed
   because the animation→transition handoff was unreliable on .is-visible
   removal. WAAPI lets us cancel and replace with explicit from-values. */

/* Smaller screens (<2000px) — bump up MULTI + MAGNESIUM since the left pair
   reads as small relative to the cards on these viewports */
@media (max-width: 1999px) {
  .pl-overlay-vitamins-multi {
    width: 38%;
  }
  .pl-overlay-vitamins-magnesium {
    width: 54%;
  }
  .pl-overlay-vitamins-d3 {
    width: 46%;
  }
  .pl-overlay-vitamins-omega {
    width: 33%;
  }
}

/* 2K and ultrawide — scale up MULTI + MAGNESIUM (the left pair) but leave
   the right pair the same size, per design intent. OMEGA gets nudged
   further right at 2K to balance the wider section. All four shifted down
   to balance vertically with the cards at 2K. */
@media (min-width: 2000px) {
  .pl-overlay-vitamins-multi {
    top: 65%;
    width: 31%;
  }
  .pl-overlay-vitamins-magnesium {
    top: 61%;
    width: 46%;
  }
  .pl-overlay-vitamins-d3 {
    top: 58%;
  }
  .pl-overlay-vitamins-omega {
    left: 92%;
    top: 62%;
  }
  /* Pivot shifts down to match new pair centers */
  .pl-overlay-vitamins-pair-left {
    transform-origin: 15% 63%;
  }
  .pl-overlay-vitamins-pair-right {
    transform-origin: 85% 60%;
  }
}

/* PWO side products — both big, positioned on opposite sides, dimmed so the title text reads */
.pl-overlay-pwo-uranium {
  left: 22%;
  top: 50%;
  width: 60%;
}
.pl-overlay-pwo-plutonium {
  left: 78%;
  top: 50%;
  width: 54%;
}

/* Anything below 2K (laptops + 1920p / "1k" monitors) — pushed to the sides
   and moved down so they peek out clearly from behind the cards */
@media (max-width: 1999px) {
  .pl-overlay-pwo-uranium {
    left: 14%;
    top: 65%;
    width: 54%;
  }
  .pl-overlay-pwo-plutonium {
    left: 86%;
    top: 65%;
    width: 48%;
  }
}

/* 2K and ultrawide — closer to the 1k positioning: pushed down and slightly more
   to the sides than before, but still smaller than the 1k tier */
@media (min-width: 2000px) {
  .pl-overlay-pwo-uranium {
    left: 16%;
    top: 67%;
    width: 48%;
  }
  .pl-overlay-pwo-plutonium {
    left: 84%;
    top: 67%;
    width: 43%;
  }
}

/* Protein products — diagonal flow layout. KLADD sits top-left and rotates HARD
   right (~20deg), SALTED sits bottom-right slightly larger with a gentle right
   tilt (~8deg). Both lean the same direction so the eye flows top-left → bottom-right. */
.pl-overlay-protein-kladd {
  left: 17%;
  top: 70%;
  width: 44%;
  transform: translate(-50%, -50%) rotate(5deg);
}
.pl-overlay-protein-salted {
  left: 83%;
  top: 75%;
  width: 56%;
  transform: translate(-50%, -50%) rotate(7deg);
}

/* Anything below 2K (laptops + 1920p / "1k" monitors) — slightly smaller and
   moved up. SALTED tilted left so it doesn't lean off the right edge. */
@media (max-width: 1999px) {
  .pl-overlay-protein-kladd {
    left: 17%;
    top: 60%;
    width: 46%;
  }
  .pl-overlay-protein-salted {
    left: 83%;
    top: 64%;
    width: 58%;
    transform: translate(-50%, -50%) rotate(-8deg);
  }
}

/* PUMPLAB_CATSCROLL_MOBILE_OVERLAY_V1 — Per-card stencil products on the mobile
   carousel. Mirrors the desktop overlay swap behaviour: when the front card
   changes, the matching overlay group fades in and the previous one fades out.
   Recovery (idx 3) keeps its existing in-card glow icons — no overlay group.

   IMPORTANT — placement constraint: the mobile carousel rotates cards in 3D
   orbit, translating side cards horizontally up to ±161px from center. The
   left and right gutters are therefore OCCUPIED by rotated side cards at all
   times. The only zones that stay clear are ABOVE the cards block (heading
   area) and BELOW it (between cards bottom and the nav segments). Below is
   too narrow on mobile, so all overlays sit ABOVE the cards behind the
   heading text (overlay z-index 0, header z-index 1 — heading text reads
   over the stencils as a "tattoo" backdrop).

   All position rules use double-class specificity (2,0,0) to override the
   single-class desktop @media (max-width: 1999px) rules above (1,0,0). */
@media (max-width: 999px) {
  /* Force overlay imgs AND recovery wraps to opacity 0 during the intro spin.
     The carousel starts at rotation = -3 * anglePerCard, which makes RECOVERY
     (idx 3) the first front card during the spin — so render() adds is-visible
     to the recovery group immediately, and without this rule the recovery
     wraps would briefly appear before the spin lands on PWO. When the
     .pl-catscroll--intro class is removed at 70% spin progress, this rule
     drops out of the cascade and the .is-visible 0.18 (or vit differential
     0.35/0.15) becomes the new computed value — the existing opacity
     transition + per-img inline transitionDelay fires the staggered fade-in.
     Using opacity (not visibility) so the transition can animate. */
  .pl-catscroll--intro .pl-catscroll-overlay--mobile .pl-catscroll-overlay__img,
  .pl-catscroll--intro .pl-catscroll-overlay--mobile .pl-overlay-recovery-wrap {
    opacity: 0 !important;
  }

  /* PWO — both stencils sit above the cards, opposite sides of center */
  .pl-catscroll-overlay--mobile .pl-overlay-pwo-uranium {
    left: 16%;
    top: 19%;
    width: 72%;
    transform: translate(-50%, -50%) rotate(-4deg);
  }
  .pl-catscroll-overlay--mobile .pl-overlay-pwo-plutonium {
    left: 88%;
    top: 19%;
    width: 64%;
    transform: translate(-50%, -50%) rotate(6deg);
  }

  /* Protein — diagonal pair, both above the cards (mirrors PWO spread) */
  .pl-catscroll-overlay--mobile .pl-overlay-protein-kladd {
    left: 16%;
    top: 19%;
    width: 64%;
    transform: translate(-50%, -50%) rotate(8deg);
  }
  .pl-catscroll-overlay--mobile .pl-overlay-protein-salted {
    left: 88%;
    top: 18%;
    width: 72%;
    transform: translate(-50%, -50%) rotate(-6deg);
  }

  /* Vitamins — two paired clusters (matches desktop pairing semantics).
     Left cluster: MULTI (back, dim) + MAGNESIUM (front, bright) overlapping.
     Right cluster: D3 (front, bright) + OMEGA (back, dim) overlapping.
     Existing masks on multi/omega keep the back-bottle inner edge fading
     into the front bottle of its pair — same blend trick as desktop. */
  .pl-catscroll-overlay--mobile .pl-overlay-vitamins-multi {
    left: 6%;
    top: 24%;
    width: 42%;
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  .pl-catscroll-overlay--mobile .pl-overlay-vitamins-magnesium {
    left: 22%;
    top: 22%;
    width: 72%;
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  .pl-catscroll-overlay--mobile .pl-overlay-vitamins-d3 {
    left: 78%;
    top: 22%;
    width: 74%;
    transform: translate(-50%, -50%) rotate(10deg);
  }
  .pl-catscroll-overlay--mobile .pl-overlay-vitamins-omega {
    left: 94%;
    top: 24%;
    width: 42%;
    transform: translate(-50%, -50%) rotate(10deg);
  }

  /* Recovery on mobile uses the dynamic stratified-grid build in
     buildMobileRecoveryPattern() — see category-scroll.liquid. The icons
     reuse the existing desktop .pl-overlay-recovery-wrap + .pl-overlay-recovery-icon
     classes (already defined above), so no per-icon CSS needed here. */

  /* PUMPLAB_CATSCROLL_CONTINUOUS_DIM_V1 — Title dim is now applied per-frame
     in render() as inline color on the card itself, based on the card's
     zNorm value (continuous from side position to front position). No CSS
     transition because the value is already smoothly interpolated by the
     orbit math — every frame writes a slightly different alpha as the card
     rotates. The title inherits color from the card, so a single inline
     write per card per frame dims the title text seamlessly with the
     motion. See render() in category-scroll.liquid. */
}
/* End PUMPLAB_CATSCROLL_MOBILE_OVERLAY_V1 */


@keyframes pl-overlay-float {
  0% { translate: 0 0; }
  25% { translate: 0 -2px; }
  50% { translate: 0 -6px; }
  75% { translate: 0 -2px; }
  100% { translate: 0 0; }
}

/* Content above overlay */
.pl-catscroll__header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
}

.pl-catscroll__cards {
  position: relative;
  z-index: 1;
}

.pl-catscroll__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 11vw, 5rem);
  color: #fff;
  margin: 0;
  text-transform: none;
}

.pl-catscroll__subheading {
  font-family: 'Inter', sans-serif;
  color: rgb(255 255 255 / 0.5);
  font-size: clamp(1.15rem, 3.5vw, 1.6rem);
  margin: 4px 0 0;
}

.pl-catscroll__cards {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 450px;
  margin: 0 auto;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.pl-catscroll__cards:active {
  cursor: grabbing;
}

.pl-catscroll__ring {
  position: relative;
  width: 100%;
  height: 100%;
}

.pl-catscroll__card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  /* PUMPLAB_CATSCROLL_TEXT_JITTER_FIX_V1 — Hint to the browser that this
     card will be transformed continuously (translate3d + scale every frame
     during the orbit). Pre-allocates a stable compositor layer and pins
     its raster cache so text inside doesn't get re-rasterized every time
     the scale ticks. Combined with the integer-pixel translateX and
     2-decimal scale rounding in render(), this stops the title from
     warping/jittering during rotation. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pl-catscroll__card.is-dimmed .pl-catscroll__card-inner::after {
  background: #151515;
}

/* Shadow lives on the OUTER card via drop-shadow so it follows the inner's
   clipped shape but isn't constrained by the inner's clip-path / overflow.
   This lets the inner clip the athletes tightly while the shadow extends below.
   Transition includes BOTH filter and box-shadow so the shadow animates smoothly
   in either direction regardless of which property the desktop override uses. */
.pl-catscroll__card {
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.pl-catscroll__card.is-dimmed,
.pl-catscroll__card.is-active:not(.is-swiping) {
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Desktop only — layered box-shadow stack (Tobias Ahlin smoother-shadow technique).
   Drop-shadow chains COMPOUND (each subsequent filter shadows the previous output)
   so they over-stretch. Box-shadow layers stack INDEPENDENTLY from the element's box,
   so 6 layers at progressively bigger blur produce a smooth falloff at the right size.
   We need a matching border-radius on the outer card so the shadow shape is rounded. */
@media screen and (min-width: 1000px) {
  .pl-catscroll__card {
    border-radius: 8px;
  }
  .pl-catscroll__card.is-dimmed,
  .pl-catscroll__card.is-active:not(.is-swiping) {
    filter: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.16),
      0 4px 8px rgba(0, 0, 0, 0.13),
      0 8px 16px rgba(0, 0, 0, 0.11),
      0 16px 28px rgba(0, 0, 0, 0.09),
      0 24px 40px rgba(0, 0, 0, 0.07);
  }
}

.pl-catscroll__card.is-pressed .pl-catscroll__card-inner {
  transform: scale(0.98);
  transition: transform 70ms ease-in !important;
}

.pl-catscroll__card.is-active .pl-catscroll__card-inner {
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

.pl-catscroll__card-inner {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #151515;
  border: 1px solid rgb(255 255 255 / 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  contain: layout style paint;
}

.pl-catscroll__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
}

/* Athlete images + PWO hover — desktop only */
.pl-catscroll__athletes {
  display: none;
}

@media screen and (min-width: 1000px) {
  .pl-catscroll__athletes {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transform: scale(1);
    transform-origin: center center;
    opacity: 0.7; /* PUMPLAB_CATSCROLL_RESTING_ATHLETES_V1 — multiply-dim at rest so titles win the attention fight. Per-athlete opacities still apply on top, so relative weighting is preserved. */
    transition: transform 0.35s cubic-bezier(0.25, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Active state lifts the wrapper to full opacity, smoothly via the transition above */
  .pl-catscroll__card.is-active .pl-catscroll__athletes {
    opacity: 1;
  }

  .pl-catscroll__athlete {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    transform: scale(1);
    transform-origin: center bottom;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0, 0.2, 1), translate 0.35s cubic-bezier(0.25, 0, 0.2, 1);
  }

  .pl-catscroll__athlete--left {
    left: 50%;
    translate: -55% 0;
    object-position: left bottom;
    opacity: 0.3;
  }

  .pl-catscroll__athlete--right {
    left: 50%;
    translate: -50% 0;
    object-position: right bottom;
    opacity: 0.85;
    transform-origin: center center;
  }

  /* PWO card — colored bg on hover */
  .pl-catscroll__card:nth-child(1) .pl-catscroll__card-inner {
    background: #202020; /* PUMPLAB_CATSCROLL_RESTING_BG_V1 — was #191919, subtly lifted so cards sit just above the page bg at rest without becoming a flat panel */
  }

  /* PWO — warm cream neutral */
  .pl-catscroll__card:nth-child(1).is-active .pl-catscroll__card-inner::after {
    background: linear-gradient(to bottom, rgba(230, 220, 210, 0.15), rgba(230, 220, 210, 0.08) 30%, rgba(230, 220, 210, 0.03) 60%, rgba(0, 0, 0, 0.15) 100%);
  }

  /* Vitaminer card — cool neutral gradient on hover (wellness tone vs PWO's warm cream) */
  .pl-catscroll__card:nth-child(3) .pl-catscroll__card-inner {
    background: #202020; /* PUMPLAB_CATSCROLL_RESTING_BG_V1 — was #191919, subtly lifted so cards sit just above the page bg at rest without becoming a flat panel */
  }

  /* Vitaminer & Tillskott — cool neutral */
  .pl-catscroll__card:nth-child(3).is-active .pl-catscroll__card-inner::after {
    background: linear-gradient(to bottom, rgba(230, 220, 210, 0.15), rgba(230, 220, 210, 0.08) 30%, rgba(230, 220, 210, 0.03) 60%, rgba(0, 0, 0, 0.15) 100%);
  }
}

/* Solid cover over bg — fades via background-color, not opacity */
.pl-catscroll__card-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #151515;
  transition: background 0.5s ease;
  pointer-events: none;
  border-radius: inherit;
}

/* Active state: smoother, slower fade-in */
.pl-catscroll__card.is-active .pl-catscroll__card-inner::after {
  background: transparent;
  transition: background 0.85s cubic-bezier(0.25, 0.1, 0.25, 1);
}


.pl-catscroll__title {
  font-family: 'Monument Wide Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 4.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1.1;
  /* Base shadow is fully transparent but declared with the exact same shape as the hover
     state so CSS can interpolate smoothly between the two. "none" doesn't animate. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0), 0 0 60px rgba(0, 0, 0, 0);
  transition: text-shadow 0.45s ease;
}

/* On hover the athletes get busy — lift the title with a soft dark halo so it stays the focal point */
.pl-catscroll__card.is-active .pl-catscroll__title {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 0 60px rgba(0, 0, 0, 0.55);
}


/* Mobile */
@media screen and (max-width: 699px) {
  .pl-catscroll__cards {
    max-width: 310px;
    aspect-ratio: 3 / 4;
    margin-top: var(--spacing-12);
  }

  .pl-catscroll {
    padding-bottom: var(--spacing-10);
  }

  .pl-catscroll__card-inner {
    border-radius: 12px;
  }

  .pl-catscroll__title {
    font-size: 2.8rem;
  }

  .pl-catscroll__title--long {
    font-size: 2.4rem;
  }

  .pl-catscroll__title--split {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pl-catscroll__title-top {
    font-size: 1.95rem;
  }

  .pl-catscroll__title-btm {
    font-size: 2.4rem;
  }

  .pl-catscroll__header {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
  }

  .pl-catscroll__heading {
    font-size: clamp(2rem, 8.5vw, 2.8rem);
  }

  .pl-catscroll__subheading {
    font-size: 1rem;
  }
}

/* Desktop — Split Wall */
@media screen and (min-width: 1000px) {
  .pl-catscroll__heading {
    font-size: clamp(4rem, 6vw, 6rem);
  }

  .pl-catscroll__subheading {
    margin-top: -12px;
  }

  .pl-catscroll__header {
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
  }

  /* Split Wall — contained strips */
  .pl-catscroll__cards {
    max-width: var(--container-max-width, 1560px);
    aspect-ratio: auto;
    height: 420px;
    cursor: default;
    padding: 0;
    margin-top: 20px;
  }

  .pl-catscroll__ring {
    display: flex;
    gap: 6px;
    height: 100%;
  }

  /* Cards become flex strips — hard edges, no gaps */
  .pl-catscroll__card {
    position: relative;
    inset: auto;
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: flex 0.35s cubic-bezier(0.25, 0, 0.2, 1);
    cursor: pointer;
  }

  /* Hovered card expands */
  .pl-catscroll__card.is-active {
    flex: 1.35 1 0%;
  }

  /* Dim non-hovered when any is hovered */
  .pl-catscroll__ring:hover .pl-catscroll__card:not(.is-active) .pl-catscroll__card-inner {
    filter: brightness(0.45);
  }

  .pl-catscroll__card-inner {
    border-radius: 8px;
    border: 1px solid rgb(255 255 255 / 0.06);
    filter: brightness(0.85); /* PUMPLAB_CATSCROLL_RESTING_BRIGHTNESS_V1 — was 0.7, lifted for visibility on non-OLED screens */
    overflow: visible;
    contain: layout style;
    clip-path: inset(0 0 0 0 round 8px);
    transition: filter 0.5s ease, clip-path 0.35s cubic-bezier(0.25, 0, 0.2, 1);

  }

  .pl-catscroll__card.is-active .pl-catscroll__card-inner {
    filter: brightness(1.1) contrast(1.05); /* PUMPLAB_CATSCROLL_ACTIVE_PUNCH_V1 — was brightness(1), lifted to restore hover delta after resting bump */
    box-shadow: none;
    clip-path: inset(-30% -15% 0px -15%);
  }

  /* PUMPLAB_CATSCROLL_HOVER_SWEEP_V1 — comet-streak outline on hover, matching the
     product card sweep recipe. Uses ::before so it doesn't conflict with the dim
     gradient cover on ::after. Same keyframes as the product card system.
     z-index: 0 places it UNDER the athletes (z:1) so escaping heads paint over it. */
  .pl-catscroll__card .pl-catscroll__card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 0;

    background:
      linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.04)) padding-box,
      repeating-linear-gradient(
        110deg,
        rgb(255 255 255 / 0) 0%,
        rgb(255 255 255 / 0) 35%,
        rgb(255 255 255 / 0.45) 50%,
        rgb(255 255 255 / 0) 65%,
        rgb(255 255 255 / 0) 100%
      ) border-box;

    background-size: auto, 200% 100%;
    background-position: 0 0, -40% 0;

    opacity: 0;
    transition: opacity 220ms ease;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    will-change: opacity, background-position;

    animation-name: pl_plab_intro_v9, pl_plab_loop_v9;
    animation-duration: 950ms, 5200ms;
    animation-timing-function: linear, linear;
    animation-delay: 0ms, 950ms;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
    animation-play-state: paused;
  }

  .pl-catscroll__card.is-active .pl-catscroll__card-inner::before {
    opacity: 1;
    transition-delay: 70ms;
    animation-play-state: running;
  }

  /* Restart the sweep from t=0 on each hover — JS toggles .pl-anim-reset for two frames */
  .pl-catscroll__card.pl-anim-reset .pl-catscroll__card-inner::before {
    animation: none !important;
  }
  /* End PUMPLAB_CATSCROLL_HOVER_SWEEP_V1 */

  /* Athlete composition scales as one unit on hover */
  .pl-catscroll__card.is-active .pl-catscroll__athletes {
    transform: scale(1.15);
  }

  .pl-catscroll__card.is-active .pl-catscroll__athlete--left {
    opacity: 0.6;
  }

  .pl-catscroll__card.is-active .pl-catscroll__athlete--right {
    opacity: 1;
    transform: scale(1.14);
  }


  /* Background image */
  .pl-catscroll__bg {
    transition: opacity 0.5s ease;
    opacity: 0.5;
  }

  /* PWO: hide old bg on desktop, athletes replace it */
  .pl-catscroll__card:nth-child(1) .pl-catscroll__bg {
    display: none;
  }

  /* Vitaminer & Tillskott: same setup as PWO — hide bg, layered athlete + product replace it */
  .pl-catscroll__card:nth-child(3) .pl-catscroll__bg {
    display: none;
  }

  /* Protein: hide bg. Uses PWO's --left/--right classes directly — inherits all hover
     behavior from the global .pl-catscroll__athlete--left/--right rules. Only positioning
     overrides are protein-scoped. The middle athlete uses --mid with minimal custom CSS. */
  .pl-catscroll__card:nth-child(2) .pl-catscroll__bg {
    display: none;
  }

  /* Protein positioning overrides — higher specificity via --protein wrapper class.
     Flanks get a small base scale + slight downward nudge so they sit lower in the card.
     Transform-origin center center so scale/rotate pivot symmetrically. */
  .pl-catscroll__athletes--protein .pl-catscroll__athlete--left {
    translate: -60% 4%;
    transform: scale(1.05);
    transform-origin: center center;
    opacity: 0.25;
  }

  .pl-catscroll__athletes--protein .pl-catscroll__athlete--right {
    translate: -33% 8%;
    transform: scale(1.1) rotate(-3deg);
    transform-origin: center center;
    opacity: 0.25;
  }

  /* Middle athlete — slightly larger since he's the hero */
  .pl-catscroll__athletes--protein .pl-catscroll__athlete--mid {
    left: 50%;
    translate: -50% 0;
    object-position: center bottom;
    opacity: 0.85;
    transform: scale(1.14);
    transform-origin: center center;
  }

  /* Hover: flanks rotate outward (slight fan), middle brightens.
     IMPORTANT: must repeat the base scale in the hover transform, otherwise adding
     rotate() overrides the scale and shrinks them back to 1.0 */
  /* Solid on hover (no translucent heads against the extended top zone) — the depth
     effect comes from the base-state dimming, not the hover state */
  .pl-catscroll__card.is-active .pl-catscroll__athletes--protein .pl-catscroll__athlete--left {
    transform: scale(1.05) rotate(-1.5deg);
    opacity: 1;
  }

  .pl-catscroll__card.is-active .pl-catscroll__athletes--protein .pl-catscroll__athlete--right {
    transform: scale(1.1) rotate(-3deg);
    opacity: 1;
  }

  /* Protein card: extend ONLY the top edge on hover (no horizontal extension).
     Sides clip normally so this card stays contained left/right while heads can escape upward. */
  .pl-catscroll__card:nth-child(2).is-active .pl-catscroll__card-inner {
    clip-path: inset(-30% 0 0 0);
  }

  /* Vitamins card: clip the RIGHT edge tight so the Xenon product (which scales
     up on hover) doesn't briefly poke out the right side during the in/out
     scale animations. Keep top + left extensions for athletes that escape upward. */
  .pl-catscroll__card:nth-child(3).is-active .pl-catscroll__card-inner {
    clip-path: inset(-30% 0 0 -15%);
  }

  .pl-catscroll__card.is-active .pl-catscroll__athletes--protein .pl-catscroll__athlete--mid {
    opacity: 1;
    transform: scale(1.22);
  }

  /* Recovery: hide bg. Uses PWO's --left/--right classes directly — inherits all hover
     behavior from the global rules. Both PNGs are pre-aligned, so both at translate -50%. */
  .pl-catscroll__card:nth-child(4) .pl-catscroll__bg {
    display: none;
  }

  /* --left = behind athlete. Base transform must include scale() AND rotate() so the
     hover rule has matching properties to interpolate (no snap on un-hover). */
  .pl-catscroll__athletes--recovery .pl-catscroll__athlete--left {
    translate: -61% 0;
    object-position: center bottom;
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
    transform-origin: center center;
  }

  /* --right = front athlete. Same base transform shape. */
  .pl-catscroll__athletes--recovery .pl-catscroll__athlete--right {
    translate: -45% 0;
    object-position: center bottom;
    opacity: 0.9;
    transform: scale(1) rotate(0deg);
    transform-origin: center center;
  }

  /* Hover: both go fully solid + subtle tilt outward. Front athlete grows extra. */
  .pl-catscroll__card.is-active .pl-catscroll__athletes--recovery .pl-catscroll__athlete--right {
    opacity: 1;
    transform: scale(1.04) rotate(1deg);
  }

  .pl-catscroll__card.is-active .pl-catscroll__athletes--recovery .pl-catscroll__athlete--left {
    opacity: 1;
    translate: -64% 0;
    transform: scale(1) rotate(-2deg);
  }

  /* Recovery card — cool calming gradient on hover (mint/sage tone) */
  .pl-catscroll__card:nth-child(4) .pl-catscroll__card-inner {
    background: #202020; /* PUMPLAB_CATSCROLL_RESTING_BG_V1 — was #191919, subtly lifted so cards sit just above the page bg at rest without becoming a flat panel */
  }

  /* Recovery — mint-sage neutral */
  .pl-catscroll__card:nth-child(4).is-active .pl-catscroll__card-inner::after {
    background: linear-gradient(to bottom, rgba(230, 220, 210, 0.15), rgba(230, 220, 210, 0.08) 30%, rgba(230, 220, 210, 0.03) 60%, rgba(0, 0, 0, 0.15) 100%);
  }

  /* Protein card — warm neutral gradient on hover (milky/creamy tone) */
  .pl-catscroll__card:nth-child(2) .pl-catscroll__card-inner {
    background: #202020; /* PUMPLAB_CATSCROLL_RESTING_BG_V1 — was #191919, subtly lifted so cards sit just above the page bg at rest without becoming a flat panel */
  }

  /* Protein — milky cream neutral */
  .pl-catscroll__card:nth-child(2).is-active .pl-catscroll__card-inner::after {
    background: linear-gradient(to bottom, rgba(225, 215, 200, 0.15), rgba(225, 215, 200, 0.08) 30%, rgba(225, 215, 200, 0.03) 60%, rgba(0, 0, 0, 0.15) 100%);
  }

  /* Vitaminer: athlete is the hero (bright/solid), product sits in the background — solid but dimmed */
  .pl-catscroll__athletes--kreatin .pl-catscroll__athlete--left {
    opacity: 0.85;
    transform: scale(1.1);
    transform-origin: center center;
  }

  .pl-catscroll__athletes--kreatin .pl-catscroll__athlete--right {
    translate: -25% 0;
    opacity: 0.15;
  }

  /* Cancel the wrapper scale on kreatin — single scale source prevents end-of-animation wobble */
  .pl-catscroll__card.is-active .pl-catscroll__athletes--kreatin {
    transform: scale(1);
  }

  /* Athlete — full opacity + big scale */
  .pl-catscroll__card.is-active .pl-catscroll__athletes--kreatin .pl-catscroll__athlete--left {
    opacity: 1;
    transform: scale(1.3);
    transform-origin: center center;
  }

  /* Product — blends via opacity (like PWO left athlete), mild scale so it moves with the composition */
  .pl-catscroll__card.is-active .pl-catscroll__athletes--kreatin .pl-catscroll__athlete--right {
    opacity: 0.35;
    transform: scale(1.1);
    transform-origin: center center;
  }

  /* Active card lifts above siblings so clip-path overflow can paint over neighbors */
  .pl-catscroll__card.is-active {
    z-index: 3;
  }

  .pl-catscroll__card.is-active .pl-catscroll__bg {
    opacity: 1;
    transition: opacity 0.6s ease;
  }

  /* Cover overlay — lifts on hover. PUMPLAB_CATSCROLL_RESTING_COVER_V1 — was 0.6, dropped to 0.35 so cards don't blend into the page background at rest. */
  .pl-catscroll__card-inner::after {
    background: rgba(15, 15, 15, 0.35);
    transition: background 0.5s ease;
  }

  .pl-catscroll__card.is-active .pl-catscroll__card-inner::after {
    background: rgba(15, 15, 15, 0.05);
  }

  /* Title — centered, scales + font swap on hover */
  .pl-catscroll__title {
    font-size: 2.6rem;
    text-align: center;
    padding: 0 16px;
    transform: scale(1) translateZ(0);
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.25, 0, 0.2, 1), text-shadow 0.45s ease;
    line-height: 1.1;
  }

  .pl-catscroll__card.is-active .pl-catscroll__title {
    transform: scale(1.25) translateZ(0);
  }

  .pl-catscroll__card.is-active .pl-catscroll__title {
    transform: scale(1.25) translateZ(0);
  }

  .pl-catscroll__title--split {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    gap: 0;
  }

  .pl-catscroll__title-top {
    font-size: 1.8rem;
  }

  .pl-catscroll__title-btm {
    font-size: 2.2rem;
  }

  /* Hide mobile-only elements on desktop */
  .pl-catscroll__nav,

  /* Hide glow icons on desktop for now */
  .pl-catscroll__icons {
    display: none;
  }

  /* Card press feedback */
  .pl-catscroll__card:active .pl-catscroll__card-inner {
    transform: scale(0.98);
    transition: transform 80ms ease-in !important;
  }
}


/* Desktop idle outline glint — small glow element slides along one edge */
@media screen and (min-width: 1000px) {
  .pl-catscroll__glint {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(255 255 255 / 0.8) 0%, rgb(255 255 255 / 0.3) 30%, rgb(255 255 255 / 0.08) 60%, transparent 100%);
  }

  .pl-catscroll__glint--h {
    width: 300px;
    height: 1px;
    transform: translateX(-50%);
  }

  .pl-catscroll__glint--v {
    width: 1px;
    height: 300px;
    transform: translateY(-50%);
  }
}

/* Navigation segments */
.pl-catscroll__nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--spacing-8);
}

.pl-catscroll__nav-seg {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.15);
  transition: background 0.4s ease, width 0.4s ease;
}

.pl-catscroll__nav-seg.is-active {
  background: rgb(255 255 255 / 0.7);
  width: 48px;
}

/* Hide nav dots on desktop split-wall layout (mobile carousel only) */
@media screen and (min-width: 1000px) {
  .pl-catscroll__nav {
    display: none;
  }
}

/* Hide old collection-list while testing category scroll */
[id$="__7a3596fc-2dbd-4668-8ecb-9c754931b192"] {
  display: none;
}
@keyframes pl-catscroll-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* Hide effects during intro spin — use visibility, not opacity, to avoid mobile compositor jump */
.pl-catscroll--intro .pl-catscroll__icons,
.pl-catscroll--intro .pl-catscroll__fx,
.pl-catscroll--intro .pl-catscroll__nav {
  visibility: hidden;
  pointer-events: none;
}

/* Kill transitions during intro + drag for smooth rAF */
.pl-catscroll--intro .pl-catscroll__card,
.pl-catscroll--intro .pl-catscroll__card-inner,
.pl-catscroll__card.is-swiping,
.pl-catscroll__card.is-swiping .pl-catscroll__card-inner {
  transition: none !important;
}

/* Promote cards to GPU layer during animation */
.pl-catscroll--intro .pl-catscroll__card {
  will-change: transform;
}

/* Glow icons */
.pl-catscroll__icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pl-catscroll__icon {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.25s ease, scale 0.25s ease;
  filter: none;
  animation: pl-catscroll-float 3s ease-in-out infinite paused;
}

.pl-catscroll__card.is-active .pl-catscroll__icon {
  opacity: 1;
  scale: 1;
  animation-play-state: running;
  transition: opacity 0.6s cubic-bezier(.22, 1, .36, 1), scale 0.6s cubic-bezier(.22, 1, .36, 1);
}

.pl-catscroll__card.is-active .pl-catscroll__icon--2 {
  transition-delay: 0.1s;
}

.pl-catscroll__card.is-active .pl-catscroll__icon--3 {
  transition-delay: 0.2s;
}

.pl-catscroll__card.is-swiping .pl-catscroll__icon {
  opacity: 0;
  scale: 0.3;
  filter: none;
  transition: none;
}

/* Recovery plus icons — top-left cluster */
.pl-catscroll__icon--1 {
  top: -8%;
  left: -6%;
  width: 85px;
  height: 85px;
  transform: rotate(-12deg);
}

.pl-catscroll__icon--2 {
  top: -10%;
  left: 28%;
  width: 45px;
  height: 45px;
  transform: rotate(15deg);
  animation-delay: -1s;
}

.pl-catscroll__icon--3 {
  top: 24%;
  left: -8%;
  width: 35px;
  height: 35px;
  transform: rotate(8deg);
  animation-delay: -2s;
}

/* Recovery plus icons — bottom-right cluster */
.pl-catscroll__icon--4 {
  bottom: -6%;
  right: -4%;
  width: 70px;
  height: 70px;
  transform: rotate(10deg);
  animation-delay: -0.5s;
}

.pl-catscroll__icon--5 {
  bottom: 22%;
  right: -10%;
  width: 38px;
  height: 38px;
  transform: rotate(-18deg);
  animation-delay: -1.5s;
}

.pl-catscroll__card.is-active .pl-catscroll__icon--4 {
  transition-delay: 0.12s;
}

.pl-catscroll__card.is-active .pl-catscroll__icon--5 {
  transition-delay: 0.18s;
}

/* End PUMPLAB_CATEGORY_SCROLL_V1 */

/* PUMPLAB_FEATURED_REVIEW_V1 — No boxed look */
.shopify-section--featured-review {
  --section-outer-spacing-block: 0 !important;
}
/* End PUMPLAB_FEATURED_REVIEW_V1 */

/* PUMPLAB_NYHETER_GRID_V1 — Seamless section, no boxed look */
.shopify-section--nyheter-grid .section-boxed {
  border-radius: 0;
  box-shadow: none;
  margin-inline: 0;
  margin-block: 0;
  padding-inline: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

.shopify-section--nyheter-grid {
  --section-outer-spacing-block: 0 !important;
}
/* End PUMPLAB_NYHETER_GRID_V1 */

/* PUMPLAB_IMPACT_TEXT_WIDTH_V1 — prevent subtitle wrapping on desktop */
@media screen and (min-width: 1000px) {
  .impact-text__content {
    max-width: 900px;
  }
}
/* End PUMPLAB_IMPACT_TEXT_WIDTH_V1 */

/* PUMPLAB_SLIDESHOW_LINK_CURSOR_V1 — show pointer cursor on clickable slideshow slides */
a.slideshow__slide {
  cursor: pointer !important;
}
/* End PUMPLAB_SLIDESHOW_LINK_CURSOR_V1 */

/* PUMPLAB_PRODUCT_ICONS_V1 — text-with-icons on product pages: premium styling + gradient bg */

/* Gradient bg handled via section-scoped <style> in text-with-icons.liquid */

/* Icon circles — smaller, sleeker, subtle border */
.shopify-section--text-with-icons .icon-block {
  padding: var(--spacing-4);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.08);
}

/* Titles — bolder */
.shopify-section--text-with-icons .text-with-icons__text-wrapper .prose p:first-child {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Body text — softer */
.shopify-section--text-with-icons .text-with-icons__text-wrapper .prose p:not(:first-child) {
  opacity: 0.6;
  font-size: 0.9em;
}

/* Icon SVGs — slightly brighter */
.shopify-section--text-with-icons .icon-block svg {
  opacity: 0.8;
}

/* Non-flavor product pages: icon strokes use the brand accent so the
   trust badges have a subtle warm tone distinct from the surrounding
   white body text. currentColor cascades to all stroke="currentColor"
   paths inside the inline SVGs (picto-leaf + the PUMPLAB-swapped
   shield-card / truck icons). */
body.page-product:not(.product-flavor) .shopify-section--text-with-icons .icon-block svg {
  color: #A79F8A;
  opacity: 1;
}

/* Icon chip (border + fill) — solid colors instead of the base rule's
   semi-transparent rgba() values, which read as a "glass" chip on the
   dark #191919 page bg. Matches the flavor page's "solid outline + solid
   fill" feel: elevated dark surface #282828 inside, a solid warm greige
   border outside. No alpha anywhere. aspect-ratio + fixed size lock the
   chip to a perfect circle so non-square icon viewBoxes (truck 26×24)
   don't stretch the chip vertically. */
body.page-product:not(.product-flavor) .shopify-section--text-with-icons .icon-block {
  background: #282828 !important;
  border: 3px solid #4a453d !important;
  aspect-ratio: 1 / 1;
  width: 64px;
  height: 64px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Inner icon: constrain it so it never overflows the chip, regardless of
   the SVG's own viewBox aspect ratio. */
body.page-product:not(.product-flavor) .shopify-section--text-with-icons .icon-block svg {
  max-width: 26px;
  max-height: 26px;
  width: auto;
  height: auto;
  flex-shrink: 0;
}

/* Mobile only: restyle the trust-badges carousel page-dots to match the
   category-scroll section's nav segments — 32px wide × 3px tall bars
   instead of small round dots, with the active segment wider (48px) and
   brighter. Same shape and transition timing as .pl-catscroll__nav-seg
   so the two mobile carousels feel visually consistent. Also tighten
   the section's top spacing so it sits closer to the accordion stack
   above it (was too much empty space on narrow viewports). */
@media screen and (max-width: 699px) {
  body.page-product:not(.product-flavor) .shopify-section--text-with-icons {
    padding-block-start: 0;
    margin-block-start: calc(-1 * var(--spacing-14));
  }
  body.page-product:not(.product-flavor) .shopify-section--text-with-icons .page-dots {
    gap: 6px;
    margin-top: var(--spacing-6);
  }
  body.page-product:not(.product-flavor) .shopify-section--text-with-icons .page-dots > * {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.15);
    opacity: 1;
    transition: background 0.4s ease, width 0.4s ease;
  }
  body.page-product:not(.product-flavor) .shopify-section--text-with-icons .page-dots > *[aria-current="true"] {
    width: 48px;
    background: rgb(255 255 255 / 0.7);
    opacity: 1;
  }
}

/* Non-flavor product pages: 5 recommended cards on desktop, 4 on mobile.
   recommendations_count is 5 in the templates so desktop gets exactly one
   row of 5. On mobile (2 per row), the 5th card would dangle alone on its
   own row — hide it so we show a clean 2x2 grid of 4 instead. */
@media screen and (max-width: 699px) {
  body.page-product:not(.product-flavor) .shopify-section--related-products .product-card:nth-child(n+5) {
    display: none !important;
  }
}
/* End PUMPLAB_PRODUCT_ICONS_V1 */

/* PUMPLAB_QTY_OFFER_ROW */

.product-info__qty-offer-row {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-3);
  container-type: inline-size;
  container-name: qty-offer-row;
}

/* Each block-item is a flex column so content pins to the bottom regardless of label height */
.product-info__qty-offer-row > .product-info__block-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Offer block fills remaining space */
.product-info__qty-offer-row > .product-info__block-item:has(.pl-offer) {
  flex: 1;
  min-width: 0;
}

/* Offer button stretches to full width within its block item */
.product-info__qty-offer-row .pl-offer,
.product-info__qty-offer-row .pl-offer__split,
.product-info__qty-offer-row .pl-offer__notify {
  width: 100%;
}

/* Match quantity selector height to offer button */
.product-info__qty-offer-row .quantity-selector {
  height: 55px;
}

/* Match offer button height to qty selector */
.product-info__qty-offer-row .pl-offer__split {
  min-height: 55px;
}

/* ≤699px: mobile — side-by-side, compact qty selector + offer fills remaining space */
@media screen and (max-width: 699px) {
  .product-info__qty-offer-row {
    flex-direction: row;
    align-items: stretch;
  }

  .product-info__qty-offer-row > .product-info__block-item:has(.quantity-selector) {
    flex: 0 0 auto;
    width: auto;
  }

  .product-info__qty-offer-row > .product-info__block-item:has(.pl-offer) {
    flex: 1;
    min-width: 0;
    margin-block-end: 0;
  }

  .product-info__qty-offer-row .pl-offer {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-inline-start: var(--spacing-3);
  }

  /* Constrain the golden edge sweep to start at the orange button, not the padded container */
  .product-info__qty-offer-row .pl-offer::before {
    inset: -3px -3px -3px calc(var(--spacing-3) - 3px);
  }

  .product-info__qty-offer-row > .product-info__block-item:has(.pl-offer) {
    justify-content: flex-end;
  }

  .product-info__qty-offer-row .pl-offer__split,
  .product-info__qty-offer-row .pl-offer__notify {
    height: 55px;
    min-height: 55px !important;
    font-size: 1rem;
  }

  .product-info__qty-offer-row .pl-offer__deal {
    padding: 0 var(--spacing-2);
    white-space: nowrap;
  }

  .product-info__qty-offer-row .pl-offer__divider {
    height: 24px;
    align-self: center;
  }

  .product-info__qty-offer-row .pl-offer__icon {
    flex-shrink: 0;
  }

  /* Show only the first deal on mobile — hide second deal + divider */
  .product-info__qty-offer-row .pl-offer__deal:last-child {
    display: none;
  }

  .product-info__qty-offer-row .pl-offer__divider {
    display: none;
  }

  .product-info__qty-offer-row .quantity-selector {
    height: 55px;
    width: auto;
    display: flex;
    border-width: 2px;
  }

  .product-info__qty-offer-row .quantity-selector__input {
    font-weight: 700;
    font-size: 1rem;
    width: 2.5em;
  }

  .product-info__qty-offer-row .quantity-selector__button svg {
    width: 14px;
    height: 14px;
  }
}

/* ≥700px: side-by-side at all sizes. qty block sizes to its content (~150px),
   offer fills the rest with flex-basis 280px so it wraps when there isn't enough room
   to show the button text without stacking. */
@media screen and (min-width: 700px) {
  .product-info__qty-offer-row {
    flex-wrap: wrap;
  }

  .product-info__qty-offer-row > .product-info__block-item:has(.quantity-selector) {
    flex: 0 0 auto;
    width: auto;
  }

  .product-info__qty-offer-row .quantity-selector {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .product-info__qty-offer-row > .product-info__block-item:has(.pl-offer) {
    flex: 1 0 280px;
    align-self: flex-end;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-inline-start: var(--spacing-3);
  }
}

/* When the row is too narrow to show offer buttons without text stacking (qty ~150px +
   gap 12px + offer 280px = ~442px threshold), wrap offer to a new full-width line
   and switch from border-left to border-top separator. */
@media screen and (min-width: 700px) {
  @container qty-offer-row (max-width: 441px) {
    .product-info__qty-offer-row > .product-info__block-item:has(.quantity-selector) {
      flex: 1 0 100%;
    }

    .product-info__qty-offer-row > .product-info__block-item:has(.pl-offer) {
      align-self: stretch;
      border-left: none;
      padding-inline-start: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      padding-block-start: var(--spacing-3);
    }
  }
}

/* End PUMPLAB_QTY_OFFER_ROW */

/* PUMPLAB_QTY_SELECTOR_V1 */

/* Slightly bolder qty selector on desktop */
@media screen and (min-width: 1000px) {
  .product-info__qty-offer-row .quantity-selector {
    border-width: 1.5px;
  }

  .product-info__qty-offer-row .quantity-selector__input {
    font-weight: 600;
  }
}

/* Minus button: default dimmed, no transition until JS confirms state.
   pl-qty-ready is added after setup so rerenders snap without flash. */
.product-info quantity-selector .quantity-selector__button:first-child {
  opacity: 0.3;
}
.product-info quantity-selector[data-above-min] .quantity-selector__button:first-child {
  opacity: 1;
}
/* Only enable transitions after initial JS setup — prevents flash in either direction */
.product-info quantity-selector.pl-qty-ready .quantity-selector__button:first-child {
  transition: opacity 200ms ease;
}

/* Legacy data-at-min still used elsewhere (cart drawer etc.) */
quantity-selector[data-at-min] .quantity-selector__button:first-child {
  opacity: 0.3;
  transition: opacity 200ms ease;
}

/* End PUMPLAB_QTY_SELECTOR_V1 */

/* PUMPLAB_OFFER_BUTTON_V1 */

.pl-offer {
  cursor: pointer;
  user-select: none;
}

/* Outer shell — sizing, shape, color, shimmer container.
   Uses the original site green #15803d (same as the old PUMPLAB_ATC_GREEN_V1
   before the accent sweep). Substantially darker than #2ecc71 so the glow,
   sheen, and hover brightening don't push it over the top. White text + white
   lightning icon for AA contrast (~5:1). */
.pl-offer__split {
  display: flex;
  align-items: stretch;
  min-height: 55px;
  border-radius: var(--rounded-button);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  /* padding-box = button fill; border-box = ring color at rest (matches button = invisible) */
  background: linear-gradient(#15803d, #15803d) padding-box,
              linear-gradient(#15803d, #15803d) border-box;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 22px rgba(21, 128, 61, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.25);
  transition: filter 180ms ease-out,
              box-shadow 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 350ms ease,
              visibility 350ms ease;
}

/* Each deal zone */
.pl-offer__deal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-4);
  position: relative;
  z-index: 2;
}

/* Icon + text scale together as one unit */
.pl-offer__inner {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  transition: transform 200ms ease, filter 200ms ease;
}

/* Radial glow overlay — fades in on zone hover */
.pl-offer__deal::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 0;
}

/* Left zone: light enters from the left */
.pl-offer__deal:first-child::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Right zone: light enters from the right */
.pl-offer__deal:last-child::before {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Single deal — centred radial glow instead of directional */
.pl-offer--single .pl-offer__deal::before {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Non-hovered zone darkening — fades in when sibling is hovered */
.pl-offer__deal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 200ms ease;
  pointer-events: none;
  z-index: 0;
}

/* Thin vertical divider */
.pl-offer__divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  align-self: center;
  position: relative;
  z-index: 2;
}

/* Slow continuous shimmer — 18s cycle, 3s sweep (~17%), 15s pause */
.pl-offer__split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0)    20%,
    rgba(255, 255, 255, 0.3)  50%,
    rgba(255, 255, 255, 0)    80%,
    transparent 100%
  );
  animation: pl_offer_shine 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes pl_offer_shine {
  0%   { transform: translateX(-120%); }
  17%  { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}

/* Hover-entry flash shimmer */
.pl-offer__split::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0)    20%,
    rgba(255, 255, 255, 0.5)  50%,
    rgba(255, 255, 255, 0)    80%,
    transparent 100%
  );
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 4;
}

@media (hover: hover) and (pointer: fine) {
  /* Zone radial glow fades in */
  .pl-offer__deal:hover::before {
    opacity: 1;
  }

  /* Icon + text scale as one unit on the hovered zone */
  .pl-offer__deal:hover .pl-offer__inner {
    transform: scale(1.06);
  }

  /* Full-button flash on hover entry */
  .pl-offer__split:hover::after {
    animation: pl_offer_flash 1.8s ease-in-out forwards;
  }

  /* Left hovered → right zone darkens from center outward (transparent at divider, dark at far right) */
  .pl-offer__split:has(.pl-offer__deal:first-child:hover) .pl-offer__deal:last-child::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
  }

  /* Right hovered → left zone darkens from center outward (transparent at divider, dark at far left) */
  .pl-offer__split:has(.pl-offer__deal:last-child:hover) .pl-offer__deal:first-child::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
  }

  /* Glow intensifies on hover — ring is handled by gradient border below */
  .pl-offer__split:hover {
    filter: brightness(1.08);
    box-shadow:
      0 0 12px rgba(21, 128, 61, 0.55),
      0 0 28px rgba(10, 100, 45, 0.48),
      0 2px 8px rgba(0, 0, 0, 0.25);
  }

  /* Left hovered: light ring on left side, dark green on right */
  .pl-offer__split:has(.pl-offer__deal:first-child:hover) {
    background: linear-gradient(#15803d, #15803d) padding-box,
                linear-gradient(to right, rgba(100, 190, 130, 1.0) 0%, rgba(21, 128, 61, 1.0) 52%) border-box;
  }

  /* Right hovered: light ring on right side, dark green on left */
  .pl-offer__split:has(.pl-offer__deal:last-child:hover) {
    background: linear-gradient(#15803d, #15803d) padding-box,
                linear-gradient(to left, rgba(100, 190, 130, 1.0) 0%, rgba(21, 128, 61, 1.0) 52%) border-box;
  }
}

@keyframes pl_offer_flash {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(250%); }
}

/* Press */
.pl-offer__split:active {
  transform: scale(0.97) !important;
  filter: brightness(0.75) !important;
  transition: transform 70ms ease-in, filter 70ms ease-in !important;
}

/* Loading state */
.pl-offer[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}

/* PUMPLAB_OFFER_EDGE_SHINE_V1 — one-shot border sweep on page load */
.pl-offer {
  position: relative;
}

.pl-offer::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--rounded-button) + 3px);
  padding: 2px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;

  background:
    linear-gradient(rgb(0 0 0 / 0.0), rgb(0 0 0 / 0.0)) padding-box,
    repeating-linear-gradient(
      150deg,
      rgb(255 255 255 / 0)    0%,
      rgb(255 255 255 / 0)    30%,
      rgb(255 255 255 / 0.35) 38%,
      rgb(255 255 255 / 1)    50%,
      rgb(255 255 255 / 0.35) 62%,
      rgb(255 255 255 / 0)    70%,
      rgb(255 255 255 / 0)    100%
    ) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, -40% 0;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(rgba(0, 0, 0, 0.985) 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(rgba(0, 0, 0, 0.985) 0 0);
  mask-composite: exclude;

  animation: pl_offer_edge_intro 3s ease-in-out 0.5s 1 forwards;
}

@keyframes pl_offer_edge_intro {
  0%   { opacity: 0; background-position: 0 0, -40% 0; }
  8%   { opacity: 1; background-position: 0 0, -50% 0; }
  75%  { opacity: 0.7; background-position: 0 0, -220% 0; }
  100% { opacity: 0; background-position: 0 0, -240% 0; }
}
/* End PUMPLAB_OFFER_EDGE_SHINE_V1 */

/* End PUMPLAB_OFFER_BUTTON_V1 */

/* PUMPLAB_PAYMENT_ICONS_V1 — Payment method icons below ATC button */
.pl-payment-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -86px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  justify-content: center;
  max-width: 48%;
}

.pl-payment-icons:hover {
  opacity: 0.9;
}

.pl-payment-icons {
  pointer-events: none;
}

.pl-pay-icon {
  flex-shrink: 0;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .pl-pay-icon {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
  }
  .pl-pay-icon:hover {
    transform: translateY(-3px);
  }
}

/* Hide icons until animation has played */
.pl-payment-icons--pending .pl-pay-icon {
  opacity: 0;
}

/* Intro animation — only on first page load */
.pl-payment-icons--intro .pl-pay-icon {
  opacity: 0;
  transform: translateY(3px);
  animation: pl-pay-in 0.6s cubic-bezier(.2, .6, .35, 1) forwards;
}

@keyframes pl-pay-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop — delayed entrance on page load */
.pl-payment-icons--intro .pl-pay-icon:nth-child(1) { animation-delay: 0.9s; }
.pl-payment-icons--intro .pl-pay-icon:nth-child(2) { animation-delay: 0.97s; }
.pl-payment-icons--intro .pl-pay-icon:nth-child(3) { animation-delay: 1.08s; }
.pl-payment-icons--intro .pl-pay-icon:nth-child(4) { animation-delay: 1.22s; }

/* Mobile — scroll-triggered, smooth and soft */
@media screen and (max-width: 699px) {
  .pl-payment-icons--intro .pl-pay-icon {
    transform: translateY(8px);
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(.05, .7, .1, 1);
  }
  .pl-payment-icons--intro .pl-pay-icon:nth-child(1) { animation-delay: 0.1s; }
  .pl-payment-icons--intro .pl-pay-icon:nth-child(2) { animation-delay: 0.22s; }
  .pl-payment-icons--intro .pl-pay-icon:nth-child(3) { animation-delay: 0.38s; }
  .pl-payment-icons--intro .pl-pay-icon:nth-child(4) { animation-delay: 0.56s; }
}

.pl-pay-icon svg {
  width: 34px;
  height: 22px;
  border-radius: 3px;
  display: block;
}

/* Hide when ATC button is disabled (sold out variant) */
buy-buttons:has(button[type="submit"][disabled]) ~ .pl-payment-icons {
  display: none;
}

@media screen and (max-width: 699px) {
  .pl-payment-icons {
    margin-top: -12px;
    margin-bottom: 4px;
    max-width: 100%;
    justify-content: center;
  }

  .pl-pay-icon svg {
    width: 42px;
    height: 27px;
  }
}
/* Gift card template (presentkort): the -86px pull-up + 48% max-width was
   designed to float icons over the standard black ATC button on regular
   products. On presentkort the ATC is WHITE and the gift recipient form
   pushes layout around, so the icons end up overlapping/clipping the ATC
   label. Reset to a normal below-button layout, tight spacing to the CTA. */
body.product-presentkort .pl-payment-icons {
  margin-top: -8px;
  max-width: 100%;
  justify-content: center;
}
/* End PUMPLAB_PAYMENT_ICONS_V1 */

/* End PUMPLAB_BUNDLE_BTN_COLOR_V1 (no override — using original orange from OFFER_BUTTON_V1) */

/* PUMPLAB_SOLDOUT_STATE_V1 — sold-out variant crossfade and ATC expansion */

/* Notify-me button: hidden by default, rendered in normal flow inside .pl-offer
   so it matches the same sizing as the .pl-offer__split buttons.
   Full interactive styles matching PUMPLAB_BACKORDER_BTN_V1. */
.pl-offer__notify {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 100%;
  min-height: 55px;
  border: none !important;
  border-radius: var(--rounded-button);
  background-color: #A79F8A !important;
  background: #A79F8A !important;
  color: #101010 !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease, background-color 200ms ease;
  will-change: opacity, transform;
}

/* Bell icon (svg) inherits dark color via currentColor */
.pl-offer__notify svg {
  color: #101010 !important;
  fill: currentColor;
}

/* Disable standard dark-fill sweep — use white glow on accent fill */
.button.pl-offer__notify:not([disabled]):not(.button--subdued)::before {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Cursor-following white radial glow on the accent fill */
.button.pl-offer__notify:not([disabled]):not(.button--subdued)::after {
  background: radial-gradient(
    110px circle at var(--btn-mx, 50%) var(--btn-my, 50%),
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.0) 100%
  ) !important;
  clip-path: none !important;
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .button.pl-offer__notify:not([disabled]):not(.button--subdued):hover::after {
    opacity: 1 !important;
  }

  .pl-offer__notify:hover:not(.pl-pressed) {
    filter: brightness(1.09);
  }
}

/* Bell icon jingle on hover — PUMPLAB_BELL_JINGLE_V1 */
@keyframes pl-bell-jingle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(14deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(8deg); }
  60%  { transform: rotate(-6deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@media (hover: hover) and (pointer: fine) {
  .pl-offer__notify:hover svg {
    animation: pl-bell-jingle 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 4px;
  }
}
/* End PUMPLAB_BELL_JINGLE_V1 */

/* Keep dark text when PUMPLAB hover JS adds pl-hover */
.button.pl-offer__notify.pl-hover {
  color: #101010 !important;
}

/* Hide original GetWidgets button — replaced by .pl-offer__notify overlay */
product-rerender .gw-button-widget,
.product-info .gw-button-widget {
  display: none !important;
}

/* Offer split: hide when sold out, show notify instead */
.pl-soldout .pl-offer__split {
  display: none;
}

/* Offer edge shine hidden when sold out */
.pl-soldout .pl-offer::before {
  display: none;
}

/* Notify-me: show when sold out */
.pl-soldout .pl-offer__notify {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* ATC button: expand to full width on desktop when sold out (Shop Pay is already hidden) */
@media screen and (min-width: 700px) {
  .pl-soldout .buy-buttons--multiple {
    grid-template-columns: 1fr;
  }
}

/* Lock buy-buttons height when sold out — prevents content below from jumping.
   Height is captured by JS and stored as --pl-buy-height on product-rerender before DOM swap. */
.pl-soldout buy-buttons {
  min-height: var(--pl-buy-height, auto);
}

/* Subtle entrance animation for the sold-out ATC after rerender */
@keyframes pl_atc_soldout_enter {
  from { opacity: 0.6; transform: scaleX(0.88); }
  to   { opacity: 1;   transform: scaleX(1); }
}

@media screen and (min-width: 700px) {
  .pl-soldout buy-buttons .button[disabled] {
    animation: pl_atc_soldout_enter 400ms cubic-bezier(.22, 1, .36, 1) both;
    transform-origin: left center;
  }
}

/* Qty selector: fade out in sold-out state */
.product-info__quantity-selector {
  transition: opacity 350ms ease;
}
.pl-soldout .product-info__quantity-selector {
  opacity: 0.3;
  pointer-events: none;
}

/* End PUMPLAB_SOLDOUT_STATE_V1 */

/* PUMPLAB_ANNOUNCEMENT_FONT_V1 */
.pl-title {
  text-transform: uppercase !important;
  text-align: center;
}

@media (max-width: 767px) {
  .pl-title {
    font-family: 'Monument Extended Black', sans-serif !important;
    letter-spacing: 0.06em !important;
  }
}

@media (min-width: 768px) {
  .pl-title {
    font-family: 'Monument Extended Black', sans-serif !important;
    letter-spacing: 0.04em !important;
    transform: translateY(1.5px);
  }
}

/* Shorten the wide dash/minus in Monument Extended */
.pl-title .pl-dash {
  display: inline-block;
  transform: scaleX(0.5);
  margin: 0 -0.05em;
}

.pl-inner {
  min-height: 38px !important;
}

.pl-rot-stage {
  min-height: 38px !important;
}
/* End PUMPLAB_ANNOUNCEMENT_FONT_V1 */

/* Ta bort glapp mellan announcement bar och header i Impact */
.shopify-section-group-header-group {
  display: flex;
  flex-direction: column;
}

.announcement-bar {
  border-bottom: none !important;
  margin-bottom: -1px !important; /* Tvingar sektionerna att överlappa med 1px */
}

#shopify-section-header {
  margin-top: 0 !important;
  border-top: none !important;
}

#shopify-section-sections--header_group {
  background-color: #1a1a1a !important; /* Byt ut till exakt samma färgkod som din header/announcement bar */
}

.pumplab-card-lift {
  position: relative;
  transform-origin: 50% 50%;
  transition:
    transform 240ms cubic-bezier(.22,.61,.36,1),
    box-shadow 240ms ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  isolation: isolate;
}

.pumplab-card-tilt {
  height: 100%;
  transform-origin: 100% 0%;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  backface-visibility: hidden;
}

.pumplab-card-lift:hover,
.pumplab-card-lift:focus-within {
  box-shadow:
    0 4px 8px rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.32) !important;
  border-color: rgba(255,255,255,.12) !important;
}


.pumplab-card-lift:hover .pumplab-card-tilt,
.pumplab-card-lift:focus-within .pumplab-card-tilt {
  /* no inner transform */
}

.pumplab-card-lift:active {
  transform: scale(0.98) !important;
  animation: none !important;
  transition: transform 100ms ease !important;
}

.pumplab-card-lift:active .pumplab-card-tilt {
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .pumplab-card-lift,
  .pumplab-card-tilt {
    transition: none;
    animation: none !important;
  }
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  height:auto !important;
  min-height:50px !important;
  padding:10px 12px !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item{
  width:100% !important;
  display:flex !important;
  justify-content:flex-start !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-flavor-lines{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
  gap:5px !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-flavor-name{
  font-weight:600;
  line-height:1.15;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-stock{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  line-height:1;
  font-weight:500;
  transform:translateY(-1px);
}

variant-picker .variant-picker__option-values .pl-stock--in{ color:#2ecc71; }
variant-picker .variant-picker__option-values .pl-stock--low{ color:#f39c12; }
variant-picker .variant-picker__option-values .pl-stock--out{ color:#e74c3c; }

variant-picker .variant-picker__option-values .pl-stock--in .pl-stock__icon{
  background:currentColor;
}

/* SOLD OUT default: färre streck + lite tjockare */
variant-picker .variant-picker__option-values label.block-swatch.is-disabled{
  border-style:dashed !important;
  border-width:2px !important;                 /* färre streck */
  border-color:rgba(255,255,255,.35) !important;
  background-image:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* ta bort diagonal strike */
variant-picker .variant-picker__option-values label.block-swatch.is-disabled::before,
variant-picker .variant-picker__option-values label.block-swatch.is-disabled::after{
  content:none !important;
  display:none !important;
}

variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.is-disabled{
  border-color:#fff !important;
  box-shadow:none !important;
  outline:none !important;
  filter:none !important;
}

variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.is-disabled:focus-within{
  box-shadow:none !important;
  outline:none !important;
}

variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.is-disabled .block-swatch__item{
  box-shadow:none !important;
  outline:none !important;
}

/* Stabil ikon via SVG mask, färg från currentColor */
variant-picker .variant-picker__option-values .pl-stock__icon{
  width:10px;
  height:10px;
  flex:0 0 auto;
  background-color:currentColor;

  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* In stock: fylld cirkel */
variant-picker .variant-picker__option-values .pl-stock--in .pl-stock__icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'black'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'black'/%3E%3C/svg%3E");
}

/* Low stock: ring */
variant-picker .variant-picker__option-values .pl-stock--low .pl-stock__icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'%20/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'%20/%3E%3C/svg%3E");
}

/* Sold out: ring med slash */
variant-picker .variant-picker__option-values .pl-stock--out .pl-stock__icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'/%3E%3Cline%20x1%3D'7'%20y1%3D'17'%20x2%3D'17'%20y2%3D'7'%20stroke%3D'black'%20stroke-width%3D'3'%20stroke-linecap%3D'round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'3'/%3E%3Cline%20x1%3D'7'%20y1%3D'17'%20x2%3D'17'%20y2%3D'7'%20stroke%3D'black'%20stroke-width%3D'3'%20stroke-linecap%3D'round'/%3E%3C/svg%3E");
}

/* Om du vill att ikonen ska skala på mobil */
@media (max-width: 420px){
  variant-picker .variant-picker__option-values .pl-stock__icon{
    width:9px;
    height:9px;
  }
}

variant-picker .variant-picker__option-values .pl-stock__icon{
  width:12px;
  height:12px;
}

@media (max-width: 420px){
  variant-picker .variant-picker__option-values .pl-stock__icon{
    width:11px;
    height:11px;
  }
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  will-change: transform;
}

/* Hover (in stock + low stock) */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover{
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.04);
}

/* “Press” känsla */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):active{
  transform: translateY(0px);
  background-color: rgba(255,255,255,.06);
}

/* Hover även på sold out (valfritt, men subtilt) */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option.is-disabled:hover{
  background-color: rgba(255,255,255,.02);
}

/* Gör så att din sold out border-color animeras snyggt vid klick */
variant-picker .variant-picker__option-values label.block-swatch.is-disabled{
  transition: border-color 180ms ease, background-color 140ms ease;
}

/* Om du vill att din dashed ska “snäppa” lite när den blir vald */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.is-disabled{
  transition: border-color 180ms ease;
}

@media (hover:hover) and (pointer:fine){
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
    position:relative;
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity 140ms ease;

    background:
      radial-gradient(
        150px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,.0),
        rgba(255,255,255,.0) 32%,
        rgba(255,255,255,0) 68%
      ),
      radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,.10),
        rgba(255,255,255,0) 72%
      );
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:hover::before{
    opacity:1;
  }
}

/* 1) Alltid en (subtil) outline även utan hover */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled){
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important; /* döda ev ring på label */
}

/* 2) Döda theme’s “inre outline” på hover */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item{
  box-shadow:none !important;
  outline:none !important;
}

/* 3) Vald knapp: samma outline men vit */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option:not(.is-disabled){
  border-color:#fff !important;
}

/* 4) (Valfritt) liten hover-boost utan extra ring */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover{
  border-color:rgba(255,255,255,.30) !important;
}

/* Döda theme “inner outline” på hover/focus för smak-knappar */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover,
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):focus-within{
  box-shadow:none !important;
  outline:none !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled) .block-swatch__item{
  box-shadow:none !important;
  outline:none !important;
  border:none !important;            /* om temat använder border på item */
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover .block-swatch__item,
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):focus-within .block-swatch__item{
  box-shadow:none !important;
  outline:none !important;
  border:none !important;
}

/* Om den ritas via pseudo-element */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled) .block-swatch__item::before,
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled) .block-swatch__item::after{
  content:none !important;
  display:none !important;
}

/* Fix: stoppa theme "inner outline" som kommer från .block-swatch::before */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option::before{
  transform: scale(1) !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:hover::before,
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:focus-within::before{
  transform: scale(1) !important;
}

/* extra safe: när vald */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option::before{
  transform: scale(1) !important;
}

@media (hover:hover) and (pointer:fine){
  /* Default glow (alla knappar) */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
    --pl-glow-rgb: 255,255,255;
    --pl-glow-a: .08;     /* styr styrkan */
    --pl-glow-b: .03;     /* andra, större “soft” glow */
    --pl-glow-r1: 140px;  /* inner radius */
    --pl-glow-r2: 230px;  /* outer radius */
    position:relative;
  }

  /* Sold out glow (svagare + röd) */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option.is-disabled{
    --pl-glow-rgb: 231,76,60; /* samma röd som du kör */
    --pl-glow-a: .8;
    --pl-glow-b: .03;
    --pl-glow-r1: 130px;
    --pl-glow-r2: 210px;
  }

  /* Glow-layer (ficklampa) */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity 140ms ease;

    background:
      radial-gradient(
        var(--pl-glow-r1) circle at var(--mx, 50%) var(--my, 50%),
        rgba(var(--pl-glow-rgb), var(--pl-glow-a)),
        rgba(var(--pl-glow-rgb), 0) 70%
      ),
      radial-gradient(
        var(--pl-glow-r2) circle at var(--mx, 50%) var(--my, 50%),
        rgba(var(--pl-glow-rgb), var(--pl-glow-b)),
        rgba(var(--pl-glow-rgb), 0) 72%
      );
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:hover::after{
    opacity:1;
  }

  /* Se till att text/contents ligger över glow */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item{
    position:relative;
    z-index:1;
  }
}

@media (hover:hover) and (pointer:fine){
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
    position:relative;
    --pl-glow-rgb: 255,255,255;
    --pl-glow-a1: .16;
    --pl-glow-a2: .08;
    --pl-glow-r1: 150px;
    --pl-glow-r2: 240px;
  }

  /* Sold out: svagare + röd */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option.is-disabled{
    --pl-glow-rgb: 231,76,60;
    --pl-glow-a1: .10;
    --pl-glow-a2: .05;
    --pl-glow-r1: 140px;
    --pl-glow-r2: 220px;
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item{
    position:relative;
    z-index:1;
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-hover-glow{
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity 140ms ease;
    z-index:0;
    mix-blend-mode: screen;

    background:
      radial-gradient(
        var(--pl-glow-r1) circle at var(--mx, 50%) var(--my, 50%),
        rgba(var(--pl-glow-rgb), var(--pl-glow-a1)),
        rgba(var(--pl-glow-rgb), 0) 70%
      ),
      radial-gradient(
        var(--pl-glow-r2) circle at var(--mx, 50%) var(--my, 50%),
        rgba(var(--pl-glow-rgb), var(--pl-glow-a2)),
        rgba(var(--pl-glow-rgb), 0) 75%
      );
  }

  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:hover .pl-hover-glow{
    opacity:1;
  }
}

@media (hover:hover) and (pointer:fine){
  /* Default glow */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-hover-glow{
    background:
      radial-gradient(
        150px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,.18),
        rgba(255,255,255,0) 70%
      ),
      radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,255,255,.08),
        rgba(255,255,255,0) 75%
      );
  }

  /* Sold out glow: svagare + röd */
  variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option.is-disabled .pl-hover-glow{
    background:
      radial-gradient(
        150px circle at var(--mx, 50%) var(--my, 50%),
        rgba(231,76,60,.12),
        rgba(231,76,60,0) 70%
      ),
      radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(231,76,60,.05),
        rgba(231,76,60,0) 75%
      ) !important;
  }
}

/* Vald knapp: lite ljusare fill */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option{
  background-color: rgba(255,255,255,.04) !important;
  transition: background-color 140ms ease;
}

/* PUMPLAB_VARIANT_PICKER_V1 — dark theme styling for product page variant picker */

/* 1. Background — dark fill matching site aesthetic */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled) {
  background-color: rgb(22 22 22) !important;
}

/* Selected: slightly lighter fill */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option:not(.is-disabled) {
  background-color: rgb(28 28 28) !important;
}

/* 2. Border — subtle dark grey, not harsh */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled) {
  border: 1px solid rgba(255,255,255,.12) !important;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover {
  border-color: rgba(255,255,255,.25) !important;
}

variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option:not(.is-disabled) {
  border-color: rgba(255,255,255,.50) !important;
}

/* 3. Flavor name — bolder weight */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-flavor-name {
  font-weight: 700;
}

/* 4. Chevron / option info — consistent with dark interactive style */
variant-picker .variant-picker__option-info legend.text-subdued {
  color: rgba(255,255,255,.55);
  font-weight: 600;
  letter-spacing: 0.01em;
}

variant-picker .variant-picker__option-info span {
  font-weight: 650;
}

/* End PUMPLAB_VARIANT_PICKER_V1 */

/* PUMPLAB_VARIANT_ENTRANCE_V1 — stagger fade-in for variant swatches on page load */
@keyframes pl_variant_enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option {
  opacity: 0;
  animation: pl_variant_enter 0.35s cubic-bezier(.22, 1, .36, 1) forwards;
}
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(1)  { animation-delay: 0.05s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(2)  { animation-delay: 0.1s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(3)  { animation-delay: 0.15s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(4)  { animation-delay: 0.2s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(5)  { animation-delay: 0.25s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(6)  { animation-delay: 0.3s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(7)  { animation-delay: 0.35s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(8)  { animation-delay: 0.4s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(9)  { animation-delay: 0.45s; }
.product-info__variant-picker:not(.pl-loaded) label.pl-flavor-option:nth-of-type(10) { animation-delay: 0.5s; }
/* End PUMPLAB_VARIANT_ENTRANCE_V1 */

/* Vald slutsåld: lite svagare fill så dashed fortfarande känns rätt */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option.is-disabled{
  background-color: rgba(255,255,255,.02) !important;
}

/* Vald knapp: subtil fill (funkar även när temat använder background-shorthand) */
variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option{
  transition: box-shadow 140ms ease, background-color 140ms ease;
}

/* Vanliga val */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option:not(.is-disabled){
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.10) !important;
}

/* Slutsåld val: lite svagare fill */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option.is-disabled{
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.035) !important;
}





---------------------------


.pl-card-title{
  display:block;
  text-decoration:none;
} 

.pl-card-title__main{
  display:block;
  font-weight:800;
  line-height:1.1;
  font-size:1.1rem;
}

.pl-card-title__sub{
  display:block;
  margin-top:4px;
  font-weight:600;
  font-size:0.9rem;
  color: rgb(var(--text-color) / 0.65);
}

.pl-title-stack__main{
  display:block;
  font-weight:900;
  line-height:1.05;
}

.pl-title-stack__sub{
  display:block;
  margin-top:6px;
  font-weight:600;
  font-size:0.95rem;
  opacity:0.65;
}

.product-info__title.pl-title-stack{
  font-size: clamp(32px, 3.2vw, 52px);
}

.pl-title-stack__link{
  text-decoration:none;
}

.product-info__title.pl-title-stack .pl-title-stack__main{
  font-weight: 900;
  letter-spacing: 0.02em;
}

.product-info__title.pl-title-stack .pl-title-stack__sub{
  margin-top: 10px;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.product-info__title.pl-title-stack{
  margin-bottom: 14px;
}

.product-info__title.pl-title-stack .pl-title-stack__main{
  font-weight: 950;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.product-info__title.pl-title-stack .pl-title-stack__sub{
  margin-top: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(16px, 1.25vw, 20px);
  opacity: 0.85;
}

.pl-card-title{
  display:block;
  text-decoration:none;
}

.pl-card-title__main{
  display:block;
  font-weight:900;
  line-height:1.1;
}

.pl-card-title__sub{
  display:block;
  margin-top:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.85rem;
  color:#A9A9A9;
}

/* Card title */
.pl-card-title__main{
  font-weight: 950;
  font-size: 1.15rem;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

/* Card subtitle */
.pl-card-title__sub{
  margin-top: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: #A9A9A9;
}

/* Price color on cards (make it match title) */
.product-card__price,
.price-list,
.product-card .price{
  color: #fff;
}

.product-card .pl-card-title__main{
  font-weight: 950;
  font-size: 1.22rem;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.product-card .pl-card-title__sub{
  margin-top: 6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.80rem;
  color: #A9A9A9;
}

.product-card .pl-card-price,
.product-card .pl-card-price .price-list,
.product-card .pl-card-price .price,
.product-card .pl-card-price .money{
  color: #fff !important;
}

.product-card .pl-card-price .price--compare,
.product-card .pl-card-price .price--compare .money{
  color: rgb(255 255 255 / 0.55) !important;
}

/* Card title */
.product-card .pl-card-title__main{
  font-weight: 950 !important;
  font-size: 1.22rem;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.product-card .pl-card-title__sub{
  margin-top: 1px;
  padding-bottom: 8px;
  position: relative;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: #7c7c7c;
}

.product-card .pl-card-title__sub::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 82%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Card price: make it white like the title */
.product-card .pl-card-price{
  color: rgb(var(--text-color));
}

.product-card .pl-card-price .text-subdued{
  color: inherit !important;
}

.product-card .pl-card-price compare-at-price{
  color: rgb(var(--text-color) / 0.55) !important;
}

.product-card .pl-card-title__main{
  font-family: 'Monument Extended Black', sans-serif;
  font-size: 1.38rem !important;
  font-weight: 950 !important;
  line-height: 1.05;
  overflow-wrap: break-word;
}

@media screen and (max-width: 699px) {
  .product-card .pl-card-title__main {
    font-size: clamp(0.72rem, 4.2vw, 1.1rem) !important;
  }

  .shopify-section--featured-collection .product-card .pl-card-title__main {
    font-size: 1.38rem !important;
  }

  .product-card .product-card__info {
    overflow: hidden;
    min-width: 0;
  }

  .shopify-section--featured-collection .product-card .product-card__info {
    overflow: visible;
    min-width: auto;
  }
}

.horizontal-product__info .text-sm.bold {
  font-family: 'Monument Extended Black', sans-serif;
}

/* PUMPLAB_MOBILE_CARD_V1 — Hide quick add on smaller mobile cards */
@media screen and (max-width: 699px) {
  .product-card__quick-buy {
    display: none !important;
  }
  .shopify-section--featured-collection .product-card__quick-buy {
    display: block !important;
  }
}
/* End PUMPLAB_MOBILE_CARD_V1 */



.product-card{
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: 7px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.015);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .product-card:hover{
    transform: translateY(-2px);
    border-color: rgb(255 255 255 / 0.09);
    box-shadow: 0 16px 44px rgb(0 0 0 / 0.55);
  }
}

@media (hover:hover) and (pointer:fine){
  .pumplab-card-lift .product-card__figure{
    transition: transform 220ms ease;
    transition-delay: 0s;
  }

  .pumplab-card-lift:hover .product-card__figure{
    transition-delay: 100ms;
    transform: translate3d(0,0px,0) scale(1);
  }
}

@media (hover:hover) and (pointer:fine){
  /* Klipp allt i bildytan så inget kan spilla ner i info */
  product-card.pumplab-card-lift .product-card__figure{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* Se till att länken är block så bilden beter sig stabilt */
  product-card.pumplab-card-lift .product-card__figure > a{
    display: block;
  }

  /* Skala BILDEN, inte figure */
  product-card.pumplab-card-lift .product-card__image{
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transform-origin: 50% 45%;
    transition: transform 220ms ease;
    transition-delay: 0ms;
  }

  /* Bilden poppar 0,1s efter kortet */
  product-card.pumplab-card-lift:hover .product-card__image{
    transition-delay: 100ms;
    transform: scale(1.03);
  }

  product-card.pumplab-card-lift:hover .product-card__figure::after{
    transition-delay: 100ms;
    opacity: 1;
  }

  /* Info ska alltid ligga över */
  product-card.pumplab-card-lift .product-card__info{
    position: relative;
    z-index: 2;
  }
}

@media (hover:hover) and (pointer:fine){
  /* 1) Bilden först (ingen delay) */
  product-card.pumplab-card-lift .product-card__image,
  .product-card.pumplab-card-lift .product-card__image{
    transition-delay: 0ms !important;
  }

  product-card.pumplab-card-lift:hover .product-card__image,
  .product-card.pumplab-card-lift:hover .product-card__image{
    transition-delay: 0ms !important;
  }

  /* 2) Kortet efter (delay bara på hover in) */
  product-card.pumplab-card-lift,
  .product-card.pumplab-card-lift{
    transition-delay: 0ms !important;
  }

  product-card.pumplab-card-lift:hover,
  .product-card.pumplab-card-lift:hover{
    transition-delay: 100ms !important;
  }

  /* 3) Anti blur försök (Chrome): bättre sampling på transformade bilder */
  product-card.pumplab-card-lift .product-card__image,
  .product-card.pumplab-card-lift .product-card__image{
    backface-visibility: hidden;
    transform: translate3d(0,0,0) scale(1);
    image-rendering: -webkit-optimize-contrast;
  }

  product-card.pumplab-card-lift:hover .product-card__image,
  .product-card.pumplab-card-lift:hover .product-card__image{
    transform: translate3d(0,0,0) scale(1.03);
  }
}

@media (hover:hover) and (pointer:fine){
  product-card.pumplab-card-lift,
  .product-card.pumplab-card-lift{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    transition-delay: 0ms;
  }

  product-card.pumplab-card-lift:hover,
  .product-card.pumplab-card-lift:hover{
    transition-delay: 100ms;
  }

  product-card.pumplab-card-lift .product-card__image,
  .product-card.pumplab-card-lift .product-card__image{
    transition-delay: 0ms !important;
  }

  product-card.pumplab-card-lift:hover .product-card__image,
  .product-card.pumplab-card-lift:hover .product-card__image{
    transition-delay: 0ms !important;
  }
}

@media (hover:hover) and (pointer:fine){
  /* Kortet först */
  product-card.pumplab-card-lift,
  .product-card.pumplab-card-lift{
    transition-delay: 0ms !important;
  }

  product-card.pumplab-card-lift:hover,
  .product-card.pumplab-card-lift:hover{
    transition-delay: 0ms !important;
  }

  /* Bilden efter */
  product-card.pumplab-card-lift .product-card__image,
  .product-card.pumplab-card-lift .product-card__image{
    transition-delay: 0ms !important;
  }

  product-card.pumplab-card-lift:hover .product-card__image,
  .product-card.pumplab-card-lift:hover .product-card__image{
    transition-delay: 100ms !important;
  }
}


#shopify-section-{{ section.id }} .pl-related-carousel{
  padding-top: 22px;
  padding-bottom: 34px;
  margin-top: -22px;
  margin-bottom: -34px;
}

/* Om en inner wrapper också klipper hover/shadow */
#shopify-section-{{ section.id }} .pl-related-carousel reveal-items,
#shopify-section-{{ section.id }} .pl-related-carousel .product-list{
  overflow: visible;
}



/* PUMPLAB_SWEEP_BACK_TO_STABLE_V9 */

@media (hover:hover) and (pointer:fine){
  .product-card.pumplab-card-lift:hover{
    border-color: transparent;
  }
}

.product-card.pumplab-card-lift{
  position: relative;
}

.product-card.pumplab-card-lift::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1px;
  pointer-events:none;
  z-index: 6;

  background:
    linear-gradient(rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.06)) padding-box,
    repeating-linear-gradient(
      110deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 35%,
      rgb(255 255 255 / 0.35) 50%,
      rgb(255 255 255 / 0) 65%,
      rgb(255 255 255 / 0) 100%
    ) border-box;

  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;

  opacity: 0;
  transition: opacity 220ms ease;
  transition-delay: 0ms;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  will-change: opacity, background-position;

  /* Animation always defined here — just paused when not hovered.
     On hover-out the animation freezes in place; opacity fades out smoothly.
     No position snap, no movement to any corner. */
  animation-name: pl_plab_intro_v9, pl_plab_loop_v9;
  animation-duration: 950ms, 5200ms;
  animation-timing-function: linear, linear;
  animation-delay: 0ms, 950ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-play-state: paused;
}

/* Hover: resume animation, fade in */
@media (hover:hover) and (pointer:fine){
  .product-card.pumplab-card-lift:hover::before{
    opacity: 1;
    transition-delay: 70ms;
    animation-play-state: running;
  }

  /* JS adds this class for two frames on mouseenter to reset animation to t=0 */
  .product-card.pumplab-card-lift.pl-anim-reset::before {
    animation: none !important;
  }
}

/* PUMPLAB_CARD_GLARE_V1 — subtle light glare on hover, lower-left origin */
.product-card.pumplab-card-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 100% 70% at 15% 65%,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.008) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms ease;
}

@media (hover:hover) and (pointer:fine) {
  .product-card.pumplab-card-lift:hover::after {
    opacity: 1;
    transition-delay: 80ms;
  }
}
/* End PUMPLAB_CARD_GLARE_V1 */

/* PUMPLAB_INTRO_END_SPEED */
@keyframes pl_plab_intro_v9{
  0%   { background-position: 0 0,  -40% 0; }
  5%   { background-position: 0 0, -233% 0; }
  12%  { background-position: 0 0, -282% 0; }
  22%  { background-position: 0 0, -308% 0; }
  100% { background-position: 0 0, -360% 0; }
}

/* Loop: din “magiska” loop (-200 per varv) */
@keyframes pl_plab_loop_v9{
  0%   { background-position: 0 0, -360% 0; } /* LOOP START */
  18%  { background-position: 0 0, -450% 0; }
  70%  { background-position: 0 0, -505% 0; }
  100% { background-position: 0 0, -560% 0; } /* -200 per varv */
}

---------------------------------

/* PL_JUDGEME_GRAD_STARS_V1 */
.pl-rating-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  line-height:1;
}

.pl-rating-badge__stars{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-top:1px;
  --pl-star-filled:#f5b301;
  --pl-star-empty:rgba(255,255,255,.28);
  --pl-star-stroke:#f5b301;
}

.pl-rating-badge--unrated .pl-rating-badge__stars {
  --pl-star-stroke: rgba(255, 255, 255, 0.28);
}

/* Viktigt: dödar “extra raden” om temat lägger drop-shadow/filter på svg */
.pl-rating-badge__stars,
.pl-rating-badge__stars svg,
.pl-rating-badge__stars path{
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

.pl-rating-badge__star{
  width:18px;
  height:18px;
  display:block;
}

.pl-rating-badge__count{
  opacity:.85;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* PL_JUDGEME_GRAD_ALIGN_V1 */
.pl-rating-badge{
  display:flex;              /* inte inline-flex */
  align-items:center;
  flex-wrap:wrap;            /* så den inte ser “skev” ut på smala rader */
  column-gap:10px;
  row-gap:6px;
  line-height:1;
}

.pl-rating-badge__value,
.pl-rating-badge__count{
  line-height:1;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
}

.pl-rating-badge__stars{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;                /* dödar den lilla offseten */
  margin:0;
}

.pl-rating-badge__star{
  width:18px;
  height:18px;
  display:block;
  margin:0;
}

.pl-rating-badge__count{
  padding-top:0;
}

/* PL_JUDGEME_RIGHT_ALIGN_V1 */
.pl-rating-badge{
  margin-left:auto;     /* pushar den åt höger */
  justify-content:flex-end;
  text-align:right;
}

/* PL_CARD_RATING_UNDER_SUBTITLE_V3 */
.product-card .pl-card-rating-under-sub{
  margin-top: 6px;
}

.product-card .pl-card-rating-under-sub .pl-rating-badge{
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

/* om din card info är centrerad i settings */
.product-card__info--center .pl-card-rating-under-sub .pl-rating-badge{
  justify-content: center !important;
}

/* PL_CARD_RATING_VALUE_ON_CARD_V1 */
.product-card .pl-card-rating-under-sub .pl-rating-badge__value{
  display: inline-flex;
  opacity: .9;
  margin-right: 8px;
  font-size: .9em;
}

/* PL_CARD_RATING_SPACING_V1 */

/* Tighta ihop 4.8 + stjärnor */
.product-card .pl-card-rating-under-sub .pl-rating-badge{
  gap: 6px !important;
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__stars{
  gap: 5px !important;
}

/* Mer luft ner till priset */
.product-card .pl-card-rating-under-sub{
  margin-bottom: 12px;
}

/* PL_CARD_RATING_TWEAKS_V1 */
.product-card .pl-card-rating-under-sub{
  margin-top: 9px;
  margin-bottom: 5px;
}

/* PL_CARD_INFO_BOTTOM_PAD_V1 — match top padding of 27px */
.product-card .product-card__info {
  padding-block-end: 20px !important;
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__star{
  width: 16px;
  height: 16px;
}

/* PL_CARD_RATING_VALUE_STARS_COUNT_V1 */
.product-card .pl-card-rating-under-sub .pl-rating-badge{
  gap: 6px !important;               /* närmare mellan värde och stjärnor */
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__stars{
  gap: 5px !important;
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__count-inline{
  opacity: .85;
  margin-left: 2px;                  /* lite luft efter stjärnorna */
}

/* PL_CARD_RATING_COUNT_INLINE_CSS_V1 */
.pl-rating-badge__count-inline{
  display:inline-flex;
  align-items:center;
  opacity:.85;
  margin-left:2px;
  line-height:1;
}

/* PL_CARD_RATING_TIGHTER_GAP_V1 */
.product-card .pl-card-rating-under-sub .pl-rating-badge{
  gap: 8px !important;                 /* huvudgapet mellan 4.8 och stars */
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__value{
  margin-right: 0 !important;          /* om temat råkar lägga marginal */
  padding-right: 0 !important;
}

/* PUMPLAB_BUTTON_SWEEP_V1 */

.button:not([disabled]):not(.button--subdued) {
  position: relative;
}

/* PUMPLAB_SWEEP_AUDIT_V1 */
.button:not([disabled]):not(.button--subdued)::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--rounded-button) + 4px);
  padding: 2px;
  pointer-events: none;
  z-index: 3;

  background:
    linear-gradient(rgb(255 255 255 / 0.0), rgb(255 255 255 / 0.0)) padding-box,
    repeating-linear-gradient(
      150deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 33%,
      rgb(255 255 255 / 0.12) 41%,
      rgb(255 255 255 / 0.5) 50%,
      rgb(255 255 255 / 0.12) 59%,
      rgb(255 255 255 / 0) 67%,
      rgb(255 255 255 / 0) 100%
    ) border-box;

  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;

  opacity: 0;
  transition: opacity 80ms ease;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  will-change: opacity, background-position;
  animation: none;
}

@keyframes pl_btn_intro_v1 {
  0%   { background-position: 0 0,  -40% 0; }
  3%   { background-position: 0 0,  -55% 0; }
  10%  { background-position: 0 0, -100% 0; }
  20%  { background-position: 0 0, -175% 0; }
  35%  { background-position: 0 0, -240% 0; }
  55%  { background-position: 0 0, -295% 0; }
  75%  { background-position: 0 0, -330% 0; }
  90%  { background-position: 0 0, -350% 0; }
  100% { background-position: 0 0, -360% 0; }
}

@keyframes pl_btn_loop_v1 {
  0%   { background-position: 0 0, -360% 0; }
  100% { background-position: 0 0, -560% 0; }
}

@media (hover:hover) and (pointer:fine) {
  .button:not([disabled]):not(.button--subdued):hover::before {
    opacity: 1;
    transition-delay: 0ms;

    animation-name: pl_btn_intro_v1, pl_btn_loop_v1;
    animation-duration: 3600ms, 3000ms;
    animation-timing-function: linear, linear;
    animation-delay: 0ms, 3600ms;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
}

/* Exclude small buttons, product card quick-buy buttons, and slideshow CTA buttons */
.button--sm::before,
.product-card .button::before,
.slideshow .button::before {
  display: none !important;
}

/* End PUMPLAB_BUTTON_SWEEP_V1 */

/* PUMPLAB_BUTTON_GLOW_V1 */
/*
  Inner glow synced with the sweep, no extra elements or JS needed.

  The sweep ::before normally uses an XOR mask of two solid-black layers to show
  only the border area. By lowering the outer layer's alpha from 1.0 → 0.85, the
  XOR composite yields:
    Border area  (only outer layer): xor(0,    0.85) = 0.85  → sweep still clearly visible
    Interior     (both layers):      xor(1.0,  0.85) = 0.15  → 15% of sweep bleeds inward

  Because ::before sits at z-index 3 (above the dark fill at z-index 1 and content
  at z-index 2), this interior glow is visible in both default and hover states.
  As the sweep's bright band travels, it softly illuminates the nearby button surface.
*/
.button:not([disabled]):not(.button--subdued)::before {
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(rgba(0, 0, 0, 0.985) 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(rgba(0, 0, 0, 0.985) 0 0);
  mask-composite: exclude;
}
/* End PUMPLAB_BUTTON_GLOW_V1 */

/* PUMPLAB_BUTTON_HEIGHT_MATCH */
@media screen and (min-width: 700px) {
  .button--xl {
    padding-block-start: var(--spacing-4) !important;
    padding-block-end: calc(var(--spacing-4) - 3px) !important;
  }
}
/* End PUMPLAB_BUTTON_HEIGHT_MATCH */

/* PUMPLAB_SHOP_PAY_SWEEP_V1 */

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  display: block;
  position: relative;
}

/* PUMPLAB_BUY_BUTTONS_FADEIN_V1 — staggered fade-in for ATC and Shop Pay */
@keyframes pl_buy_btn_enter {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

buy-buttons:not(.pl-loaded) > .button {
  opacity: 0;
  animation: pl_buy_btn_enter 0.4s cubic-bezier(.22, 1, .36, 1) 0.15s forwards;
}

buy-buttons:not(.pl-loaded) .shopify-payment-button {
  opacity: 0;
}
buy-buttons:not(.pl-loaded) .shopify-payment-button.pl-pay-ready {
  animation: pl_buy_btn_enter 0.4s cubic-bezier(.22, 1, .36, 1) forwards;
}
/* End PUMPLAB_BUY_BUTTONS_FADEIN_V1 */

/* Purple sweep outline — PUMPLAB_SWEEP_AUDIT_V1: tightened from -4px → -3px to match standard buttons */
shopify-accelerated-checkout::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 61px; /* 55px button + 3px top + 3px bottom */
  bottom: auto;
  border-radius: calc(var(--rounded-button) + 3px);
  padding: 2px;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(rgb(0 0 0 / 0.0), rgb(0 0 0 / 0.0)) padding-box,
    repeating-linear-gradient(
      150deg,
      rgb(45 28 175 / 0) 0%,
      rgb(45 28 175 / 0) 30%,
      rgb(68 46 210 / 0.22) 38%,
      rgb(85 60 240 / 0.85) 50%,
      rgb(68 46 210 / 0.22) 62%,
      rgb(45 28 175 / 0) 70%,
      rgb(45 28 175 / 0) 100%
    ) border-box;

  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;

  opacity: 0;
  transition: opacity 80ms ease;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  will-change: opacity, background-position;
  animation: none;
}

@media (hover:hover) and (pointer:fine) {
  shopify-accelerated-checkout:hover::before {
    opacity: 1;
    transition-delay: 0ms;
    box-shadow: 0 0 14px 4px rgb(68 46 226 / 0.42);

    animation-name: pl_btn_intro_v1, pl_btn_loop_v1;
    animation-duration: 3600ms, 3000ms;
    animation-timing-function: linear, linear;
    animation-delay: 0ms, 3600ms;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
}

/* Quick-buy drawer ≥700px: button is 46px — override both pseudo-elements to match.
   Mobile (<700px) uses the 54px default so these overrides must not apply there. */
@media screen and (min-width: 700px) {
  /* outline height = 46 + 3 + 3 = 52px — PUMPLAB_SWEEP_AUDIT_V1 */
  .quick-buy-drawer shopify-accelerated-checkout::before {
    height: 52px;
  }

  /* cap dark radial ::after to button height */
  .quick-buy-drawer shopify-accelerated-checkout::after {
    height: 46px;
  }
}

/* End PUMPLAB_SHOP_PAY_SWEEP_V1 */

/* PUMPLAB_BUTTON_HOVER_V1 */

/*
  @property --pl-r separates the fill RADIUS from the fill POSITION.
  Without this, every pointermove update to --btn-mx/my restarts the clip-path
  transition, causing the stutter. Now only --pl-r is animated; position snaps instantly.
*/
@property --pl-r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Text label and icon wrapper sit above the dark fill overlay */
.button__label,
.button .text-with-icon {
  position: relative;
  z-index: 2;
}

/* CustomButton wraps content in a <div> (contentElement) and always appends a
   <span class="button__loader"> (loading dots) to the button.

   The contentElement div needs position+z-index so it stays above ::after (z-index: 1)
   even after Motion One's loading animation adds transform/opacity and creates a new
   stacking context on it.

   The loader span is taken out of flex flow (position: absolute) so it never
   contributes to the button's height, then centered so its animation still works. */
.button:not([disabled]):not(.button--subdued) > div {
  position: relative;
  z-index: 2;
}

.button > .button__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Base transitions: color (retract), spring-back transform + filter (press release) */
.button:not([disabled]):not(.button--subdued) {
  transition: color 120ms ease-out,
              transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 180ms ease-out !important;
}

/* Radial dark fill — retracted state */
.button:not([disabled]):not(.button--subdued):not(.button--sm)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--rounded-button) + 1px);
  background: #2c2c2c;
  clip-path: circle(var(--pl-r) at var(--btn-mx, 50%) var(--btn-my, 50%));
  transition: --pl-r 350ms ease-out; /* retract — only radius animates, position is instant */
  pointer-events: none;
  z-index: 1;
}

/* Exclude product card and slideshow quick-buy buttons */
.product-card .button::after,
.slideshow .button::after,
.button--sm::after {
  display: none !important;
}

/* Expanded state — position updates instantly, only --pl-r transitions */
.button.pl-hover::after {
  --pl-r: 150% !important;
  transition: --pl-r 600ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Text turns white as fill covers the button center (160ms delay) */
.button.pl-hover {
  color: white !important;
  transition: color 120ms ease-out 160ms,
              transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 180ms ease-out !important;
}

/* Press: scale down like a physical key, darken slightly */
.button.pl-pressed {
  transform: scale(0.97) !important;
  filter: brightness(0.75) !important;
  transition: transform 70ms ease-in, filter 70ms ease-in !important;
}

/* Shockwave ring — thin stroke that travels outward like a sonar ping.
   Uses outline + outline-offset so the stroke width stays constant. */
@keyframes pl-ring-burst {
  0%   { outline-color: rgba(255, 255, 255, 0.85); outline-offset: 0px; }
  25%  { outline-color: rgba(255, 255, 255, 0.50); outline-offset: 5px; }
  100% { outline-color: rgba(255, 255, 255, 0);    outline-offset: 13px; }
}

.button.pl-ringing {
  outline: 1.5px solid transparent;
  outline-offset: 0;
  animation: pl-ring-burst 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Shop Pay: radial glow capped to button height (excludes "More payment options") */
shopify-accelerated-checkout::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55px;
  border-radius: var(--rounded-button);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  background: radial-gradient(
    110px circle at var(--btn-mx, 50%) var(--btn-my, 50%),
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.09) 52%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

@media (hover: hover) and (pointer: fine) {
  shopify-accelerated-checkout:hover::after { opacity: 1; }
}


/* End PUMPLAB_BUTTON_HOVER_V1 */

/* PUMPLAB_ATC_ACCENT_V1 — Primary CTA hover: accent fill + white shimmer band.
   Applies to: Lägg i kundvagn (product page), Kassa (cart drawer), Kassa
   (quick-buy popup), Kassa (cart page). Swept from the old green treatment
   to the brand palette per PUMPLAB_BRAND_COLORS.md:
     Primary CTA hover: #A79F8A accent bg + dark text
   The white shimmer band (::before repeating gradient) is kept as a premium
   visual flourish but recolored from vivid light green to white so it reads
   as a subtle highlight passing across the warm greige fill.
   Visa varukorg stays white — button--secondary is not targeted.
   Product card buttons are unaffected — they sit outside all these scopes. */

/* Accent radial fill — all four contexts */
buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm)::after,
.cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued)::after,
.quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued)::after,
.cart-form [name="checkout"].button:not([disabled]):not(.button--subdued)::after {
  background: #555555;
}

/* White shimmer band */
buy-buttons .button:not([disabled]):not(.button--subdued)::before,
.cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued)::before,
.quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued)::before,
.cart-form [name="checkout"].button:not([disabled]):not(.button--subdued)::before {
  background:
    linear-gradient(rgb(0 0 0 / 0.0), rgb(0 0 0 / 0.0)) padding-box,
    repeating-linear-gradient(
      150deg,
      rgb(255 255 255 / 0)    0%,
      rgb(255 255 255 / 0)    33%,
      rgb(255 255 255 / 0.15) 41%,
      rgb(255 255 255 / 0.82) 50%,
      rgb(255 255 255 / 0.15) 59%,
      rgb(255 255 255 / 0)    67%,
      rgb(255 255 255 / 0)    100%
    ) border-box;
  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;
}

/* Soft white glow on hover */
@media (hover: hover) and (pointer: fine) {
  buy-buttons .button:not([disabled]):not(.button--subdued):hover::before,
  .cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued):hover::before,
  .quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued):hover::before,
  .cart-form [name="checkout"].button:not([disabled]):not(.button--subdued):hover::before {
    box-shadow: 0 0 14px 4px rgb(255 255 255 / 0.28);
  }
}

/* Rest state: dark text on white button */
buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm),
.cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued),
.quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued),
.cart-form [name="checkout"].button:not([disabled]):not(.button--subdued) {
  color: #101010 !important;
}

/* Hover: dark gray fill sweeps in, text inverts to white */
@media (hover: hover) and (pointer: fine) {
  buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm):hover,
  .cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued):hover,
  .quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued):hover,
  .cart-form [name="checkout"].button:not([disabled]):not(.button--subdued):hover {
    color: #FFFFFF !important;
  }
}

/* Inner elements inherit the color */
buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm) *,
.cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued) *,
.quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued) *,
.cart-form [name="checkout"].button:not([disabled]):not(.button--subdued) * {
  color: inherit !important;
}

/* End PUMPLAB_ATC_ACCENT_V1 */

/* PUMPLAB_SECONDARY_BUTTON_ACCENT_V1 — Secondary primary buttons also use
   accent hover fill + dark text, matching the brand primary CTA pattern.
   Scopes:
     - .cart-drawer .empty-state .button — "Fortsätt handla" (empty cart)
   (The contact form "Skicka" button is handled in PUMPLAB_CONTACT_V1 block.) */
.cart-drawer .empty-state .button:not([disabled]):not(.button--subdued)::after {
  background: #555555;
}

@media (hover: hover) and (pointer: fine) {
  .cart-drawer .empty-state .button:not([disabled]):not(.button--subdued):hover {
    color: #101010;
  }
}
/* End PUMPLAB_SECONDARY_BUTTON_ACCENT_V1 */

/* PUMPLAB_FOOTER_HOME_BG_V1 — Site-wide brand bg sweep. Footer uses the
   elevated-surface #222 everywhere except the flavor product page (which
   has its own one-off theming and must never be touched). Homepage uses
   brand #101010. Non-flavor product pages use brand #191919 (slightly
   elevated from page bg for a unified product surface). See
   PUMPLAB_BRAND_COLORS.md for the palette.

   Direct override with !important because the custom-property cascade
   through :root → body → .footer didn't reliably override the
   Customizer-set --footer-background value. */

/* Footer bg — all pages except flavor product page.
   Override --footer-background (the CSS variable .footer uses at theme.css:5951
   via `background: rgb(var(--background))`). The variable cascade wins because
   .footer's own rule reads the variable at paint time. */
body:not(.product-flavor) {
  --footer-background: 30 30 30 !important;
}
body:not(.product-flavor) .footer,
body:not(.product-flavor) #shopify-section-sections--footer_group {
  --background: 30 30 30 !important;
  background: #1E1E1E !important;
  background-color: #1E1E1E !important;
}

/* Header bg — match footer for tight dark palette (except flavor).
   Applies universally including home. The Signature Edition drop hero
   is white, which could have supported a transparent header, but we
   deliberately kept the header SOLID DARK over the white hero so the
   white PUMPLAB logo stays on-brand (a black inverted variant was
   rejected as sub-brand) AND so the dark band becomes a framing
   element for the 3D product-breaks-through effect planned later.
   The `:not(.page-home)` scope that used to exclude home was removed
   when we swapped the dark countdown hero for the white drop hero. */
body:not(.product-flavor) {
  --header-background: 30 30 30;
}
body:not(.product-flavor) #shopify-section-sections--header_group,
body:not(.product-flavor) .header,
body:not(.product-flavor) .header__wrapper,
body:not(.product-flavor) store-header {
  background: #1E1E1E !important;
  background-color: #1E1E1E !important;
}

/* PUMPLAB_HERO_DROP_HEADER_Z_V1 — Explicit header z-index on homepage
   so the Signature Edition drop hero can have a 3-tier z stack:
     • bg layer (z: 1)  ← below header, hidden in overlap zone by dark band
     • header (z: 50)   ← renders as the dark band between bg and fg
     • fg cutout (z: 100) ← above header, tub breaks through the band
   Without this, the sticky header has z-index: auto which creates its
   own stacking context at an unpredictable level — the bg layer could
   paint above the header, hiding the dark band. Scoped to body.page-home
   so other pages' header stacking behavior is untouched. */
body.page-home #shopify-section-sections--header_group {
  z-index: 50;
}

/* Homepage body bg — tight dark palette test: #141414 base */
body.page-home {
  background: #141414 !important;
}

/* Non-flavor product pages: body bg to #141414 matching homepage base. */
body.page-product:not(.product-flavor) {
  background: #141414;
}

/* Collection pages: body bg to #141414 matching homepage base. */
body.page-collection {
  background: #141414;
}

/* Every Shopify section wrapper on these pages matches the body bg.
   Theme.css:2070 has [role="main"] .shopify-section { background: rgb(var(--background)) }
   where --background comes from Customizer's settings.background. Sections
   have internal padding (.section { padding-block-end }) which fills with
   the wrapper's bg. If that bg isn't exactly the target, a strip shows
   between sections where the padding lives. Forcing it here removes the strip. */
body.page-home [role="main"] .shopify-section:not(.shopify-section--hero-fullbleed):not(#shopify-section-sections--footer_group) {
  background: #141414;
}
body.page-product:not(.product-flavor) [role="main"] .shopify-section:not(#shopify-section-sections--footer_group),
body.page-collection [role="main"] .shopify-section:not(#shopify-section-sections--footer_group) {
  background: #141414;
}

/* Non-flavor product pages: kill the customizer gradient on the main-product
   section (applied via .bg-gradient { background-image: var(--gradient) } at
   theme.css:9510) and force solid #191919. The text-with-icons trust-badges
   section is handled directly in sections/text-with-icons.liquid via a
   {% if template.suffix == 'flavour' %} conditional, because its inline
   <style> uses #id selectors that out-specific any class-level override. */
body.page-product:not(.product-flavor) .shopify-section--main-product .section.bg-gradient {
  background: #141414 !important;
  background-image: none !important;
}

/* Icon circles behind the trust badges on non-flavor product pages are now
   fully stripped (transparent bg, no border, no padding) — handled in the
   PUMPLAB_PRODUCT_ICONS_V1 block. */

/* End PUMPLAB_FOOTER_HOME_BG_V1 */

/* PUMPLAB_PRODUCT_STICKY_V1 — Sticky product gallery on desktop for
   non-flavor product pages. Gallery sticks below the header while the
   user scrolls through the product info column (variants, price,
   accordions, description). When the .product grid row ends, the
   gallery naturally unsticks. The trust-badges section is outside
   main-product so it scrolls normally afterward. Matches Nike /
   Gorilla Mind pattern. .product already has align-items: start so
   the gallery cell doesn't stretch — we just add sticky on top. */
@media screen and (min-width: 1000px) {
  body.page-product:not(.product-flavor) .product-gallery {
    position: sticky;
    top: calc(var(--header-height, 80px) + 32px);
    align-self: start;
  }
}
/* End PUMPLAB_PRODUCT_STICKY_V1 */

/* PUMPLAB_BACKORDER_BTN_V1 */
/* GetWidgets back-in-stock button (.gw-button-widget) — brand accent style.
   Accent #A79F8A fill + dark #101010 text/icon per brand CTA pattern.
   Uses !important to override the app's inline background-color.
   Placed AFTER all PUMPLAB blocks so these overrides cascade correctly. */

.gw-button-widget {
  background-color: #A79F8A !important;
  background: #A79F8A !important;
  border: none !important;
  color: #101010 !important;
  transition: background-color 200ms ease;
  will-change: opacity, transform;
}

/* Bell icon (and any SVG) inherits dark color via currentColor */
.gw-button-widget svg {
  color: #101010 !important;
  fill: currentColor;
}

/* No sweep — specificity (0,4,1) beats PUMPLAB sweep base (0,3,1) */
.button.gw-button-widget:not([disabled]):not(.button--subdued)::before {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Cursor-following radial light glow — white highlight on the accent fill */
.button.gw-button-widget:not([disabled]):not(.button--subdued):not(.button--sm)::after {
  background: radial-gradient(
    110px circle at var(--btn-mx, 50%) var(--btn-my, 50%),
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.0) 100%
  ) !important;
  clip-path: none !important;
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fade glow in on hover */
@media (hover: hover) and (pointer: fine) {
  .button.gw-button-widget:not([disabled]):not(.button--subdued):not(.button--sm):hover::after {
    opacity: 1 !important;
  }

  /* Brighten button on hover */
  .gw-button-widget:hover:not(.pl-pressed) {
    filter: brightness(1.09);
  }
}

/* Keep dark text when PUMPLAB JS adds pl-hover */
.button.gw-button-widget.pl-hover {
  color: #101010 !important;
}

/* End PUMPLAB_BACKORDER_BTN_V1 */

/* PUMPLAB_QTY_DISCOUNT_PRICE_V1 — qty-discounted price on product page.
   Bold white (matches the cart drawer line-item treatment). Swept from
   the old orange gradient + glow since the brand palette removes hot
   colors from primary UI elements. */
sale-price.pl-qty-active {
  font-weight: 900;
  color: #FFFFFF;
}
/* End PUMPLAB_QTY_DISCOUNT_PRICE_V1 */

/* PUMPLAB_RATING_ABOVE_PRICE_MOBILE_V1 — rating on own row above price+badge on mobile */
.product-info__price .rating-with-text {
  align-items: center;
}

@media screen and (max-width: 999px) {
  .product-info__price .rating-with-text {
    flex-wrap: wrap;
  }
  .product-info__price .rating-with-text .pl-rating-badge {
    order: -1;
    flex: 0 0 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 999px) {
  .product-info__price .pl-rating-badge__value,
  .product-info__price .pl-rating-badge__count,
  .product-info__price .pl-rating-badge__count-inline {
    font-size: 0.85rem;
    position: relative;
    top: 1px;
  }
}
/* End PUMPLAB_RATING_ABOVE_PRICE_MOBILE_V1 */

/* PUMPLAB_RATING_DESKTOP_SIZE_V1 — Larger rating on product page to match price */
@media screen and (min-width: 1000px) {
  .product-info__price .pl-rating-badge__value,
  .product-info__price .pl-rating-badge__count,
  .product-info__price .pl-rating-badge__count-inline {
    font-size: 1.05rem;
  }
  .product-info__price .pl-rating-badge__star {
    width: 18px;
    height: 18px;
  }
  .product-info__price .pl-rating-badge__stars {
    gap: 4px;
    transform: translateY(-1px);
  }
  .product-info__price .pl-rating-badge {
    gap: 8px;
  }
}
/* End PUMPLAB_RATING_DESKTOP_SIZE_V1 */

/* PUMPLAB_MOBILE_SEPARATOR_COMPACT_V1 — tighter separator on mobile product page */
@media screen and (max-width: 699px) {
  .product-info > .product-info__block-item[data-block-type="separator"] {
    margin-block-start: 2px !important;
    margin-block-end: 2px !important;
  }
  .product-info > .product-info__block-item[data-block-type="separator"] + .product-info__block-item {
    margin-block-start: var(--spacing-2) !important;
  }
}

.product-info__block-item[data-block-type="price"] .product-info__price > .text-subdued,
.product-info__block-item[data-block-type="price"] compare-at-price {
  color: rgb(var(--text-color) / .38) !important;
}
/* End PUMPLAB_MOBILE_SEPARATOR_COMPACT_V1 */

/* PUMPLAB_SOLD_OUT_BADGE_V1 — Stencil bg + white text.
   White on #373534 is ~10.5:1 contrast, AAA compliant. Readable while still
   reading as the lowest-hierarchy badge via its dark stencil background. */
.badge--sold-out {
  background: #373534 !important;
  color: #FFFFFF !important;
}
/* End PUMPLAB_SOLD_OUT_BADGE_V1 */

/* PUMPLAB_SOLD_OUT_ATC_V1 — darker gray ATC button for sold-out variants */
buy-buttons .button[disabled] {
  --button-background: var(--text-color) / 0.06 !important;
  --button-text-color: var(--text-color) / 0.35 !important;
  cursor: not-allowed;
}
/* End PUMPLAB_SOLD_OUT_ATC_V1 */

/* PUMPLAB_SOLD_OUT_QTY_V1 — gray out qty selector for sold-out variants */
.product-info__quantity-selector[data-sold-out] {
  opacity: 0.3;
  pointer-events: none;
}
/* End PUMPLAB_SOLD_OUT_QTY_V1 */

/* PUMPLAB_BADGE_SMOOTH_V1 — smooth badge position during qty price count-up */
.product-info__price price-list {
  min-width: 0; /* base so inline override works; no CSS transition — FLIP handled in JS */
}
/* End PUMPLAB_BADGE_SMOOTH_V1 */

/* PUMPLAB_MONUMENT_PRODUCT_TITLE_V1 — Monument Extended Black + spacing + load animation */
@keyframes pl-title-fadein {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pl-subtitle-fadein {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 0.48;
    transform: translateY(0);
  }
}

h1.product-info__title .pl-title-stack__main {
  font-family: 'Monument Extended Black', sans-serif;
  line-height: 0.95;
  margin-left: -0.05em;
  animation: pl-title-fadein 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

h1.product-info__title.pl-title-stack .pl-title-stack__sub {
  margin-top: 1px;
  opacity: 0.48;
  animation: pl-subtitle-fadein 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@media screen and (max-width: 999px) {
  h1.product-info__title.pl-title-stack {
    font-size: 38px;
  }
}
h1.product-info__title .pl-tm {
  font-family: sans-serif;
  font-size: 0.3em;
  font-weight: 400;
  vertical-align: text-top;
  position: relative;
  top: 0.34em;
  letter-spacing: 0;
  margin-left: 0.15em;
  opacity: 0.6;
}
/* End PUMPLAB_MONUMENT_PRODUCT_TITLE_V1 */

/* ==== PUMPLAB_QTY_ANIM_V1 — quantity selector hover + number slide animation ==== */

/* Overall min-width = 3 squares */
.product-info__quantity-selector .quantity-selector {
  min-width: calc(3 * var(--input-height));
}

/* Thicker outline on desktop */
@media screen and (min-width: 1000px) {
  .product-info__quantity-selector .quantity-selector,
  .product-info__qty-offer-row .quantity-selector {
    border-width: 1.75px !important;
    border-color: rgb(var(--text-color) / 0.5) !important;
  }
}

/* Buttons: fixed at exactly one square, icon flex-centered (no padding needed).
   overflow:hidden + matching corner border-radius clips hover-bg to selector's
   rounded corners — without needing overflow:hidden on the selector itself
   (which was causing the rounded bottom edge to appear too close to the separator). */
.product-info__quantity-selector .quantity-selector__button {
  flex: 0 0 var(--input-height);
  width: var(--input-height);
  min-width: var(--input-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 0;
  padding-inline-end: 0;
  overflow: hidden;
}
.product-info__quantity-selector .quantity-selector__button:first-child {
  border-radius: var(--rounded-button) 0 0 var(--rounded-button);
}
.product-info__quantity-selector .quantity-selector__button:last-child {
  border-radius: 0 var(--rounded-button) var(--rounded-button) 0;
}

/* Number cell: fills remaining space, min = one square */
.product-info__quantity-selector .pl-qty-cell {
  flex: 1 1 0;
  min-width: var(--input-height);
}

/* Button segment hover — lights up that third of the selector */
.quantity-selector__button {
  transition: background-color 0.15s ease;
}
.quantity-selector__button:hover {
  background-color: rgba(var(--input-text-color, 128, 128, 128), 0.1);
}
.quantity-selector__button:active {
  background-color: rgba(var(--input-text-color, 128, 128, 128), 0.18);
}

/* Icon scale on hover / active */
.quantity-selector__button svg {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
}
.quantity-selector__button:hover svg {
  transform: scale(1.3);
}
.quantity-selector__button:active svg {
  transform: scale(0.8);
  transition-duration: 0.07s;
}
/* No interaction when minus is dimmed at minimum */
quantity-selector[data-at-min] .quantity-selector__button:first-child:hover,
quantity-selector[data-at-min] .quantity-selector__button:first-child:active {
  background-color: transparent;
}
quantity-selector[data-at-min] .quantity-selector__button:first-child:hover svg,
quantity-selector[data-at-min] .quantity-selector__button:first-child:active svg {
  transform: none;
}

/* Wrapper that clips the sliding number vertically */
.pl-qty-cell {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--input-height);
}

/* Overlay container */
.pl-qty-display {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Each number span fills the overlay absolutely so two spans never push each other sideways */
.pl-qty-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

/* Match the offer-row input font */
.product-info__qty-offer-row .pl-qty-num {
  font-weight: 700;
  font-size: 1rem;
}

@keyframes pl-qty-up-out {
  to { transform: translateY(-110%) scale(0.8); opacity: 0; }
}
@keyframes pl-qty-up-in {
  from { transform: translateY(110%) scale(0.75); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes pl-qty-down-out {
  to { transform: translateY(110%) scale(0.8); opacity: 0; }
}
@keyframes pl-qty-down-in {
  from { transform: translateY(-110%) scale(0.75); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
/* End PUMPLAB_QTY_ANIM_V1 */

/* PUMPLAB_MOBILE_BTN_V1 */
/*
  Touch-device button overrides. All rules gated behind (hover:none)+(pointer:coarse).
  Desktop is completely untouched.

  Fill:    Clip-path radial expansion replaced with an instant opacity flash.
           The half-filled circle artifact — caused when navigation interrupts the
           expansion mid-animation — is gone. Button fills fully on tap, fades
           out cleanly on release.

  Sweep color: ATC/checkout buttons reset to default white sweep on mobile.
           On desktop these use a green outline matching their hover fill. On mobile
           the button is often a different visual state (e.g. white/outlined) where
           a green ring looks jarring. White sweep is neutral on any button color.

  Sweep timing: Periodic ambient sweep plays every 10–17s while the button is
           ≥60% visible, with a random stagger between buttons so they don't all
           fire at once. Stops when button scrolls out of view. Slower 3000ms
           duration feels more graceful and less mechanical.
*/
@media (hover: none) and (pointer: coarse) {

  /* Fill: instant opacity flash — no more expanding clip-path circle.
     inset: -1px matches the desktop base so the fill overlaps corners by 1px,
     eliminating sub-pixel gaps at rounded corners. */
  .button:not([disabled]):not(.button--subdued):not(.button--sm)::after {
    clip-path: none !important;
    inset: -1px !important;
    border-radius: calc(var(--rounded-button) + 1px) !important;
    opacity: 0;
    transition: opacity 80ms ease !important;
  }

  .button.pl-hover::after {
    opacity: 1 !important;
    transition: opacity 50ms ease !important;
  }

  /* Sweep color: reset ATC/checkout to default white sweep on mobile.
     Must also restore background-size/position — the background: shorthand
     resets them to auto/0% which breaks the sweep animation keyframes. */
  buy-buttons .button:not([disabled]):not(.button--subdued)::before,
  .cart-drawer [name="checkout"].button:not([disabled]):not(.button--subdued)::before,
  .quick-buy-drawer__info [name="checkout"].button:not([disabled]):not(.button--subdued)::before,
  .cart-form [name="checkout"].button:not([disabled]):not(.button--subdued)::before {
    background:
      linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / 0)) padding-box,
      repeating-linear-gradient(
        150deg,
        rgb(255 255 255 / 0)    0%,
        rgb(255 255 255 / 0)    33%,
        rgb(255 255 255 / 0.12) 41%,
        rgb(255 255 255 / 0.5)  50%,
        rgb(255 255 255 / 0.12) 59%,
        rgb(255 255 255 / 0)    67%,
        rgb(255 255 255 / 0)    100%
      ) border-box;
    background-size: auto, 200% 100%;
    background-position: 0 0, -40% 0;
  }

  /* Sweep: loop-with-pause keyframe. 2400ms pass + 3600ms rest = 6s cycle.
     ease-in-out on the sweep gives a graceful acceleration/deceleration.
     No intro animation — the loop motion is cleaner for ambient use. */
  @keyframes pl_btn_mobile_sweep {
    0%   { background-position: 0 0,  -40% 0; animation-timing-function: ease-in-out; }
    40%  { background-position: 0 0, -240% 0; }
    100% { background-position: 0 0, -240% 0; }
  }

  .button:not([disabled]):not(.button--subdued).pl-in-view::before,
  shopify-accelerated-checkout.pl-in-view::before {
    opacity: 1;
    animation-name: pl_btn_mobile_sweep;
    animation-duration: 6000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: 0ms;
  }

  /* Shop Pay: offset by half a cycle (-3000ms) so it never sweeps at the
     same time as the ATC button. ATC sweeps at 0–2400ms, Shop Pay at ~3000–5400ms. */
  shopify-accelerated-checkout.pl-in-view::before {
    animation-delay: -3000ms;
  }
}

/* End PUMPLAB_MOBILE_BTN_V1 */

/* PUMPLAB_DRAWER_INERT_FIX_V1
   iOS Safari bug: the native `inert` attribute stops keyboard/focus interactions but
   does NOT always apply pointer-events:none to the element itself. When the notification
   popup closes, `inert` is set immediately but `display:none` only arrives after the
   ~650ms hide animation. During that window the popup sits over the cart drawer and
   absorbs touches. Explicitly forcing pointer-events:none on any inert drawer guarantees
   the touches pass through to whatever is below, regardless of browser version. */
cart-notification-drawer[inert] {
  pointer-events: none !important;
}

.product-card .pl-card-rating-under-sub .pl-rating-badge__stars{
  margin-left: 0 !important;
}

/* PUMPLAB_MOBILE_CARD_V1 — Tighten smaller mobile cards (not featured collection) */
@media screen and (max-width: 699px) {
  /* Reduce bottom padding */
  .product-card .product-card__info {
    padding-block-end: 12px !important;
  }
  .shopify-section--featured-collection .product-card .product-card__info {
    padding-block-end: 20px !important;
  }

  /* Compact rating — force all items onto one consistent baseline */
  .product-card .pl-card-rating-under-sub .pl-rating-badge {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
  }
  .product-card .pl-card-rating-under-sub .pl-rating-badge__stars {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0;
  }
  .product-card .pl-card-rating-under-sub .pl-rating-badge__star {
    width: 13px !important;
    height: 13px !important;
    display: block !important;
    flex-shrink: 0;
  }
  .product-card .pl-card-rating-under-sub .pl-rating-badge__count-inline {
    font-size: inherit !important;
    white-space: nowrap;
    line-height: inherit !important;
    margin-left: 0;
    opacity: 0.7;
  }
  .product-card .pl-card-rating-under-sub .pl-rating-badge__value {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
    margin-right: 1px !important;
  }
  .product-card .pl-card-rating-under-sub {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Restore featured collection sizes */
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: unset !important;
    line-height: unset !important;
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__stars {
    gap: 5px !important;
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__star {
    width: 16px !important;
    height: 16px !important;
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__count-inline {
    font-size: inherit !important;
    opacity: 1 !important;
    margin-left: 0 !important;
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__value {
    font-size: inherit !important;
    margin-right: 0 !important;
    transform: translateY(-1px);
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub {
    margin-top: 9px !important;
    margin-bottom: 5px !important;
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__stars {
    transform: translateY(-1px);
  }
  .shopify-section--featured-collection .product-card .pl-card-rating-under-sub .pl-rating-badge__value {
    font-weight: 700 !important;
  }

  /* Small cards — nudge stars up */
  .product-card .pl-card-rating-under-sub .pl-rating-badge__stars {
    transform: translateY(-1px);
  }
}
/* End PUMPLAB_MOBILE_CARD_V1 */

/* ── PUMPLAB_CART_PROGRESS_V1 ─────────────────────────────────────────────
   Two-milestone progress bar for cart drawer and cart page.
   Milestone 1 — Free shipping at 1 000 kr (visual position: 60%).
   Milestone 2 — Free shaker  at 1 250 kr (visual position: right end).
   Fill uses a visual baseline so progression feels rewarding.
   JS initialised in layout/theme.liquid under the same tag.
   ── */
/* PUMPLAB_CART_PROGRESS_TWEAK_V1 */

pl-cart-progress.pl-cart-progress {
  display: block;
}

.pl-cart-progress__message {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgb(var(--text-color) / 0.9);
  min-height: 1.15em;
  transition: opacity 160ms ease, transform 160ms ease;
  margin-bottom: 8px;
}

.pl-cart-progress__message strong {
  font-weight: 800;
  color: rgb(var(--text-color));
}

.pl-cart-progress__message .pl-cp-hl {
  font-weight: 800;
  color: #2ecc71;
}

.pl-cart-progress__message .pl-cp-bold {
  font-weight: 900;
}

.pl-cart-progress__bar-area {
  position: relative;
  height: 26px;
  margin-right: 13px;
}

.pl-cart-progress__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  background: rgb(var(--text-color) / 0.15);
  border-radius: 9999px;
  transform: translateY(-50%);
}

.pl-cart-progress__fill {
  height: 100%;
  background: linear-gradient(to right, rgba(46, 204, 113, 0.4), #2ecc71);
  border-radius: inherit;
  width: 0%;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.2);
  transition: width 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Milestone circles — compact, subtle border */
.pl-cart-progress__milestone {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(var(--background));
  border: 1px solid rgb(var(--text-color) / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--text-color) / 0.22);
  transition: background 380ms ease, border-color 380ms ease,
              color 300ms ease, box-shadow 380ms ease;
  z-index: 1;
}

/* M1 — truck, at 50% of track */
.pl-cart-progress__milestone[data-index="1"] {
  left: 50%;
  transform: translate(-50%, -50%);
}

/* M2 — shaker, centre aligned with track's right end */
.pl-cart-progress__milestone[data-index="2"] {
  right: -12px;
  transform: translateY(-50%);
}

/* Unlocked / reached state */
.pl-cart-progress__milestone.pl-reached {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border-color: rgba(46, 204, 113, 0.35);
  color: #fff;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.25);
}

/* Pop animation — M1 */
@keyframes pl-cart-m1-pop {
  0%   { transform: translate(-50%, -50%) scale(1);    }
  40%  { transform: translate(-50%, -50%) scale(1.28); }
  70%  { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(1);    }
}

/* Pop animation — M2 */
@keyframes pl-cart-m2-pop {
  0%   { transform: translateY(-50%) scale(1);    }
  40%  { transform: translateY(-50%) scale(1.28); }
  70%  { transform: translateY(-50%) scale(0.94); }
  100% { transform: translateY(-50%) scale(1);    }
}

.pl-cart-progress__milestone[data-index="1"].pl-popping {
  animation: pl-cart-m1-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pl-cart-progress__milestone[data-index="2"].pl-popping {
  animation: pl-cart-m2-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* End PUMPLAB_CART_PROGRESS_TWEAK_V1 */

/* Recommendation card price — nudge down away from rating, closer to add button */
.cart-drawer__recommendations .horizontal-product__info .price-list {
  position: relative;
  top: 8px;
}
@media screen and (min-width: 700px) {
  .cart-drawer__recommendations .horizontal-product__info .price-list {
    top: 16px;
  }
}

/* ── PUMPLAB_GIFT_LINE_ITEM_V1 ───────────────────────────────────────────────
   Free gift shaker line item — price label + variant picker.
   Picker matches the site's block-swatch pattern exactly:
   same border-radius (--rounded-button), same ring selection indicator.
   ──────────────────────────────────────────────────────────────────────────── */

/* "Gratis" price label — inherits size/weight from text-on-sale. Uses the
   site-wide functional green #2ecc71 (same as "Du sparar" savings text) since
   a free gift is conceptually the same as a discount/saving. */
.pl-gift-free-label {
  color: #2ecc71 !important;
}

/* Variant picker — individual chips spaced like the product page */
.pl-gift-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

/* PUMPLAB_GIFT_DROPDOWN_V1 — cart gift picker uses pl-variant-dd component
   with reduced height for cart context. Duplicates key trigger/panel/option
   styles outside the mobile media query so it works on desktop too. */
.pl-variant-dd--cart {
  position: relative;
  width: 100%;
  z-index: 5;
  margin-top: 0.15rem;
}
@media screen and (min-width: 700px) {
  .pl-variant-dd--cart { min-width: 200px; }
}

.pl-variant-dd--cart.is-open { z-index: 15; }

.pl-variant-dd--cart .pl-variant-dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  background: rgb(28 28 28);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rounded-button, 8px);
  color: rgb(235 235 235);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.pl-variant-dd--cart .pl-variant-dd__trigger:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgb(35 35 35);
}

.pl-variant-dd--cart.is-open .pl-variant-dd__trigger {
  border-color: rgba(255, 255, 255, 0.40);
  border-bottom-color: transparent;
  background: rgb(24 24 24);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.pl-variant-dd--cart .pl-variant-dd__current {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.pl-variant-dd--cart .pl-variant-dd__name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-variant-dd--cart .pl-variant-dd__arrow {
  flex-shrink: 0;
  color: rgb(140 140 140);
  display: flex;
  align-items: center;
  transition: transform 200ms ease;
}

.pl-variant-dd--cart.is-open .pl-variant-dd__arrow {
  transform: rotate(180deg);
}

.pl-variant-dd--cart .pl-variant-dd__panel {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  background: rgb(24 24 24);
  border: 2px solid rgba(255, 255, 255, 0.30);
  border-top: none;
  border-bottom-left-radius: var(--rounded-button, 8px);
  border-bottom-right-radius: var(--rounded-button, 8px);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 1);
}

.pl-variant-dd--cart.is-open .pl-variant-dd__panel {
  display: block;
  animation: pl-vdd-cart-in 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pl-variant-dd--cart.is-closing .pl-variant-dd__panel {
  display: block;
  animation: pl-vdd-cart-out 180ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes pl-vdd-cart-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pl-vdd-cart-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

.pl-variant-dd--cart .pl-variant-dd__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.5rem 0.9rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgb(220 220 220);
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}

.pl-variant-dd--cart .pl-variant-dd__option:last-child { border-bottom: none; }
.pl-variant-dd--cart .pl-variant-dd__option:hover { background: rgba(255, 255, 255, 0.06); }
.pl-variant-dd--cart .pl-variant-dd__option.is-selected { background: rgba(255, 255, 255, 0.10); }
.pl-variant-dd--cart .pl-variant-dd__option.is-disabled { opacity: 0.45; }
.pl-variant-dd--cart .pl-variant-dd__option:active { background: rgba(255, 255, 255, 0.14) !important; }

.pl-variant-dd--cart .pl-variant-dd__opt-name {
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.pl-variant-dd--cart .pl-variant-dd__name {
  white-space: nowrap;
}

.pl-variant-dd--cart.is-open .pl-variant-dd__option {
  animation: pl-vdd-opt-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pl-variant-dd--cart.is-open .pl-variant-dd__option:nth-child(1) { animation-delay: 30ms; }
.pl-variant-dd--cart.is-open .pl-variant-dd__option:nth-child(2) { animation-delay: 60ms; }
.pl-variant-dd--cart.is-open .pl-variant-dd__option:nth-child(3) { animation-delay: 90ms; }
/* End PUMPLAB_GIFT_DROPDOWN_V1 */

.pl-gift-picker__btn {
  position: relative;
  padding: 0.375rem var(--spacing-4, 1rem);
  border-radius: var(--rounded-button);
  background: rgb(var(--input-background, var(--background)));
  border: 1px solid rgb(var(--text-color) / 0.15);
  color: rgb(var(--text-color) / 0.55);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 120ms ease;
}

/* Selection ring — mirrors block-swatch:before exactly */
.pl-gift-picker__btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--rounded-button);
  box-shadow: 0 0 0 2px rgb(var(--text-color));
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out;
}

.pl-gift-picker__btn--active {
  color: rgb(var(--text-color));
}

.pl-gift-picker__btn--active::before {
  opacity: 1;
  transform: scale(1);
}

.pl-gift-picker__btn:not(:disabled):not(.pl-gift-picker__btn--active):hover {
  color: rgb(var(--text-color) / 0.8);
  border-color: rgb(var(--text-color) / 0.3);
}

/* Instant tap press — compositor-level, no layout */
.pl-gift-picker__btn:active:not(:disabled) {
  transform: scale(0.95);
  transition: transform 50ms ease;
}

.pl-gift-picker__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.pl-gift-picker--pending .pl-gift-picker__btn {
  pointer-events: none;
}

/* Entrance — spring easing overshoots slightly, very Apple */
@keyframes pl-gift-enter {
  0%   { opacity: 0; transform: translateY(10px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

line-item.pl-gift-enter {
  animation: pl-gift-enter 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Exit — fast ease-in, item pulls up and fades before DOM removal */
@keyframes pl-gift-exit {
  0%   { opacity: 1; transform: translateY(0)   scale(1);    }
  100% { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

line-item.pl-gift-exit {
  animation: pl-gift-exit 280ms cubic-bezier(0.55, 0, 1, 0.45) both;
  pointer-events: none;
}

/* Immediately collapse the gift line-item when a threshold-triggered removal is in
   progress. Applied to the #cart-drawer parent so it survives CartDrawer re-renders
   of the inner line-item element — prevents any flash of the gift reappearing.
   height + padding + margin are all zeroed instantly so the layout space collapses
   in one step (no lag). Without padding:0, the * + * padding-block-start rule leaves
   a visible gap that only closes when the second CartDrawer re-render fires. */
/* PUMPLAB_MISC_BUGS_V1 — Skip the element already running exit animation */
#cart-drawer.pl-gift-removing line-item:has(.pl-gift-picker-select):not([data-pl-exiting]),
#cart-drawer.pl-gift-removing line-item:has(.pl-gift-picker):not([data-pl-exiting]) {
  opacity: 0;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* End PUMPLAB_GIFT_LINE_ITEM_V1 */

/* End PUMPLAB_CART_PROGRESS_V1 */

/* ── PUMPLAB_CART_REWORK_V1 ──────────────────────────────────────────────────
   Cart drawer polish — Monument Extended Black titles + TM superscript
   ──────────────────────────────────────────────────────────────────────────── */

.line-item__info .pl-cart-title {
  font-family: 'Monument Extended Black', sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.pl-cart-tm {
  font-size: 0.3em;
  vertical-align: text-top;
  position: relative;
  top: 0.52em;
  opacity: 0.6;
  font-family: sans-serif;
  font-weight: normal;
}

/* ── PUMPLAB_POPUP_FONT_V1 ──────────────────────────────────────────────────
   Monument Extended Black on all product titles outside the main product page.
   Monument Wide Black on collection page headings.
   Cart titles, card titles, and horizontal-product titles are already handled
   above — only the remaining gaps are patched here.
   ──────────────────────────────────────────────────────────────────────────── */

/* Quick Buy popup — product title in drawer header */
.quick-buy-drawer__variant a.bold {
  font-family: 'Monument Extended Black', sans-serif;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

@media screen and (min-width: 700px) {
  .quick-buy-drawer__variant {
    padding-block-start: var(--spacing-4);
    align-items: center;
  }
}

/* PUMPLAB_QUICKADD_V1 — mobile bottom sheet */
@media screen and (max-width: 999px) {
  .quick-buy-drawer::part(content) {
    height: auto;
    max-height: 75vh;
    border-radius: var(--rounded) var(--rounded) 0 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    overflow-x: hidden;
  }

  .quick-buy-drawer::part(outside-close-button) {
    background: rgb(var(--dialog-background));
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .quick-buy-drawer .quick-buy-drawer__variant {
    flex-wrap: wrap;
  }

  .quick-buy-drawer .pl-quick-buy-rating {
    margin-inline-start: 0;
    width: 100%;
  }

  .quick-buy-drawer .variant-picker {
    text-align: start;
  }

  .quick-buy-drawer .variant-picker__option-info,
  .quick-buy-drawer .variant-picker__option-values {
    justify-content: flex-start;
  }

  .quick-buy-drawer .pl-quick-buy-headline {
    text-align: start;
  }

  .quick-buy-drawer .pl-variant-dd__panel {
    position: relative;
    top: auto;
    border-top: 2px solid rgba(255, 255, 255, .30);
    border-bottom-left-radius: var(--rounded-button, 8px);
    border-bottom-right-radius: var(--rounded-button, 8px);
    max-height: 180px;
    overflow-y: auto;
  }

  .quick-buy-drawer .pl-variant-dd.is-open .pl-variant-dd__panel {
    animation: pl-qb-dd-open 400ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .quick-buy-drawer .pl-variant-dd.is-closing .pl-variant-dd__panel {
    animation: pl-qb-dd-close 450ms cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes pl-qb-dd-open {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 180px; }
  }

  @keyframes pl-qb-dd-close {
    from { opacity: 1; max-height: 180px; }
    to   { opacity: 0; max-height: 0; }
  }
}

/* PUMPLAB_QUICKADD_V1 — centered modal on desktop */
@media screen and (min-width: 1000px) {
  .quick-buy-drawer {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
  }

  .quick-buy-drawer::part(overlay) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .quick-buy-drawer::part(content) {
    width: 510px;
    max-width: 90vw;
    height: auto;
    max-height: 80vh;
    border-radius: var(--rounded);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.5);
  }

  .quick-buy-drawer::part(outside-close-button) {
    display: none;
  }
}
/* End PUMPLAB_QUICKADD_V1 */

/* PUMPLAB_QUICKBUY_POPUP_FIX_V1 — corrections to the quick-buy
   drawer popup (the centred bottom sheet that opens from the cart
   drawer recommendations and from Carbon hero's Köp nu).
   1. Center the "Välj smak" headline above the variant grid
      instead of letting it sit left-aligned under the product
      image at small caps.
   2. Reset the negative margin-top on the payment icon row so
      the row breathes below the ATC button. The -86px pull-up
      is for the PDP layout; in the quick-buy popup the icons
      are next to the ATC button and need normal spacing. */
.quick-buy-drawer .pl-quick-buy-headline {
  text-align: center;
  display: block;
  width: 100%;
  margin: var(--spacing-6, 24px) 0 var(--spacing-1, 4px);
  padding-bottom: var(--spacing-3, 12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgb(var(--text-color, 255 255 255));
}

/* Desktop popup must let the variant dropdown panel float OUT of
   the popup card. The base .drawer::part(body) sets overflow-y: auto
   which clips the absolutely-positioned dropdown panel and forces
   a popup-card scrollbar. Override ALL the parts so nothing in the
   stack clips the floating panel. */
@media screen and (min-width: 700px) {
  .quick-buy-drawer::part(content),
  .quick-buy-drawer::part(body) {
    overflow: visible !important;
    /* The drawer's show animation (theme.js, QuickBuyDrawer)
       animates clip-path: inset(45%) -> inset(0 round ...). The
       final inset(0) keeps clipping anything that extends past the
       content box — including our dropdown panel. Force clip-path
       none so the panel can float outside the popup. Costs the
       clip-in 'zoom open' effect; popup still fades + scales. */
    clip-path: none !important;
  }
  .quick-buy-drawer .quick-buy-drawer__info {
    overflow: visible;
  }

  /* 'Smak: Salted Caramel' option info row aligns left so it
     anchors to the dropdown below it. 'Välj smak' headline above
     stays centred as a section title. */
  .quick-buy-drawer .variant-picker__option-info {
    justify-content: flex-start;
    text-align: start;
  }
}

@media screen and (min-width: 700px) {
  .quick-buy-drawer .pl-payment-icons {
    /* Align payment badges horizontally with the 'More payment
       options' link that sits tight under the Buy with Shop
       button. */
    margin-top: -48px;
    margin-bottom: var(--spacing-2, 8px);
  }
}

/* Payment icons inside the quick-buy popup should NOT do the
   PDP staggered entrance animation. They appear with the rest of
   the popup body (which has its own fade-in), so kill the
   per-icon animation + delays here. */
.quick-buy-drawer .pl-payment-icons--intro .pl-pay-icon,
.quick-buy-drawer .pl-payment-icons--pending .pl-pay-icon {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* Kill the theme .button pseudo-elements entirely inside the
   quick-buy drawer. They drive the radial hover-fill flourish
   that PUMPLAB_ATC_ACCENT_V1 colours dark grey; in the popup that
   feels heavy. Match the Carbon hero Köp nu behaviour: clean
   white button at rest, slight off-white on hover, no fill animation. */
.quick-buy-drawer .button::before,
.quick-buy-drawer .button::after {
  display: none !important;
}

/* ATC button (Lägg i kundvagn) inside the drawer — plain hover.
   The ATC submit has no [name] attribute; it sits inside
   <buy-buttons> with .button. PUMPLAB_ATC_ACCENT_V1 forces hover
   colour to white on `buy-buttons .button:hover`; override that
   with .quick-buy-drawer ancestor so the text stays dark and the
   button just shifts to off-white on hover. */
.quick-buy-drawer buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm) {
  background: #ffffff !important;
  color: #101010 !important;
}

.quick-buy-drawer buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm) * {
  color: #101010 !important;
}

@media (hover: hover) and (pointer: fine) {
  .quick-buy-drawer buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm):hover {
    background: #ebebeb !important;
    color: #101010 !important;
  }
  .quick-buy-drawer buy-buttons .button:not([disabled]):not(.button--subdued):not(.button--sm):hover * {
    color: #101010 !important;
  }
}
/* End PUMPLAB_QUICKBUY_POPUP_FIX_V1 */

/* ──────────────────────────────────────────────────────────────────────────────
   PUMPLAB_QUICKADD_V3 — card-transform inline picker (desktop only)
   The card's info section slides up over the image; picker controls
   appear where the info used to be. No overlay — the card itself transforms.
   ────────────────────────────────────────────────────────────────────────────── */

.pl-picker-controls {
  display: none;
}

.pl-qa-btn__fill,
.pl-picker-close {
  display: none;
}

@media screen and (min-width: 1000px) {
  .product-card {
    position: relative;  /* PUMPLAB_QUICKADD_V3 — positioning context */
  }

  /* Override theme opacity fade on hover for all product card quick-buy buttons */
  .product-card__quick-buy .button:hover {
    --button-background-opacity: 1 !important;
  }

  /* ── Quick-add button morph: plus sweeps right to center, mask wipes text ──
     PUMPLAB_QUICKADD_BRAND_V1 — Locked to brand palette per PUMPLAB_BRAND_COLORS.md
     "Quick Add (product cards)" spec:
       Normal: White bg + border + dark text/icon (handled by theme defaults)
       Hover:  Accent #A79F8A fill sweeps in from the top (JS-animated via
               WAAPI, see theme.js ~L3487). Plus icon + text STAY DARK
               throughout — no outline ring, no white color switch. Lift
               drop shadow on the card for depth. */
  .pl-qa-btn {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding-inline-start: var(--spacing-4);
    padding-inline-end: var(--spacing-4);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: box-shadow 350ms cubic-bezier(.22,1,.36,1) 150ms, color 220ms ease;
  }

  .pl-qa-btn__fill {
    display: block;
    position: absolute;
    top: 0;
    left: -60%;
    width: 220%;
    height: 500%;
    background: #555555;
    pointer-events: none;
    z-index: 0;
    transform: translateY(-200%);
    border-radius: 0 0 50% 50% / 0 0 10px 10px;
  }

  .pl-qa-btn:hover {
    box-shadow: 0 0 0 2px rgb(255 255 255), 0 4px 14px rgba(0,0,0,.35);
    color: #FFFFFF !important;
  }

  .pl-qa-btn[aria-busy="true"],
  .pl-qa-btn[aria-busy="true"]:hover,
  .pl-qa-btn.pl-qa-submitted,
  .pl-qa-btn.pl-qa-submitted:hover {
    box-shadow: none !important;
  }

  /* Force loader dots visible on quick-add buttons */
  .pl-qa-btn > .button__loader > * {
    background: rgb(var(--button-text-color)) !important;
  }

  .pl-qa-btn__plus,
  .pl-qa-btn__text {
    position: relative;
    z-index: 1;
  }

  .pl-qa-btn__plus {
    display: inline-block;
    position: relative;
    z-index: 3;
    transition: transform 0.38s cubic-bezier(.22, 1, .36, 1);
  }

  .pl-qa-btn__text {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to left, black 0%, black 50%, transparent 65%);
    mask-image: linear-gradient(to left, black 0%, black 50%, transparent 65%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 0.32s cubic-bezier(.22, 1, .36, 1),
                mask-position 0.32s cubic-bezier(.22, 1, .36, 1),
                transform 0.32s cubic-bezier(.22, 1, .36, 1);
  }

  /* Hover: plus slides to center + scales + rotates, text wipes with feathered edge */
  .pl-qa-btn:hover .pl-qa-btn__plus {
    transform: translateX(var(--pl-qa-shift, 2em)) rotate(180deg) scale(2);
  }

  .pl-qa-btn:hover .pl-qa-btn__text {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    transform: translateX(-2em);
  }


  /* Outline on card when picker is open */
  product-card.pl-picker-open {
    border-color: rgb(255 255 255 / 0.12) !important;
    box-shadow: 0 16px 44px rgb(0 0 0 / 0.55) !important;
  }

  /* Disable card lift + blur during any picker phase (busy, open, closing) */
  product-card.pl-picker-busy.pumplab-card-lift,
  product-card.pl-picker-busy.pumplab-card-lift:hover,
  product-card.pl-picker-busy.pumplab-card-lift:focus-within,
  product-card.pl-picker-busy.pumplab-card-lift:active,
  product-card.pl-picker-open.pumplab-card-lift,
  product-card.pl-picker-open.pumplab-card-lift:hover,
  product-card.pl-picker-open.pumplab-card-lift:focus-within,
  product-card.pl-picker-closing.pumplab-card-lift,
  product-card.pl-picker-closing.pumplab-card-lift:hover,
  product-card.pl-picker-closing.pumplab-card-lift:focus-within {
    transform: none !important;
    box-shadow: none !important;
  }

  product-card.pl-picker-busy .product-card__image,
  product-card.pl-picker-open .product-card__image,
  product-card.pl-picker-closing .product-card__image {
    transform: none !important;
  }

  /* Kill hover effects during any picker phase */
  product-card.pl-picker-busy.pumplab-card-lift::before,
  product-card.pl-picker-open.pumplab-card-lift::before,
  product-card.pl-picker-closing.pumplab-card-lift::before,
  product-card.pl-picker-busy.pumplab-card-lift::after,
  product-card.pl-picker-open.pumplab-card-lift::after,
  product-card.pl-picker-closing.pumplab-card-lift::after {
    opacity: 0 !important;
    animation-play-state: paused !important;
  }

  product-card.pl-picker-busy .product-card__figure::after,
  product-card.pl-picker-open .product-card__figure::after,
  product-card.pl-picker-closing .product-card__figure::after {
    opacity: 0 !important;
  }

  /* Hide quick-buy button + info when picker is open */
  product-card.pl-picker-open .product-card__quick-buy {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Info: disable pointer events when picker is open (JS handles opacity via animation) */
  product-card.pl-picker-open .product-card__info {
    pointer-events: none;
  }

  /* ── Picker controls: replaces info section ── */
  .pl-picker-controls {
    display: none;
    padding: var(--product-card-info-padding);
    padding-top: calc(var(--product-card-info-padding) * 0.8);
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .pl-picker-controls form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
  }

  /* Control children start hidden — JS staggers them in */
  .pl-picker-controls .pl-picker-dd,
  .pl-picker-controls .pl-picker-bottom-row {
    opacity: 0;
    transform: translateY(8px);
  }

  product-card.pl-picker-open .pl-picker-controls {
    display: block;
  }

  /* Raise section above neighbours so fixed dropdown isn't covered */
  .shopify-section:has(.pl-picker-open) {
    z-index: 10;
    position: relative;
  }

  /* ── Close button — top-right of card, matches picker button styles ── */
  .pl-picker-close {
    display: none;
    position: absolute;
    top: var(--product-card-info-padding, 12px);
    right: var(--product-card-info-padding, 12px);
    z-index: 40;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgb(28 28 28 / 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.18);
    border-radius: var(--rounded-button, 8px);
    color: rgb(150 150 150);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.2s cubic-bezier(.22,1,.36,1), opacity 0.2s ease;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    pointer-events: auto;
  }

  product-card.pl-picker-open .pl-picker-close {
    display: flex;
    animation: pl_picker_close_in 0.25s cubic-bezier(.22,1,.36,1) both;
  }

  .pl-picker-close:hover {
    color: rgb(220 220 220);
    border-color: rgba(255,255,255,.30);
    background: rgb(35 35 35);
  }

  .pl-picker-close:active {
    transform: scale(0.9);
  }

  .pl-picker-close.pl-closing {
    animation: pl_picker_close_out 0.2s ease-out forwards;
    pointer-events: none;
  }

  @keyframes pl_picker_close_in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes pl_picker_close_out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.6); }
  }

  /* Dropdown container: relative for label positioning */
  .pl-picker-dd {
    position: relative;
  }

  /* ── Qty + ATC row — same height as dropdown trigger ── */
  .pl-picker-bottom-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    --pl-picker-row-h: 40px;
  }

  .pl-picker-bottom-row .pl-picker-qty {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
    height: var(--pl-picker-row-h) !important;
    min-height: var(--pl-picker-row-h) !important;
  }

  .pl-picker-bottom-row .pl-picker-atc {
    flex: 1 1 0%;
    height: var(--pl-picker-row-h) !important;
    min-height: var(--pl-picker-row-h) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── Custom dropdown — styled to match PUMPLAB_MOBILE_VARIANT_DD_V1 ── */
  .pl-picker-dd {
    position: relative;
    width: 100%;
    z-index: 5;
  }

  .pl-picker-dd__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(140 140 140);
    margin-bottom: 0.15rem;
  }

  .pl-picker-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgb(28 28 28);
    border: 2px solid rgba(255,255,255,.18);
    border-radius: var(--rounded-button, 8px);
    color: rgb(235 235 235);
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-bottom-color 400ms ease-in;
  }

  .pl-picker-dd__trigger:hover {
    border-color: rgba(255,255,255,.30);
    background: rgb(35 35 35);
  }

  .pl-picker-dd.is-open .pl-picker-dd__trigger,
  .pl-picker-dd.is-closing .pl-picker-dd__trigger {
    border-color: rgba(255,255,255,.40);
    border-bottom-color: transparent;
    background: rgb(24 24 24);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
  }

  /* Subtle separator line at trigger bottom when open */
  .pl-picker-dd.is-open .pl-picker-dd__trigger::before,
  .pl-picker-dd.is-closing .pl-picker-dd__trigger::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,.15);
    pointer-events: none;
  }

  /* Pressed state — smooth inset feel, no movement */
  .pl-picker-dd__trigger.pl-pressed {
    background: rgb(22 22 22);
    border-color: rgba(255,255,255,.35);
    box-shadow: inset 0 1.5px 4px rgba(0,0,0,.35);
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  }

  .pl-picker-dd__current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .pl-picker-dd__name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .pl-picker-dd__arrow {
    flex-shrink: 0;
    color: rgb(140 140 140);
    display: flex;
    align-items: center;
    transition: transform 200ms ease;
  }

  .pl-picker-dd.is-open .pl-picker-dd__arrow,
  .pl-picker-dd.is-closing .pl-picker-dd__arrow {
    transform: rotate(180deg);
  }

  /* Panel */
  .pl-picker-dd__panel {
    position: fixed;
    background: rgb(24 24 24);
    border: 2px solid rgba(255,255,255,.30);
    border-top: none;
    border-bottom-left-radius: var(--rounded-button, 8px);
    border-bottom-right-radius: var(--rounded-button, 8px);
    z-index: 9999;
    /* Tall enough to fit every flavour-count we ship without an
       internal scrollbar; capped at 80vh so it never falls off
       short viewports. */
    max-height: min(80vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;  /* JS controls visibility when panel moves to body */
    box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,1);
  }

  .pl-picker-dd__panel::-webkit-scrollbar { width: 4px; }
  .pl-picker-dd__panel::-webkit-scrollbar-track { background: transparent; }
  .pl-picker-dd__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

  .pl-picker-dd__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: rgb(220 220 220);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
  }

  .pl-picker-dd__option:last-child { border-bottom: none; }
  .pl-picker-dd__option:hover { background: rgba(255,255,255,.06); }
  .pl-picker-dd__option.is-selected { background: rgba(255,255,255,.08); }
  .pl-picker-dd__option.is-unavailable { opacity: 0.5; }
  .pl-picker-dd__option .pl-picker-dd__name {
    font-size: 0.82rem;
    font-weight: 650;
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Slide animations for quick-add dropdown — shared with mobile variant dd */
  @keyframes pl-picker-dd-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes pl-picker-dd-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
  }

  /* Stock indicators */
  /* Stock indicators — dual selectors: in-card + body-mounted panel */
  .pl-picker-controls .pl-stock,
  .pl-picker-dd__panel .pl-stock {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    line-height: 1;
  }

  .pl-picker-controls .pl-stock__text,
  .pl-picker-dd__panel .pl-stock__text { opacity: 0.85; }

  .pl-picker-controls .pl-stock--in,
  .pl-picker-dd__panel .pl-stock--in  { color: #2ecc71; }

  .pl-picker-controls .pl-stock--low,
  .pl-picker-dd__panel .pl-stock--low { color: #f39c12; }

  .pl-picker-controls .pl-stock--out,
  .pl-picker-dd__panel .pl-stock--out { color: #e74c3c; }

  .pl-picker-controls .pl-stock__icon,
  .pl-picker-dd__panel .pl-stock__icon {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .pl-picker-controls .pl-stock--in .pl-stock__icon,
  .pl-picker-dd__panel .pl-stock--in .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
  }

  .pl-picker-controls .pl-stock--low .pl-stock__icon,
  .pl-picker-dd__panel .pl-stock--low .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  }

  .pl-picker-controls .pl-stock--out .pl-stock__icon,
  .pl-picker-dd__panel .pl-stock--out .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* ── Qty selector — matches dropdown style ── */
  .pl-picker-qty {
    width: 100%;
    height: auto !important;
    min-height: 0;
    background: rgb(28 28 28) !important;
    border: 2px solid rgba(255,255,255,.18) !important;
    border-radius: var(--rounded-button);
    justify-content: center;
  }

  .pl-picker-qty .quantity-selector__button {
    padding: 0.5rem 0.85rem !important;
    color: rgb(160 160 160);
    transition: color 150ms ease;
  }

  .pl-picker-qty .quantity-selector__button:hover { color: rgb(255 255 255); }
  .pl-picker-qty .quantity-selector__button svg { width: 10px; height: 10px; }

  .pl-picker-qty .quantity-selector__input {
    width: 2rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgb(230 230 230);
    background: transparent;
    border: none;
    padding: 0.4rem 0;
    -moz-appearance: textfield;
  }

  .pl-picker-qty .pl-qty-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgb(230 230 230);
  }

  .pl-picker-qty .pl-qty-cell {
    min-width: 1.8rem;
  }

  .pl-picker-qty .quantity-selector__input::-webkit-inner-spin-button,
  .pl-picker-qty .quantity-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ── ATC button ── */
  .pl-picker-atc {
    width: 100%;
    margin-top: 0 !important;
    font-size: 0.78rem !important;
    padding-block: 0.65rem !important;
    min-height: 0 !important;
    position: relative;
    transition: background-color 200ms ease, opacity 200ms ease;
    color: #101010 !important;
  }

  .pl-picker-atc[disabled] {
    background-color: rgb(55 55 55) !important;
    color: rgb(110 110 110) !important;
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* Override product-card button::before/after hidden rule */
  .pl-picker-controls .pl-picker-atc.button::before { display: block !important; }
  .pl-picker-controls .pl-picker-atc.button::after { display: block !important; }

  .pl-picker-atc.button > div { position: relative; z-index: 2; }

  .pl-picker-atc.button > .button__loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  /* Accent hover fill on quick-add picker ATC — matches PUMPLAB_ATC_ACCENT_V1 */
  .pl-picker-controls .pl-picker-atc.button:not([disabled]):not(.button--subdued)::after {
    background: #555555;
  }

  .pl-picker-controls .pl-picker-atc.button:not([disabled]):not(.button--subdued)::before {
    background:
      linear-gradient(rgb(0 0 0 / 0.0), rgb(0 0 0 / 0.0)) padding-box,
      repeating-linear-gradient(
        150deg,
        rgb(255 255 255 / 0)    0%,
        rgb(255 255 255 / 0)    33%,
        rgb(255 255 255 / 0.15) 41%,
        rgb(255 255 255 / 0.82) 50%,
        rgb(255 255 255 / 0.15) 59%,
        rgb(255 255 255 / 0)    67%,
        rgb(255 255 255 / 0)    100%
      ) border-box;
    background-size: auto, 200% 100%;
    background-position: 0 0, -40% 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .pl-picker-controls .pl-picker-atc.button:not([disabled]):not(.button--subdued):hover,
    .pl-picker-controls .pl-picker-atc.button:not([disabled]):not(.button--subdued):hover * {
      color: #FFFFFF !important;
    }
  }
}

/* PUMPLAB_MISC_BUGS_V1 — CSS safety net for stale-ref card info bug.
   When no picker state is active, force card info children visible so a
   DOM re-render during close animation can't leave them stuck at opacity:0. */
product-card:not(.pl-picker-open):not(.pl-picker-busy) .product-card__info,
product-card:not(.pl-picker-open):not(.pl-picker-busy) .product-card__info > *,
product-card:not(.pl-picker-open):not(.pl-picker-busy) .product-card__info > .v-stack > * {
  opacity: 1 !important;
  transform: none !important;
}
/* End PUMPLAB_MISC_BUGS_V1 */

/* PUMPLAB_QUICKADD_V1 — headline + compact rating in quick-buy */
.pl-quick-buy-headline {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(180 180 180);
  margin: 0 0 -0.25rem;
}

.pl-quick-buy-rating {
  display: flex;
  align-items: flex-start;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.pl-quick-buy-rating .pl-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgb(160 160 160);
  pointer-events: none;
}

/* Sticky ATC bar — product title (pl-card-title__main outside .product-card context) */
.product-quick-add__variant .pl-card-title__main {
  font-family: 'Monument Extended Black', sans-serif;
}

/* Collection page main heading */
.shopify-section--collection-banner h1 {
  font-family: 'Monument Wide Black', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  font-synthesis: none;
}

/* ── PUMPLAB_CART_STEPPER_V1 ─────────────────────────────────────────────── */

.pl-cart-qty {
  --cart-qty-h: 33px;
  display: inline-flex;
  align-items: stretch;
  height: var(--cart-qty-h);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rounded-button, 4px);
  overflow: hidden;
}

.pl-cart-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cart-qty-h);
  min-width: var(--cart-qty-h);
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-cart-qty__btn:hover {
    background-color: rgba(255, 255, 255, 0.09);
  }
}

.pl-cart-qty__btn:active {
  background-color: rgba(255, 255, 255, 0.16);
}

.pl-cart-qty__btn svg {
  display: block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pl-cart-qty__btn:hover svg {
    transform: scale(1.3);
  }
}

.pl-cart-qty__btn:active svg {
  transform: scale(0.75);
  transition-duration: 0.07s;
}

/* Number cell — slightly wider than buttons to account for border-inline */
.pl-cart-qty__cell {
  position: relative;
  width: calc(var(--cart-qty-h) + 6px);
  min-width: calc(var(--cart-qty-h) + 6px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline: 2px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* Input: hidden visually, still functional for value/events */
.pl-cart-qty__cell input[type="number"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  -moz-appearance: textfield;
}

.pl-cart-qty__cell input[type="number"]::-webkit-outer-spin-button,
.pl-cart-qty__cell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Animated number overlay */
.pl-cart-qty__display {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pl-cart-qty__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  will-change: transform, opacity;
}

.pl-cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  opacity: 0.35;
  color: currentColor;
  transition: opacity 150ms, color 150ms;
  flex-shrink: 0;
}

.pl-cart-remove:hover {
  opacity: 1;
  color: #e05c5c;
}

.pl-cart-remove svg {
  pointer-events: none;
  width: 16px;
  height: 16px;
}

/* Actions column: push right, stretch to full row height on all screen sizes */
.line-item__actions {
  margin-inline-start: auto;
  align-self: stretch;
}

/* Trash at top-right, qty near bottom-right — all screen sizes */
.line-item__actions line-item-quantity {
  justify-items: end;
  align-content: space-between;
  height: 100%;
  padding-block-end: 5px;
}

/* Slightly smaller qty selector on mobile */
@media screen and (max-width: 699px) {
  .pl-cart-qty {
    --cart-qty-h: 31px;
  }

  .pl-cart-qty__btn {
    width: 28px;
    min-width: 28px;
  }

  .pl-cart-qty__cell {
    width: 34px;
    min-width: 34px;
  }
}

/* PUMPLAB_CART_DISCOUNT_OVERFLOW_V1 — prevent line-item discount badge from overlapping qty */
#cart-drawer .line-item .line-item__info {
  min-width: 0;
}

#cart-drawer .line-item .line-item__info .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
}
/* End PUMPLAB_CART_DISCOUNT_OVERFLOW_V1 */

/* PUMPLAB_CART_LINE_GRID_V1 — mobile: discount badge drops to own row below content */
@media screen and (max-width: 699px) {
  #cart-drawer .line-item {
    display: grid;
    grid-template-columns: calc(var(--line-item-image-width) + 10px) 1fr auto;
    grid-auto-flow: dense;
    align-items: start;
    gap: 0 var(--spacing-3);
  }

  #cart-drawer .line-item > .line-item__media-wrapper {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: calc(var(--line-item-image-width) + 10px);
    min-width: calc(var(--line-item-image-width) + 10px);
  }

  #cart-drawer .line-item > .line-item__info {
    display: contents;
  }

  #cart-drawer .line-item .line-item__info > .v-stack:first-child {
    grid-column: 2 / -1;
    grid-row: 1;
    padding-inline-end: 30px;
    margin-top: 6px;
  }

  #cart-drawer .line-item .line-item__info > p {
    grid-column: 2;
    margin-top: var(--spacing-1);
    align-self: start;
  }

  #cart-drawer .line-item > .line-item__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-inline-start: 0;
    align-self: start;
    margin-top: -4px;
    height: calc(var(--line-item-image-width) + 16px);
  }

  #cart-drawer .line-item .pl-cart-qty {
    margin-top: 4px;
  }

  #cart-drawer .line-item .line-item__info .badge {
    grid-column: 2 / -1;
    margin-top: 4px;
  }

  /* Gift dropdown spans full width and needs overflow visible for panel */
  #cart-drawer .line-item .pl-variant-dd--cart {
    grid-column: 2 / -1;
  }

}

/* Gift dropdown panel uses position:fixed via JS — no overflow overrides needed */
/* End PUMPLAB_CART_LINE_GRID_V1 */

/* End PUMPLAB_CART_REWORK_V1 */

/* PUMPLAB_CART_LINE_PRICE_WHITE_V1 — Cart line-item sale price rendered as
   bold white instead of the theme's global red `--on-sale-text`. Scoped
   to .line-item so product cards, PDPs, and other sale-price contexts
   across the site keep their red treatment. */
.line-item .text-on-sale,
.line-item sale-price.text-on-sale {
  color: #FFFFFF;
  font-weight: 700;
}
/* End PUMPLAB_CART_LINE_PRICE_WHITE_V1 */

/* PUMPLAB_BREADCRUMB_V1 — breadcrumb navigation on product + collection pages */
.pl-breadcrumb {
  padding: 0;
  margin-bottom: var(--spacing-5);
  position: relative;
  z-index: 2;
}

.product-info .pl-breadcrumb {
  display: none;
}

@media screen and (max-width: 999px) {
  .shopify-section--main-product .section,
  .shopify-section--main-collection {
    padding-block-start: 0 !important;
    padding-top: 0 !important;
  }

  .shopify-section--main-product > .pl-breadcrumb,
  .shopify-section--main-product .section > .pl-breadcrumb,
  .shopify-section--main-collection .pl-breadcrumb,
  .pl-collection-header .pl-breadcrumb {
    margin: 0 !important;
    padding: 6px 0 !important;
  }

  .shopify-section--main-search {
    padding-block-start: 0 !important;
    padding-top: 0 !important;
  }

  .shopify-section--main-search .pl-collection-header {
    padding-bottom: 0 !important;
  }

  .shopify-section--main-collection .pl-collection-header .pl-breadcrumb,
  .shopify-section--main-search .pl-collection-header .pl-breadcrumb {
    margin-left: calc(-1 * var(--container-gutter, 20px)) !important;
    margin-right: calc(-1 * var(--container-gutter, 20px)) !important;
    padding-left: var(--container-gutter, 20px) !important;
    padding-right: var(--container-gutter, 20px) !important;
    background: rgb(33 33 33);
  }

  .pl-collection-header {
    padding-top: 0 !important;
  }

  .shopify-section--main-product .pl-breadcrumb .pl-breadcrumb__link {
    color: rgb(110 110 110);
  }

  .shopify-section--main-product .pl-breadcrumb .pl-breadcrumb__home {
    color: rgb(160 160 160);
  }

  .shopify-section--main-product .pl-breadcrumb .pl-breadcrumb__sep {
    color: rgb(100 100 100);
  }

  .shopify-section--main-product .pl-breadcrumb .pl-breadcrumb__current {
    color: rgb(160 160 160);
  }

  .pl-collection-header__title {
    margin-top: 28px !important;
  }

  .pl-collection-header {
    padding-bottom: 6px !important;
  }

  .pl-collection-header__desc {
    margin-top: 6px !important;
  }

}

@media screen and (min-width: 1000px) {
  .shopify-section--main-product .pl-breadcrumb {
    margin-top: calc(-1 * var(--spacing-8, 32px));
    margin-bottom: var(--spacing-8, 32px);
  }
}

@media screen and (min-width: 1000px) {
  .shopify-section--main-collection,
  .shopify-section--main-search {
    padding-top: 32px !important;
  }

  .shopify-section--main-search .pl-collection-header {
    padding-bottom: 0 !important;
  }

  .pl-collection-header {
    padding-bottom: 0 !important;
  }
}

/* Hide original collection banner — replaced by pl-collection-header */
section.shopify-section--collection-banner {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pl-collection-header {
  text-align: center;
  padding-top: 0;
  padding-bottom: var(--spacing-8, 32px);
}

.pl-collection-header .pl-breadcrumb {
  margin-bottom: var(--spacing-5, 20px);
  text-align: left;
}

.pl-collection-header__title {
  margin-top: var(--spacing-4, 16px);
  font-family: 'Monument Wide Black', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  font-synthesis: none;
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  line-height: 1.1;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .pl-collection-header__title {
    font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  }
}

@media screen and (min-width: 1000px) {
  .pl-collection-header__title {
    font-size: clamp(3rem, 4vw, 4.5rem);
  }
}

.pl-collection-header__desc {
  margin-top: var(--spacing-4, 16px);
  color: rgb(140 140 140);
  max-width: 680px;
  margin-inline: auto;
  font-size: 0.95rem;
}

@media screen and (min-width: 1000px) {
  .pl-collection-header__desc {
    font-size: 1.25rem;
  }
}

.pl-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.3em;
  font-size: 1.05rem;
  line-height: 1.4;
}

.pl-breadcrumb__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.pl-breadcrumb__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(220 220 220);
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  clip-path: inset(0 round 4px);
  transition: color 0.2s ease;
}

.pl-breadcrumb__link {
  color: rgb(136 136 136);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 600;
  position: relative;
  padding: 5px 6px;
  border-radius: 4px;
  clip-path: inset(0 round 4px);
}

/* PUMPLAB_BREADCRUMB_FILL_V1 — slide-up fill on hover, hidden on mobile */
.pl-breadcrumb__link::before,
.pl-breadcrumb__home::before,
.pl-breadcrumb__current::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.08);
  transform: translateY(100%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 699px) {
  .pl-breadcrumb__link::before,
  .pl-breadcrumb__home::before,
  .pl-breadcrumb__current::before {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pl-breadcrumb__link:hover,
  .pl-breadcrumb__home:hover,
  .pl-breadcrumb__current:hover {
    color: rgb(230 230 230);
  }

  .pl-breadcrumb__link:hover::before,
  .pl-breadcrumb__home:hover::before,
  .pl-breadcrumb__current:hover::before {
    transform: translateY(0);
  }
}
/* End PUMPLAB_BREADCRUMB_FILL_V1 */

.pl-breadcrumb__link:active,
.pl-breadcrumb__home:active,
.pl-breadcrumb__current:active {
  transform: scale(0.92);
  opacity: 0.6;
}

.pl-breadcrumb__sep {
  color: rgb(160 160 160);
  font-size: 1.2em;
  line-height: 1;
  padding: 0 0.1em;
  user-select: none;
}

.pl-breadcrumb__current {
  color: rgb(210 210 210);
  font-weight: 700;
  position: relative;
  padding: 5px 6px;
  margin-left: 2px;
  border-radius: 4px;
  clip-path: inset(0 round 4px);
  transition: color 0.2s ease;
  cursor: pointer;
}
@keyframes pl-breadcrumb-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pl-breadcrumb__item {
  animation: pl-breadcrumb-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pl-breadcrumb__item:nth-child(1) { animation-delay: 0.05s; }
.pl-breadcrumb__item:nth-child(2) { animation-delay: 0.15s; }
.pl-breadcrumb__item:nth-child(3) { animation-delay: 0.25s; }
/* End PUMPLAB_BREADCRUMB_V1 */

/* ── PUMPLAB_CART_DRAWER_V1 ──────────────────────────────────────────────────
   Cart drawer UX improvements — hoverable line items, close button hover,
   discount section, savings nowrap, mobile clutter reduction
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Hoverable product sections — inset content on desktop only */
@media screen and (min-width: 700px) {
  #cart-drawer .line-item {
    --pl-li-inset: 10px;
    padding-inline: var(--pl-li-inset);
  }
}

/* Spacing between line items — use margin so hover bg doesn't bleed into gaps */
#cart-drawer .cart-drawer__line-items > * + * {
  padding-block-start: 0;
  margin-block-start: var(--spacing-2);
}


/* Hover bg on all line items (products + gift shaker) */
#cart-drawer .line-item {
  position: relative;
  padding-block: 8px;
  border-radius: 8px;
  background: transparent;
  transition: background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #cart-drawer .line-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
}

/* Invisible link covers the full area for click-to-product navigation */
.pl-line-item__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Keep interactive elements above the link overlay */
#cart-drawer .line-item .line-item__actions {
  position: relative;
  z-index: 2;
}

/* 5. Close button hover — matches announcement bar .pl-nav:hover */
.pl-cart-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-inline-end: 0;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  transition: background 180ms ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .pl-cart-close:hover {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* 6. Mobile cart drawer clutter reduction */
@media screen and (max-width: 699px) {
  /* Shrink and mute tax/shipping text */
  .pl-cart-tax-text {
    font-size: 0.6875rem !important;
    opacity: 0.5;
    line-height: 1.25;
  }

  /* Note button — smaller, muted */
  .pl-cart-note-btn {
    font-size: 0.75rem;
    opacity: 0.6;
  }

  .pl-cart-note-wrapper {
    margin-top: -0.5rem;
  }


  /* PUMPLAB_CART_NOTE_MOBILE_V1 — Make Spara button visible on actual mobile */
  #cart-drawer .pl-cart-note-above-checkout .cart-drawer__note-inner {
    overflow: visible !important;
  }
  /* End PUMPLAB_CART_NOTE_MOBILE_V1 */

  /* Tighter footer gap on mobile */
  #cart-drawer [slot="footer"] > .v-stack {
    gap: 0.25rem;
  }
}

/* Tighter gap between progress bar and first product */
@media screen and (min-width: 700px) {
  .cart-drawer__top {
    padding-block-end: var(--spacing-3);
  }
}

/* Tighter footer top padding + upward shadow over scrollable content */
.cart-drawer {
  --drawer-footer-padding: 0.625rem 1.5rem 1.5rem 1.5rem;
}
.cart-drawer::part(footer) {
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.35);
  z-index: 2;
  background: rgb(24, 24, 24);
}
.cart-drawer {
  --dialog-background: 28, 28, 28;
}

/* PUMPLAB_CART_NOTE_POS_V1 — position note dialog just above checkout button */
#cart-drawer .pl-cart-note-above-checkout.cart-drawer__note {
  position: relative;
  bottom: auto;
  padding: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.3s,
              opacity 0.2s ease;
  visibility: hidden;
  margin-top: -0.35rem;
  margin-bottom: -0.35rem;
  opacity: 0;
}

#cart-drawer .pl-cart-note-above-checkout.cart-drawer__note[open] {
  grid-template-rows: 1fr;
  visibility: visible;
  margin: 0;
  opacity: 1;
}

#cart-drawer .pl-cart-note-above-checkout .cart-drawer__note-inner {
  overflow: hidden;
  min-height: 0;
  transform: none;
  transition: none;
  background: transparent;
  padding: 0.15rem 0 0.5rem;
  border: none;
}

.pl-cart-note-panel {
  position: relative;
}

.pl-cart-note-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.pl-cart-note-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}

.pl-cart-note-save {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: #111;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}

.pl-cart-note-save svg {
  stroke: #111;
  width: 14px;
  height: 14px;
}

.pl-cart-note-save:hover {
  background: rgba(255, 255, 255, 0.85);
}

.pl-cart-note-panel.has-text .pl-cart-note-save {
  display: inline-flex;
}

.pl-note-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2ecc71;
  margin-left: 0.5rem;
  position: relative;
  top: 2px;
  animation: pl-note-saved-in 0.2s ease both;
}

.pl-note-saved.is-fading {
  animation: pl-note-saved-out 0.5s ease both;
}

@keyframes pl-note-saved-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pl-note-saved-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* End PUMPLAB_CART_NOTE_POS_V1 */

@media screen and (min-width: 700px) {
  .cart-drawer {
    --drawer-footer-padding: 0.875rem 2.5rem 2.5rem 2.5rem;
    padding: 0;
  }

  .cart-drawer::part(content) {
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.35s ease;
  }

  .cart-drawer.pl-shadow-on::part(content) {
    box-shadow: -25px 0 80px rgba(0,0,0,.2), -6px 0 30px rgba(0,0,0,.1);
  }

  .cart-drawer::part(overlay) {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* End PUMPLAB_CART_DRAWER_V1 */

/* PUMPLAB_PRODUCT_ACCORDION_V1 */

/* Lock product section gradient to viewport height so accordion expand doesn't stretch it.
   background-color matches the gradient's darkest stop so content below blends seamlessly. */
.shopify-section--main-product .section.bg-gradient {
  background-size: 100% 100vh;
  background-repeat: no-repeat;
  background-color: #0d0c0c;
}

.pl-accordion-img {
  width: 100%;
  height: auto;
  border-radius: var(--rounded-xs);
}

/* Accordion content typography */
.product-info__accordion .accordion__content .prose {
  line-height: 1.75;
  color: rgb(var(--text-color) / 0.72);
}

.product-info__accordion .accordion__content .prose strong,
.product-info__accordion .accordion__content .prose b {
  color: rgb(var(--text-color) / 0.95);
  font-weight: 700;
}

.product-info__accordion .accordion__content .prose em,
.product-info__accordion .accordion__content .prose i {
  color: rgb(var(--text-color) / 0.55);
  font-style: italic;
}

/* Accordion icon base — filled style */
.product-info__accordion .accordion__toggle .text-with-icon > svg {
  fill: currentColor;
  stroke: currentColor;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* Tighten gap above accordion rows */
.product-info__block-item:has(.product-info__accordion) {
  --product-info-block-spacing: var(--spacing-3);
}

/* PUMPLAB_ACCORDION_ENTRANCE_V1 — stagger fade-in on page load */
@keyframes pl_accordion_enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-info__accordion:nth-child(1) { animation-delay: 0.5s; }
.product-info__accordion:nth-child(2) { animation-delay: 0.62s; }
.product-info__accordion:nth-child(3) { animation-delay: 0.74s; }
.product-info__accordion:nth-child(4) { animation-delay: 0.86s; }
.product-info__accordion:nth-child(5) { animation-delay: 0.98s; }
/* End PUMPLAB_ACCORDION_ENTRANCE_V1 */

/* Accordion row polish — seamless with hover fill */
.product-info__accordion {
  position: relative;
  background: transparent;
  border-radius: var(--rounded-button, 4px);
  border-block-start-width: 0 !important;
  border-block-end-width: 0 !important;
  overflow: hidden;
  clip-path: inset(0 round var(--rounded-button, 4px));
  transition: background 0.2s ease;
  opacity: 0;
  animation: pl_accordion_enter 0.4s cubic-bezier(.22, 1, .36, 1) forwards;
}

.product-info__accordion .accordion__toggle .text-with-icon > svg {
  transform-origin: left center;
  z-index: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Icon becomes sticker — class toggled instantly via JS */
.product-info__accordion.pl-icon-sticker .accordion__toggle .text-with-icon > svg {
  transform: scale(3.5) translateX(-8px) rotate(-10deg) !important;
  opacity: 0.08 !important;
  animation: none !important;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}

.product-info__accordion > summary {
  position: relative;
  z-index: 1;
  transition: transform 0.15s ease;
}

.product-info__accordion .accordion__content {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .product-info__accordion > summary:active {
    transform: scale(0.97);
  }
}

.product-info__accordion .accordion__toggle {
  padding: var(--spacing-4) var(--spacing-4);
}

.product-info__accordion .accordion__content {
  padding-inline: var(--spacing-4);
  padding-block-end: var(--spacing-6);
}

.product-info__accordion .accordion__toggle .text-with-icon {
  gap: 12px;
}

.product-info__accordion .accordion__toggle .text-with-icon > span {
  font-size: 0.92em;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: rgb(var(--text-color) / 0.85);
  transition: color 0.25s ease;
  position: relative;
  z-index: 1;
}

/* Plus/minus indicator — replaces circle chevron */
.pl-accordion-indicator {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pl-accordion-indicator .pl-ind-v {
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), opacity 0.2s ease;
  transform-origin: center;
}

/* Turns + into – when open */
.product-info__accordion[open] .pl-accordion-indicator .pl-ind-v {
  transform: rotate(90deg);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-info__accordion:not([open]):hover .pl-accordion-indicator {
    opacity: 0.8;
  }
}

/* Nutrition image zoom button */
.pl-nutrition-zoom {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: zoom-in;
  border-radius: var(--rounded-xs);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pl-nutrition-zoom:hover {
  transform: scale(1.01);
  opacity: 0.9;
}

.pl-nutrition-zoom:active {
  transform: scale(0.99);
}

/* Fullscreen nutrition overlay */
.pl-nutrition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 24px;
}

.pl-nutrition-overlay.pl-visible {
  opacity: 1;
}

.pl-nutrition-overlay img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.pl-nutrition-overlay.pl-visible img {
  transform: scale(1);
}

/* Open state title styling */

.product-info__accordion[open] .accordion__toggle .text-with-icon > span,
.product-info__accordion.pl-icon-sticker .accordion__toggle .text-with-icon > span {
  color: rgb(var(--text-color) / 1);
  /* text-shadow fakes extra boldness without changing font-weight/layout */
  text-shadow: 0 0 0.3px currentColor, 0 0 0.3px currentColor;
}

/* Corner glow on open — top-left and bottom-right only */
.product-info__accordion::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  border: 2px solid rgb(255 255 255 / 0.3);

  /* Mask: only show top-left and bottom-right corners, tight fade */
  -webkit-mask:
    radial-gradient(ellipse 40% 55% at 0% 0%, black 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 100% 100%, black 0%, transparent 65%);
  -webkit-mask-composite: source-over;
  mask:
    radial-gradient(ellipse 40% 55% at 0% 0%, black 0%, transparent 65%),
    radial-gradient(ellipse 40% 55% at 100% 100%, black 0%, transparent 65%);
  mask-composite: add;
}

.product-info__accordion[open]::before {
  opacity: 1;
}

/* Hover fill sweep-up — matches header nav links */
.product-info__accordion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover::after {
    transform: translateY(0);
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .accordion__toggle .text-with-icon > span {
    color: rgb(var(--text-color) / 1);
  }
}

/* Keep fill visible when open */
.product-info__accordion[open]::after {
  transform: translateY(0);
}

/* Icon sub-element transitions */
.pl-icon-desc path[opacity] {
  transition: opacity 0.35s ease;
}

.pl-icon-desc__pen {
  opacity: 0;
  transform: translate(2px, -2px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 1px currentColor);
}

.pl-icon-smaker {
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.pl-shaker--left {
  transform: rotate(-10deg);
  transform-origin: 7px 20px;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.pl-shaker--right {
  transform: rotate(10deg);
  transform-origin: 21px 20px;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

.pl-icon-usage rect[opacity] {
  transition: opacity 0.35s ease;
}

.pl-icon-usage__check {
  transition: stroke-width 0.3s ease;
  transform-origin: 14px 10px;
}


.pl-icon-warn path[opacity] {
  transition: opacity 0.35s ease;
}


.pl-icon-nutrition rect[opacity] {
  transition: opacity 0.35s ease;
}

.pl-nutri-new {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.22, 1, .36, 1);
}

.pl-icon-nutrition__lines line {
  transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), opacity 0.35s ease;
}

.pl-icon-nutrition__lines line:nth-child(1) { transition-delay: 0s; }
.pl-icon-nutrition__lines line:nth-child(2) { transition-delay: 0.04s; }
.pl-icon-nutrition__lines line:nth-child(3) { transition-delay: 0.08s; }
.pl-icon-nutrition__lines line:nth-child(4) { transition-delay: 0.12s; }
.pl-icon-nutrition__lines line:nth-child(5) { transition-delay: 0.16s; }

@media (hover: hover) and (pointer: fine) {
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .accordion__toggle .text-with-icon > svg {
    opacity: 1;
  }

  /* Beskrivning — pen slides in from top-right */
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-desc path[opacity] {
    opacity: 0.35;
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-desc .pl-icon-desc__pen {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* Smaker — shakers spread + scale towards you */
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-smaker {
    transform: scale(1.1);
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-smaker .pl-shaker--left {
    transform: rotate(-20deg) translateX(-1.5px);
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-smaker .pl-shaker--right {
    transform: rotate(20deg) translateX(1.5px);
  }

  /* Rekommenderad Användning — box fills, check stamps in */
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-usage rect[opacity] {
    opacity: 0.35;
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-usage .pl-icon-usage__check {
    stroke-width: 2.2;
    animation: pl-stamp-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
  }

  /* Näringsinnehåll — lines shift down, new line appears, bottom clipped */
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-nutrition rect[opacity] {
    opacity: 0.35;
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-nutrition__lines line {
    transform: translateY(4px);
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-nutri-new {
    opacity: 1;
  }

  /* Varningar — shake + flicker */
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-warn {
    animation: pl-warn-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
  }
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover .pl-icon-warn path[opacity] {
    opacity: 0.4;
  }
}


/* Smaker — flavor descriptions dimmed, names pop */
.pl-smaker-content p {
  padding-block: 3px;
}

.pl-smaker-content em {
  font-style: italic;
  color: rgb(var(--text-color) / 0.9);
}

@keyframes pl-stamp-pop {
  0% { transform: scale(1); }
  30% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes pl-warn-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-2px) rotate(-1deg); }
  30% { transform: translateX(2px) rotate(1deg); }
  45% { transform: translateX(-1.5px); }
  60% { transform: translateX(1px); }
  75% { transform: translateX(-0.5px); }
}

/* Varningar — dimmed italic fine print feel */
.product-info__accordion:last-child .accordion__content .prose {
  color: rgb(var(--text-color) / 0.5);
  font-style: italic;
  line-height: 1.85;
}
/* PUMPLAB_ACCORDION_V1 — Touch devices: show active icon sub-elements when open (within sticker) */
@media (pointer: coarse) {
  /* Beskrivning — pen slides in */
  .product-info__accordion[open] .pl-icon-desc path[opacity] { opacity: 0.35; }
  .product-info__accordion[open] .pl-icon-desc .pl-icon-desc__pen {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* Smaker — shakers spread */
  .product-info__accordion[open] .pl-icon-smaker { transform: scale(1.1); }
  .product-info__accordion[open] .pl-icon-smaker .pl-shaker--left {
    transform: rotate(-20deg) translateX(-1.5px);
  }
  .product-info__accordion[open] .pl-icon-smaker .pl-shaker--right {
    transform: rotate(20deg) translateX(1.5px);
  }

  /* Rekommenderad Användning — check stamps in */
  .product-info__accordion[open] .pl-icon-usage rect[opacity] { opacity: 0.35; }
  .product-info__accordion[open] .pl-icon-usage .pl-icon-usage__check {
    stroke-width: 2.2;
  }

  /* Ingredienser — lines shift down, new line appears */
  .product-info__accordion[open] .pl-icon-nutrition rect[opacity] { opacity: 0.35; }
  .product-info__accordion[open] .pl-icon-nutrition__lines line { transform: translateY(4px); }
  .product-info__accordion[open] .pl-nutri-new { opacity: 1; }

  /* Varningar — triangle fills */
  .product-info__accordion[open] .pl-icon-warn path[opacity] { opacity: 0.4; }
}
/* End PUMPLAB_ACCORDION_V1 */

/* PUMPLAB_FONTS_V1 */
:root {
  --heading-font-family: 'Inter', sans-serif !important;
  --heading-font-weight: 800 !important;
  --text-font-family: 'Inter', sans-serif !important;
  --text-font-weight: 480 !important;
  font-variation-settings: 'opsz' 20;
}
body, body * {
  letter-spacing: -0.015em;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading {
  letter-spacing: -0.03em;
}
.bold, strong, b {
  font-weight: 700;
}
/* Bigger display headings — heavier + tighter */
.h0, .h1, .h2,
.impact-text__text,
.collection-list .h2 {
  font-weight: 900;
  letter-spacing: -0.04em;
}
/* Monument Wide — stylistic alternates for glyph variety */
.shopify-section--featured-collection .section-header__heading {
  font-family: 'Monument Wide Black', sans-serif !important;
  font-weight: 900 !important;
  font-feature-settings: 'salt' on, 'ss01' on, 'ss02' on, 'ss03' on;
}
/* End PUMPLAB_FONTS_V1 */

/* PUMPLAB_HEADER_V1 — Header interactivity and UX overhaul */

/* Mobile search icon spacing — tighten gap to hamburger */
@media screen and (max-width: 699px) {
  .header__main-nav > .header__icon-list {
    gap: var(--spacing-1);
  }
}

/* 1. Interactive header icons — individual micro-animations per icon */
/* PUMPLAB_HEADER_ICON_HOVER_V1 — square fill sweep on header icons */
.header__icon-list > li > .tap-area {
  overflow: hidden;
  isolation: isolate;
  padding: 9px;
  border-radius: 6px;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease, color 0.3s cubic-bezier(.22, 1, .36, 1);
  aspect-ratio: 1;
}

.header__icon-list > li > .tap-area::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

/* Cart count badge — reposition for square icon box */
.header__icon-list .header__cart-count {
  z-index: 2;
  top: 2px;
  left: auto;
  right: 0;
}

@media screen and (max-width: 699px) {
  .header__icon-list .header__cart-count {
    top: 6px;
    left: auto !important;
    right: 3px;
  }
}

.header__icon-list > li > .tap-area svg {
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), color 0.3s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 1;
}
.header__icon-list > li > .tap-area:active {
  transform: scale(0.85);
  opacity: 0.6;
}

.header__icon-list > li > .tap-area:active::after {
  transform: scale(calc(1 / 0.85)) translateY(0);
}
/* End PUMPLAB_HEADER_ICON_HOVER_V1 */

@media (hover: hover) and (pointer: fine) {
  .header__icon-list > li > .tap-area:hover::after {
    transform: translateY(0);
  }

  /* Search — tilts like it's scanning */
  .header__icon-list .tap-area[aria-controls="search-drawer"]:hover svg {
    transform: rotate(-15deg);
  }

  /* Cart basket — bounces up, peeking inside */
  .header__icon-list .tap-area[aria-controls="cart-drawer"]:hover svg,
  .header__icon-list .tap-area[data-no-instant]:hover svg {
    transform: translateY(-2px);
  }

  /* Hamburger — slides right, teasing the menu */
  .header__icon-list .tap-area[aria-controls="header-sidebar-menu"]:hover svg {
    transform: translateX(2px);
  }

  /* Account — lifts up */
  .header__icon-list .tap-area[href*="account"]:hover svg {
    transform: translateY(-2px);
  }
}

/* 2. Language/currency selectors — hidden from header (available in footer) */
.header__secondary-nav li:has([aria-controls^="popover-localization"]) {
  display: none !important;
}

/* PUMPLAB_HEADER_LOGO_HOVER_V1 — fill sweep on logo */
.header__logo a,
a.header__logo {
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding: 7px 0;
  margin: -7px 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
}

@media screen and (min-width: 700px) {
  .header__logo a,
  a.header__logo {
    overflow: hidden;
    transform: translateX(-4px);
  }

  /* Restore vertical nudge on transparent-header pages (homepage) */
  .header[allow-transparency] .header__logo a,
  .header[allow-transparency] a.header__logo {
    transform: translate(-4px, 3px);
  }
}

.header__logo a::before,
a.header__logo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  opacity: 0;
  transition: opacity 0.2s ease-in;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .header__logo a:hover::before,
  a.header__logo:hover::before {
    opacity: 1;
  }
}

.header__logo a:active,
a.header__logo:active {
  transform: scale(0.92);
  opacity: 0.6;
}

@media screen and (min-width: 700px) {
  .header__logo a:active,
  a.header__logo:active {
    transform: translateX(-4px) scale(0.92);
  }

  .header[allow-transparency] .header__logo a:active,
  .header[allow-transparency] a.header__logo:active {
    transform: translate(-4px, 3px) scale(0.92);
  }
}

/* End PUMPLAB_HEADER_LOGO_HOVER_V1 */

/* 4. Expanded hover hit areas on nav links */
/* PUMPLAB_HEADER_HOVER_V1 — fill sweep on header nav links */
.header__link-list a.bold,
.header__link-list summary.bold,
.header__link-list button.bold {
  padding: 7px 12px;
  margin: -7px -12px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease, color 0.3s cubic-bezier(.22, 1, .36, 1);
}

.header__link-list a.bold::before,
.header__link-list summary.bold::before,
.header__link-list button.bold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  /* Bridge gap between summary and mega menu for hover continuity */
  .header__link-list details[open] {
    padding-bottom: 20px;
    margin-bottom: -20px;
  }

  .header__link-list a.bold:hover,
  .header__link-list summary.bold:hover,
  .header__link-list button.bold:hover,
  .header__link-list details:hover > summary.bold {
    opacity: 1 !important;
  }

  .header__link-list a.bold:hover::before,
  .header__link-list summary.bold:hover::before,
  .header__link-list button.bold:hover::before,
  .header__link-list details:hover > summary.bold::before {
    transform: translateY(0);
  }
}

.header__link-list a.bold:active,
.header__link-list summary.bold:active,
.header__link-list button.bold:active {
  transform: scale(0.92);
  opacity: 0.6 !important;
}

.header__link-list a.bold:active::before,
.header__link-list summary.bold:active::before,
.header__link-list button.bold:active::before {
  transform: scale(calc(1 / 0.92)) translateY(0);
}
/* End PUMPLAB_HEADER_HOVER_V1 */

/* PUMPLAB_MEGA_MENU_HOVER_V1 — no-wrap titles + fade hover */
.mega-menu__nav > li > a {
  white-space: nowrap;
}

.mega-menu__nav a {
  display: inline-block;
  padding: 4px 12px;
  margin: -4px -12px;
  border-radius: 5px;
  background: transparent;
  transition: background 0.2s ease, transform 0.3s cubic-bezier(.22, 1, .36, 1), color 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  /* Title links — bright fill on hover */
  .mega-menu__nav > li > a:hover {
    background: rgb(255 255 255 / 0.10);
  }

  /* Subtitle links (bygga muskler, protein, kreatin, etc.) — darkening fill like header nav */
  .mega-menu__nav > li > ul a:hover {
    background: rgb(0 0 0 / 0.15);
  }
}

.mega-menu__nav a:active {
  transform: scale(0.95);
}

/* Mega menu trigger — chevron bounce-flip when open */
details[is="mega-menu-disclosure"] > summary.bold > svg {
  margin-top: -2px;
  transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1);
}

details[is="mega-menu-disclosure"][open] > summary.bold > svg {
  transform: translateY(-1px) rotate(180deg);
}
/* End PUMPLAB_MEGA_MENU_HOVER_V1 */

/* Dropdown menu item hit areas */
.dropdown-menu__item {
  padding: 5px 10px !important;
  margin: -5px -10px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .dropdown-menu__item:hover {
    background: rgba(var(--text-color), 0.06);
  }
}


/* 5b. Mobile search icon — move to secondary nav (next to cart), tight gap */
@media screen and (max-width: 699px) {
  /* Hide the search icon in the main-nav (left side) */
  .header__main-nav .tap-area[aria-controls="search-drawer"] {
    display: none !important;
  }
  /* Show the search icon in secondary nav (right side, normally hidden on mobile) */
  .header__secondary-nav .tap-area[aria-controls="search-drawer"] {
    display: flex !important;
  }
  /* PUMPLAB_SEARCH_ICON_V1 — Tighten icon spacing so search sits close to cart */
  .header__secondary-nav .header__icon-list {
    gap: 0;
    margin-inline-end: -4px;
  }
}

/* 5c. Slightly larger logo on mobile */
@media screen and (max-width: 699px) {
  .header__logo-image {
    transform: scale(1.35) !important;
  }
}

/* 6. Reduced header vertical size on desktop */
@media screen and (min-width: 700px) {
  .shopify-section--header .header__wrapper {
    --header-padding-block: var(--spacing-5);
  }
}

/* PUMPLAB_HEADER_COMPACT_MOBILE_V1 — shorter header on mobile */
@media screen and (max-width: 699px) {
  .shopify-section--header .header__wrapper {
    --header-padding-block: var(--spacing-3);
  }
}
/* End PUMPLAB_HEADER_COMPACT_MOBILE_V1 */

/* 7. Header drop shadow — only after user scrolls */
.header.is-filled:not([pl-search-active]):not([pl-nav-open]) .header__wrapper {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header__wrapper {
  transition: background .25s, box-shadow .25s;
}

/* End PUMPLAB_HEADER_V1 */

/* PUMPLAB_CART_COUNT_BUBBLE_V1 — Brand-accent cart count bubbles.
   Uses the warm greige accent #A79F8A so the cart count reads as a quiet
   brand affordance (not a loud "savings" chip). Scoped to (a) the header
   __cart-count bubble and (b) the cart drawer heading bubble
   (.count-bubble--md inside .cart-drawer) so other count-bubble instances
   — empty-state, notifications, etc. — keep the theme default. The GREEN
   positive-affordance color is reserved for the free-shipping progress bar
   and its surrounding text — not the cart count. */
.header__cart-count .count-bubble,
.cart-drawer cart-count.count-bubble--md {
  background: #A79F8A;
  color: #FFFFFF;
}
/* End PUMPLAB_CART_COUNT_BUBBLE_V1 */

/* PUMPLAB_MEGA_MENU_BLUR_V1 — Blur page content when a desktop mega menu is open.
   Uses filter: blur() directly on <main> and the footer group — bypasses
   stacking contexts entirely (.shopify-section--header is position:sticky
   which creates its own stacking context and traps any overlay z-index lift).

   Selector uses :hover (not [open]) so the blur fade-out starts IMMEDIATELY
   on pointerleave from the mega menu, not after the 120ms close grace period
   + dropdown close animation. The dropdown stays open during the grace but
   the blur is already fading — both animations run in parallel, which feels
   snappier. If the user re-enters the menu within the grace, :hover flips
   back true and the blur fades back in (interrupting the fade-out). Works
   because the dropdown content is a descendant of <details>, so :hover on
   details stays true when mouse is anywhere inside the dropdown area. */
main,
#shopify-section-sections--footer_group {
  transition: filter 0.25s ease;
}
@supports selector(:has(*)) {
  body:has(details[is="mega-menu-disclosure"]:hover) main,
  body:has(details[is="mega-menu-disclosure"]:hover) #shopify-section-sections--footer_group {
    filter: blur(2px) brightness(0.7);
  }
}
/* End PUMPLAB_MEGA_MENU_BLUR_V1 */

/* PUMPLAB_HERO_BLEED_V1 — DISABLED: was slideshow color bleed into featured collection.
   Removed while hero section is the countdown, not the slideshow. */
/* End PUMPLAB_HERO_BLEED_V1 */

/* PUMPLAB_SEARCH_V1 — Search UX overhaul: header takeover on desktop, fullscreen on mobile */

/* 1. Header content fade when search is active */
@media screen and (min-width: 700px) {
  .header__main-nav,
  .header__logo,
  .header__secondary-nav {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  store-header[pl-search-active] .header__main-nav,
  store-header[pl-search-active] .header__logo,
  store-header[pl-search-active] .header__secondary-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  store-header[pl-search-active] .header__wrapper {
    position: relative;
    z-index: 3;
  }

  /* Force header to filled/opaque state and lock all positioning */
  store-header[pl-search-active] {
    --header-background-opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Prevent section position from flipping between sticky/relative */
  .shopify-section--header:has(store-header[pl-search-active]) {
    position: sticky !important;
    visibility: visible !important;
  }

  store-header[pl-search-active] .pl-search-takeover {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
}

.pl-search-takeover {
  display: none;
}

/* 3. Takeover form — same box style as the trigger search bar */
.pl-search-takeover__form {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  max-width: 640px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgb(var(--text-color) / 0.08);
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1),
              max-width 0.4s cubic-bezier(.22, 1, .36, 1),
              opacity 0.3s ease;
}

.pl-search-takeover__form > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 1;
}

.pl-search-takeover__form input[type="search"] {
  flex: 1;
  width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  color: rgb(var(--text-color));
  -webkit-appearance: none;
  appearance: none;
}

.pl-search-takeover__form input[type="search"]::placeholder {
  color: rgb(var(--text-color) / 0.4);
}

.pl-search-takeover__form input[type="search"]::-webkit-search-decoration,
.pl-search-takeover__form input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Clear (X) button — only visible when input has text */
.pl-search-takeover__clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: -4px;
  border-radius: 6px;
  color: rgb(var(--text-color) / 0.35);
  font-size: 20px;
  line-height: 0;
  padding: 0 1px 1px 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pl-search-takeover__clear.is-visible {
  display: flex;
}

.pl-search-takeover__clear::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--text-color) / 0.08);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  z-index: -1;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-takeover__clear:hover {
    color: rgb(var(--text-color) / 0.7);
  }
  .pl-search-takeover__clear:hover::after {
    transform: translateY(0);
  }
}

/* Avbryt button */
.pl-search-takeover__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  color: rgb(var(--text-color) / 0.5);
  transition: color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
}

.pl-search-takeover__close::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--text-color) / 0.08);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  z-index: -1;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-takeover__close:hover {
    color: rgb(var(--text-color));
  }
  .pl-search-takeover__close:hover::after {
    transform: translateY(0);
  }
}

/* 4. Results dropdown — drops below header */
.pl-search-dropdown {
  display: none;
}

@media screen and (min-width: 700px) {
  store-header[pl-search-active] .pl-search-dropdown {
    display: block;
    position: relative;
    z-index: 2;
    background: rgb(var(--background));
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(.22, 1, .36, 1),
                opacity 0.25s ease;
  }

  store-header[pl-search-active] .pl-search-dropdown.has-content {
    min-height: 260px;
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  /* Closing state — slide up */
  store-header[pl-search-closing] .pl-search-dropdown {
    max-height: 0 !important;
    opacity: 0 !important;
    transition: max-height 0.25s cubic-bezier(.55, 0, .67, .3),
                opacity 0.15s ease;
  }
}

.pl-search-dropdown__content {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-9);
}

/* When showing product cards, stretch to page frame */
.pl-search-dropdown__content:has(.pl-search-results-grid) {
  max-width: var(--container-max-width, 1600px);
  padding-inline: var(--container-gutter, 2rem);
}

/* Search results — product card grid (single row, edge-to-edge) */
.pl-search-results-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-6);
  max-width: none;
}

/* Uniform card heights in search — lock image to square, stretch info to fill */
.pl-search-results-grid product-card {
  height: 100%;
  grid-template-rows: auto 1fr;
}

.pl-search-results-grid .product-card__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.pl-search-results-grid .product-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Disable delayed image zoom on search cards */
.zoom-image--enabled .pl-search-results-grid .zoom-image {
  transition: none !important;
}

.zoom-image--enabled .pl-search-results-grid .group:hover .zoom-image {
  transform: none !important;
}

/* Loading animation — three dots */
.pl-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.pl-search-loader {
  display: flex;
  gap: 8px;
}

.pl-search-loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--text-color) / 0.3);
  animation: pl-loader-dot 1s ease-in-out infinite;
}

.pl-search-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.pl-search-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pl-loader-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* No results state */
.pl-search-no-results {
  text-align: center;
  padding: var(--spacing-4) 0;
  opacity: 0.5;
  font-size: var(--text-sm);
}


/* 5. Page overlay */
.pl-search-overlay {
  display: none;
}

@media screen and (min-width: 700px) {
  /* Clickable dimming overlay — covers viewport below header */
  store-header[pl-search-active] .pl-search-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.35);
    z-index: 1;
    animation: pl-overlay-in 0.3s ease forwards;
  }

  store-header[pl-search-closing] .pl-search-overlay {
    animation: pl-overlay-out 0.25s ease forwards;
  }

  @keyframes pl-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes pl-overlay-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* Cover custom HTML / announcement bar above the header — overlay keeps space, just turns gray */
  body:has(store-header[pl-search-active]) .shopify-section-group-header-group:not(.shopify-section--header) {
    position: relative;
    z-index: 1000;
  }

  body:has(store-header[pl-search-active]) .shopify-section-group-header-group:not(.shopify-section--header)::after {
    content: "Vad letar du efter?";
    position: absolute;
    inset: 0;
    background: rgb(var(--header-background));
    z-index: 100;
    animation: pl-cover-in 0.25s ease forwards;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--header-text) / 0.55);
  }

  @keyframes pl-cover-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Close animation — fade out the custom HTML covers */
  body:has(store-header[pl-search-closing]) .shopify-section-group-header-group:not(.shopify-section--header)::after {
    animation: pl-cover-out 0.25s ease forwards;
  }

  @keyframes pl-cover-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

/* 6. Search bar trigger — desktop */
.header__icon-list .pl-search-bar-wrapper {
  order: -1;
}

.pl-search-bar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2-5);
  padding: 7px 10px;
  min-width: 0;
  max-width: 180px;
  border-radius: 6px;
  background: rgb(var(--header-text) / 0.1);
  color: rgb(var(--header-text) / 0.5);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background 0.18s ease-out, color 0.18s ease-out;
  cursor: text;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: none;
}

.pl-search-bar svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgb(var(--header-text));
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-bar:hover svg {
    transform: rotate(-15deg);
  }
}

.pl-search-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-bar:hover {
    color: rgb(var(--header-text));
  }

  .pl-search-bar:hover::before {
    transform: translateY(0);
    background: rgb(0 0 0 / 0.25);
  }
}

.pl-search-bar:active {
  opacity: 0.6;
  transition: opacity 150ms ease-out;
}

@media screen and (min-width: 1150px) {
  .pl-search-bar {
    max-width: 220px;
    padding: 7px 65px 7px 10px;
  }
}

/* Search default panel — popular & recent searches */
.pl-search-section {
  margin-bottom: var(--spacing-6);
}

.pl-search-section:last-child {
  margin-bottom: 0;
}

.pl-search-section__title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--text-color) / 0.4);
  margin-bottom: var(--spacing-4);
}

/* Popular search tags — horizontal row */
.pl-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pl-search-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border-radius: 8px;
  color: rgb(var(--text-color) / 0.55);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
}

.pl-search-tag .pl-search-tag__arrow {
  font-size: 0.75em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.pl-search-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--text-color) / 0.1);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-tag:hover {
    color: rgb(var(--text-color));
  }
  .pl-search-tag:hover::after {
    transform: translateY(0);
  }
  .pl-search-tag:hover .pl-search-tag__arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Click/press effect — all search interactive elements */
.pl-search-tag:active,
.pl-search-takeover__clear:active,
.pl-search-takeover__close:active {
  transform: scale(0.92);
  opacity: 0.6;
}

.pl-search-recent-link:active {
  transform: scale(0.99);
  opacity: 0.7;
}

.pl-search-recent-remove:active {
  transform: scale(0.85);
  opacity: 0.6;
}

/* Recent searches — list with remove button */
.pl-search-recent-list {
  display: flex;
  flex-direction: column;
}

.pl-search-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-search-recent-link {
  flex: 1;
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: rgb(var(--text-color) / 0.7);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 10px 12px;
  border-radius: 8px;
}

.pl-search-recent-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--text-color) / 0.08);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  z-index: -1;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-recent-link:hover {
    color: rgb(var(--text-color));
  }
  .pl-search-recent-link:hover::after {
    transform: translateY(0);
  }
}

.pl-search-recent-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgb(var(--text-color) / 0.3);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.15s ease;
}

.pl-search-recent-remove::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--text-color) / 0.08);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  z-index: -1;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .pl-search-recent-remove:hover {
    color: rgb(var(--text-color) / 0.7);
  }
  .pl-search-recent-remove:hover::after {
    transform: translateY(0);
  }
}

/* 7. Hide old search icon on desktop */
@media screen and (min-width: 700px) {
  .header__icon-list > li > .tap-area[aria-controls="search-drawer"] {
    display: none !important;
  }
}

/* 8. Mobile: fullscreen drawer (unchanged) */
@media screen and (max-width: 699px) {
  .search-drawer {
    --drawer-content-max-height: 100vh;
    padding: 0 !important;
  }

  .search-drawer::part(content) {
    border-radius: 0 !important;
  }
}

/* PUMPLAB_SEARCH_FUZZY_V1 — Fuzzy cards inside the same grid as product cards */
.pl-fuzzy-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: rgb(var(--text-color));
  border-radius: var(--product-card-border-radius, 10px);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(.22, 1, .36, 1), opacity 0.15s ease;
}

.pl-fuzzy-card:hover {
  transform: scale(1.02);
}

.pl-fuzzy-card:active {
  transform: scale(0.97);
  opacity: 0.8;
}

.pl-fuzzy-card__img {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--product-card-border-radius, 10px);
  background: rgb(var(--text-color) / 0.05);
}

.pl-fuzzy-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pl-fuzzy-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-3) var(--spacing-1) 0;
}

.pl-fuzzy-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-fuzzy-card__subtitle {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1.3;
}

.pl-fuzzy-card__prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.pl-fuzzy-card__compare {
  text-decoration: line-through;
  opacity: 0.4;
  font-weight: 400;
}

.pl-fuzzy-card__price {
  color: rgb(var(--text-color));
}

.pl-fuzzy-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-top: 2px;
}
/* End PUMPLAB_SEARCH_FUZZY_V1 */

/* End PUMPLAB_SEARCH_V1 */

/* PUMPLAB_MOBILE_VARIANT_DD_V1 — Mobile dropdown for product page variant picker */

/* Desktop: hide dropdown, show swatches — unless forced for many-variant products */
@media screen and (min-width: 700px) {
  .pl-variant-dd:not(.pl-variant-dd--desktop):not(.pl-variant-dd--cart) { display: none !important; }

  /* PUMPLAB_DESKTOP_DD_V1 — Force dropdown on desktop for options with too many values */
  .pl-variant-dd--desktop {
    position: relative;
    width: 100%;
    z-index: 5;
  }
}

/* Mobile: show dropdown, hide swatches */
@media screen and (max-width: 699px) {
  .pl-desktop-swatches,
  .variant-picker__option > .scroll-area {
    display: none !important;
  }

  .pl-variant-dd {
    position: relative;
    width: 100%;
    z-index: 5;
  }

  .pl-variant-dd.is-open {
    z-index: 15;
  }

  .pl-variant-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 55px;
    background: rgb(28 28 28);
    border: 2px solid rgba(255,255,255,.18);
    border-radius: var(--rounded-button, 8px);
    color: rgb(235 235 235);
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-bottom-color 400ms ease-in;
  }

  .pl-variant-dd__trigger:hover {
    border-color: rgba(255,255,255,.30);
    background: rgb(35 35 35);
  }

  .pl-variant-dd.is-open .pl-variant-dd__trigger,
  .pl-variant-dd.is-closing .pl-variant-dd__trigger {
    border-color: rgba(255,255,255,.40);
    border-bottom-color: transparent;
    background: rgb(24 24 24);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
  }

  .pl-variant-dd.is-open .pl-variant-dd__trigger::before,
  .pl-variant-dd.is-closing .pl-variant-dd__trigger::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,.15);
    pointer-events: none;
  }



  .pl-variant-dd__trigger:active {
    background: rgb(22 22 22);
    border-color: rgba(255,255,255,.35);
    box-shadow: inset 0 1.5px 4px rgba(0,0,0,.35);
  }

  .pl-variant-dd__current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }

  .pl-variant-dd__name {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pl-variant-dd__arrow {
    flex-shrink: 0;
    color: rgb(140 140 140);
    display: flex;
    align-items: center;
    transition: transform 200ms ease;
  }

  .pl-variant-dd.is-open .pl-variant-dd__arrow,
  .pl-variant-dd.is-closing .pl-variant-dd__arrow {
    transform: rotate(180deg);
  }

  /* Panel */
  .pl-variant-dd__panel {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    background: rgb(24 24 24);
    border: 2px solid rgba(255,255,255,.30);
    border-top: none;
    border-bottom-left-radius: var(--rounded-button, 8px);
    border-bottom-right-radius: var(--rounded-button, 8px);
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,1);
  }

  .pl-variant-dd.is-open .pl-variant-dd__panel {
    display: block;
    animation: pl-vdd-slide-in 250ms cubic-bezier(.22,1,.36,1) both;
  }

  .pl-variant-dd.is-closing .pl-variant-dd__panel {
    display: block;
    animation: pl-vdd-slide-out 180ms cubic-bezier(.55,0,1,.45) both;
  }

  @keyframes pl-vdd-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes pl-vdd-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
  }

  /* Stagger fade-in for options */
  .pl-variant-dd.is-open .pl-variant-dd__option {
    animation: pl-vdd-opt-in 200ms cubic-bezier(.22,1,.36,1) both;
  }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(1) { animation-delay: 30ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(2) { animation-delay: 60ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(3) { animation-delay: 90ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(4) { animation-delay: 120ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(5) { animation-delay: 150ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(6) { animation-delay: 180ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(7) { animation-delay: 210ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(8) { animation-delay: 240ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(9) { animation-delay: 270ms; }
  .pl-variant-dd.is-open .pl-variant-dd__option:nth-child(10) { animation-delay: 300ms; }

  @keyframes pl-vdd-opt-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Active press state on options */
  .pl-variant-dd__option:active {
    background: rgba(255,255,255,.14) !important;
    transition: background-color 60ms ease;
  }

  .pl-variant-dd__panel::-webkit-scrollbar { width: 4px; }
  .pl-variant-dd__panel::-webkit-scrollbar-track { background: transparent; }
  .pl-variant-dd__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

  /* Options */
  .pl-variant-dd__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgb(220 220 220);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
  }

  .pl-variant-dd__option:last-child { border-bottom: none; }
  .pl-variant-dd__option:hover { background: rgba(255,255,255,.06); }
  .pl-variant-dd__option.is-selected { background: rgba(255,255,255,.10); }
  .pl-variant-dd__option.is-disabled { opacity: 0.45; }

  .pl-variant-dd__opt-name {
    font-size: 0.85rem;
    font-weight: 650;
  }

  /* Stock indicators — reuse existing pl-stock classes */
  .pl-variant-dd .pl-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    line-height: 1;
    margin-top: 1px;
  }

  .pl-variant-dd .pl-stock--in  { color: #2ecc71; }
  .pl-variant-dd .pl-stock--low { color: #f39c12; }
  .pl-variant-dd .pl-stock--out { color: #e74c3c; }

  .pl-variant-dd .pl-stock__icon {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .pl-variant-dd .pl-stock--in .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
  }

  .pl-variant-dd .pl-stock--low .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  }

  .pl-variant-dd .pl-stock--out .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* End PUMPLAB_MOBILE_VARIANT_DD_V1 */

/* PUMPLAB_DESKTOP_DD_V1 — Same dropdown styles for desktop when forced (many-variant products) */
@media screen and (min-width: 700px) {
  .pl-variant-dd--desktop .pl-variant-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 55px;
    background: rgb(28 28 28);
    border: 2px solid rgba(255,255,255,.18);
    border-radius: var(--rounded-button, 8px);
    color: rgb(235 235 235);
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-bottom-color 400ms ease-in;
  }

  .pl-variant-dd--desktop .pl-variant-dd__trigger:hover {
    border-color: rgba(255,255,255,.30);
    background: rgb(35 35 35);
  }

  .pl-variant-dd--desktop.is-open .pl-variant-dd__trigger,
  .pl-variant-dd--desktop.is-closing .pl-variant-dd__trigger {
    border-color: rgba(255,255,255,.40);
    border-bottom-color: transparent;
    background: rgb(24 24 24);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
  }

  .pl-variant-dd--desktop.is-open .pl-variant-dd__trigger::before,
  .pl-variant-dd--desktop.is-closing .pl-variant-dd__trigger::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,.15);
    pointer-events: none;
  }

  .pl-variant-dd--desktop .pl-variant-dd__trigger:active {
    background: rgb(22 22 22);
    border-color: rgba(255,255,255,.35);
    box-shadow: inset 0 1.5px 4px rgba(0,0,0,.35);
  }

  .pl-variant-dd--desktop .pl-variant-dd__current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }

  .pl-variant-dd--desktop .pl-variant-dd__name {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pl-variant-dd--desktop .pl-variant-dd__arrow {
    flex-shrink: 0;
    color: rgb(140 140 140);
    display: flex;
    align-items: center;
    transition: transform 200ms ease;
  }

  .pl-variant-dd--desktop.is-open .pl-variant-dd__arrow,
  .pl-variant-dd--desktop.is-closing .pl-variant-dd__arrow {
    transform: rotate(180deg);
  }

  .pl-variant-dd--desktop .pl-variant-dd__panel {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    background: rgb(24 24 24);
    border: 2px solid rgba(255,255,255,.30);
    border-top: none;
    border-bottom-left-radius: var(--rounded-button, 8px);
    border-bottom-right-radius: var(--rounded-button, 8px);
    z-index: 10;
    /* Tall enough for every flavour-count we ship without an
       internal scrollbar; capped at 80vh so it never falls off
       short viewports. */
    max-height: min(80vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,1);
  }

  .pl-variant-dd--desktop.is-open .pl-variant-dd__panel {
    display: block;
    animation: pl-vdd-slide-in 250ms cubic-bezier(.22,1,.36,1) both;
  }

  .pl-variant-dd--desktop.is-closing .pl-variant-dd__panel {
    display: block;
    animation: pl-vdd-slide-out 180ms cubic-bezier(.55,0,1,.45) both;
  }

  .pl-variant-dd--desktop.is-open .pl-variant-dd__option {
    animation: pl-vdd-opt-in 200ms cubic-bezier(.22,1,.36,1) both;
  }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(1) { animation-delay: 30ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(2) { animation-delay: 60ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(3) { animation-delay: 90ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(4) { animation-delay: 120ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(5) { animation-delay: 150ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(6) { animation-delay: 180ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(7) { animation-delay: 210ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(8) { animation-delay: 240ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(9) { animation-delay: 270ms; }
  .pl-variant-dd--desktop.is-open .pl-variant-dd__option:nth-child(10) { animation-delay: 300ms; }

  .pl-variant-dd--desktop .pl-variant-dd__option:active {
    background: rgba(255,255,255,.14) !important;
    transition: background-color 60ms ease;
  }

  .pl-variant-dd--desktop .pl-variant-dd__panel::-webkit-scrollbar { width: 4px; }
  .pl-variant-dd--desktop .pl-variant-dd__panel::-webkit-scrollbar-track { background: transparent; }
  .pl-variant-dd--desktop .pl-variant-dd__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

  .pl-variant-dd--desktop .pl-variant-dd__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0.65rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgb(220 220 220);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
  }

  .pl-variant-dd--desktop .pl-variant-dd__option:last-child { border-bottom: none; }
  .pl-variant-dd--desktop .pl-variant-dd__option:hover { background: rgba(255,255,255,.06); }
  .pl-variant-dd--desktop .pl-variant-dd__option.is-selected { background: rgba(255,255,255,.10); }
  .pl-variant-dd--desktop .pl-variant-dd__option.is-disabled { opacity: 0.45; }

  .pl-variant-dd--desktop .pl-variant-dd__opt-name {
    font-size: 0.88rem;
    font-weight: 650;
  }

  .pl-variant-dd--desktop .pl-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    line-height: 1;
    margin-top: 1px;
  }

  .pl-variant-dd--desktop .pl-stock--in  { color: #2ecc71; }
  .pl-variant-dd--desktop .pl-stock--low { color: #f39c12; }
  .pl-variant-dd--desktop .pl-stock--out { color: #e74c3c; }

  .pl-variant-dd--desktop .pl-stock__icon {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .pl-variant-dd--desktop .pl-stock--in .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='black'/%3E%3C/svg%3E");
  }

  .pl-variant-dd--desktop .pl-stock--low .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  }

  .pl-variant-dd--desktop .pl-stock--out .pl-stock__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='3'/%3E%3Cline x1='7' y1='17' x2='17' y2='7' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
/* End PUMPLAB_DESKTOP_DD_V1 */

/* PUMPLAB_HAMBURGER_V1 — Mobile hamburger menu overhaul: icon morph, full-screen drawer, polish */

/* ── 1. Hamburger icon → X morph ── */
.pl-hamburger__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20px;
  height: 20px;
  position: relative;
}

.pl-hamburger__line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  will-change: transform, opacity;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1),
              opacity 200ms ease;
}

/* Resting positions — only transforms, no layout props */
.pl-hamburger__line--top { transform: translateY(calc(-50% - 6px)); }
.pl-hamburger__line--mid { transform: translateY(-50%); }
.pl-hamburger__line--bot { transform: translateY(calc(-50% + 6px)); }

/* Active state — all lines collapse to center and rotate clockwise at different speeds */
.pl-hamburger[aria-expanded="true"] .pl-hamburger__line--top {
  transform: translateY(-50%) rotate(225deg);
}

.pl-hamburger[aria-expanded="true"] .pl-hamburger__line--mid {
  opacity: 0;
  transform: translateY(-50%) rotate(180deg);
}

.pl-hamburger[aria-expanded="true"] .pl-hamburger__line--bot {
  transform: translateY(-50%) rotate(135deg);
}

/* ── 2. Header state when nav drawer is open ── */
store-header[pl-nav-open] {
  --text-color: var(--text-primary) !important;
}

/* Remove header shadow while drawer is open */
store-header[pl-nav-open] .header__wrapper {
  box-shadow: none !important;
}

/* ── 3. Drawer slides from right, ~80% width, full height ── */
@media screen and (max-width: 699px) {
  .navigation-drawer.drawer {
    --drawer-content-max-height: none;
    width: 88vw;
    height: 100%;
    top: 0 !important;
    bottom: 0 !important;
    padding: 0;
  }

  .navigation-drawer.drawer::part(content) {
    max-height: none;
    height: 100%;
    width: 100%;
    border-radius: 0;
    padding-top: 0;
  }

  .navigation-drawer.drawer::part(body) {
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* Right-opening drawer: close button is position:absolute, so only one
     grid child is in flow. Use a single 1fr row so panel-list-wrapper gets
     a definite height — otherwise the height:100% chain breaks and
     .panel__scroller collapses to 0 (nav links invisible). */
  .navigation-drawer[mobile-opening="right"].drawer::part(body) {
    grid-template-rows: minmax(0, 1fr);
  }

  /* Cart drawer — match navigation drawer width */
  .cart-drawer.drawer {
    width: 88vw;
    padding: 0;
  }

  .cart-drawer.drawer::part(content) {
    width: 100%;
    border-radius: 0;
  }

  /* ── 4. X close button — tracks header position via --pl-drawer-top ── */
  .navigation-drawer[mobile-opening="right"] > [is="close-button"] {
    display: grid;
    position: absolute;
    top: var(--pl-drawer-x-top, 12px);
    right: var(--spacing-4);
    z-index: 10;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--rounded-full);
    background: transparent;
    border: 0;
    color: currentColor;
    cursor: pointer;
    animation: pl_drawer_x_in 400ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .navigation-drawer[mobile-opening="right"] > [is="close-button"] svg {
    width: 26px;
    height: 26px;
    transition: transform 200ms cubic-bezier(.22, 1, .36, 1);
  }

  .navigation-drawer[mobile-opening="right"] > [is="close-button"]:active svg {
    transform: scale(0.8);
  }

  @keyframes pl_drawer_x_in {
    0% {
      opacity: 0;
      transform: rotate(-90deg) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }

  /* ── 5. Interface polish ── */

  /* Panel wrapper — top padding clears the X button, content flush to top */
  .navigation-drawer .panel__wrapper {
    --panel-wrapper-justify-content: flex-start;
    padding: var(--pl-drawer-content-top, 48px) var(--spacing-6) var(--spacing-4);
    justify-content: flex-start !important;
    gap: var(--spacing-4);
  }

  /* First panel (level 0) — titles start below the X button with some breathing room */
  .navigation-drawer .panel:first-child > .panel__wrapper {
    padding-top: 14vh;
  }

  /* Scroller — flex column, content at top */
  .navigation-drawer .panel__scroller {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    gap: var(--spacing-5);
  }

  /* First-level nav links — all items same style (big, bold) */
  .navigation-drawer .panel > .panel__wrapper > .panel__scroller > ul:first-child > li {
    font-size: 1.55rem;
    letter-spacing: 0.01em;
    font-weight: 700;
  }

  .navigation-drawer .panel:first-child > .panel__wrapper > .panel__scroller > ul:first-child > li a,
  .navigation-drawer .panel:first-child > .panel__wrapper > .panel__scroller > ul:first-child > li button {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
    opacity: 1;
  }

  .navigation-drawer .panel > .panel__wrapper > .panel__scroller > ul:first-child {
    gap: var(--spacing-3);
  }

  /* Sub-menu back button */
  .navigation-drawer button[data-panel="0"],
  .navigation-drawer button[data-panel="1"] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    padding-block: var(--spacing-1);
  }

  /* Tap targets — minimum 44px touch area on nav links */
  .navigation-drawer .panel li a,
  .navigation-drawer .panel li button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Chevron circles — slightly larger on mobile */
  .navigation-drawer .circle-chevron {
    width: 28px;
    height: 28px;
  }

  /* Active/tap feedback */
  .navigation-drawer .panel li a:active,
  .navigation-drawer .panel li button:active {
    opacity: 0.6;
    transition: opacity 80ms ease;
  }

  /* Secondary menu links — pushed to bottom */
  .navigation-drawer .panel__scroller > ul:last-child {
    margin-top: auto;
  }

  .navigation-drawer .panel__scroller > ul:last-child li a {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.55;
  }

  /* Panel footer — compact, visible */
  .navigation-drawer .panel-footer {
    padding-bottom: env(safe-area-inset-bottom, 12px);
    padding-top: var(--spacing-2);
    flex-shrink: 0;
  }

  /* Hide the in-panel "Alla produkter" + footer (replaced by persistent footer) */
  .navigation-drawer .panel__wrapper > .pl_all_products_wrap,
  .navigation-drawer .panel__wrapper > .panel-footer {
    display: none !important;
  }

  /* Persistent footer — fixed at bottom across all panel slides */
  .navigation-drawer .pl-nav-persistent-footer {
    position: absolute;
    bottom: 0;
    transform: translateY(-10px);
    left: 0;
    right: 0;
    padding: 16px var(--spacing-6) calc(12px + env(safe-area-inset-bottom, 4px));
    background: rgb(var(--color-background));
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
  }

  .navigation-drawer .pl-nav-persistent-footer .pl_all_products_wrap {
    padding: 0;
    margin: 0;
  }

  .navigation-drawer .pl-nav-persistent-footer .panel-footer {
    padding-bottom: 0;
    padding-top: 0;
    gap: var(--spacing-4);
  }

  .navigation-drawer .pl-nav-persistent-footer .panel-footer__localization-wrapper {
    padding-top: var(--spacing-3);
  }
}

/* End PUMPLAB_HAMBURGER_V1 */

/* PUMPLAB_TABLET_NAV_V1 — Fix duplicate footer in nav drawer on tablet (700–999px) */
@media screen and (min-width: 700px) and (max-width: 999px) {
  /* Hide the persistent footer — only needed on mobile */
  .navigation-drawer .pl-nav-persistent-footer {
    display: none !important;
  }

  /* Push the inline "Alla produkter" + footer to the bottom of the drawer */
  .navigation-drawer .panel__scroller {
    justify-content: flex-start;
    flex: 1;
  }

  .navigation-drawer .panel__wrapper > .pl_all_products_wrap {
    margin-top: auto;
  }
}
/* End PUMPLAB_TABLET_NAV_V1 */

/* PUMPLAB_VARIANT_COLOR_V1 — Colored accent on variant block buttons (shakers etc.) */
variant-picker .variant-picker__option-values label.block-swatch.pl-has-color {
  position: relative;
}

/* Color dot — placed on .pl-flavor-name to bypass the ::before killer on .block-swatch__item */
variant-picker .variant-picker__option-values label.block-swatch.pl-has-color .pl-flavor-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

variant-picker .variant-picker__option-values label.block-swatch.pl-has-color .pl-flavor-name::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--pl-variant-color);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.4);
}

/* Hover — subtle color wash */
@media (hover: hover) and (pointer: fine) {
  variant-picker .variant-picker__option-values label.block-swatch.pl-has-color:hover {
    background: color-mix(in srgb, var(--pl-variant-color) 10%, transparent) !important;
  }
}

/* Selected state — stronger color presence */
variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-has-color {
  background: color-mix(in srgb, var(--pl-variant-color) 12%, transparent) !important;
}
/* End PUMPLAB_VARIANT_COLOR_V1 */

/* PUMPLAB_FLAVOR_PAGE_V1 — Dynamic color theming for flavor product page */

/* Default fallback values */
.shopify-section--main-product {
  --pl-flv-primary: #888;
  --pl-flv-dark: #666;
  --pl-flv-light: #aaa;
  --pl-flv-primary-rgb: 136, 136, 136;
  --pl-flv-dark-rgb: 102, 102, 102;
  --pl-flv-light-rgb: 170, 170, 170;
}

/* Full-page opaque background — completely covers the default body bg */
body.product-flavor .shopify-section--main-product.pl-flv-active {
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--pl-flv-dark) 85%, #0d0c0c) 0%,
    color-mix(in srgb, var(--pl-flv-primary) 40%, #151515) 35%,
    color-mix(in srgb, var(--pl-flv-dark) 25%, #151515) 65%,
    #0d0c0c 100%
  ) !important;
  transition: background 500ms ease;
}

/* Unselected swatches — solid darker version of palette, bright outline */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option {
  background: color-mix(in srgb, var(--pl-flv-dark) 70%, #000) !important;
  border-color: color-mix(in srgb, var(--pl-flv-light) 50%, transparent) !important;
  transition: background 400ms ease, border-color 400ms ease, transform 140ms ease, box-shadow 300ms ease !important;
}

/* Selected swatch — the variant's own full color */
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option {
  background: var(--pl-swatch-color, var(--pl-flv-light)) !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option .pl-flavor-name,
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option .pl-stock {
  color: #fff !important;
}

/* Hover — show the target flavor's own color */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover {
  background: var(--pl-swatch-color, var(--pl-flv-dark)) !important;
}
/* Kill ALL radial mouse-tracking hover effects on flavor page */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option::before,
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option::after,
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item::before,
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
}
/* Prevent JS mouse-tracking variables from doing anything */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option,
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .block-swatch__item {
  --mx: 50% !important;
  --my: 50% !important;
}

/* Swatch text — dimmed on unselected, bright on selected/hover */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-flavor-name {
  color: rgba(255, 255, 255, 0.55) !important;
  transition: color 200ms ease;
}
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:hover .pl-flavor-name {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option .pl-flavor-name {
  color: #fff !important;
}

/* Product image — outline on wrapper + fallback on media */
body.product-flavor .product-gallery__media-list-wrapper {
  outline: 3px solid var(--pl-flv-light);
  outline-offset: -3px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pl-flv-dark) 80%, #000) !important;
  transition: outline-color 700ms ease, background 700ms ease;
}
body.product-flavor .product-gallery__media {
  outline: 3px solid var(--pl-flv-light);
  outline-offset: -3px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pl-flv-dark) 80%, #000) !important;
}
body.product-flavor.pl-flv-loaded .product-gallery__media {
  transition: outline-color 300ms ease, background 300ms ease;
}
body.product-flavor .product-gallery__media-list-wrapper {
  background: color-mix(in srgb, var(--pl-flv-dark) 80%, #000) !important;
}
@media screen and (max-width: 999px) {
  body.product-flavor .product-gallery__media {
    outline: none !important;
    border: 3px solid var(--pl-flv-light) !important;
    border-radius: 8px !important;
    margin: 0 var(--container-gutter) !important;
    box-sizing: border-box;
  }
  body.product-flavor .pl-nyt-gallery-badge {
    left: calc(var(--container-gutter) - 4px) !important;
  }
}

/* Background — section positioning for overlay layers */
body.product-flavor .shopify-section--main-product {
  position: relative;
  overflow: hidden;
}
body.product-flavor .shopify-section--main-product > *:not(#pl-flv-overlay):not(#pl-flv-texture):not([style*="position:absolute"]) {
  position: relative;
  z-index: 2;
}
/* Animated wave stripes overlay — absolute, fixed height */
#pl-flv-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.2;
  animation: pl-texture-intro 1.5s ease both;
  animation-delay: var(--pl-splash-delay, 0s);
}
@keyframes pl-texture-intro {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}
#pl-flv-texture svg {
  position: absolute;
  width: 200%;
  height: 250vh;
  top: 0;
  left: -50%;
}
#pl-flv-texture .pl-wave {
  fill: none;
  stroke-linecap: round;
}
@keyframes pl-wave-drift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(40px) translateY(-20px); }
  100% { transform: translateX(0) translateY(0); }
}
#pl-flv-texture .pl-wave-1 { animation: pl-wave-drift 12s ease-in-out infinite; }
#pl-flv-texture .pl-wave-2 { animation: pl-wave-drift 15s ease-in-out infinite reverse; }
#pl-flv-texture .pl-wave-3 { animation: pl-wave-drift 18s ease-in-out infinite; }
#pl-flv-texture .pl-wave-4 { animation: pl-wave-drift 14s ease-in-out infinite reverse; }

/* Subtitle — brightest palette color, full opacity */
body.product-flavor .shopify-section--main-product .pl-title-stack__sub,
body.product-flavor .shopify-section--main-product .product-info__title.pl-title-stack .pl-title-stack__sub,
body.product-flavor h1.product-info__title.pl-title-stack .pl-title-stack__sub {
  color: var(--pl-flv-light) !important;
  opacity: 1 !important;
  animation: none !important;
  transition: color 700ms ease;
}

/* Hide stock indicators on flavor swatches — distracting from color palette */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option .pl-stock {
  display: none !important;
}

/* Flavor swatch — tall with background icon */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option {
  min-height: 65px !important;
  position: relative !important;
  overflow: hidden !important;
  border-width: 2px !important;
  padding: 12px 14px !important;
}
/* Hover — white border */
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option:not(.is-disabled):hover {
  border-color: rgba(255, 255, 255, 0.8) !important;
  border-width: 2px !important;
}
/* Selected — white outline on top of regular border, no layout shift */
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option {
  border-width: 2px !important;
  outline: 2px solid #fff;
  outline-offset: -1px;
}

/* Selected + hover — keep outline solid, no shrink */
body.product-flavor variant-picker .variant-picker__option-values input.sr-only:checked + label.block-swatch.pl-flavor-option:hover {
  outline: 2px solid #fff !important;
  outline-offset: -1px !important;
  border-color: #fff !important;
  border-width: 2px !important;
  transform: none !important;
}
body.product-flavor .pl-flv-swatch-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}
/* Flavor name — centered, bold */
body.product-flavor .pl-flavor-name {
  white-space: normal !important;
  line-height: 1.25 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-align: center !important;
  width: 100% !important;
}
/* Consistent swatch sizing */
body.product-flavor variant-picker .variant-picker__option-values.wrap {
  gap: 8px !important;
}
body.product-flavor variant-picker .variant-picker__option-values label.block-swatch.pl-flavor-option {
  min-width: 130px !important;
  flex: 1 1 130px !important;
  max-width: 200px !important;
}
/* Background flavor icon — desaturated on unselected, full color on hover/selected */
body.product-flavor .pl-flv-swatch-bg {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: -40px !important;
  bottom: -60px !important;
  width: 130px !important;
  height: 130px !important;
  object-fit: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(1) brightness(1.5);
  transition: opacity 300ms ease, filter 300ms ease;
}
/* Hover — partially restore color */
body.product-flavor label.block-swatch.pl-flavor-option:hover .pl-flv-swatch-bg {
  opacity: 0.25;
  filter: grayscale(0.5) brightness(1.2);
}
/* Selected — more visible, mostly desaturated */
body.product-flavor input.sr-only:checked + label.block-swatch.pl-flavor-option .pl-flv-swatch-bg {
  opacity: 0.3;
  filter: grayscale(0.3) brightness(1.3);
}

/* Breadcrumb — use light palette color */
body.product-flavor .shopify-section--main-product .pl-breadcrumb {
  color: var(--pl-flv-light) !important;
  transition: color 400ms ease;
}
body.product-flavor .shopify-section--main-product .pl-breadcrumb__link {
  color: color-mix(in srgb, var(--pl-flv-light) 70%, #fff) !important;
}
body.product-flavor .shopify-section--main-product .pl-breadcrumb__current {
  color: #fff !important;
}
body.product-flavor .shopify-section--main-product .pl-breadcrumb__sep {
  color: color-mix(in srgb, var(--pl-flv-light) 50%, transparent) !important;
}

/* Price — bolder */
body.product-flavor .shopify-section--main-product .product-info .price-list {
  font-weight: 800 !important;
  font-size: 1.15em !important;
}

/* Quantity selector — visible on all palette backgrounds */
body.product-flavor .shopify-section--main-product .quantity-selector {
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  transition: border-color 300ms ease, background 300ms ease;
}
body.product-flavor .shopify-section--main-product .quantity-selector:hover {
  border-color: rgba(255, 255, 255, 0.65) !important;
}
body.product-flavor .shopify-section--main-product .quantity-selector button {
  color: #fff !important;
}

/* Separator / dividers — palette tinted */
body.product-flavor .shopify-section--main-product hr,
body.product-flavor .shopify-section--main-product .product-info__separator {
  border-color: color-mix(in srgb, var(--pl-flv-light) 20%, transparent) !important;
  transition: border-color 700ms ease;
}

/* "Smak:" label and option name — palette tinted */
body.product-flavor .shopify-section--main-product .variant-picker__option-info .text-subdued {
  color: color-mix(in srgb, var(--pl-flv-light) 70%, #fff) !important;
}


/* All subdued/secondary text — ensure readability */
body.product-flavor .shopify-section--main-product .product-info .text-subdued,
body.product-flavor .shopify-section--main-product .product-info .text-sm,
body.product-flavor .shopify-section--main-product .product-form__label {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Rating stars area */
body.product-flavor .shopify-section--main-product .rating {
  color: var(--pl-flv-light) !important;
}

/* Bottom wave divider */
#pl-flv-bottom-wave {
  overflow: hidden;
  height: 150px !important;
  position: relative;
}
/* Hide judge.me rating widget on flavor page */
body.product-flavor .jdgm-widget,
body.product-flavor .jdgm-rev-widg,
body.product-flavor [class*="judge"] {
  display: none !important;
}
#pl-flv-bottom-wave svg {
  height: 100%;
  display: block;
}



/* Hide the text-with-icons section on flavor page */
body.product-flavor .shopify-section--text-with-icons {
  display: none !important;
}

/* PUMPLAB_FLAVOR_MOBILE_DD — styled dropdown on mobile */
@media screen and (max-width: 999px) {
  /* Dropdown trigger — palette themed (only inside main product section) */
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__trigger {
    background: color-mix(in srgb, var(--pl-flv-dark) 70%, #000) !important;
    border-color: color-mix(in srgb, var(--pl-flv-light) 50%, transparent) !important;
  }
  /* Dropdown panel — palette themed (only inside main product section) */
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__panel {
    background: color-mix(in srgb, var(--pl-flv-dark) 80%, #000) !important;
    border-color: color-mix(in srgb, var(--pl-flv-light) 30%, transparent) !important;
  }
  /* Each option row — left aligned (only inside main product section) */
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* Selected option */
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option.is-selected {
    background: rgba(255, 255, 255, 0.12) !important;
  }
  /* Flavor icon in dropdown row */
  body.product-flavor .shopify-section--main-product .pl-dd-flavor-icon {
    position: absolute;
    right: -15px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: 0.12;
    pointer-events: none;
    filter: grayscale(1) brightness(1.5);
  }
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__opt-name {
    position: relative;
    z-index: 1;
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    display: block !important;
  }
  body.product-flavor .shopify-section--main-product .pl-variant-dd button.pl-variant-dd__option,
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 16px 4px !important;
    min-height: auto !important;
  }
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option * {
    text-align: left !important;
  }
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option .pl-variant-dd__opt-name {
    margin-bottom: 0 !important;
  }
  body.product-flavor .shopify-section--main-product .pl-variant-dd .pl-variant-dd__option .pl-stock {
    margin-top: 0 !important;
    padding-bottom: 6px !important;
  }
  /* Footer wave shorter on mobile */
  #pl-flv-bottom-wave {
    height: 60px !important;
    margin-top: -60px !important;
  }
  #pl-flv-bottom-wave {
    transform: translateY(2px);
  }
  #pl-flv-bottom-wave svg {
    width: 600% !important;
    margin-left: -250%;
  }
  body.product-flavor .pl-variant-dd .pl-stock {
    position: relative;
    z-index: 1;
  }
}
/* End PUMPLAB_FLAVOR_MOBILE_DD */

/* PUMPLAB_FLAVOR_BADGES_V1 — Custom trust badges for flavor page */
.pl-flv-badges {
  display: flex;
  justify-content: center;
  gap: 120px;
  padding: 70px 40px;
  color: #fff;
}
.pl-flv-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 240px;
  text-align: center;
}
.pl-flv-badge__icon {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-flv-badge__icon svg {
  width: 30px;
  height: 30px;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Prevent colorBottomSectionsNow from filling badge SVGs */
#pl-flv-badges svg {
  fill: none !important;
}
.pl-flv-badge__title {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
}
.pl-flv-badge__text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
@media screen and (max-width: 700px) {
  .pl-flv-badges {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 40px 24px;
  }
}
/* Flavor page — product card styling */
body.product-flavor .product-card {
  border: 3px solid var(--pl-flv-card-border, #555) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
body.product-flavor .product-card__figure {
  overflow: hidden !important;
}
/* Quick add plus icon — white when button itself is hovered (green fill state) */
body.product-flavor .pl-qa-btn:hover .pl-qa-btn__plus {
  color: #fff !important;
}
body.product-flavor .pl-qa-btn:active .pl-qa-btn__plus {
  color: #fff !important;
}
/* End PUMPLAB_FLAVOR_BADGES_V1 */
/* End PUMPLAB_FLAVOR_INFO_CARD_V1 */


/* Accordion dark background only when open on flavor page */
body.product-flavor .product-info__accordion[open] {
  background: rgba(0, 0, 0, 0.3);
}
body.product-flavor .product-info__accordion > :last-child {
  margin-bottom: -0.5px;
}


/* Search — match palette on flavor page */
body.product-flavor #search-drawer {
  --dialog-background: var(--pl-flv-dark-rgb) !important;
  --background: var(--pl-flv-dark-rgb) !important;
}
body.product-flavor .pl-search-dropdown {
  --background: var(--pl-flv-dark-rgb) !important;
}
/* Custom HTML / announcement section above header */
body.product-flavor .shopify-section--custom-html {
  background: rgb(var(--pl-flv-dark-rgb)) !important;
}

/* Hide 5th recommended product on mobile */
@media screen and (max-width: 999px) {
  .product-list > :nth-child(5) {
    display: none !important;
  }
}

/* Sticky add-to-cart bar above everything */
.product-quick-add {
  z-index: 10 !important;
}

/* PUMPLAB_FLAVOR_INFO_CARD_V1 — Info card in gallery column */
.pl-flavor-info-card {
  margin-bottom: 60px;
  margin-top: 16px;
}
.pl-flavor-info-card__img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.pl-flavor-info-card__img.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pl-flavor-info-card__img.is-visible:hover {
  transform: translateY(-4px) scale(1.02);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 600ms ease;
}
@media screen and (min-width: 1000px) {
  .pl-flavor-info-card {
    /* JS sets position/top/left/width on desktop */
  }
}
@media screen and (max-width: 999px) {
  .pl-flavor-info-card {
    padding: 32px;
    margin-top: -70px;
    margin-bottom: 60px;
  }
  .pl-flavor-info-card__img {
    border-radius: 8px;
  }
}
/* End PUMPLAB_FLAVOR_INFO_CARD_V1 */

/* PUMPLAB_FLAVOR_DESC_TRUNCATE_V1 — Truncated description on mobile */
@media screen and (max-width: 999px) {
  body.product-flavor .pl-desc-truncated {
    max-height: 350px;
    overflow: hidden;
    position: relative;
    transition: max-height 400ms ease;
  }
  body.product-flavor .pl-desc-truncated::after {
    display: none;
  }
  body.product-flavor .pl-desc-expanded {
    max-height: none !important;
    overflow: visible !important;
  }
  .pl-read-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 0 0 8px 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    margin-top: -1px;
    position: relative;
    transition: background 200ms ease;
  }
  .pl-read-more-btn:hover {
    background: rgba(0, 0, 0, 0.55);
  }
}
/* End PUMPLAB_FLAVOR_DESC_TRUNCATE_V1 */

/* Hide Läs mer/Visa mindre on desktop */
@media screen and (min-width: 1000px) {
  body.product-flavor .pl-read-more-btn {
    display: none !important;
  }
  body.product-flavor .pl-desc-truncated {
    max-height: none !important;
    overflow: visible !important;
  }
}

}

/* Hide announcement bar on flavor page */
body.product-flavor .shopify-section--announcement-bar {
  display: none !important;
}

/* 4 recommended products on mobile for flavor page */
@media screen and (max-width: 999px) {
  body.product-flavor .shopify-section--related-products .product-card:nth-child(n+5) {
    display: none !important;
  }
}

/* Klarna payment icon — replace pink border with dark outline */
body.product-flavor .shopify-section--main-product .pl-pay-icon:nth-child(3) svg {
  border-radius: 4px;
  outline: 1.2px solid #000;
  outline-offset: -1.2px;
}

/* Payment icons full brightness + uniform outline on flavor page */
body.product-flavor .shopify-section--main-product .pl-pay-icon,
body.product-flavor .shopify-section--main-product .pl-pay-icon svg,
body.product-flavor .shopify-section--main-product .pl-payment-icons,
body.product-flavor .shopify-section--main-product .pl-payment-icons * {
  opacity: 1 !important;
}

/* PUMPLAB_FLAVOR_SPLASH_V1 — Loading splash screen */
.pl-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  transition: background 300ms ease;
}
.pl-splash__content {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 2;
}
/* Prevent scrolling while splash is visible */
html.pl-splash-loading {
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}
.pl-splash__title {
  font-family: 'Monument Extended Black', 'Monument Extended', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: pl-splash-text-in 600ms ease 200ms forwards;
}
.pl-splash__tm {
  font-size: 0.25em;
  vertical-align: top;
  margin-left: 2px;
  opacity: 0.5;
  font-weight: 400;
}
.pl-splash__sub {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  margin-top: 6px;
  color: var(--pl-flv-light, rgba(255,255,255,0.7));
  opacity: 0;
  transform: translateY(10px);
  animation: pl-splash-text-in 600ms ease 500ms forwards;
}
.pl-splash.is-exiting {
  pointer-events: none;
}
@keyframes pl-splash-wave-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pl-splash-wave-drift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(80px) translateY(-40px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes pl-splash-text-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Delay page element animations during splash */
.pl-splash-loading .product-info,
.pl-splash-loading .product-gallery,
.pl-splash-loading .pl-payment-icons,
.pl-splash-loading .product-info__accordion {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}
/* Keep accordion visually closed during splash on desktop */
@media screen and (min-width: 1000px) {
  .pl-splash-loading .product-info__accordion[open] {
    height: auto !important;
    overflow: hidden !important;
  }
  .pl-splash-loading .product-info__accordion[open] > .accordion__content {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
}
/* After splash — staggered fade in */
@keyframes pl-page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
html:not(.pl-splash-loading) body.product-flavor .product-gallery {
  animation: pl-page-fade-in 600ms ease 0ms both;
}
html:not(.pl-splash-loading) body.product-flavor .product-info {
  animation: pl-page-fade-in 600ms ease 100ms both;
}
html:not(.pl-splash-loading) body.product-flavor .pl-payment-icons {
  animation: pl-page-fade-in 600ms ease 200ms both;
}
html:not(.pl-splash-loading) body.product-flavor .product-info__accordion {
  animation: pl-page-fade-in 500ms ease 300ms both;
}
/* End PUMPLAB_FLAVOR_SPLASH_V1 */

/* PUMPLAB_FLAVOR_MOBILE_TITLE_TOP — Title block above gallery on mobile */
@media screen and (max-width: 999px) {
  body.product-flavor .pl-mobile-title-top {
    padding: 0 var(--spacing-2);
    margin-bottom: -14px;
  }
  /* No animations on the cloned title block */
  body.product-flavor .pl-mobile-title-top * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* But keep subtitle color */
  body.product-flavor .pl-mobile-title-top .pl-title-stack__sub {
    color: var(--pl-flv-light) !important;
  }
  /* Hide rating badge only — NOT .rating-with-text which also contains the price */
  body.product-flavor .shopify-section--main-product .pl-rating-badge,
  body.product-flavor .shopify-section--main-product safe-sticky [class*="jdgm"] {
    display: none !important;
  }
  /* Show the rating-with-text wrapper but hide just the rating inside it */
  body.product-flavor .pl-mobile-title-top .rating-with-text {
    display: block !important;
  }
  body.product-flavor .pl-mobile-title-top .rating-with-text .pl-rating-badge {
    display: none !important;
  }
  /* Hide title, price, rating, tax, separator in product-info on flavor mobile */
  body.product-flavor safe-sticky.product-info [data-block-type="title"],
  body.product-flavor safe-sticky.product-info [data-block-type="price"],
  body.product-flavor safe-sticky.product-info [data-block-type="rating"],
  body.product-flavor safe-sticky.product-info [data-block-type="payment-terms"],
  body.product-flavor safe-sticky.product-info [data-block-type="separator"]:first-of-type {
    display: none !important;
  }
  /* Bigger title, subtitle, and price on flavor page mobile */
  body.product-flavor .pl-mobile-title-top .product-info__title {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
  }
  body.product-flavor .pl-mobile-title-top .pl-title-stack__sub {
    font-size: clamp(1rem, 3vw, 1.3rem) !important;
  }
  body.product-flavor .pl-mobile-title-top .price-list,
  body.product-flavor .pl-mobile-title-top sale-price,
  body.product-flavor .pl-mobile-title-top .text-lg {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
  }
  body.product-flavor .pl-mobile-title-top [data-block-type="price"] {
    margin-top: -6px !important;
  }
  /* Hide rating badge on flavor mobile */
  body.product-flavor .shopify-section--main-product .pl-rating-badge,
  body.product-flavor .shopify-section--main-product safe-sticky [class*="jdgm"] {
    display: none !important;
  }
  /* Show price wrapper but hide rating and tax notice inside it */
  body.product-flavor .pl-mobile-title-top .rating-with-text {
    display: block !important;
  }
  body.product-flavor .pl-mobile-title-top .rating-with-text .pl-rating-badge {
    display: none !important;
  }
  body.product-flavor .pl-mobile-title-top .rating-with-text ~ .text-subdued,
  body.product-flavor .pl-mobile-title-top .product-info__price .text-subdued,
  body.product-flavor .pl-mobile-title-top .text-subdued {
    display: none !important;
  }
  /* Hide title, price, rating, separator in product-info on flavor mobile */
  body.product-flavor safe-sticky.product-info [data-block-type="title"],
  body.product-flavor safe-sticky.product-info [data-block-type="price"],
  body.product-flavor safe-sticky.product-info [data-block-type="rating"],
  body.product-flavor safe-sticky.product-info [data-block-type="payment-terms"],
  body.product-flavor safe-sticky.product-info [data-block-type="separator"] {
    display: none !important;
  }
  /* Hide carousel dots */
  body.product-flavor product-gallery page-dots {
    display: none !important;
  }
  /* Reduce gap between product image and Smak divider */
  body.product-flavor product-gallery {
    margin-bottom: -16px !important;
  }
  /* Hide all breadcrumbs except the first one */
  body.product-flavor .pl-breadcrumb ~ .pl-breadcrumb {
    display: none !important;
  }
  body.product-flavor .pl-breadcrumb + .pl-mobile-title-top .pl-breadcrumb {
    display: none !important;
  }
}

/* End PUMPLAB_FLAVOR_PAGE_V1 */

/* PUMPLAB_COLLECTION_FILTERS_V1 — Sweep fill + polish on collection filter bar (desktop) */

/* --- Filter buttons (Pris, Produkttyp, Kategori): sweep fill like header nav --- */
@media screen and (min-width: 1000px) {
  .facets-horizontal > button.text-with-icon {
    padding: 7px 12px;
    margin: -7px -12px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
  }

  .facets-horizontal > button.text-with-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(0 0 0 / 0.15);
    transform: translateY(105%);
    transition: transform 0.18s ease-out;
    pointer-events: none;
    z-index: -1;
  }

  /* --- Availability toggle: sweep on the whole facet, kept tight --- */
  .availability-facet {
    padding: 7px 12px;
    margin: -7px -12px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .availability-facet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(0 0 0 / 0.15);
    transform: translateY(105%);
    transition: transform 0.18s ease-out;
    pointer-events: none;
    z-index: -1;
  }

  /* --- Sort: sweep on button only (overflow:hidden on container would clip the popover) --- */
  .sort-by-facet > button.text-with-icon {
    padding: 7px 12px;
    margin: -7px -12px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
  }

  .sort-by-facet > button.text-with-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(0 0 0 / 0.15);
    transform: translateY(105%);
    transition: transform 0.18s ease-out;
    pointer-events: none;
    z-index: -1;
  }

  /* Center the filter buttons regardless of whether availability/sort-by exist */
  .collection--filters-horizontal .facets-summary {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .collection--filters-horizontal .availability-facet {
    justify-self: start;
  }

  .collection--filters-horizontal .facets-horizontal {
    grid-column: 2;
  }

  .collection--filters-horizontal .sort-by-facet {
    justify-self: end;
  }
}

/* Hover sweep — desktop only */
@media (hover: hover) and (pointer: fine) {
  .facets-horizontal > button.text-with-icon:hover::before,
  .availability-facet:hover::before,
  .sort-by-facet > button.text-with-icon:hover::before {
    transform: translateY(0);
  }

  .facets-horizontal > button.text-with-icon:hover,
  .sort-by-facet > button.text-with-icon:hover {
    opacity: 1 !important;
  }
}

/* Active (pressed) — smooth fill on click */
.facets-horizontal > button.text-with-icon:active::before,
.sort-by-facet > button.text-with-icon:active::before {
  transform: translateY(0);
}

/* --- Chevron: bouncy spring rotation matching header nav --- */
.facets-horizontal .circle-chevron,
.sort-by-facet .circle-chevron {
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), background 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* --- Dropdown options (facet-dialog): sweep fill on hover --- */
.facet-dialog-option {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
}

.facet-dialog-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .facet-dialog-option:hover::before {
    transform: translateY(0);
  }

  /* Override theme default hover background since we use sweep */
  .facet-dialog-option:hover {
    background: transparent;
  }
}

:checked + .facet-dialog-option::before {
  transform: translateY(0);
}

/* --- Toggle switch: bounce animation on section render --- */
@keyframes pl_switch_settle {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.availability-facet .switch {
  animation: pl_switch_settle 0.35s cubic-bezier(.22, 1, .36, 1);
}

/* --- Active filter tags (removable-facet): subtle polish --- */
.removable-facet {
  transition: background 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .removable-facet:hover {
    background: rgb(var(--text-color) / .16);
  }
}

.removable-facet .tap-area:active {
  transform: scale(0.85);
}

/* End PUMPLAB_COLLECTION_FILTERS_V1 */

/* PUMPLAB_MOBILE_HEADER_V1 — Nike-style mobile header: logo left, icons right, hamburger far right */
@media screen and (max-width: 699px) {
  /* Reorder grid: logo far left, secondary-nav icons fill middle (right-aligned), main-nav (hamburger) far right */
  .header__wrapper {
    grid-template: "logo secondary-nav main-nav" / auto 1fr auto !important;
  }

  /* Hide the old mobile search from main-nav (was on the left next to hamburger) */
  .header__main-nav > .header__icon-list > a[aria-controls="search-drawer"] {
    display: none !important;
  }

  /* Show the search icon in secondary-nav on mobile */
  .header__secondary-nav > ul > li > a.tap-area[aria-controls="search-drawer"] {
    display: block !important;
    margin-inline-end: -8px; /* nudge search icon closer to cart */
  }

  /* Hide account icon on mobile — not needed yet */
  .header__secondary-nav > ul > li > a.tap-area[href*="account"] {
    display: none !important;
  }

  /* Tighten icon spacing on mobile */
  .header__secondary-nav {
    gap: var(--spacing-1);
  }

  /* Bigger tap targets on mobile — 44px minimum */
  .header__icon-list > li > .tap-area,
  .header__secondary-nav .tap-area {
    padding: 12px;
  }
}
/* End PUMPLAB_MOBILE_HEADER_V1 */

/* PUMPLAB_NYT_BADGE_V1 — "NYTT" badge on mega menu links with recently updated products
   PUMPLAB_NYT_BADGE_NEUTRAL_V1 — Switched from red to warm cream filled
   chip + black text. Matches the same treatment as the product card NYTT
   badge for brand consistency across surfaces. */
.pl-nyt-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 10px;
  /* Asymmetric padding + line-height:1 to visually center uppercase glyphs
     inside the chip. With align-items:center the line-box is centered, but
     uppercase letters sit above the baseline in the upper half of the
     line-box, so they appear pushed up when line-height > 1. line-height:1
     collapses the line-box to the em-box and the extra 1px of top padding
     compensates for the font's cap-height offset. */
  padding: 3px 5px 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  background: #FFFFFF;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.15s;
}

/* Mega menu NYTT — let badge use its natural animation alongside the li stagger */

@keyframes pl_nyt_pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Badge is inside the <a>, so hover fill naturally covers it */
.pl-nyt-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
/* --- NYTT badge on product cards (top-right corner) ---
   PUMPLAB_NYT_BADGE_NEUTRAL_V1 — Warm cream background (#e8dabb) with
   black text. Top of the three-tier badge hierarchy: NYTT is the
   brightest and most attention-grabbing (warm cream, slightly less
   yellow/orange than the original #e6d4a8 attempt), RESTOCK is the
   outlined "ghost" version, and SOLD OUT is the quietest frosted grey.
   Black text contrast on #e8dabb is ~14:1, easy AAA. */
.pl-nyt-card-badge {
  position: absolute;
  top: var(--product-card-badge-spacing);
  left: var(--product-card-badge-spacing);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #000;
  background: #FFFFFF;
  border-radius: 4px;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.15s;
}

/* Big cards on mobile (featured collection, single-col grids) — more inset */
@media screen and (max-width: 699px) {
  .horizontal-product-list-carousel .pl-nyt-card-badge,
  .product-list .pl-nyt-card-badge {
    top: var(--spacing-3);
    left: var(--spacing-3);
  }
}

@media screen and (min-width: 700px) {
  .pl-nyt-card-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}

/* PUMPLAB_SOLD_BADGE_V1 — Restyle sold-out badge to match NYTT badge style.
   Stencil bg + white text (~10.5:1 contrast, AAA). Lowest-hierarchy badge
   but still clearly legible against the dark stencil bg. */
.product-card .badge--sold-out {
  background: #373534 !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

@media screen and (min-width: 1000px) {
  .product-card .badge--sold-out {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}
/* End PUMPLAB_SOLD_BADGE_V1 */

/* --- NYTT badge on product page gallery (top-right corner) --- */
.pl-nyt-gallery-badge {
  position: absolute;
  top: var(--spacing-4, 16px);
  left: var(--spacing-2, 8px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #000;
  background: #FFFFFF;
  border-radius: 4px;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.2s;
}
.pl-nyt-gallery-badge[hidden] {
  display: none;
}

.pl-nyt-gallery-badge.pl-nyt-exiting {
  animation: pl_nyt_exit 0.35s cubic-bezier(.55, 0, .45, 1) forwards;
}

@keyframes pl_nyt_exit {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

@media screen and (min-width: 700px) {
  .pl-nyt-gallery-badge {
    top: var(--spacing-4, 16px);
    left: var(--spacing-4, 16px);
  }
}

/* --- NYTT badge in variant dropdown options (right-aligned) --- */
.pl-nyt-dd-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #000;
  background: #FFFFFF;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Ensure dropdown options use flex for the badge to push right */
.popover-listbox__option:has(.pl-nyt-dd-badge),
.pl-variant-dd__opt-name:has(.pl-nyt-dd-badge),
.pl-picker-dd__name:has(.pl-nyt-dd-badge) {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* PUMPLAB_SHAKER_STOCK_V1 — Sold-out badge in gift variant dropdown */
.pl-gift-sold-out-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pl-variant-dd__opt-name:has(.pl-gift-sold-out-badge) {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* End PUMPLAB_SHAKER_STOCK_V1 */

/* --- NYTT corner indicator on swatches ---
   PUMPLAB_NYT_BADGE_NEUTRAL_V1 — Triangle uses the same warm cream
   #e8dabb as the rest of the NYTT badge family. Triangles can't be
   "outlined" the way rectangular badges can, so this stays a filled
   shape — the position (top-right corner of the swatch) is what
   identifies it as a NYTT marker. */
.pl-nyt-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #FFFFFF transparent transparent;
  border-radius: 0 calc(var(--rounded-button, 8px) - 1px) 0 0;
  pointer-events: none;
  font-size: 0;
  color: transparent;
}
/* End PUMPLAB_NYT_BADGE_V1 */

/* PUMPLAB_RESTOCK_BADGE_V1 — Amber "RESTOCK" badges mirroring NYTT system */

/* Mega menu link badge
   PUMPLAB_RESTOCK_BADGE_NEUTRAL_V1 — Outlined ghost version of the cream
   NYTT badge. Same color, same shape, transparent fill + 1.5px cream
   border via inset box-shadow so the box dimensions match NYTT exactly. */
.pl-restock-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 10px;
  /* Same vertical-centering fix as .pl-nyt-badge above — line-height:1
     collapses the line-box and padding-top extra 1px compensates for
     the uppercase cap-height offset. */
  padding: 3px 5px 2px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #A79F8A;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.15s;
}

/* Product card badge */
/* PUMPLAB_RESTOCK_BADGE_NEUTRAL_V1 — Mid-tier of the three-tier badge
   hierarchy. OUTLINED version of the cream NYTT badge — same color,
   same shape, same dimensions, but transparent background with a
   cream border instead of a cream fill. */
.pl-restock-card-badge {
  position: absolute;
  top: var(--product-card-badge-spacing);
  left: var(--product-card-badge-spacing);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #A79F8A;
  border-radius: 4px;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.15s;
}

@media screen and (max-width: 699px) {
  .horizontal-product-list-carousel .pl-restock-card-badge,
  .product-list .pl-restock-card-badge {
    top: var(--spacing-3);
    left: var(--spacing-3);
  }
}

@media screen and (min-width: 700px) {
  .pl-restock-card-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}

/* Gallery badge — outlined cream */
.pl-restock-gallery-badge {
  position: absolute;
  top: var(--spacing-4, 16px);
  left: var(--spacing-2, 8px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #A79F8A;
  border-radius: 4px;
  pointer-events: none;
  animation: pl_nyt_pop 0.4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: 0.2s;
}
.pl-restock-gallery-badge[hidden] { display: none; }
.pl-restock-gallery-badge.pl-restock-exiting {
  animation: pl_nyt_exit 0.35s cubic-bezier(.55, 0, .45, 1) forwards;
}

@media screen and (min-width: 700px) {
  .pl-restock-gallery-badge {
    top: var(--spacing-4, 16px);
    left: var(--spacing-4, 16px);
  }
}

/* Dropdown option badge — outlined cream */
.pl-restock-dd-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #A79F8A;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.popover-listbox__option:has(.pl-restock-dd-badge),
.pl-variant-dd__opt-name:has(.pl-restock-dd-badge),
.pl-picker-dd__name:has(.pl-restock-dd-badge) {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Swatch corner triangle — faded cream (60% opacity) so it reads as
   "secondary" against the brighter NYTT corner triangle. Triangles
   can't be outlined like rectangular badges, so opacity carries the
   visual hierarchy here. */
.pl-restock-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #A79F8A transparent transparent;
  border-radius: 0 calc(var(--rounded-button, 8px) - 1px) 0 0;
  pointer-events: none;
  font-size: 0;
  color: transparent;
}
/* End PUMPLAB_RESTOCK_BADGE_V1 */

/* PUMPLAB_VISA_ALLA_V1 — Sweep fill hover + bolder text on section header "Visa alla" link */
.section-header > a.text-with-icon .reversed-link {
  font-weight: 650;
}

.section-header > a.text-with-icon {
  position: relative;
  width: fit-content;
  align-self: flex-end;
  padding: 8px 10px 8px 12px;
  border-radius: var(--rounded-button);
  overflow: hidden;
  gap: 8px;
  isolation: isolate;
  color: #A79F8A;
  transition: color 0.2s ease;
}

.section-header > a.text-with-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #A79F8A;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1);
  border-radius: inherit;
  z-index: -1;
}

@media (hover:hover) and (pointer:fine) {
  .section-header > a.text-with-icon:hover::before {
    transform: scaleY(1);
  }
  .section-header > a.text-with-icon:hover {
    color: #101010;
  }
}
/* End PUMPLAB_VISA_ALLA_V1 */

/* PUMPLAB_SCROLLBAR_DIM_V1 — Dimmer progress line, brightens on interaction */
.scrollbar__progress {
  opacity: 0.3;
  transition: opacity 600ms ease;
}

.scrollbar:hover .scrollbar__progress,
.scrollbar:active .scrollbar__progress,
.scrollbar.is-scrolling .scrollbar__progress {
  opacity: 1;
  transition: opacity 200ms ease;
}

.scrollable-with-controls:active .scrollbar__progress {
  opacity: 1;
  transition: opacity 200ms ease;
}

/* Arrows stay visible but slightly muted, full on hover */
.scrollbar__buttons {
  opacity: 0.7;
  transition: opacity 400ms ease;
}

.scrollbar:hover .scrollbar__buttons,
.scrollbar.is-scrolling .scrollbar__buttons {
  opacity: 1;
  transition: opacity 200ms ease;
}
/* End PUMPLAB_SCROLLBAR_DIM_V1 */

/* PUMPLAB_FOOTER_SWEEP_V1 — sweep fill on footer interactive elements */
/* Fill uses --text-color so it auto-adapts to dark/light footer backgrounds */

/* --- Menu links --- */
.footer__block--menu a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5px 10px;
  margin: -5px -10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
}

.footer__block--menu a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--text-color) / 0.08);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

.footer__block--menu a:active {
  transform: scale(0.92);
  opacity: 0.6;
}

.footer__block--menu a:active::before {
  opacity: 1;
}

/* --- Social media icons --- */
.footer .social-media .tap-area {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 8px;
  margin: -8px;
  border-radius: 6px;
  aspect-ratio: 1;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
}

.footer .social-media .tap-area::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--text-color) / 0.08);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

.footer .social-media .tap-area svg {
  position: relative;
  z-index: 1;
}

.footer .social-media .tap-area:active {
  transform: scale(0.85);
  opacity: 0.6;
}

.footer .social-media .tap-area:active::after {
  opacity: 1;
}

/* --- Localization selectors (country/language) --- */
.footer__aside .text-with-icon.group {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 6px;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
}

.footer__aside .text-with-icon.group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--text-color) / 0.08);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

.footer__aside .text-with-icon.group .icon-chevron-bottom {
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.footer__aside .text-with-icon.group:active {
  transform: scale(0.92);
  opacity: 0.6;
}

.footer__aside .text-with-icon.group:active::before {
  opacity: 1;
}

/* --- Policy links --- */
.footer__policy-links a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.4s ease;
}

.footer__policy-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--text-color) / 0.08);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
  z-index: -1;
}

.footer__policy-links a:active {
  transform: scale(0.92);
  opacity: 0.6;
}

.footer__policy-links a:active::before {
  opacity: 1;
}

/* --- Hover states (desktop only) — all footer buttons use opacity fade-in --- */
@media (hover: hover) and (pointer: fine) {
  .footer__block--menu a:hover::before,
  .footer__policy-links a:hover::before,
  .footer__aside .text-with-icon.group:hover::before,
  .footer .social-media .tap-area:hover::after {
    opacity: 1;
  }
}
/* --- Bright footer override (e.g. flavor page) — dark fill instead of light --- */
.footer--bright .footer__block--menu a::before,
.footer--bright .footer__policy-links a::before,
.footer--bright .footer__aside .text-with-icon.group::before {
  background: rgb(0 0 0 / 0.1);
}

.footer--bright .social-media .tap-area::after {
  background: rgb(0 0 0 / 0.1);
}
/* End PUMPLAB_FOOTER_SWEEP_V1 */

/* PUMPLAB_FOOTER_LOCALIZATION_V1 — Brand-aligned localization dropdowns.
   Hides the flag in the selector button only (dropdown options keep their
   flags for country scanning). Popover panel gets a brighter #2c2c2c
   surface, hairline border, no glow/shadow. Options use a simple full-width
   hover fill matching the button below — no inset pills, no sliding. */

/* Hide the flag sprite in the footer selector button only. Dropdown
   options still show flags (country scanning aid). */
.footer__aside .text-with-icon.group .country-flags {
  display: none;
}

/* Popover panel — brighter than the #222 footer for clear hierarchy,
   hairline border, no glow. Scoped via x-popover's shadow DOM parts. */
.footer__aside .popover::part(content) {
  background: #2c2c2c;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 8px;
  box-shadow: none;
}

/* Tighten the vertical padding of the body so the panel feels compact. */
.footer__aside .popover::part(body) {
  padding-block: var(--spacing-2);
}

/* Listbox options: keep the theme's default padding/layout so flags stay
   aligned with their labels. Just add a subtle full-width hover/selected
   fill using the same 0.08 white alpha as the button hover below. No inset
   margins or radius — the whole row highlights cleanly edge-to-edge. */
.footer__aside .popover .popover-listbox__option {
  transition: background-color 0.18s ease-out, color 0.18s ease;
}
.footer__aside .popover .popover-listbox__option:hover,
.footer__aside .popover .popover-listbox__option:focus-visible {
  background: rgb(255 255 255 / 0.08);
  color: rgb(var(--text-color));
}
.footer__aside .popover .popover-listbox__option[aria-selected='true'] {
  background: rgb(255 255 255 / 0.05);
  color: rgb(var(--text-color));
}

/* Flavor product page localization dropdowns — split by viewport:

   DESKTOP (≥1000px): the popover is an inline dropdown under the button
   and the beige flavor footer makes the default dark #2c2c2c panel
   clash, so force a white light-theme panel with dark text.

   MOBILE (<1000px): the popover renders as a full-screen modal with its
   own overlay. The white panel attempt kept getting overridden (likely
   because the mobile layout uses different theme vars or the shadow DOM
   parts resolve differently at that breakpoint). Simpler fix: leave the
   modal's native dark panel and force WHITE text so options are readable
   against the dark background. */
@media screen and (min-width: 1000px) {
  body.product-flavor .footer__aside .popover::part(content) {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #1a1a1a !important;
  }
  body.product-flavor .footer__aside .popover .popover-listbox__option {
    color: #1a1a1a;
  }
  body.product-flavor .footer__aside .popover .popover-listbox__option:hover,
  body.product-flavor .footer__aside .popover .popover-listbox__option:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
  }
  body.product-flavor .footer__aside .popover .popover-listbox__option[aria-selected='true'] {
    background: rgba(0, 0, 0, 0.04);
    color: #000;
  }
}

@media screen and (max-width: 999px) {
  /* Mobile popovers on x-popover's dark panel may get portaled out of
     .footer__aside into the body-level modal, so the .footer__aside
     ancestor selector doesn't always match. Scope by body.product-flavor
     + .popover directly — the only popovers on flavor are country/locale
     selectors, so the wider scope is safe. */
  body.product-flavor .popover::part(title) {
    color: #ffffff !important;
  }
  body.product-flavor .popover .popover-listbox__option {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  body.product-flavor .popover .popover-listbox__option:hover,
  body.product-flavor .popover .popover-listbox__option:focus-visible,
  body.product-flavor .popover .popover-listbox__option[aria-selected='true'] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Mobile: merge social icons and localization selectors onto a single row.
   Theme default at theme.css:5993 has .footer__aside-top as a stacked grid
   on mobile; we flip it to flex row with space-between so social_media
   sits left and the localization h-stack (country + language) sits right.
   .pl-footer-trust is display:none on mobile (its mobile copy lives in
   .pl-footer-trust-mobile at the top of the footer) so it drops out of
   flex flow cleanly — only the two visible children participate. */
@media screen and (max-width: 699px) {
  .footer__aside-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
  }
}
/* End PUMPLAB_FOOTER_LOCALIZATION_V1 */

/* PUMPLAB_FOOTER_NEWSLETTER_V1 — Restyle the footer newsletter input to
   match the header search bar (.pl-search-bar). Solid semi-transparent
   fill, no outline, sweep-up hover fill via ::before pseudo, mail icon
   to the left via ::after pseudo with a slight open-tilt on hover, text
   brightens on hover/focus. Same interaction pattern as the header search
   bar adapted to the .form-control wrapper around the input. */

/* Wrapper: locked height + pill shape + sweep container.
   Height is explicit because .form-control has no intrinsic height of
   its own (children are absolute-positioned labels + the input); we need
   it to match .input.is-floating exactly so the pseudo-element positioning
   is correct. */
.footer__newsletter-form .form-control {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: calc(var(--input-height) + 0.625rem);
  border-radius: 6px;
  background: rgb(var(--footer-text) / 0.1);
  border: none;
  transition: background 0.18s ease-out;
}

/* Sweep-up fill — matches header search bar */
.footer__newsletter-form .form-control::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  transform: translateY(105%);
  transition: transform 0.18s ease-out, background 0.18s ease-out;
  pointer-events: none;
  z-index: 0;
}

/* Mail icon — inline SVG injected via JS (see PUMPLAB_FOOTER_NEWSLETTER_V1
   in layout/theme.liquid) so the envelope flap can be animated as a separate
   path. On hover/focus-within, the flap rotates around its top edge to
   simulate an envelope opening. */
.footer__newsletter-form .form-control .pl-footer-mail-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: rgb(var(--footer-text));
  pointer-events: none;
  z-index: 2;
}

/* Mail icon animation: PARKED. The flap path stays in the DOM overlapping
   the static inner V so the closed envelope still renders correctly, but
   there is no hover transform and no transition — static icon, no
   animation. Revisit later with a cleaner approach. */

/* Input: transparent bg, no border, inherit text color, extra left padding
   for the mail icon (14px left + 20px icon + 10px gap = 44px).
   padding-block-start and -end are forced to 0 (overriding the theme's
   is-floating 16px top padding) so typed text is vertically centered in
   the box instead of offset downward to make room for a floating label. */
.footer__newsletter-form .form-control .input,
.footer__newsletter-form .form-control .input.is-floating {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgb(var(--footer-text));
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  padding-inline-start: 44px !important;
  position: relative;
  z-index: 1;
  transition: color 0.18s ease-out;
}

/* Floating label — acts as a visible placeholder at rest. Sits inline
   with the input via flex (no more top-aligned float), then fades out
   when the input is focused or has content. The theme's default scale
   + translate transform is killed so it stays full-size. */
.footer__newsletter-form .form-control .floating-label {
  top: 0;
  margin: 0;
  padding-inline-start: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  color: rgb(var(--footer-text) / 0.5);
  transform: none !important;
  transform-origin: center left;
  z-index: 1;
  transition: opacity 0.18s ease-out, color 0.18s ease-out;
  pointer-events: none;
}

/* Hide the label when focused or filled (standard floating-label trigger,
   overriding the theme's scale+translate behavior) */
.footer__newsletter-form .form-control .input:focus ~ .floating-label,
.footer__newsletter-form .form-control .input:not(:placeholder-shown) ~ .floating-label {
  opacity: 0;
  transform: none !important;
}

/* Submit button — on top of the pseudo */
.footer__newsletter-form .form-control .self-submit-button {
  position: relative;
  z-index: 2;
}

/* Hover / focus-within: sweep fill in + label color brightens (the envelope
   flap open animation is handled on the inline SVG, above) */
@media (hover: hover) and (pointer: fine) {
  .footer__newsletter-form .form-control:hover::before,
  .footer__newsletter-form .form-control:focus-within::before {
    transform: translateY(0);
    background: rgb(0 0 0 / 0.25);
  }
  .footer__newsletter-form .form-control:hover .floating-label,
  .footer__newsletter-form .form-control:focus-within .floating-label {
    color: rgb(var(--footer-text));
  }
}

/* Keep focus-within state active even without hover support (mobile) */
.footer__newsletter-form .form-control:focus-within::before {
  transform: translateY(0);
  background: rgb(0 0 0 / 0.25);
}
.footer__newsletter-form .form-control:focus-within .floating-label {
  color: rgb(var(--footer-text));
}
/* Newsletter heading ampersand — oversized Times New Roman bold italic sitting
   BEHIND the text. Isolation on the <p> creates a stacking context so z-index:-1
   on the span paints below the anonymous text nodes of the same paragraph
   (per CSS painting order: negative z-index descendants paint before inline text).
   transform:scale doesn't affect layout, so "drops" and "deals" stay in place. */
.footer__block--newsletter p {
  isolation: isolate;
}
.footer__block--newsletter p .pl-newsletter-amp {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 700;
  color: rgb(167 159 138 / 0.45);
  display: inline-block;
  transform: scale(1.7);
  transform-origin: center center;
  position: relative;
  z-index: -1;
  vertical-align: middle;
  pointer-events: none;
}

/* Mobile: newsletter title fills the viewport width — left-aligned, one
   single line (never wraps). Font-size scales with viewport width so on
   narrow phones it shrinks enough that "Missa inga drops & deals" always
   fits on one row; the clamp caps it on larger phones so it doesn't go
   oversized. white-space:nowrap is the belt-and-braces guarantee that
   wrapping can't happen even if the viewport is unusually narrow. The
   ampersand span's scale(1.7) multiplies this new base size, so it stays
   proportional without any tweak. */
@media screen and (max-width: 699px) {
  .footer__block--newsletter p {
    text-align: left;
    font-size: clamp(1.75rem, 7.8vw, 2.65rem);
    line-height: 1.05;
    white-space: nowrap;
  }
}
/* Newsletter input clear (X) button — injected via JS. Hidden until
   the input has content (via .pl-has-value on .form-control). Matches
   the header search takeover's clear button visual: 32x32 rounded
   square with a sweep-up hover fill via ::after pseudo. */
.footer__newsletter-form .form-control .pl-footer-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgb(var(--footer-text) / 0.45);
  font-size: 20px;
  line-height: 0;
  padding: 0 1px 1px 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, color 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  overflow: hidden;
  isolation: isolate;
}
.footer__newsletter-form .form-control .pl-footer-clear::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--footer-text) / 0.1);
  transform: translateY(105%);
  transition: transform 0.18s ease-out;
  z-index: -1;
  border-radius: inherit;
}
.footer__newsletter-form .form-control.pl-has-value .pl-footer-clear {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .footer__newsletter-form .form-control .pl-footer-clear:hover {
    color: rgb(var(--footer-text) / 0.85);
  }
  .footer__newsletter-form .form-control .pl-footer-clear:hover::after {
    transform: translateY(0);
  }
}
.footer__newsletter-form .form-control .pl-footer-clear:active {
  transform: translateY(-50%) scale(0.92);
  opacity: 0.6;
}
/* Extra right padding on the input so typed text doesn't collide with
   the clear button when it's visible. */
.footer__newsletter-form .form-control.pl-has-value .input {
  padding-inline-end: 48px;
}
/* End PUMPLAB_FOOTER_NEWSLETTER_V1 */

/* PUMPLAB_FLAVOR_NEWSLETTER_V1 — Flavor product page only: mail icon pure
   black, floating-label darkens on hover, ampersand switches to stencil.
   The flavor JS in layout/theme.liquid used to force inline color !important
   on every footer descendant, which beat these CSS rules — it now skips
   .pl-footer-mail-icon, .floating-label, and .pl-newsletter-amp so these
   CSS rules apply cleanly. */

/* Mail icon — pure black on the flavor beige bg. */
body.product-flavor .footer__newsletter-form .form-control .pl-footer-mail-icon {
  color: #000;
}

/* Floating-label "Mejl" placeholder — subtle rest, solid black on hover
   (darken, not brighten — "darker" reads more legible on beige). */
body.product-flavor .footer__newsletter-form .form-control .floating-label {
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.product-flavor .footer__newsletter-form .form-control:hover .floating-label {
    color: #000;
  }
}
body.product-flavor .footer__newsletter-form .form-control:focus-within .floating-label {
  color: #000;
}

/* Newsletter heading ampersand on flavor — a warm dark greige halfway
   between stencil #373534 (which reads as "almost black" against beige)
   and accent #A79F8A (which blended with the beige). #6b6355 is the
   midpoint: clearly a warm brown-gray, not a black shape floating. */
body.product-flavor .footer__block--newsletter p .pl-newsletter-amp {
  color: #6b6355;
}

/* Input wrapper — the default rgb(var(--footer-text) / 0.1) is a whisper
   on the flavor beige footer so the input box is barely visible. Force a
   solid dark alpha fill at rest, darker on hover/focus. The ::before sweep
   is still there from the base rule; we also bump its fill color. */
body.product-flavor .footer__newsletter-form .form-control {
  background: rgba(0, 0, 0, 0.12);
}
body.product-flavor .footer__newsletter-form .form-control::before {
  background: rgba(0, 0, 0, 0.22);
}
/* End PUMPLAB_FLAVOR_NEWSLETTER_V1 */

/* PUMPLAB_FOOTER_TRUST_V1 — Compact trust badges in footer */
.pl-footer-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: auto;
}

.pl-footer-trust__divider:first-child {
  margin-left: -5px;
  margin-right: 9px;
}

.pl-footer-trust__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-footer-trust__badge:hover {
    background: rgb(var(--text-color) / 0.06);
  }
}

.pl-footer-trust__logo {
  height: 28px;
  width: auto;
}

.pl-footer-trust__logo--jm {
  height: 26px;
}

.pl-footer-trust__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
}

.pl-footer-trust__star {
  width: 26px;
  height: 26px;
}

.pl-footer-trust__score {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
}

.pl-footer-trust__divider {
  width: 1px;
  height: 20px;
  background: rgb(255 255 255 / 0.12);
  flex-shrink: 0;
}

.pl-footer-trust-mobile {
  display: none;
}

@media screen and (max-width: 699px) {
  .pl-footer-trust {
    display: none;
  }

  .pl-footer-trust-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: var(--spacing-5);
    margin-top: calc(-1 * var(--spacing-4));
    margin-bottom: calc(-1 * var(--spacing-4));
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }

  .pl-footer-trust-mobile__badge {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
  }


  .pl-footer-trust-mobile__logo {
    height: 28px;
    width: 105px;
    object-fit: contain;
    object-position: left;
    flex-shrink: 0;
  }

  .pl-footer-trust-mobile__logo--jm {
    height: 26px;
  }

  .pl-footer-trust-mobile__stars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: calc(5 * 26px + 4 * 2px);
  }

  img.pl-footer-trust-mobile__stars {
    height: 26px;
    width: auto;
    flex-shrink: 0;
  }

  .pl-footer-trust-mobile__star {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  .pl-footer-trust-mobile__score {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.7);
  }
}
/* --- Light background adaptation --- */
.pl-footer-trust__logo--light {
  display: none;
}

.footer--bright .pl-footer-trust__logo--dark {
  display: none;
}

.footer--bright .pl-footer-trust__logo--light {
  display: block;
}

.footer--bright .pl-footer-trust__score {
  color: rgb(0 0 0 / 0.6);
}

.footer--bright .pl-footer-trust__divider {
  background: rgb(0 0 0 / 0.12);
}

.footer--bright .pl-footer-trust-mobile__score {
  color: rgb(0 0 0 / 0.6);
}

.footer--bright .pl-footer-trust-mobile {
  border-bottom-color: rgb(0 0 0 / 0.1);
}
/* End PUMPLAB_FOOTER_TRUST_V1 */

/* PUMPLAB_REVIEWS_CAROUSEL_V1 — Custom review carousel */
.pl-reviews {
  background: #141414;
  padding: var(--spacing-6) 0 var(--spacing-16);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pl-reviews--loaded {
  opacity: 1;
}

.pl-reviews__container {
}

.pl-reviews__header {
  margin-bottom: var(--spacing-6);
}

.pl-reviews__platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}

.pl-reviews__platform {
  display: flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-reviews__platform:hover {
    opacity: 0.7;
  }
}

.pl-reviews__platform-logo {
  height: 22px;
  width: auto;
}

.pl-reviews__platform-logo--jm {
  height: 20px;
}

.pl-reviews__title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: var(--spacing-3);
}

.pl-reviews__title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.pl-reviews__progress {
  flex: 1;
  height: 2px;
  background: rgb(255 255 255 / 0.08);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.26s;
}

.pl-reviews__progress--mobile {
  display: none;
}

.pl-reviews--loaded .pl-reviews__progress {
  clip-path: inset(0 0 0 0);
}

.pl-reviews__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgb(255 255 255 / 0.22);
  border-radius: 1px;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.pl-reviews--loaded .pl-reviews__progress-fill {
  opacity: 1;
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease 1s;
}

.pl-reviews__summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-reviews__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pl-reviews__star {
  display: block;
}

.pl-reviews__avg {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.pl-reviews__count {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.45);
}

/* Track */
.pl-reviews__body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 calc(-1 * (44px + 16px));
}

.pl-reviews__track-wrapper {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  margin: -20px -16px;
  padding: 20px 16px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}

.pl-reviews__track {
  display: flex;
  gap: 16px;
  will-change: transform;
}

/* Cards */
.pl-reviews__card {
  flex: 0 0 calc((100% - 48px) / 4);
  background: #222;
  border-radius: var(--product-card-border-radius, 10px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease, filter 0.15s ease, background 0.2s ease;
  position: relative;
}

.pl-reviews__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.06)) padding-box,
    repeating-linear-gradient(
      110deg,
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 35%,
      rgb(255 255 255 / 0.1) 50%,
      rgb(255 255 255 / 0) 65%,
      rgb(255 255 255 / 0) 100%
    ) border-box;
  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;
  opacity: 0;
  transition: opacity 220ms ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  will-change: opacity, background-position;
  animation-name: pl_plab_intro_v9, pl_plab_loop_v9;
  animation-duration: 950ms, 5200ms;
  animation-timing-function: linear, linear;
  animation-delay: 0ms, 950ms;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .pl-reviews__card:hover {
    border-color: transparent;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
    background: #252525;
  }

  .pl-reviews__card:hover::before {
    opacity: 1;
    transition-delay: 70ms;
    animation-play-state: running;
  }

  .pl-reviews__card:active {
    transform: scale(0.99);
    filter: brightness(0.95);
  }

  .pl-reviews__card.pl-anim-reset::before {
    animation: none !important;
  }
}

.pl-reviews__card-stars {
  display: flex;
  gap: 3px;
}

.pl-reviews__card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.pl-reviews__card-text {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.7);
  margin: 0;
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-reviews__card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.pl-reviews__card-author {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.6);
}

.pl-reviews__verified {
  flex-shrink: 0;
}

.pl-reviews__card-product {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.35);
  text-decoration: none;
  margin-left: auto;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-reviews__card-product:hover {
    color: rgb(255 255 255 / 0.6);
  }
}


.pl-reviews__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgb(255 255 255 / 0.45);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.pl-reviews__arrow svg {
  width: 28px;
  height: 28px;
}

@media (hover: hover) and (pointer: fine) {
  .pl-reviews__arrow:hover {
    background: rgb(255 255 255 / 0.06);
    color: #fff;
  }
}

.pl-reviews__arrow:active {
  transform: scale(0.93);
  filter: brightness(0.75);
}

.pl-reviews__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: var(--spacing-8);
}


.pl-reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgb(255 255 255 / 0.15);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pl-reviews__dot--active {
  background: rgb(255 255 255 / 0.6);
  transform: scale(1.2);
}

/* Laptop — 3 cards */
@media screen and (min-width: 1000px) and (max-width: 1399px) {
  .pl-reviews__card {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}

/* Desktop entrance animations */
@media screen and (min-width: 1000px) {
  .pl-reviews__title {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pl-reviews--loaded .pl-reviews__title {
    opacity: 1;
    transform: translateY(0);
  }

  .pl-reviews__summary {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  }

  .pl-reviews--loaded .pl-reviews__summary {
    opacity: 1;
    transform: translateY(0);
  }

  .pl-reviews__arrow {
    opacity: 0;
    transition: opacity 0.4s ease 0.6s, background 0.2s ease, color 0.2s ease;
  }

  .pl-reviews--loaded .pl-reviews__arrow {
    opacity: 1;
  }

  .pl-reviews__card.pl-intro-stagger {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease, filter 0.15s ease;
  }

  .pl-reviews--loaded .pl-reviews__card.pl-intro-stagger {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tablet — 2 cards */
@media screen and (min-width: 700px) and (max-width: 999px) {
  .pl-reviews__card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

/* Mobile */
@media screen and (max-width: 699px) {
  .pl-reviews {
    padding: var(--spacing-10) 0;
    /* Pull the section content up without shifting the section above
       (Instagram grid) or the footer below. Negative top margin moves
       the section up by spacing-10; matching positive bottom margin
       cancels the net layout shift for the next sibling (footer). */
    margin-block-start: calc(-1 * var(--spacing-10));
    margin-block-end: var(--spacing-10);
  }

  .pl-reviews__card {
    flex: 0 0 75%;
    padding: 20px 24px;
  }


  .pl-reviews__title {
    font-size: 1.8rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pl-reviews--loaded .pl-reviews__title {
    opacity: 1;
    transform: translateY(0);
  }

  .pl-reviews__summary {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
  }

  .pl-reviews--loaded .pl-reviews__summary {
    opacity: 1;
    transform: translateY(0);
  }

  .pl-reviews__track-wrapper {
    opacity: 0;
    transition: opacity 0.01s ease 0.4s;
  }

  .pl-reviews--loaded .pl-reviews__track-wrapper {
    opacity: 1;
  }

  .pl-reviews__card.pl-intro-center {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pl-reviews__card.pl-intro-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pl-reviews__card.pl-intro-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pl-reviews--loaded .pl-reviews__card.pl-intro-center {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }

  .pl-reviews--loaded .pl-reviews__card.pl-intro-left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
  }

  .pl-reviews--loaded .pl-reviews__card.pl-intro-right {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
  }

  .pl-reviews__progress--mobile {
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
  }

  .pl-reviews--loaded .pl-reviews__progress--mobile {
    opacity: 1;
  }

  .pl-reviews__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-8);
  }

  .pl-reviews__title-row {
    margin-bottom: var(--spacing-2);
  }

  .pl-reviews__summary {
    justify-content: center;
    gap: 10px;
  }

  .pl-reviews__stars {
    gap: 3px;
  }

  .pl-reviews__avg {
    font-size: 1.1rem;
  }

  .pl-reviews__count {
    font-size: 0.85rem;
  }

  .pl-reviews__platforms {
    display: none;
  }

  .pl-reviews__dots {
    display: none;
  }

  .pl-reviews__title-row .pl-reviews__progress {
    display: none;
  }

  .pl-reviews__progress--mobile {
    display: block;
    margin-top: var(--spacing-6);
    clip-path: none;
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }

  .pl-reviews__progress--mobile .pl-reviews__progress-fill {
    min-width: 12%;
  }


  .pl-reviews__title-row {
    gap: 16px;
  }
}
/* End PUMPLAB_REVIEWS_CAROUSEL_V1 */


/* PUMPLAB_CONTACT_V1 — Clean contact page restyle: centered layout, glass card, refined inputs */

/* --- Scroll to form card area on submit --- */
.shopify-section--contact .contact-form .form[id] {
  scroll-margin-top: 30vh;
}

/* --- Pull section up — less gap from header --- */
.shopify-section--contact .section {
  --section-spacing-block-start: var(--spacing-10);
}

/* --- Subheading — uppercase tracking --- */
.shopify-section--contact .section-stack--center .subheading {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.55);
}

/* --- Content blurb — softer, narrower --- */
.shopify-section--contact .section-stack--center .prose p {
  opacity: 0.5;
  font-size: 0.95rem;
  max-width: 56ch;
  margin-inline: auto;
}

.shopify-section--contact .section-stack--center .prose a {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Subtitle text --- */
.pl-contact-subtitle {
  color: rgb(255 255 255 / 0.45);
  font-size: 0.9rem;
  margin-top: var(--spacing-3);
}

.pl-contact-subtitle__short {
  display: none !important;
}

@media screen and (max-width: 699px) {
  .pl-contact-subtitle__full {
    display: none !important;
  }
  .pl-contact-subtitle__short {
    display: inline !important;
  }
}

/* --- Email pill --- */
.pl-contact-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-2);
  padding: 7px 12px 7px 14px;
  border: none;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.55);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pl-contact-email-pill:hover {
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.85);
  }
}

.pl-contact-email-pill:active {
  transform: scale(0.96);
}

.pl-contact-email-pill__text {
  letter-spacing: 0.01em;
}

.pl-contact-email-pill__copy-icon,
.pl-contact-email-pill__check-icon {
  flex-shrink: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pl-contact-email-pill__copy-icon {
  position: relative;
}

.pl-contact-email-pill__check-icon {
  position: absolute;
  right: 12px;
  opacity: 0;
  transform: scale(0.6);
}

.pl-contact-email-pill.is-copied .pl-contact-email-pill__copy-icon {
  opacity: 0;
  transform: scale(0.6);
}

.pl-contact-email-pill.is-copied .pl-contact-email-pill__check-icon {
  opacity: 1;
  transform: scale(1);
}

.pl-contact-email-pill.is-copied {
  color: rgb(74 222 128);
  background: rgb(74 222 128 / 0.1);
}

/* "Kopierad!" tooltip */
.pl-contact-email-pill__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgb(74 222 128 / 0.15);
  color: rgb(74 222 128);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pl-contact-email-pill.is-copied .pl-contact-email-pill__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  z-index: 10;
}

/* Mobile: tooltip to the right instead of below */
@media screen and (max-width: 699px) {
  .pl-contact-email-pill__tooltip {
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
  }

  .pl-contact-email-pill.is-copied .pl-contact-email-pill__tooltip {
    transform: translateY(-50%) translateX(0);
  }
}

/* --- Dropdown fix — dark options + label overlap --- */
.shopify-section--contact .select option {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* Hide floating label — placeholder text handles it */
.shopify-section--contact .contact-form .form-control:has(.select) .floating-label {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.shopify-section--contact .contact-form .select.is-floating {
  height: calc(var(--input-height) + 0.625rem) !important;
  padding-block-start: 0 !important;
}

/* Placeholder option — match floating label opacity */
.shopify-section--contact .contact-form .select option[disabled] {
  color: rgb(255 255 255 / 0.5);
}

.shopify-section--contact .contact-form .select:has(option[disabled]:checked) {
  color: rgb(255 255 255 / 0.5);
}

/* --- Mobile: spacing, sizing, and rounded corners --- */
@media screen and (max-width: 699px) {
  .shopify-section--contact .contact-form .input-row {
    gap: var(--spacing-2-5);
  }
  .shopify-section--contact .section-stack__intro .h2 {
    font-size: 2.7rem;
  }

  .shopify-section--contact .contact-form {
    border-radius: var(--rounded) !important;
  }

  .shopify-section--contact ~ .shopify-section--faq .section-stack__intro .text-center {
    text-align: left;
  }

  .shopify-section--contact ~ .shopify-section--faq .faq-availability {
    text-align: left;
  }

  .shopify-section--contact ~ .shopify-section--faq .faq-availability .v-stack:last-child {
    display: inline;
  }

  .shopify-section--contact ~ .shopify-section--faq .faq-availability .v-stack:last-child .text-subdued {
    display: inline;
  }

  .shopify-section--contact ~ .shopify-section--faq .faq-availability .v-stack:last-child .text-subdued::before {
    content: " ";
  }

  /* Hide less critical FAQ items on mobile */
  .shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(4),
  .shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(5) {
    display: none;
  }

  /* Bump question text size on mobile */
  .shopify-section--contact ~ .shopify-section--faq .accordion__toggle {
    font-size: 1.05rem;
  }

  .shopify-section--contact .section-stack__intro,
  .shopify-section--contact .section-stack__intro .prose {
    text-align: left;
  }



  .shopify-section--contact .section-stack__main {
    margin-top: var(--spacing-2);
  }

}

/* --- Form card — glass surface with contrast --- */
.shopify-section--contact .contact-form {
  background: rgb(255 255 255 / 0.05);
  border: none;
  padding: var(--spacing-5) var(--spacing-6) var(--spacing-7);
}

@media screen and (min-width: 700px) {
  .shopify-section--contact .contact-form {
    padding: var(--spacing-6) var(--spacing-10) var(--spacing-10);
  }
}

/* hCaptcha injects a div into the form grid — remove it from grid flow */
.shopify-section--contact .contact-form .h-captcha {
  display: none;
}

/* --- Inputs — no border, sweep fill on focus like header search bar --- */
.shopify-section--contact .contact-form .form-control,
.shopify-section--contact .contact-form .input,
.shopify-section--contact .contact-form .textarea,
.shopify-section--contact .contact-form .select {
  border-radius: 4px !important;
}

.shopify-section--contact .contact-form .form-control {
  overflow: hidden;
}

.shopify-section--contact .contact-form .input,
.shopify-section--contact .contact-form .textarea,
.shopify-section--contact .contact-form .select {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.5);
  transition: color 0.2s ease;
}

/* Fill on form inputs — subtle fade */
.shopify-section--contact .contact-form .form-control:not(:has(.select)) {
  transition: background 0.18s ease;
  border-radius: var(--rounded-input);
}

@media (hover: hover) and (pointer: fine) {
  .shopify-section--contact .contact-form .form-control:not(:has(.select)):hover {
    background: rgb(255 255 255 / 0.05);
  }
  .shopify-section--contact .contact-form .form-control:not(:has(.select)):hover :is(.input, .textarea) {
    color: rgb(255 255 255 / 1);
  }
}

.shopify-section--contact .contact-form .form-control:focus-within {
  background: rgb(255 255 255 / 0.05);
}

.shopify-section--contact .contact-form .form-control:focus-within :is(.input, .textarea, .select) {
  color: rgb(255 255 255 / 1);
}

/* Filled state — keep bright text and subtle bg highlight */
.shopify-section--contact .contact-form .input:not(:placeholder-shown),
.shopify-section--contact .contact-form .textarea:not(:placeholder-shown),
.shopify-section--contact .contact-form .select:not(:has(option[disabled]:checked)) {
  color: rgb(255 255 255 / 0.85);
}

.shopify-section--contact .contact-form .input:not(:placeholder-shown),
.shopify-section--contact .contact-form .textarea:not(:placeholder-shown),
.shopify-section--contact .contact-form .select:not(:has(option[disabled]:checked)) {
  background: rgb(255 255 255 / 0.12);
}

/* Select dropdown — simple ease fill, no sweep */
.shopify-section--contact .contact-form .form-control:has(.select) {
  transition: background 0.15s ease;
  border-radius: var(--rounded-input);
}

@media (hover: hover) and (pointer: fine) {
  .shopify-section--contact .contact-form .form-control:has(.select):hover {
    background: rgb(255 255 255 / 0.06);
  }
  .shopify-section--contact .contact-form .form-control:has(.select):hover .select {
    color: rgb(255 255 255 / 1);
  }
}

.shopify-section--contact .contact-form .form-control:has(.select):focus-within {
  background: rgb(255 255 255 / 0.06);
}

.shopify-section--contact .contact-form .form-control:has(.select):focus-within .select {
  color: rgb(255 255 255 / 1);
}

/* Floating labels — brighter on focus */
.shopify-section--contact .contact-form .floating-label {
  transition: opacity 0.2s ease, transform 0.2s ease-in-out;
  z-index: 1;
}

.shopify-section--contact .contact-form .form-control:focus-within .floating-label {
  opacity: 0.8;
}

/* Select chevron above the sweep */
.shopify-section--contact .contact-form .select-chevron {
  z-index: 1;
}

/* --- Submit button — full width, blue sweep fill on hover --- */
.shopify-section--contact .contact-form .justify-self-center {
  width: 100%;
}

.shopify-section--contact .contact-form .justify-self-center .button {
  width: 100%;
}

.shopify-section--contact .contact-form .button:not([disabled]):not(.button--subdued)::after {
  background: #A79F8A;
}

@media (hover: hover) and (pointer: fine) {
  .shopify-section--contact .contact-form .button:not([disabled]):not(.button--subdued):hover {
    color: #FFFFFF !important;
  }
}

/* --- Conditional order number field --- */
/* Remove form grid gap — use margin on children instead so order field can collapse */
.shopify-section--contact .contact-form .form {
  gap: 0 !important;
}

.shopify-section--contact .contact-form .form > * {
  margin-top: var(--spacing-2-5);
}

@media screen and (min-width: 700px) {
  .shopify-section--contact .contact-form .form > * {
    margin-top: var(--spacing-4);
  }
}

.shopify-section--contact .contact-form .form > *:first-child {
  margin-top: 0;
}

.shopify-section--contact .contact-form .form > .justify-self-center {
  margin-top: var(--spacing-4);
}

@media screen and (min-width: 700px) {
  .shopify-section--contact .contact-form .form > .justify-self-center {
    margin-top: var(--spacing-6);
  }
}

.pl-contact-order-field {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0 !important;
  transition: grid-template-rows 0.4s ease, opacity 0.25s ease, margin 0.4s ease;
}

.pl-contact-order-field.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--spacing-2-5) !important;
}

/* Order field layout — input + help button side by side */
.pl-contact-order-field__inner {
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14px);
  mask-image: linear-gradient(to bottom, transparent, black 14px);
}

.pl-contact-order-field.is-open .pl-contact-order-field__inner {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.pl-contact-order-field__inner .form-control {
  flex: 1;
  min-width: 0;
}

/* Question mark help button */
.pl-contact-order-help {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.4);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-contact-order-help:hover {
    background: rgb(255 255 255 / 0.14);
    color: rgb(255 255 255 / 0.7);
  }
}

.pl-contact-order-help__tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgb(55 55 55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
  color: rgb(255 255 255 / 0.7);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.pl-contact-order-help:hover .pl-contact-order-help__tooltip,
.pl-contact-order-help:focus .pl-contact-order-help__tooltip {
  opacity: 1;
  transform: translateY(0);
}

.pl-contact-order-field.is-open {
  overflow: visible;
  z-index: 2;
  position: relative;
}

@media screen and (min-width: 700px) {
  .pl-contact-order-field.is-visible {
    margin-top: var(--spacing-4) !important;
  }
}


/* --- Track order card --- */
.pl-contact-track {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  max-width: 640px;
  margin: 0 auto var(--spacing-8);
  padding: var(--spacing-5) var(--spacing-6);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: var(--rounded);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pl-contact-track__icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.pl-contact-track__text {
  flex: 1;
  min-width: 0;
}

.pl-contact-track__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.pl-contact-track__desc {
  font-size: 0.85rem;
  opacity: 0.5;
  margin-top: 2px;
}

.pl-contact-track__arrow {
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-contact-track:hover {
    background: rgb(255 255 255 / 0.07);
    border-color: rgb(255 255 255 / 0.15);
  }
  .pl-contact-track:hover .pl-contact-track__arrow {
    transform: translateX(3px);
    opacity: 0.7;
  }
}

/* --- Mobile tweaks --- */
@media screen and (max-width: 699px) {
  .shopify-section--contact .contact-form {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .pl-contact-track {
    margin-inline: var(--spacing-5);
  }
}

/* --- FAQ section — match contact form card style and width --- */
.shopify-section--contact ~ .shopify-section--faq .accordion-box {
  background: rgb(255 255 255 / 0.05);
  border: none;
}

/* Last accordion — the border-bottom removal causes scrollHeight mismatch.
   Restore it invisibly so the measurement is correct. */
.shopify-section--contact ~ .shopify-section--faq .accordion-box > :last-child {
  border-block-end-width: 1px;
  border-block-end-color: transparent;
}

/* Hide separator lines by default, show below open accordion */
.shopify-section--contact ~ .shopify-section--faq .accordion {
  border-color: transparent;
  transition: border-color 0.15s ease;
}

.shopify-section--contact ~ .shopify-section--faq .accordion[open][aria-expanded="true"] {
  border-block-end-color: rgb(255 255 255 / 0.08);
}

.shopify-section--contact ~ .shopify-section--faq .accordion-box > :last-child[open] {
  border-block-end-color: transparent;
}

/* Fade-in hover box on FAQ rows */
.shopify-section--contact ~ .shopify-section--faq .accordion__toggle {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}

.shopify-section--contact ~ .shopify-section--faq .accordion__toggle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -16px;
  right: -16px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.03);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  pointer-events: none;
  z-index: -1;
}

.shopify-section--contact ~ .shopify-section--faq .accordion__toggle:active::before {
  opacity: 1;
  background: rgb(255 255 255 / 0.01);
  transition: opacity 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .shopify-section--contact ~ .shopify-section--faq .accordion__toggle:hover::before {
    opacity: 1;
  }
}

/* Tone down chevron circles */
.shopify-section--contact ~ .shopify-section--faq .circle-chevron {
  background: rgb(255 255 255 / 0.06);
  transition: background 0.2s ease, transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

/* Spring easing on chevron rotation */
.shopify-section--contact ~ .shopify-section--faq .group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate {
  transition: background 0.2s ease, transform 0.5s cubic-bezier(.22, 1, .36, 1);
}

/* Extra spacing between question and answer */
.shopify-section--contact ~ .shopify-section--faq .accordion__content {
  margin-block-start: var(--spacing-2);
}



/* FAQ answer text — softer to separate from bold questions */
.shopify-section--contact ~ .shopify-section--faq .accordion__content .prose {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.95em;
}

.shopify-section--contact ~ .shopify-section--faq .accordion__content .prose a,
.shopify-section--contact ~ .shopify-section--faq .accordion__content .prose a:visited {
  color: rgb(255 255 255) !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgb(255 255 255 / 0.3) !important;
  background: none !important;
}

/* FAQ support footer — dim the response time line */
.shopify-section--contact ~ .shopify-section--faq .text-subdued {
  color: #818181 !important;
}

/* --- Input focus underline glow --- */
@keyframes pl-contact-underline-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.shopify-section--contact .contact-form .form-control:not(:has(.select))::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(255 255 255 / 0.08);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.shopify-section--contact .contact-form .form-control:not(:has(.select)):focus-within::after {
  transform: scaleX(1);
}

/* --- Staggered entrance animation --- */
@keyframes pl-contact-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header content — subheading, title, subtitle, email pill */
.shopify-section--contact .section-stack__intro .subheading,
.shopify-section--contact .section-stack__intro .h2,
.shopify-section--contact .section-stack__intro .pl-contact-subtitle,
.shopify-section--contact .section-stack__intro .pl-contact-email-pill,
/* Form card */
.shopify-section--contact .contact-form,
/* Form fields */
.shopify-section--contact .contact-form .form > *,
/* FAQ heading, card, support text */
.shopify-section--contact ~ .shopify-section--faq .section-stack__intro,
.shopify-section--contact ~ .shopify-section--faq .accordion-box,
.shopify-section--contact ~ .shopify-section--faq .faq-availability,
/* FAQ rows */
.shopify-section--contact ~ .shopify-section--faq .accordion {
  animation: pl-contact-enter 0.5s cubic-bezier(.22, 1, .36, 1) both;
}

/* Stagger: header content */
.shopify-section--contact .section-stack__intro .subheading { animation-delay: 0s; }
.shopify-section--contact .section-stack__intro .h2 { animation-delay: 0.06s; }
.shopify-section--contact .section-stack__intro .pl-contact-subtitle { animation-delay: 0.12s; }
.shopify-section--contact .section-stack__intro .pl-contact-email-pill {
  animation-delay: 0.5s;
  animation-duration: 0.7s;
}

/* Stagger: form card */
.shopify-section--contact .contact-form { animation-delay: 0.25s; }

/* Stagger: form fields */
.shopify-section--contact .contact-form .form > *:nth-child(1) { animation-delay: 0.3s; }
.shopify-section--contact .contact-form .form > *:nth-child(2) { animation-delay: 0.35s; }
.shopify-section--contact .contact-form .form > *:nth-child(3) { animation-delay: 0.4s; }
.shopify-section--contact .contact-form .form > *:nth-child(4) { animation-delay: 0.45s; }
/* Submit button — last in the form */
.shopify-section--contact .contact-form .form > .justify-self-center { animation-delay: 0.55s; }
.shopify-section--contact .contact-form .form > *:nth-child(6) { animation-delay: 0.55s; }

/* Stagger: Trust badges (desktop only — mobile uses scroll observer) */
@media screen and (min-width: 700px) {
  .shopify-section--contact .pl-trust-badges .pl-trust-badge {
    animation: pl-contact-enter 0.5s cubic-bezier(.22, 1, .36, 1) both;
  }
  .shopify-section--contact .pl-trust-badges .pl-trust-badge:first-child { animation-delay: 0.6s; }
  .shopify-section--contact .pl-trust-badges::after {
    animation: pl-contact-enter 0.7s ease both;
    animation-delay: 0.64s;
    transform: none;
  }
  .shopify-section--contact .pl-trust-badges .pl-trust-badge:last-child { animation-delay: 0.75s; }
}

/* Stagger: FAQ heading */
.shopify-section--contact ~ .shopify-section--faq .section-stack__intro { animation-delay: 0.7s; }

/* Stagger: FAQ card */
.shopify-section--contact ~ .shopify-section--faq .accordion-box { animation-delay: 0.75s; }

/* Stagger: FAQ rows */
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(1) { animation-delay: 0.8s; }
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(2) { animation-delay: 0.85s; }
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(3) { animation-delay: 0.9s; }
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(4) { animation-delay: 0.95s; }
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(5) { animation-delay: 1s; }
.shopify-section--contact ~ .shopify-section--faq .accordion:nth-child(6) { animation-delay: 1.05s; }

/* Stagger: support hours — last */
.shopify-section--contact ~ .shopify-section--faq .faq-availability { animation-delay: 1.1s; }

/* Skip entrance animations on revisit — except trust badges */
.pl-no-intro *,
.pl-no-intro ~ .pl-no-intro * {
  animation: none !important;
}

@media screen and (min-width: 700px) {
  .pl-no-intro .pl-trust-badge,
  .pl-no-intro .pl-trust-badges::after {
    animation: pl-contact-enter 0.5s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  .pl-no-intro .pl-trust-badges .pl-trust-badge:first-child { animation-delay: 0.15s !important; }
  .pl-no-intro .pl-trust-badges::after { animation-delay: 0.19s !important; transform: none !important; }
  .pl-no-intro .pl-trust-badges .pl-trust-badge:last-child { animation-delay: 0.3s !important; }
}

/* PUMPLAB_TRUST_BADGES_V1 — Trust badges below contact form */
.pl-trust-badges {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 72px;
  margin-top: var(--spacing-6);
  margin-bottom: calc(-1 * var(--spacing-8));
}

.pl-trust-badges::after {
  content: '';
  width: 1px;
  margin: 24px 0;
  background: rgb(255 255 255 / 0.1);
  order: 1;
}

.pl-trust-badges .pl-trust-badge:first-child {
  order: 0;
}

.pl-trust-badges .pl-trust-badge:last-child {
  order: 2;
}

.pl-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  padding: 20px 24px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-trust-badge:hover {
    background: rgb(255 255 255 / 0.02);
  }
}

.pl-trust-badge__logo {
  height: 40px;
  width: auto;
}

.pl-trust-badge__stars {
  height: 40px;
  width: auto;
}

.pl-trust-badge__text {
  font-size: 1.1rem;
  color: rgb(255 255 255 / 0.55);
  margin: 0;
}

.pl-trust-badge__text strong {
  color: #fff;
  font-weight: 600;
}

.pl-trust-badge--judgeme {
  text-decoration: none;
  color: #fff;
  padding: 20px 36px;
  padding-top: 6px;
}

.pl-trust-badge__logo--judgeme {
  height: 34px;
  width: auto;
}

.pl-trust-badge__jdgm-stars {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 38px;
  min-width: 206px;
}

.pl-trust-badge__jdgm-star {
  width: 38px;
  height: 38px;
}

.pl-trust-badge--judgeme .pl-trust-badge__text {
  min-height: 1.4em;
}

@media screen and (max-width: 699px) {
  .pl-trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: var(--spacing-6);
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .pl-trust-badges::after {
    width: 200px;
    height: 1px;
    min-height: 1px;
    align-self: center;
    margin: 4px 0;
    order: 1;
  }

  .pl-trust-badge--judgeme {
    padding-top: 16px;
  }
}
.pl-trust-badge--hidden {
  opacity: 0;
  transform: translateY(14px);
}

.pl-trust-badge--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1), transform 0.5s cubic-bezier(.22, 1, .36, 1);
}

.pl-trust-badges--divider-hidden::after {
  opacity: 0;
}

.pl-trust-badges--divider-visible::after {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1);
}
.pl-trust-badges--faq {
  margin-top: auto;
  padding-top: var(--spacing-2);
  margin-bottom: var(--spacing-6);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

@media screen and (max-width: 699px) {
  .pl-trust-badges--faq {
    padding-top: 0;
    margin-bottom: 0;
  }

  .pl-trust-badges--faq + .pl-faq__contact {
    padding-top: var(--spacing-4);
  }
}

.pl-faq__detail-cta {
  text-align: center;
  padding: var(--spacing-6) 0 0;
}
/* End PUMPLAB_TRUST_BADGES_V1 */

/* End PUMPLAB_CONTACT_V1 */

/* PUMPLAB_FAQ_PAGE_V1 — FAQ landing page: category grid, detail transitions, dark theme */

/* --- Entrance animation --- */
@keyframes pl-faq-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pl-faq-enter-dim {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 0.5;
    transform: translateY(0);
  }
}

.shopify-section--faq-page .pl-faq__subheading {
  animation: pl-faq-enter-dim 0.5s cubic-bezier(.22, 1, .36, 1) backwards;
}

.shopify-section--faq-page .pl-faq__title,
.shopify-section--faq-page .pl-faq__title,
.shopify-section--faq-page .pl-faq__section-heading,
.shopify-section--faq-page .pl-faq__popular-list,
.shopify-section--faq-page .pl-faq__card,
.shopify-section--faq-page .pl-trust-badges--faq .pl-trust-badge,
.shopify-section--faq-page .pl-faq__contact {
  animation: pl-faq-enter 0.5s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* Stagger */
.shopify-section--faq-page .pl-faq__subheading { animation-delay: 0s; }
.shopify-section--faq-page .pl-faq__title { animation-delay: 0.05s; }
.shopify-section--faq-page .pl-faq__section-heading:first-of-type { animation-delay: 0.12s; }
.shopify-section--faq-page .pl-faq__popular-list { animation-delay: 0.18s; }
.shopify-section--faq-page [data-faq-categories] .pl-faq__section-heading { animation-delay: 0.28s; }
.shopify-section--faq-page .pl-faq__card:nth-child(1) { animation-delay: 0.32s; }
.shopify-section--faq-page .pl-faq__card:nth-child(2) { animation-delay: 0.36s; }
.shopify-section--faq-page .pl-faq__card:nth-child(3) { animation-delay: 0.40s; }
.shopify-section--faq-page .pl-faq__card:nth-child(4) { animation-delay: 0.44s; }
.shopify-section--faq-page .pl-faq__card:nth-child(5) { animation-delay: 0.48s; }
.shopify-section--faq-page .pl-faq__card:nth-child(6) { animation-delay: 0.52s; }
.shopify-section--faq-page .pl-trust-badges--faq .pl-trust-badge:first-child { animation-delay: 0.56s; }
.shopify-section--faq-page .pl-trust-badges--faq::after {
  animation: pl-faq-enter 0.7s ease backwards;
  animation-delay: 0.54s;
  transform: none;
}
.shopify-section--faq-page .pl-trust-badges--faq .pl-trust-badge:last-child { animation-delay: 0.62s; }
.shopify-section--faq-page .pl-faq__contact { animation-delay: 0.7s; }

/* --- Page-level spacing --- */
.shopify-section--faq-page .section {
  --section-spacing-block-start: var(--spacing-10);
}
.shopify-section--faq-page .section-stack {
  --section-stack-spacing-block: var(--spacing-4);
}

/* --- Subheading — matches contact page (prose p adds opacity 0.5) --- */
.pl-faq__subheading {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  font-weight: bold;
  color: rgb(255 255 255 / 0.55);
  opacity: 0.5;
  margin: 0;
}

/* --- Title --- */
.pl-faq__title {
  margin-top: var(--spacing-2) !important;
  margin-bottom: 0 !important;
  font-size: 4.5rem;
  letter-spacing: -0.04em;
}

/* --- Subtitle — matches contact page (prose p adds opacity 0.5) --- */
.pl-faq__subtitle {
  color: rgb(255 255 255 / 0.45);
  opacity: 0.5;
  font-size: 0.95rem;
  font-weight: 480;
  letter-spacing: -0.015em;
  margin-top: var(--spacing-3) !important;
}

@media screen and (max-width: 699px) {
  .pl-faq__title {
    font-size: 4.5rem;
  }
  .pl-faq__subtitle {
    font-size: 0.95rem;
  }
}

/* --- Section headings (Popular, Categories) --- */
.pl-faq__section-heading {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.65);
  text-transform: uppercase;
  margin: 0 0 var(--spacing-2) 0;
}

/* --- Popular questions — plain list, not accordions --- */
.pl-faq__popular {
  margin-bottom: var(--spacing-8);
}

.pl-faq__popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-faq__popular-item {
  position: relative;
}
.pl-faq__popular-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgb(255 255 255 / 0.06);
  transition: opacity 0.2s ease;
}
.pl-faq__popular-item:hover::after {
  opacity: 0;
}

.pl-faq__popular-item:last-child::after {
  display: none;
}

.pl-faq__popular-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 200ms ease, background 200ms ease;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-radius: 8px;
  padding: 14px 12px;
}

.pl-faq__popular-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__popular-link:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.05);
  }
  .pl-faq__popular-link:hover svg {
    transform: translateX(3px);
    opacity: 0.7;
  }
}

.pl-faq__popular-link:active {
  background: rgb(255 255 255 / 0.02);
  transition: color 50ms ease, background 50ms ease;
}
.pl-faq__popular-link span {
  display: inline-block;
  transition: scale 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.pl-faq__popular-link:active span {
  scale: 0.97;
  transition: scale 80ms ease-out;
}

/* --- Category grid --- */
.pl-faq__categories {
  margin-bottom: var(--spacing-8);
}

.pl-faq__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media screen and (max-width: 699px) {
  .pl-faq__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Category cards — with sweep fill + icon animation on hover --- */
.pl-faq__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 20px;
  background: rgb(255 255 255 / 0.05);
  border: none;
  border-radius: var(--rounded-button);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 200ms ease;
}

/* Even fade-in fill on hover */
.pl-faq__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.05);
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.pl-faq__card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  will-change: transform, opacity;
}

.pl-faq__card-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgb(255 255 255 / 0.7);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, opacity 0.15s ease;
}

.pl-faq__card-icon svg {
  width: 36px;
  height: 36px;
  overflow: visible;
}

.pl-faq__card-title {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pl-faq__card-title-short { display: none; }

@media screen and (max-width: 699px) {
  .pl-faq__card-title-full { display: none; }
  .pl-faq__card-title-short { display: inline; }
}

.pl-faq__card-count {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.4);
}

/* Hover — sweep + icon scale */
@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover::after {
    opacity: 1;
  }
  .pl-faq__card:hover .pl-faq__card-icon {
    transform: scale(1.15);
    color: rgb(255 255 255 / 0.95);
  }
}

/* Press — JS toggles class, uses independent `scale` property (doesn't conflict with transform) */
.pl-faq__card-inner {
  transition: scale 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.pl-faq__card--pressed .pl-faq__card-inner {
  scale: 0.96;
  transition: scale 0.08s ease-out;
}
.pl-faq__card--pressed .pl-faq__card-icon {
  opacity: 0.3;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, opacity 0.06s ease-out;
}

/* Morphing state — glow pulse when card is selected */
.pl-faq__card--morphing {
  background: rgb(255 255 255 / 0.1);
}
.pl-faq__card--morphing .pl-faq__card-icon {
  transform: scale(1.2);
  color: #fff;
}

/* --- Content area — height is locked by JS on first render to prevent footer jump --- */
.pl-faq__content {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* --- Detail view --- */
.pl-faq__detail {
  padding-top: var(--spacing-8);
}

.pl-faq__detail-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-5);
  background: rgb(255 255 255 / 0.05);
  border-radius: var(--rounded-button);
  overflow: hidden;
}

/* Sticker icon — watermark in the header background */
.pl-faq__detail-sticker {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(calc(-50% + 15px)) scale(4) rotate(8deg);
  opacity: 0.08;
  color: currentColor;
  pointer-events: none;
  z-index: 0;
}

.pl-faq__detail-sticker svg {
  width: 28px;
  height: 28px;
}

.pl-faq__detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgb(255 255 255 / 0.7);
}

.pl-faq__detail-icon svg {
  width: 24px;
  height: 24px;
}

.pl-faq__detail-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

/* z-index for header children above sticker */
.pl-faq__detail-header > *:not(.pl-faq__detail-sticker) {
  position: relative;
  z-index: 1;
}

/* --- Back button — no border, matches contact page btn style --- */
.pl-faq__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.06);
  border: none;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease, transform 70ms ease-in;
}

.pl-faq__back svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__back:hover {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
  }
}

.pl-faq__back:active {
  transform: scale(0.93);
}

/* --- Accordion box — match contact FAQ exactly: bg 0.05, no border --- */
.shopify-section--faq-page .accordion-box {
  background: rgb(255 255 255 / 0.05);
  border: none;
}

/* Accordion separator — transparent by default, visible on open */
.shopify-section--faq-page .accordion {
  border-color: transparent;
  transition: border-color 0.15s ease;
}

.shopify-section--faq-page .accordion[open][aria-expanded="true"] {
  border-block-end-color: rgb(255 255 255 / 0.08);
}

.shopify-section--faq-page .accordion-box > :last-child {
  border-block-end-width: 1px;
  border-block-end-color: transparent;
}

/* Hover box on accordion rows — matches contact FAQ */
.shopify-section--faq-page .accordion__toggle {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}

.shopify-section--faq-page .accordion__toggle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -16px;
  right: -16px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.03);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
  pointer-events: none;
  z-index: -1;
}

.shopify-section--faq-page .accordion__toggle:active::before {
  opacity: 1;
  background: rgb(255 255 255 / 0.01);
  transition: opacity 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .shopify-section--faq-page .accordion__toggle:hover::before {
    opacity: 1;
  }
}

/* Chevron — toned down, spring easing */
.shopify-section--faq-page .circle-chevron {
  background: rgb(255 255 255 / 0.06);
  transition: background 0.2s ease, transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.shopify-section--faq-page .group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate {
  transition: background 0.2s ease, transform 0.5s cubic-bezier(.22, 1, .36, 1);
}

/* Accordion content spacing */
.shopify-section--faq-page .accordion__content {
  margin-block-start: var(--spacing-2);
}

/* Answer text */
.shopify-section--faq-page .accordion__content .prose {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.95em;
  line-height: 1.7;
}

.shopify-section--faq-page .accordion__content .prose a,
.shopify-section--faq-page .accordion__content .prose a:visited {
  color: rgb(255 255 255) !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgb(255 255 255 / 0.3) !important;
  background: none !important;
}

/* --- Contact CTA at bottom --- */
.pl-faq__contact {
  text-align: center;
  padding: var(--spacing-8) 0 0;
}


.pl-faq__contact-text {
  color: rgb(255 255 255 / 0.5);
  font-size: 0.9rem;
  margin: 0 0 var(--spacing-3) 0;
}

.pl-faq__contact-link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(255 255 255 / 0.3);
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__contact-link:hover {
    color: #fff;
  }
}

/* --- Animated icon sub-elements --- */
/* Solid opaque color — prevents alpha compounding on overlapping strokes */
.pl-faq-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
  color: #969696;
  overflow: visible;
}

.pl-faq-icon--account {
  overflow: visible;
  transform: scale(1.2);
}


@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-faq-icon {
    color: #fff;
  }
  /* Return: box stays muted, arrow goes white */
  .pl-faq__card:hover .pl-faq-icon--return {
    color: #bbb;
  }
  .pl-faq__card:hover .pl-ret-arrow {
    color: #fff;
  }
}

/* --- Truck: shifts right, wind lines stagger in, road scrolls with mask --- */
.pl-faq-icon--truck {
  transform: scale(1.07);
}
.pl-truck-wind line {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}
.pl-truck-wind line:nth-child(1) { transition-delay: 0s; }
.pl-truck-wind line:nth-child(2) { transition-delay: 0.06s; }
.pl-truck-wind line:nth-child(3) { transition-delay: 0.12s; }

.pl-truck-road {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-truck-road line {
  stroke: #666;
}
.pl-road-enter {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-road-exit {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-faq-icon--truck {
    transform: scale(1.07) translateX(2px);
  }
  .pl-faq__card--hover-hold .pl-faq-icon--truck {
    transform: scale(1.07) translateX(2px);
  }
  .pl-faq__card:hover .pl-truck-wind {
    opacity: 1;
  }
  .pl-faq__card:hover .pl-truck-wind line {
    opacity: 0.5;
    transform: translateX(-3px);
  }
  .pl-faq__card:hover .pl-truck-road {
    transform: translateX(-6px);
  }
  .pl-faq__card:hover .pl-road-enter {
    opacity: 1;
  }
  .pl-faq__card:hover .pl-road-exit {
    opacity: 0;
  }
}

/* --- Return: arrow scales up + tilts, box scales slightly --- */
.pl-ret-arrow {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
  transform-origin: 11px 12px;
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-ret-arrow {
    transform: scale(1.08) rotate(4deg);
  }
}

/* --- Payment: contactless tap — card tilts, waves appear --- */
.pl-pay-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 12px 21px;
}
.pl-pay-wave1, .pl-pay-wave2 {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(0.8);
  transform-origin: 18px 5px;
}
.pl-pay-wave2 {
  transition-delay: 0.08s;
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-pay-card {
    transform: rotate(-4deg);
  }
  .pl-faq__card:hover .pl-pay-wave1 {
    opacity: 0.6;
    transform: scale(1);
  }
  .pl-faq__card:hover .pl-pay-wave2 {
    opacity: 0.35;
    transform: scale(1);
  }
}

/* --- Bottle: cap lifts off on hover --- */
.pl-bottle-cap {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-bottle-cap {
    transform: translateY(-2px) rotate(-5deg);
  }
}

/* --- Account: right leg retracts, arc tilts left --- */
.pl-acc-shackle-r {
  stroke-dasharray: 6 10;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

/* Arc + right leg bounce down then up on hover */
@keyframes pl-arc-bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(1.5px); }
  100% { transform: translateY(0); }
}

/* Lock body — subtle bounce, less than shackle */
@keyframes pl-body-bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(0.6px); }
  100% { transform: translateY(0); }
}

.pl-acc-body {
  transform-origin: 12px 15px;
}
.pl-acc-shield {
  transition: stroke 0.3s ease;
}
.pl-acc-arc {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 10.2px 9px;
}

/* Snap lines — hidden by default, flash in+out on hover */
.pl-acc-snap {
}
.pl-acc-snap line {
  opacity: 0;
}

@keyframes pl-snap-flash {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(2px); }
}

@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-acc-shackle-group {
    animation: pl-arc-bounce 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pl-faq__card:hover .pl-acc-body-group {
    animation: pl-body-bounce 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pl-faq__card:hover .pl-acc-shield {
    color: #ccc;
    stroke: #ccc;
  }
  .pl-faq__card:hover .pl-acc-shackle-r {
    stroke-dashoffset: 4;
  }
  .pl-faq__card:hover .pl-acc-snap line:nth-child(1) {
    animation: pl-snap-flash 0.4s ease forwards 0.03s;
  }
  .pl-faq__card:hover .pl-acc-snap line:nth-child(2) {
    animation: pl-snap-flash 0.4s ease forwards 0.05s;
  }
  .pl-faq__card:hover .pl-acc-snap line:nth-child(3) {
    animation: pl-snap-flash 0.4s ease forwards 0.07s;
  }
}

/* --- Other (three dots): wave bounce on hover --- */
@keyframes pl-dot-wave {
  0% { transform: translateY(0); }
  35% { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}
.pl-other-dot {
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .pl-faq__card:hover .pl-other-dot,
  .pl-faq__card--hover-hold .pl-other-dot {
    animation: pl-dot-wave 0.45s ease-in-out 1;
  }
  .pl-faq__card:hover .pl-other-dot--1,
  .pl-faq__card--hover-hold .pl-other-dot--1 { animation-delay: 0s; }
  .pl-faq__card:hover .pl-other-dot--2,
  .pl-faq__card--hover-hold .pl-other-dot--2 { animation-delay: 0.1s; }
  .pl-faq__card:hover .pl-other-dot--3,
  .pl-faq__card--hover-hold .pl-other-dot--3 { animation-delay: 0.2s; }
}

/* --- Mobile tweaks --- */
@media screen and (max-width: 699px) {
  .pl-faq__content {
    min-height: 400px;
  }

  .pl-faq__detail-title {
    font-size: 1.1rem;
  }

  .pl-faq__card {
    padding: 12px 16px;
    gap: 8px;
  }

  .pl-faq__card-icon {
    width: 32px;
    height: 32px;
  }

  .pl-faq__card-icon svg {
    width: 28px;
    height: 28px;
  }

  .pl-faq__card-title {
    font-size: 1rem;
  }

  .pl-faq__popular {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }
}

/* End PUMPLAB_FAQ_PAGE_V1 */

/* PUMPLAB_SLIDESHOW_HEIGHT_LOCK_V1 — Stop the homepage hero slideshow from
   causing periodic layout shift in everything below it.

   The theme uses image_size: "auto" which means each slide takes the
   intrinsic aspect ratio of its OWN image file. Combined with the rule
   .slideshow__slide:not(.is-selected){ position: absolute; ... } at
   assets/theme.css:8742, only the currently selected slide takes layout
   space — so the slideshow's height is whatever the active slide's
   intrinsic height happens to be. With autoplay cycling every 10s and 5
   different image files (DESKTOP_FINAL.jpg, INTRA_DESKTOP_BANNER.jpg,
   Banner-2.jpg, Desktop_Version_banner.jpg, SHAKER_BANNER_DESKTOP_TEST_2.jpg)
   that differ by even 1-3px in their actual exported dimensions, every
   autoplay tick produces a small height delta that cascades down the
   page and shows up as a periodic jump in the Nyheter frame's lower
   line (and everything else below).

   Fix: lock the slideshow's content-over-media grid container to a fixed
   aspect ratio matching the intended source dimensions (2000×3200 on
   mobile per Isac's source file dimensions). The inner image is forced
   to fill 100% of that constant-aspect container, and the existing
   `object-fit: cover` from the base content-over-media rule
   (assets/theme.css:876) handles cropping without distortion. Result:
   slideshow height is identical across all slides → no more shift. */
@media screen and (max-width: 699px) {
  .slideshow .content-over-media--auto {
    aspect-ratio: 2000 / 3200;
  }

  .slideshow .content-over-media--auto > :is(picture, img, video, video-media) {
    height: 100%;
    width: 100%;
  }
}

@media screen and (min-width: 700px) {
  .slideshow .content-over-media--auto {
    aspect-ratio: 4000 / 2000;
  }

  .slideshow .content-over-media--auto > :is(picture, img, video, video-media) {
    height: 100%;
    width: 100%;
  }
}
/* End PUMPLAB_SLIDESHOW_HEIGHT_LOCK_V1 */