/** Shopify CDN: Minification failed

Line 13951:18 Unexpected "{"
Line 13951:27 Expected ":"
Line 13959:18 Unexpected "{"
Line 13959:27 Expected ":"
Line 13960:18 Unexpected "{"
Line 13960:27 Expected ":"
Line 20561:0 Unexpected "}"
Line 26109:58 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: #ffffff !important;
    color: #1a1a1a !important;
  }
}

/* PUMPLAB_RECS_WHITE_BTN_V1 — rec "Lägg till" button white at rest (was grey →
   white-on-hover) for stronger attach. Applies on all devices; the hover rule
   above brightens it to full white on hover-capable pointers. */
.cart-drawer__recommendations .button--subdued:not([disabled]) {
  background-color: rgba(255, 255, 255, 0.92) !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);
  /* PUMPLAB_TRUSTPILOT_ZFIX_V1 — the app-injected Trustpilot TrustBox sets `z-index:1000 !important`
     INLINE on .trustpilot-widget, which NO stylesheet can override (inline !important wins the cascade).
     It floated the widget over the header, cart drawer, and hamburger menu. isolation:isolate makes the
     footer its own stacking context so that z:1000 is trapped INSIDE the footer and can never out-stack
     our UI overlays. Verified: a root-level z:5 element then paints above the widget. */
  isolation: isolate;
}

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

  /* English "Vitamins & Supplements" is wider than Swedish "Vitaminer & Tillskott" — scale the split title down to fit the card */
  html[lang="en"] .pl-catscroll__title-top { font-size: 2.2rem; }
  html[lang="en"] .pl-catscroll__title-btm { font-size: 1.72rem; }

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

  /* English split title scaled down (desktop) */
  html[lang="en"] .pl-catscroll__title-top { font-size: 2rem; }
  html[lang="en"] .pl-catscroll__title-btm { font-size: 1.58rem; }

  /* 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: #FFFFFF !important;
  background: #FFFFFF !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);
}

/* (sold-out swap animations removed — pl_atc_soldout_enter keyframe + ATC
    animation rule + reseller-fallback animation rule all deleted) */

/* PUMPLAB_RESELLER_FALLBACK_V1 — replaces the empty Shop Pay slot on sold-out
   variants with an "Återförsäljare" link to /pages/vara-aterforsaljare.
   Active on all viewports. Desktop keeps the 2-col grid so ATC sits left and
   the fallback sits right; mobile stacks them (natural 1-col flow). */
.pl-reseller-fallback { display: none; }
.pl-soldout .pl-reseller-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 55px;
  padding: 0 24px;
  background: #15803d;
  color: #ffffff;
  border: none;
  border-radius: var(--rounded-button);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.pl-soldout .pl-reseller-fallback:hover { background: #1a9446; }
.pl-soldout .pl-reseller-fallback:active { transform: scale(0.97); }
/* Desktop only: keep 2-col grid in sold-out so ATC + fallback sit side-by-side
   (overrides the 1fr collapse). Mobile inherits the default 1-col stack. */
@media screen and (min-width: 700px) {
  .pl-soldout .buy-buttons--multiple {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
/* End PUMPLAB_RESELLER_FALLBACK_V1 */

/* 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: #FFFFFF !important;
  background: #FFFFFF !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: 7px;
  background: rgb(var(--text-color) / 0.15);
  border-radius: 9999px;
  transform: translateY(-50%);
}

.pl-cart-progress__fill {
  height: 100%;
  /* Solid green, no gradient (Isac 2026-07-09) — matches the green "fri frakt" label. */
  background: #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%;
  /* Unreached: same grey as the unfilled bar but OPAQUE — a bare rgb(.../.15) is semi-transparent,
     so it doubled where it overlapped the (also .15) track and looked see-through over the bg.
     Layer the .15 white tint over a solid --background so the circle matches the track's rendered
     colour while fully covering it (no additive overlap). Whiter truck, no outline. (Isac 2026-07-09) */
  background: linear-gradient(rgb(var(--text-color) / 0.15), rgb(var(--text-color) / 0.15)), rgb(var(--background));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--text-color) / 0.6);
  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;
}

/* PUMPLAB_CART_PROGRESS_V2 — when FREE SHAKER is out of stock, M1 (truck) becomes
   the sole goal and slides to the right end of the track so the fill (which now
   scales 0→100% over 0→m1) matches the icon position. */
.pl-cart-progress.pl-no-gift .pl-cart-progress__milestone[data-index="1"] {
  left: auto;
  right: -12px;
  transform: translateY(-50%);
}
.pl-cart-progress.pl-no-gift .pl-cart-progress__milestone[data-index="1"].pl-popping {
  animation: pl-cart-m2-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* End PUMPLAB_CART_PROGRESS_TWEAK_V1 */

/* PUMPLAB_CART_PROGRESS_TIER_V1 — Diamond/Black already have free shipping, so the truck
   milestone is removed and the bar tracks only the free-shaker (JS scales fill 0->m2). */
.pl-cart-progress.pl-ship-free .pl-cart-progress__milestone[data-index="1"] {
  display: none;
}
/* End PUMPLAB_CART_PROGRESS_TIER_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;
    /* PUMPLAB_QA_DD_HEIGHT_V1 — keep the panel short so a long flavour list scrolls
       INTERNALLY instead of filling the viewport and forcing a page scroll to reach
       the bottom options. Inline quick-add on product cards only (never the PDP). */
    max-height: min(58vh, 340px);
    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 — fade in/out (was sweep-up; replaced 2026-04-26) */
.product-info__accordion::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.15);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-info__accordion:not([open]):not(.pl-icon-sticker):hover::after {
    opacity: 1;
  }
  .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 {
  opacity: 1;
}

/* 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: var(--pl-search-cover-heading, "");
    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);
  }

  /* PUMPLAB_QUICKBUY_FLAVOR_DD_V1 — inside the compact quick-buy popup the forced
     dropdown must stay short and scroll internally, otherwise a long flavour list
     overflows the modal and the bottom options are unreachable. PDP sample-sachet
     dropdown keeps the taller panel above (it lives on a full page, not a modal). */
  .quick-buy-drawer .pl-variant-dd--desktop .pl-variant-dd__panel {
    max-height: 280px;
  }

  .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 footer (replaced by persistent footer) */
  .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 .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_NAV_ALLPRODUCTS_V1 — root-panel "Alla produkter"-link mirrors the sub-panels' back-row
   exactly: same look (small uppercase subdued — the first-panel rule forces 1.55rem/700 on every
   first-ul link, hence the explicit override) AND same position. Sub-panels start their content at
   --pl-drawer-content-top (48px) while the root panel pushes its links down 14vh, so the row is
   absolute-positioned to the sub-panels' top slot instead of riding in the link flow. */
.navigation-drawer .panel:first-child { position: relative; }
.navigation-drawer .panel:first-child > .panel__wrapper > .panel__scroller > ul:first-child > li.pl-nav-allproducts {
  position: absolute;
  top: calc(var(--pl-drawer-content-top, 48px) + 14px);
  left: var(--spacing-6);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.navigation-drawer .panel:first-child > .panel__wrapper > .panel__scroller > ul:first-child > li.pl-nav-allproducts a {
  text-transform: uppercase;
  opacity: 0.55;
  min-height: 0;
}
/* End PUMPLAB_NAV_ALLPRODUCTS_V1 */

/* PUMPLAB_NAV_MEMBER_V1 — Nike-style member pitch in the mobile nav drawer (logged-out only).
   Lives in the persistent footer, above social/localization. Buttons mirror the drop-hero
   CTA pair (7px radius, 600 weight, white solid + 2px white outline) — the site's standard. */
.pl-nav-member { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 10px; }
.pl-nav-member__text { margin: 0; font-size: 1rem; line-height: 1.55; color: rgb(255 255 255 / .65); }
.pl-nav-member__text strong { color: #fff; font-weight: 700; }
.pl-nav-member__text a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pl-nav-member__btns { display: flex; gap: 12px; }
.pl-nav-member__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border: 1.5px solid transparent; border-radius: 7px; font-weight: 600; font-size: .95rem; letter-spacing: .015em; text-decoration: none; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; }
.pl-nav-member__btn:active { transform: scale(.97); }
.pl-nav-member__btn--solid { background: #fff; color: #101010; border-color: #fff; }
.pl-nav-member__btn--ghost { background: transparent; color: #fff; border-width: 2px; border-color: #fff; }
/* End PUMPLAB_NAV_MEMBER_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;
  }

  /* Keep the drawer content top-aligned */
  .navigation-drawer .panel__scroller {
    justify-content: flex-start;
    flex: 1;
  }
}
/* 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. -8px end-nudge (same as the account
     icon) so search→account→cart all share the tight spacing — the default li gap reads
     too wide between search and account. */
  .header__secondary-nav > ul > li > a.tap-area[aria-controls="search-drawer"] {
    display: block !important;
    margin-inline-start: -1px;
    margin-inline-end: -10px;
  }

  /* Account icon shown on mobile (loyalty hub + notification pill live here).
     -8px end-nudge pulls the cart closer (the old search nudge feel, now on the
     account→cart gap which read too wide). */
  .header__secondary-nav > ul > li > a.tap-area[href*="account"] {
    display: block !important;
    margin-inline-end: -10px;
  }

  /* 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;
  /* Was the brand accent; now a fixed dark grey (Isac 2026-07-09) — subtle behind the text on
     the dark footer, a clear dark grey on the light/cream footer. No accent. */
  color: #353535;
  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) {
  /* Title only — NOT the compact beta note (also a <p> in this block). Without :not() the beta
     inherited the giant clamp font + white-space:nowrap → it blew up huge and overflowed right,
     dragging the column + email input off-screen. */
  .footer__block--newsletter p:not(.pl-beta-compact) {
    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;
    white-space: normal;
    flex-shrink: 1;
    min-width: 0;
    text-align: center;
    text-wrap: balance;
    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 */

/* PL_JUDGEME_REVIEWS_V1 — On-site Judge.me product reviews, brand styled.
   First-pass styling. Judge.me widget classes targeted: .jdgm-rev-widg (container),
   .jdgm-rev-widg__title, .jdgm-rev-widg__summary, .jdgm-star (.jdgm--on/.jdgm--off/.jdgm--half),
   .jdgm-rev (each review), .jdgm-write-rev-link, .jdgm-paginate, .jdgm-form.
   Iterate after first test theme push when real HTML is visible. */
body.page-product .jdgm-rev-widg,
body.page-product #judgeme_product_reviews {
  --pl-jdgm-surface-elevated: #232323;
  --pl-jdgm-border: rgb(255 255 255 / 0.08);
  --pl-jdgm-text: #FFFFFF;
  --pl-jdgm-text-muted: rgb(255 255 255 / 0.58);
  --pl-jdgm-text-faint: rgb(255 255 255 / 0.30);
  --pl-jdgm-accent: #A79F8A;
  --pl-jdgm-star-filled: #FFFFFF;
  --pl-jdgm-star-stroke: #FFFFFF;
  --pl-jdgm-star-empty: rgb(255 255 255 / 0.18);

  scroll-margin-top: clamp(80px, 12vh, 120px);
}

body.page-product .jdgm-rev-widg {
  background: transparent;
  border: 0;
  padding: 0;
  margin-block: var(--spacing-8);
  color: var(--pl-jdgm-text);
  font-family: var(--font-body-family);
}

/* Heading — match the quieter, left-aligned section subheader vibe used by
   accordion blocks (Varningar etc.) on the product page. Small caps feel,
   not the giant centered Monument-style. */
body.page-product .jdgm-rev-widg__title {
  font-family: var(--font-body-family);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  letter-spacing: 0.12em;
  color: var(--pl-jdgm-text);
  text-align: left !important;
  margin: 0 0 var(--spacing-5);
  padding-block-end: var(--spacing-4);
  border-block-end: 1px solid var(--pl-jdgm-border);
}

/* Summary row — "4.8 ★★★★★ Baserat på N recensioner" — flush left, tight gap. */
body.page-product .jdgm-rev-widg__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: var(--spacing-2);
  padding: 0 !important;
  padding-block-end: var(--spacing-6) !important;
  border-block-end: 1px solid var(--pl-jdgm-border);
  margin: 0 0 var(--spacing-6) !important;
}

body.page-product .jdgm-rev-widg__summary-text,
body.page-product .jdgm-rev-widg__summary-average {
  color: var(--pl-jdgm-text-muted);
  font-size: 0.95rem;
}

/* Rating number injected before summary stars (e.g. "4.8 ★★★★★ Baserat på...")
   No margin-inline-end — the parent .jdgm-rev-widg__summary's `gap` handles spacing. */
body.page-product .pl-jdgm-summary-rating {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.15rem;
  color: #FFFFFF;
  line-height: 1;
}

body.page-product .jdgm-rev-widg__summary-average {
  font-weight: 700;
  color: var(--pl-jdgm-text);
  font-size: 1.1rem;
}

/* Stars — Judge.me's font-rendered stars are too round for the brand.
   PUMPLAB_JUDGEME_BOTTOM_V1 JS replaces them with sharp SVG stars matching
   the rating-badge path. Below: only color fallback if JS hasn't run yet. */
body.page-product .jdgm-rev-widg .jdgm-star.jdgm--on,
body.page-product .jdgm-rev-widg .jdgm-star.jdgm--half {
  color: var(--pl-jdgm-star-filled) !important;
}

body.page-product .jdgm-rev-widg .jdgm-star.jdgm--off {
  color: var(--pl-jdgm-star-empty) !important;
}

/* Brand-built sharp star row (injected by JS). Same SVG path as .pl-rating-badge.
   Three sizes for summary/review-row/histogram contexts. */
body.page-product .pl-jdgm-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

body.page-product .pl-jdgm-stars--lg .pl-jdgm-star { width: 22px; height: 22px; }
body.page-product .pl-jdgm-stars--md .pl-jdgm-star { width: 16px; height: 16px; }
body.page-product .pl-jdgm-stars--sm .pl-jdgm-star { width: 13px; height: 13px; }

body.page-product .pl-jdgm-stars--lg { gap: 5px; }
body.page-product .pl-jdgm-stars--md { gap: 3px; }
body.page-product .pl-jdgm-stars--sm { gap: 2px; }

body.page-product .pl-jdgm-star {
  display: inline-block;
  flex-shrink: 0;
}

/* NUCLEAR ALIGNMENT FIX — strip ALL padding + margin from EVERY descendant
   of a review (status pills get their pill-padding restored below). The
   visible avatar slot indent is most likely caused by EITHER a parent
   wrapper that still has padding from the avatar era, OR an avatar img
   that wasn't matched by our display:none rule (so it's still taking space). */

/* Hide all images inside reviews — kills any avatar img regardless of class */
body.page-product .jdgm-rev img {
  display: none !important;
}

/* Strip every form of padding/margin/text-indent/transform on descendants */
body.page-product .jdgm-rev *:not(.jdgm-rev__buyer-badge):not(.jdgm-rev__verified-badge):not(.jdgm-rev__verified):not(.pl-jdgm-stars) {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  transform: none !important;
  inset-inline-start: 0 !important;
  left: 0 !important;
}

/* Restore status pill padding (so they keep their rounded shape) */
body.page-product .jdgm-rev__buyer-badge,
body.page-product .jdgm-rev__verified-badge,
body.page-product .jdgm-rev__verified {
  padding-inline: 0.55rem !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
}

/* Restore the star nudge that the universal reset just killed */
body.page-product .jdgm-rev .pl-jdgm-stars {
  transform: translateY(-1px) !important;
}

/* Clean header row built by flattenReviewLayout — flex row with consistent gap.
   This is OUR wrapper now (not Judge.me's), so it has predictable layout. */
body.page-product .pl-jdgm-rev-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--spacing-3) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

body.page-product .pl-jdgm-rev-author {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
}

/* Restore pill-padding on status pills (they keep their rounded shape) */
body.page-product .jdgm-rev__buyer-badge,
body.page-product .jdgm-rev__verified-badge,
body.page-product .jdgm-rev__verified {
  padding-inline: 0.55rem !important;
  padding-left: 0.55rem !important;
  padding-right: 0.55rem !important;
}

/* Force flex+center on ANY wrapper around rating/timestamp/author. We don't
   know Judge.me's exact wrapper class so :has() finds any element that
   directly contains one of these. Includes author-wrapper as a target so
   name+VERIFIED pill render on the same baseline as stars+date. */
body.page-product .jdgm-rev:has(> .jdgm-rev__rating, > .jdgm-rev__timestamp, > .jdgm-rev__author, > .jdgm-rev__author-wrapper),
body.page-product .jdgm-rev *:has(> .jdgm-rev__rating, > .jdgm-rev__timestamp, > .jdgm-rev__author, > .jdgm-rev__author-wrapper, > .jdgm-rev__buyer-badge) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--spacing-3) !important;
}

/* Author + VERIFIED pill cluster — inline-flex so they stay together AND
   align-center matches the outer flex baseline */
body.page-product .jdgm-rev__author-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-2) !important;
}

/* Belt-and-braces baseline on every header item. line-height:1 + align-self:
   center kills any baseline drift between SVG stars and text siblings. */
body.page-product .jdgm-rev .jdgm-rev__rating,
body.page-product .jdgm-rev .jdgm-rev__timestamp,
body.page-product .jdgm-rev .jdgm-rev__author,
body.page-product .jdgm-rev .jdgm-rev__author-wrapper,
body.page-product .jdgm-rev .jdgm-rev__buyer-badge,
body.page-product .jdgm-rev .jdgm-rev__verified-badge,
body.page-product .jdgm-rev .pl-jdgm-stars {
  align-self: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* Manual nudge — SVG stars optically center 1px lower than text caps in
   review-row context. Lift them so they read as on the same baseline. */
body.page-product .jdgm-rev .pl-jdgm-stars {
  transform: translateY(-1px);
}

/* Review root: column layout for header / title / body */
body.page-product .jdgm-rev {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--spacing-2) !important;
}

/* Timestamp styling */
body.page-product .jdgm-rev .jdgm-rev__timestamp,
body.page-product .pl-jdgm-accordion .jdgm-rev__timestamp {
  color: var(--pl-jdgm-text-faint, rgb(255 255 255 / 0.30));
  font-size: 0.85rem;
}

/* Histogram row alignment */
body.page-product .jdgm-histogram-row,
body.page-product [class*="histogram-row"] {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Write a review button — brand corner radius. The original Judge.me top
   button is hidden once .pl-jdgm-has-bottom is added by JS (see PL_JUDGEME_BOTTOM_V1). */
body.page-product .jdgm-write-rev-link,
body.page-product .jdgm-rev-widg__write-rev-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #101010;
  font-family: var(--font-body-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  border-radius: var(--rounded, 6px);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.32s ease, color 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-product .jdgm-write-rev-link:hover,
  body.page-product .jdgm-rev-widg__write-rev-link:hover {
    background: var(--pl-jdgm-accent);
    color: #FFFFFF;
  }
}

/* Sort / filter selects */
body.page-product .jdgm-rev-widg__sort-wrapper select,
body.page-product .jdgm-rev-widg select {
  background: rgb(255 255 255 / 0.06);
  color: var(--pl-jdgm-text);
  border: 1px solid var(--pl-jdgm-border);
  border-radius: var(--rounded, 8px);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body-family);
  font-size: 0.9rem;
}

/* Individual review — tight vertical rhythm. No dividers between reviews. */
body.page-product .jdgm-rev {
  background: transparent;
  border-block-start: 0;
  padding-block-start: var(--spacing-3);
  padding-block-end: 10px;
  margin: 0;
}

body.page-product .jdgm-rev:first-of-type {
  padding-block-start: 0;
}

/* Extra gap between consecutive reviews so each is visually distinct. Doesn't
   affect first review (no preceding sibling) or last review (no margin-block-end). */
body.page-product .jdgm-rev:not(.pl-jdgm-no-body):not(.pl-jdgm-hidden) + .jdgm-rev:not(.pl-jdgm-no-body):not(.pl-jdgm-hidden) {
  margin-block-start: var(--spacing-2);
}

/* Kill Judge.me's default margin-block on review children (title/body) so the
   only vertical spacing inside a review is the flex gap (var(--spacing-2)).
   Otherwise stars-to-title gap is much bigger than title-to-body. */
body.page-product .jdgm-rev > *,
body.page-product .jdgm-rev > * > * {
  margin-block: 0 !important;
}

body.page-product .jdgm-rev__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  margin-block-end: var(--spacing-3);
}

body.page-product .jdgm-rev__author {
  font-weight: 700;
  color: var(--pl-jdgm-text);
  font-size: 0.95rem;
}

body.page-product .jdgm-rev__timestamp {
  color: var(--pl-jdgm-text-faint);
  font-size: 0.85rem;
}

body.page-product .jdgm-rev__title {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 var(--spacing-2);
  color: var(--pl-jdgm-text);
}

body.page-product .jdgm-rev__body {
  color: rgb(255 255 255 / 0.85);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* Verified buyer badge */
body.page-product .jdgm-rev__buyer-badge,
body.page-product .jdgm-rev__verified-badge {
  background: rgb(167 159 138 / 0.15);
  color: var(--pl-jdgm-accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

/* Reply (shop owner reply) */
body.page-product .jdgm-rev__reply {
  background: rgb(255 255 255 / 0.04);
  border-radius: var(--rounded, 8px);
  padding: var(--spacing-3) var(--spacing-4);
  margin-block-start: var(--spacing-3);
  border-inline-start: 2px solid var(--pl-jdgm-accent);
}

body.page-product .jdgm-rev__reply-author {
  color: var(--pl-jdgm-accent);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Pagination — hidden on PDP. All reviews are accessed via the "Se recensioner"
   modal (PUMPLAB_JUDGEME_MODAL_V1) instead. */
body.page-product .jdgm-paginate,
body.page-product [class*="jdgm-paginate"] {
  display: none !important;
}

/* Review submission form */
body.page-product .jdgm-form {
  background: var(--pl-jdgm-surface-elevated);
  border: 1px solid var(--pl-jdgm-border);
  border-radius: var(--rounded, 8px);
  padding: var(--spacing-6);
  margin-block-start: var(--spacing-6);
}

body.page-product .jdgm-form input[type="text"],
body.page-product .jdgm-form input[type="email"],
body.page-product .jdgm-form textarea {
  background: rgb(255 255 255 / 0.05);
  color: var(--pl-jdgm-text);
  border: 1px solid var(--pl-jdgm-border);
  border-radius: var(--rounded, 8px);
  padding: 0.75rem 1rem;
  font-family: var(--font-body-family);
  font-size: 0.95rem;
  width: 100%;
  margin-block-end: var(--spacing-3);
  transition: border-color 0.25s ease;
}

body.page-product .jdgm-form input::placeholder,
body.page-product .jdgm-form textarea::placeholder {
  color: var(--pl-jdgm-text-faint);
}

body.page-product .jdgm-form input:focus,
body.page-product .jdgm-form textarea:focus {
  outline: none;
  border-color: var(--pl-jdgm-accent);
}

body.page-product .jdgm-form .jdgm-submit-rev {
  background: #FFFFFF;
  color: #101010;
  font-family: var(--font-body-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--rounded, 6px);
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background-color 0.32s ease, color 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-product .jdgm-form .jdgm-submit-rev:hover {
    background: var(--pl-jdgm-accent);
    color: #FFFFFF;
  }
}

/* Mobile */
@media (max-width: 699px) {
  body.page-product .jdgm-rev-widg {
    padding: var(--spacing-5);
    border-radius: var(--rounded, 8px);
  }

  body.page-product .jdgm-rev-widg__title {
    font-size: 1.4rem;
  }

  body.page-product .jdgm-rev-widg__summary {
    gap: var(--spacing-3);
  }

  body.page-product .jdgm-write-rev-link {
    width: 100%;
    margin-block-start: var(--spacing-3);
  }
}
/* PL_JUDGEME_REVIEWS_V1 — cleanup: hide Judge.me ornamental clutter
   that doesn't fit the brand: Diamond/Bronze authenticity medals,
   "Verifierad" link, pin icon on pinned reviews, default avatar placeholder,
   green Judge.me verified-shop icon, broken sort dropdown. */

/* Green Judge.me verified-shop icon (next to "Baserat på N recensioner") */
body.page-product .jdgm-rev-widg__verified-icon,
body.page-product .jdgm-rev-widg__verified-text-icon,
body.page-product .jdgm-shop-badge,
body.page-product .jdgm-shop-badge-icon,
body.page-product .jdgm-rev-widg img[src*="judge.me"],
body.page-product .jdgm-rev-widg img[src*="judgeme"],
body.page-product .jdgm-rev-widg__summary img,
body.page-product .jdgm-rev-widg__summary svg:not(.jdgm-star):not([class*="star"]) {
  display: none !important;
}

/* Sort dropdown — Judge.me's custom component doesn't render cleanly in our
   dark theme. Hide for V1, revisit later with a brand-built sort if needed.
   Most users don't sort reviews; "most recent" default is fine. */
body.page-product .jdgm-rev-widg__sort-wrapper,
body.page-product .jdgm-sort-dropdown,
body.page-product .jdgm-rev-widg__sort,
body.page-product [class*="sort-dropdown"],
body.page-product .jdgm-rev-widg select {
  display: none !important;
}


/* Trust medals row (Diamond Authenticity / Bronze Transparency laurel wreaths) */
body.page-product .jdgm-rev-widg [class*="medal"],
body.page-product .jdgm-rev-widg [class*="medals"],
body.page-product .jdgm-rev-widg [class*="authenticity"],
body.page-product .jdgm-rev-widg .jdgm-rev-widg__verified-badge,
body.page-product .jdgm-rev-widg .jdgm-rev-widg__verified-text,
body.page-product .jdgm-rev-widg .jdgm-medals-section,
body.page-product .jdgm-rev-widg .jdgm-rev-widg__authenticity-medals {
  display: none !important;
}

/* "Verifierad" external link with green checkmark below medals */
body.page-product .jdgm-rev-widg a[href*="judge.me/verified"],
body.page-product .jdgm-rev-widg a[href*="/verified-by-judgeme"],
body.page-product .jdgm-rev-widg .jdgm-verified-badge,
body.page-product .jdgm-rev-widg .jdgm-rev-widg__verified-link {
  display: none !important;
}

/* Pin icon on pinned reviews */
body.page-product .jdgm-rev [class*="pin-icon"],
body.page-product .jdgm-rev [class*="rev__pin"],
body.page-product .jdgm-rev .jdgm-rev__pin,
body.page-product .jdgm-rev .jdgm-rev__pinned-icon {
  display: none !important;
}

/* Author avatar placeholder (gray person silhouette) */
body.page-product .jdgm-rev .jdgm-rev__icon,
body.page-product .jdgm-rev .jdgm-rev__author-icon,
body.page-product .jdgm-rev .jdgm-rev__pic {
  display: none !important;
}

/* Histogram bars (rating snapshot 5/4/3/2/1) — make brand-styled */
body.page-product .jdgm-histogram,
body.page-product .jdgm-histogram-row,
body.page-product .jdgm-rev-widg__histogram {
  background: transparent !important;
}

body.page-product .jdgm-histogram-row__bar,
body.page-product [class*="histogram"] [class*="bar"]:not([class*="content"]):not([class*="fill"]) {
  background: rgb(255 255 255 / 0.08) !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden !important;
}

body.page-product .jdgm-histogram-row__bar-content,
body.page-product [class*="histogram"] [class*="bar-content"],
body.page-product [class*="histogram"] [class*="bar-fill"] {
  background: #FFFFFF !important;
  border-radius: 999px !important;
  height: 100% !important;
}

/* Histogram row — number labels + count */
body.page-product [class*="histogram-row"] {
  color: var(--pl-jdgm-text-muted);
  font-size: 0.85rem;
}

/* Verifierad-köpare badge — replaced "VERIFIERAD" text with a checkmark icon
   in a small circle. Original text stays in DOM for screen readers (font-size:0
   hides it visually but most SRs read from DOM not rendered styles).
   Cleaner than tiny all-caps text which renders awkwardly at small sizes. */
body.page-product .jdgm-rev__buyer-badge,
body.page-product .jdgm-rev__verified-badge,
body.page-product .jdgm-rev__verified {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 0.12) !important;
  color: #FFFFFF !important;
  font-size: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

body.page-product .jdgm-rev__buyer-badge::before,
body.page-product .jdgm-rev__verified-badge::before,
body.page-product .jdgm-rev__verified::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* PL_JUDGEME_BOTTOM_V1 — Bottom action bar (Se recensioner + Skriv en recension)
   injected by JS once Judge.me widget has rendered. Replaces the original
   top write-button placement which doesn't fit the brand UX. */

/* Hide the original Judge.me write button once the bottom bar exists.
   Belt-and-braces: hide on both the body class and the widget class. */
body.page-product .jdgm-rev-widg.pl-jdgm-has-bottom .jdgm-write-rev-link,
body.page-product .jdgm-rev-widg.pl-jdgm-has-bottom .jdgm-rev-widg__write-rev-link {
  display: none !important;
}

.pl-jdgm-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding-top: var(--spacing-3);
}

/* Kill the theme .accordion__content default margin-block-end so there's no
   dead space below the bottom action bar inside our reviews accordion. */
.pl-jdgm-accordion .accordion__content {
  margin-block-end: 0 !important;
  transform: none !important;
}

/* Loading state — hide ALL review-like elements during loading. Multiple
   selectors + !important to catch any DOM structure variation Judge.me
   uses across products. Only our skeleton placeholders take layout space. */
body.page-product .jdgm-rev-widg__reviews.pl-jdgm-loading > *:not(.pl-jdgm-skeleton-list),
body.page-product .jdgm-rev-widg.pl-jdgm-loading .jdgm-rev,
body.page-product .jdgm-rev-widg.pl-jdgm-loading .jdgm-rev-wrap {
  display: none !important;
}

/* When loading class removed, reviews fade in via animation. Can't use
   transition because display:none → display:block doesn't transition. */
body.page-product .jdgm-rev-widg__reviews:not(.pl-jdgm-loading) > .jdgm-rev,
body.page-product .jdgm-rev-widg__reviews:not(.pl-jdgm-loading) > .jdgm-rev-wrap {
  animation: pl-jdgm-review-fadein 0.32s cubic-bezier(.22, 1, .36, 1);
}

@keyframes pl-jdgm-review-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide Judge.me's default stars from page load. Our applyBrandStars JS
   replaces them with .pl-jdgm-stars (different class, not affected by this).
   Prevents the visible "Judge.me outline → our brand stars" swap that was
   noticeable especially during desktop accordion stagger entrance. */
body.page-product .jdgm-rev-widg .jdgm-star {
  display: none;
}

/* Skeleton loaders — placeholders shown during 2s init window so user doesn't
   see blank space if they scroll to the (open-by-default on desktop) reviews
   accordion before the real reviews fade in. Removed by JS at reveal.
   Sizing tuned to approximate a typical short review's height to minimize
   layout shift when real reviews fade in. */
body.page-product .pl-jdgm-skeleton-list {
  display: flex;
  flex-direction: column;
}

/* Match real .jdgm-rev paddings exactly so layout doesn't shift when real
   reviews fade in: first review padding-top:0 + padding-bottom:10px,
   subsequent get padding-top:spacing-3 + margin-top:spacing-2. */
body.page-product .pl-jdgm-skeleton-review {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--spacing-3) 0 10px;
}

body.page-product .pl-jdgm-skeleton-review:first-child {
  padding-block-start: 0;
}

body.page-product .pl-jdgm-skeleton-review:not(:first-child) {
  margin-block-start: var(--spacing-2);
}

body.page-product .pl-jdgm-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 2px;
}

body.page-product .pl-jdgm-skeleton-bar {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: pl-skeleton-shimmer 1.6s infinite linear;
  border-radius: 3px;
  height: 8px;
}

body.page-product .pl-jdgm-skeleton-bar--stars {
  width: 70px;
  height: 10px;
}

body.page-product .pl-jdgm-skeleton-bar--date {
  width: 60px;
  height: 8px;
}

body.page-product .pl-jdgm-skeleton-bar--author {
  width: 95px;
  height: 9px;
}

body.page-product .pl-jdgm-skeleton-bar--title {
  width: 32%;
  height: 11px;
}

body.page-product .pl-jdgm-skeleton-bar--body {
  width: 90%;
  height: 8px;
}

body.page-product .pl-jdgm-skeleton-bar--body-short {
  width: 60%;
}

@keyframes pl-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade-in for brand stars when JS appends them. Smooths out the layout
   shift from "no stars" (CSS-hidden Judge.me defaults) to "brand stars". */
body.page-product .pl-jdgm-stars {
  animation: pl-jdgm-stars-fadein 0.45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes pl-jdgm-stars-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Empty state — shown by JS when 5★ + body + age filters eliminate all
   reviews. The "Skriv en recension" button below is the user's CTA. */
body.page-product .pl-jdgm-empty {
  text-align: center;
  padding: 24px 16px 16px;
  color: rgb(255 255 255 / 0.55);
}

body.page-product .pl-jdgm-empty__text {
  font-family: var(--font-body-family);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
  margin-inline: auto;
}

/* Long-review "Se mer" expand — clamps body to 3 lines. JS injects the toggle
   button only when the body actually overflows when clamped. */
body.page-product .jdgm-rev__body.pl-jdgm-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

body.page-product .pl-jdgm-expand {
  display: inline-block;
  margin-block-start: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-product .pl-jdgm-expand:hover {
    color: #FFFFFF;
  }
}

/* Custom .pl-jdgm-btn — separate from theme .button class to keep these
   simpler and visually distinct from the ATC. Primary white pill with accent
   hover, secondary dark surface with subtle brighten on hover. */
.pl-jdgm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body-family);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--rounded, 6px);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.32s ease, color 0.32s ease, border-color 0.32s ease;
}

.pl-jdgm-btn--primary {
  background: #FFFFFF;
  color: #101010;
  border-color: #FFFFFF;
}

.pl-jdgm-btn--secondary {
  background: #1E1E1E;
  color: #FFFFFF;
  border-color: #1E1E1E;
}

@media (hover: hover) and (pointer: fine) {
  .pl-jdgm-btn--primary:hover {
    background: #B0B0B0;
    color: #101010;
    border-color: #B0B0B0;
  }

  .pl-jdgm-btn--secondary:hover {
    background: #282828;
    border-color: #282828;
  }
}

/* Mobile: stack vertically full-width */
@media (max-width: 699px) {
  .pl-jdgm-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .pl-jdgm-btn {
    width: 100%;
  }
}
/* End PL_JUDGEME_BOTTOM_V1 */

/* PL_JUDGEME_ACCORDION_V1 — JS wraps the Judge.me widget in a real
   <details is="accordion-disclosure"> with class "product-info__accordion"
   so it inherits ALL the existing brand accordion behavior:
     - Theme's smooth height open/close transition (theme.js AccordionDisclosure)
     - +/- indicator toggle (theme.css:17450 .pl-accordion-indicator)
     - Hover effects, sticker icon transitions
   Below: only review-specific overrides — rating preview placement, hide
   internal Judge.me title, star icon styling + hover animation. */

/* Spacing handled at the DOM level: JS moves our accordion to be a true sibling
   of the other .product-info__accordion elements, which makes the theme's
   `.accordion + .accordion { border-block-start-width: 0 }` rule (theme.css:461)
   apply automatically. No negative margins, no parent-gap hacks needed.
   We just hide the now-empty original Judge.me block wrapper. */
.pl-jdgm-orphaned {
  display: none !important;
}

/* Scroll-margin-top — when the rating badge link scrolls to the accordion,
   land with breathing room at the top instead of flush against the viewport
   edge. Tuned: ~16vh of context above clears the sticky header without
   pushing the accordion too far down on tall screens. */
body.page-product .pl-jdgm-accordion {
  scroll-margin-top: clamp(80px, 10vh, 120px);
}

@media (max-width: 699px) {
  body.page-product .pl-jdgm-accordion {
    scroll-margin-top: 60px;
  }
}

/* Hide reviews beyond MAX_VISIBLE_REVIEWS limit (set in JS) — users see
   "Se recensioner" link to Judge.me hosted page for the full list. */
body.page-product .pl-jdgm-hidden {
  display: none !important;
}

/* Hide reviews that have no body content (title-only or star-only). These
   reviews are uninformative and clutter the PDP. .pl-jdgm-no-body class
   added by sortAndFilterByBody() in layout/theme.liquid. */
body.page-product .pl-jdgm-no-body {
  display: none !important;
}

/* Override .accordion__toggle's space-between so rating clusters with the
   indicator on the right (instead of being centered in the row) */
.pl-jdgm-accordion .accordion__toggle {
  justify-content: flex-start !important;
}

.pl-jdgm-accordion .accordion__toggle > .text-with-icon {
  margin-inline-end: auto;
}

/* Rating preview — sits between text-with-icon (auto-pushed left) and the
   indicator (right edge). Extra margin-inline-end pushes stars away from the
   + so they're not glued to the indicator. */
.pl-jdgm-accordion__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: var(--spacing-5);
  font-family: var(--font-body-family);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.58);
  line-height: 1;
}

/* Summary stars (large, in the open accordion summary row "4.8 ★★★★★ Based...")
   — nudge down 2px so they align with the "4.8" baseline + "Based on..." text. */
body.page-product .jdgm-rev-widg__summary-stars .pl-jdgm-stars,
body.page-product .jdgm-rev-widg__summary-stars.pl-jdgm-stars,
body.page-product .pl-jdgm-stars--lg {
  transform: translateY(2px);
}

/* Header xs stars (in closed accordion title row) — nudge UP 2px to align
   with the heading text caps. */
body.page-product .pl-jdgm-accordion__rating .pl-jdgm-stars {
  transform: translateY(-2px);
}

.pl-jdgm-accordion__rating-num {
  color: #FFFFFF;
  font-weight: 700;
}

.pl-jdgm-accordion__rating-count {
  font-weight: 500;
  color: rgb(255 255 255 / 0.30);
}

/* Extra-small star size for the accordion header preview — matches the
   "4.80" text height so visual weight is balanced. */
body.page-product .pl-jdgm-stars--xs .pl-jdgm-star {
  width: 14px;
  height: 14px;
}

body.page-product .pl-jdgm-stars--xs {
  gap: 2px;
}

/* Star icon — line-art matching other product page icons. Sparkles fade in
   on hover and "twinkle" with a subtle scale pulse. Click adds .pl-icon-sticker
   which keeps the sparkles visible while the accordion is open. */
.pl-icon-reviews {
  overflow: visible; /* sparkles can extend beyond the 24x24 box */
}

.pl-icon-reviews__sparkles {
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.3s ease;
}

.pl-icon-reviews__sparkle {
  transform-origin: center;
}

.pl-icon-reviews__sparkle--1 {
  transform: scale(0.6);
  transform-origin: 20.5px 4.25px;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.pl-icon-reviews__sparkle--2 {
  transform: scale(0.6);
  transform-origin: 3px 20.5px;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1) 0.05s;
}

/* Hover state — sparkles appear + twinkle */
@media (hover: hover) and (pointer: fine) {
  .product-info__accordion.pl-jdgm-accordion:hover .pl-icon-reviews__sparkles {
    opacity: 0.85;
  }

  .product-info__accordion.pl-jdgm-accordion:hover .pl-icon-reviews__sparkle--1,
  .product-info__accordion.pl-jdgm-accordion:hover .pl-icon-reviews__sparkle--2 {
    transform: scale(1);
  }

  /* Star body: subtle rotation + slight scale on hover */
  .product-info__accordion.pl-jdgm-accordion:hover .pl-icon-reviews path:not([opacity]) {
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
    transform-origin: 12px 12px;
  }
}

/* Open / sticker state — sparkles stay visible at full strength */
.product-info__accordion.pl-jdgm-accordion.pl-icon-sticker .pl-icon-reviews__sparkles {
  opacity: 1;
}

.product-info__accordion.pl-jdgm-accordion.pl-icon-sticker .pl-icon-reviews__sparkle--1,
.product-info__accordion.pl-jdgm-accordion.pl-icon-sticker .pl-icon-reviews__sparkle--2 {
  transform: scale(1);
}

/* Open / sticker state — gentle scale + rotation. Uses CSS transition (not
   keyframe animation) so it animates SMOOTHLY in BOTH directions when the
   class is added (open) or removed (close). Keyframe animations only run
   when the trigger class exists, so on close they snap back to default. */
.pl-icon-reviews {
  transform: scale(1) rotate(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.product-info__accordion.pl-jdgm-accordion.pl-icon-sticker .pl-icon-reviews {
  transform: scale(1.08) rotate(4deg);
}

/* Hide Judge.me's internal "KUNDRECENSIONER" title — the accordion header
   already serves that role. */
.pl-jdgm-accordion .jdgm-rev-widg__title {
  display: none !important;
}

/* Wrapped widget no longer needs its own outer margin */
.pl-jdgm-accordion .jdgm-rev-widg {
  margin-block: 0 !important;
}

/* Remove the accordion's bottom border line — keep only the top divider. */
body.page-product details.pl-jdgm-accordion,
body.page-product .pl-jdgm-accordion,
body.page-product .accordion.pl-jdgm-accordion,
body.page-product .product-info__accordion.pl-jdgm-accordion,
body.page-product details[is="accordion-disclosure"].pl-jdgm-accordion {
  border-block-end-width: 0 !important;
  border-bottom-width: 0 !important;
  border-bottom: 0 !important;
  border-block-end: 0 !important;
  border-bottom-style: none !important;
  border-bottom-color: transparent !important;
}

/* DO NOT kill the .pl-jdgm-accordion::before border — that's the corner-
   brackets effect on open accordions (theme.css:17541). Removing it broke
   the visual treatment that all the other accordions have. */

/* Judge.me adds .jdgm-divider-top class to every review for top borders.
   We want NO dividers between reviews (already removed via .jdgm-rev rule)
   so kill the class's border too. */
body.page-product .jdgm-divider-top,
body.page-product .jdgm-rev.jdgm-divider-top {
  border-top: 0 !important;
  border-block-start: 0 !important;
}

/* Mobile: tighter rating preview so the header row fits */
@media (max-width: 699px) {
  .pl-jdgm-accordion__rating {
    font-size: 0.75rem;
    gap: 6px;
    margin-inline-end: var(--spacing-2);
  }

  .pl-jdgm-accordion__rating-count {
    display: none; /* drop count on mobile, just stars + number */
  }

  body.page-product .pl-jdgm-stars--xs .pl-jdgm-star {
    width: 10px;
    height: 10px;
  }
}
/* End PL_JUDGEME_ACCORDION_V1 */
/* End PL_JUDGEME_REVIEWS_V1 */

/* PL_JUDGEME_WRITE_MODAL_V1 — Brand-styled write-review modal.
   POSTs to Judge.me /api/v1/reviews via public token.
   Triggered by clicking "Skriv en recension" in the bottom action bar. */

.pl-jdgm-write-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.pl-jdgm-write-modal[hidden] {
  display: none;
}

/* Backdrop transitions its OWN background-color + blur for a true smooth fade.
   Putting opacity on the wrapper made browsers snap-render backdrop-filter
   at threshold opacity values instead of animating the blur progressively. */
.pl-jdgm-write-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background-color 0.34s cubic-bezier(.22, 1, .36, 1),
              backdrop-filter 0.34s cubic-bezier(.22, 1, .36, 1),
              -webkit-backdrop-filter 0.34s cubic-bezier(.22, 1, .36, 1);
}

.pl-jdgm-write-modal.is-open .pl-jdgm-write-modal__backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pl-jdgm-write-modal__panel {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(calc(-50% + 16px));
  opacity: 0;
  background: #1E1E1E;
  border-radius: var(--rounded, 6px);
  padding: 28px 28px 24px;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.34s cubic-bezier(.22, 1, .36, 1),
              opacity 0.28s cubic-bezier(.22, 1, .36, 1);
  -webkit-overflow-scrolling: touch;
}

.pl-jdgm-write-modal.is-open .pl-jdgm-write-modal__panel {
  transform: translateY(-50%);
  opacity: 1;
}

/* Header: product info + close X */
.pl-jdgm-write-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pl-jdgm-write-modal__product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pl-jdgm-write-modal__product-img {
  width: 60px;
  height: 60px;
  border-radius: var(--rounded, 6px);
  object-fit: cover;
  flex-shrink: 0;
}

.pl-jdgm-write-modal__product-info {
  min-width: 0;
}

.pl-jdgm-write-modal__product-name {
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-jdgm-write-modal__product-price {
  font-family: var(--font-body-family);
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.58);
  margin-top: 2px;
}

.pl-jdgm-write-modal__close {
  width: 36px;
  height: 36px;
  border-radius: var(--rounded, 6px);
  border: 0;
  padding: 0;
  background: rgb(255 255 255 / 0.08);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.pl-jdgm-write-modal__close:hover {
  background: rgb(255 255 255 / 0.16);
}

.pl-jdgm-write-modal__close svg {
  width: 16px;
  height: 16px;
}

.pl-jdgm-write-modal__title {
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.35rem;
  color: #FFFFFF;
  margin: 0 0 18px;
  line-height: 1.2;
}

/* Form layout */
.pl-jdgm-write-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pl-jdgm-write-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-jdgm-write-form__label {
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.85);
  letter-spacing: 0.01em;
}

.pl-jdgm-write-form__required {
  color: #A79F8A;
  font-weight: 700;
}

.pl-jdgm-write-form__input {
  width: 100%;
  background: #141414;
  /* Transparent border at rest — only shows on focus / invalid. Keeps the
     border slot reserved so :focus border-color transition doesn't cause
     a 1px reflow of layout. */
  border: 1px solid transparent;
  border-radius: var(--rounded, 6px);
  padding: 11px 13px;
  color: #FFFFFF;
  font-family: var(--font-body-family);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}

.pl-jdgm-write-form__input::placeholder {
  color: rgb(255 255 255 / 0.32);
}

.pl-jdgm-write-form__input:focus {
  outline: none;
  background: #161616;
  border-color: #4a4a4a;
}

textarea.pl-jdgm-write-form__input {
  min-height: 110px;
}

/* Field error state */
.pl-jdgm-write-form__field.is-invalid .pl-jdgm-write-form__input {
  border-color: #E5484D;
}

.pl-jdgm-write-form__field-error {
  font-family: var(--font-body-family);
  font-size: 0.8rem;
  color: #E5484D;
  margin: 4px 0 0;
}

/* Star picker (interactive) */
.pl-jdgm-star-picker {
  display: inline-flex;
  gap: 4px;
  margin-top: 2px;
}

.pl-jdgm-star-pick {
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: transform 0.12s ease;
}

.pl-jdgm-star-pick:hover {
  transform: scale(1.1);
}

.pl-jdgm-star-pick:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.65);
  outline-offset: 2px;
}

.pl-jdgm-star-pick svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: rgb(255 255 255 / 0.18);
  transition: fill 0.12s ease;
}

.pl-jdgm-star-pick.is-filled svg {
  fill: #FFFFFF;
}

/* Disclaimer */
.pl-jdgm-write-form__disclaimer {
  font-family: var(--font-body-family);
  font-size: 0.78rem;
  color: rgb(255 255 255 / 0.45);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* Submit button — white pill, dark text, gray hover */
.pl-jdgm-write-form__submit {
  margin-top: 4px;
  width: 100%;
  background: #FFFFFF;
  color: #101010;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: var(--rounded, 6px);
  cursor: pointer;
  transition: background-color 0.32s ease, color 0.32s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .pl-jdgm-write-form__submit:hover:not(:disabled) {
    background: #B0B0B0;
  }
}

.pl-jdgm-write-form__submit:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* Form-level error message (for failed submits) */
.pl-jdgm-write-form__error {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgb(229 72 77 / 0.10);
  border: 1px solid rgb(229 72 77 / 0.4);
  border-radius: var(--rounded, 6px);
  color: #FF8A8E;
  font-family: var(--font-body-family);
  font-size: 0.85rem;
  text-align: center;
}

/* Success state — replaces form after submit */
.pl-jdgm-write-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 0 0;
  gap: 14px;
}

.pl-jdgm-write-modal__success-icon {
  width: 56px;
  height: 56px;
  color: #4CD06E;
  margin-bottom: 4px;
}

.pl-jdgm-write-modal__success-title {
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin: 0;
}

.pl-jdgm-write-modal__success-text {
  font-family: var(--font-body-family);
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.65);
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
}

.pl-jdgm-write-modal__success .pl-jdgm-write-form__submit {
  margin-top: 8px;
  max-width: 220px;
}

/* Mobile: bottom sheet — anchored to bottom edge, slides up from below.
   position: absolute is required for bottom: 0 to actually work (relative
   ignores bottom). Compact padding + smaller fonts so it doesn't dominate.

   Viewport units: dvh (dynamic viewport height) accounts for iOS Safari URL
   bar showing/hiding — vh on iOS includes area BEHIND the URL bar so submit
   button gets hidden. dvh shrinks when URL bar appears.

   safe-area-inset-bottom: iPhone home indicator at the very bottom — pad
   panel content above it so submit button isn't behind the indicator. */
@media (max-width: 699px) {
  .pl-jdgm-write-modal__panel {
    position: absolute;
    width: 100%;
    max-width: 100%;
    max-height: 86vh;
    max-height: 90dvh;
    top: auto;
    bottom: 0;
    left: 0;
    margin: 0;
    transform: translateY(100%);
    border-radius: 14px 14px 0 0;
    padding: 16px 14px max(16px, env(safe-area-inset-bottom, 16px));
  }

  .pl-jdgm-write-modal.is-open .pl-jdgm-write-modal__panel {
    transform: translateY(0);
  }

  .pl-jdgm-write-modal__header {
    margin-bottom: 14px;
    gap: 10px;
  }

  .pl-jdgm-write-modal__product-img {
    width: 44px;
    height: 44px;
  }

  .pl-jdgm-write-modal__product-name {
    font-size: 0.9rem;
  }

  .pl-jdgm-write-modal__product-price {
    font-size: 0.8rem;
  }

  .pl-jdgm-write-modal__close {
    width: 32px;
    height: 32px;
  }

  .pl-jdgm-write-modal__close svg {
    width: 14px;
    height: 14px;
  }

  .pl-jdgm-write-modal__title {
    font-size: 1.1rem;
    margin-bottom: 14px;
  }

  .pl-jdgm-write-form {
    gap: 11px;
  }

  .pl-jdgm-write-form__input {
    padding: 9px 12px;
    font-size: 0.9rem;
  }

  textarea.pl-jdgm-write-form__input {
    min-height: 86px;
  }

  .pl-jdgm-write-form__label {
    font-size: 0.8rem;
  }

  .pl-jdgm-write-form__disclaimer {
    font-size: 0.72rem;
    margin-top: 0;
  }

  .pl-jdgm-write-form__submit {
    padding: 0.85rem 1.2rem;
    font-size: 0.92rem;
  }

  .pl-jdgm-star-pick {
    width: 34px;
    height: 34px;
  }
}
/* End PL_JUDGEME_WRITE_MODAL_V1 */

/* PUMPLAB_FIXED_ATC_HIDE_DESKTOP_V1 — Hide the floating product-quick-add bar
   that appears bottom-right on desktop after scrolling past the main ATC.
   Mobile keeps it (the simple stretched ATC version, .sm:hidden child).
   The wrapper element is product-rerender with id ending "-sticky-bar"
   (sections/main-product.liquid:116). */
@media screen and (min-width: 700px) {
  body.page-product product-rerender[id$="-sticky-bar"] {
    display: none !important;
  }
}
/* End PUMPLAB_FIXED_ATC_HIDE_DESKTOP_V1 */

/* PUMPLAB_COOKIE_BANNER_STYLE_V1 — restyle Shopify's native consent banner
   to PumpLab look: dark card, brand radius, site font, white buttons. No accent.
   Desktop = bottom-left compact card. Mobile = bottom sheet.
   Selectors verified against storefront-banner.js (Shopify uses class-based CSS
   with NO !important, so #id + !important wins). Element map:
     #shopify-pc__banner          = the visible CARD (Shopify puts bg/padding/position here)
     .shopify-pc__banner__wrapper = inner flex layout (CLASS, no id)
     #shopify-pc__banner__body-title / __body / __body-policy-link = text
     .shopify-pc__banner__btns    = button row (CLASS, no id) + .shopify-pc__banner__body (CLASS)
     #shopify-pc__banner__btn-accept / -decline / -manage-prefs
     #shopify-pc__prefs__* (dialog/overlay/header-*/option) = preferences modal
   Admin baseline: Customer privacy → Dark + Bottom center (graceful fallback). */

/* === BANNER CARD === */
#shopify-pc__banner {
  font-family: inherit !important;
  box-sizing: border-box !important;
  background: #141414 !important;
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / 0.10) !important;
  border-radius: var(--rounded-lg, 12px) !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.55) !important;
  padding: 22px !important;
  z-index: 2147483640 !important;
}

/* inner flex layout (NOTE: __wrapper is a CLASS, not an id — must use .) */
.shopify-pc__banner__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;                 /* clear space between text block and buttons */
  width: 100% !important;
  max-width: none !important;
}

/* title */
#shopify-pc__banner__body-title {
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  margin: 0 0 8px !important;
}

/* body copy + policy link (NOTE: __body is a CLASS, not an id — must use .) */
.shopify-pc__banner__body {
  color: rgb(255 255 255 / 0.72) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#shopify-pc__banner__body-policy-link,
.shopify-pc__banner__body a {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* === BUTTON ROW === (NOTE: __btns is a CLASS, not an id — must use .
   The desktop bug: #btns never matched, accept/decline fell back to
   Shopify defaults and flex:1 1 0 crushed them to ~55px wide.) */
.shopify-pc__banner__btns,
.shopify-pc__banner__btns-granular {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Godkänn + Avslå: BOTH white filled, identical (per Isac) */
#shopify-pc__banner__btn-accept,
#shopify-pc__banner__btn-decline {
  order: 1 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  background: #ffffff !important;
  color: #101010 !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition:
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  -webkit-tap-highlight-color: transparent !important;
}
@media (hover: hover) and (pointer: fine) {
  #shopify-pc__banner__btn-accept:hover,
  #shopify-pc__banner__btn-decline:hover { background: #ebebeb !important; border-color: #ebebeb !important; }
}
#shopify-pc__banner__btn-accept:active,
#shopify-pc__banner__btn-decline:active { transform: scale(0.97) !important; }

/* "Hantera inställningar" = subdued GREY text link (never accent), UNDER
   the two buttons with clear separation. Force children too so Shopify's
   own link color can't bleed through. */
#shopify-pc__banner__btn-manage-prefs {
  order: 2 !important;
  flex: 1 1 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  margin: 14px 0 0 !important;           /* clear gap below the buttons */
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
}
#shopify-pc__banner__btn-manage-prefs,
#shopify-pc__banner__btn-manage-prefs * {
  color: rgb(255 255 255 / 0.6) !important;   /* neutral grey, not accent */
  text-decoration: underline !important;
}
#shopify-pc__banner__btn-manage-prefs:hover,
#shopify-pc__banner__btn-manage-prefs:hover * { color: #fff !important; }

/* === POSITION per breakpoint === */
@media (min-width: 700px) {
  /* desktop: card centered horizontally, docked near the bottom, rounded
     all corners, even padding — a tidy bottom-center pill. */
  #shopify-pc__banner {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 44px !important;              /* lifted off the bottom edge */
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(560px, calc(100vw - 48px)) !important;  /* wider, bigger */
    max-width: 560px !important;
    border-radius: 16px !important;       /* clearly rounded all corners */
    padding: 30px !important;             /* more breathing room inside */
  }
}
@media (max-width: 699px) {
  /* full-width sheet docked to the bottom edge; only the BACKGROUND is
     full-bleed — inner content keeps its 18px padding. Top corners
     rounded, bottom square (sits on the edge). safe-area pad for iOS bar. */
  #shopify-pc__banner {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: var(--rounded-lg, 12px) var(--rounded-lg, 12px) 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 18px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Blur the rest of the page while the banner is up (nice focus touch).
   Driven by the `pl-cookie-open` class that JS toggles ONLY while the
   banner is truly visible. Shopify toggles display:none but leaves the
   element in the DOM, so :has() can't be used (would stay blurred after
   consent). Real wrappers: .shopify-section-group-header-group covers
   the announcement bar + header; #main covers page + footer. The banner
   is a <body> child outside these, so it stays sharp. */
.shopify-section-group-header-group,
#main {
  transition: filter 0.3s ease;       /* smooth blur in AND out */
}
/* Blur + scroll-lock are MOBILE ONLY. The mobile bottom-sheet is large
   enough that dimming the page reads as a nice focus + stops accidental
   scrolling. On desktop the card is a small bottom-center pill — blurring
   and locking the whole page for it feels heavy, so desktop stays sharp
   and fully scrollable. */
@media (max-width: 699px) {
  html.pl-cookie-open .shopify-section-group-header-group,
  html.pl-cookie-open #main {
    filter: blur(4px) !important;
  }
  html.pl-cookie-open,
  html.pl-cookie-open body {
    overflow: hidden !important;
  }
}

/* === PREFERENCES MODAL === */
#shopify-pc__prefs__overlay { background: rgb(0 0 0 / 0.6) !important; }
#shopify-pc__prefs__dialog {
  font-family: inherit !important;
  background: #141414 !important;
  color: #fff !important;
  border: 1px solid rgb(255 255 255 / 0.10) !important;
  border-radius: var(--rounded-lg, 12px) !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.55) !important;
}
#shopify-pc__prefs__header-title,
#shopify-pc__prefs__dialog h2,
#shopify-pc__prefs__dialog h3 {
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}
#shopify-pc__prefs__dialog p,
.shopify-pc__prefs__intro,
.shopify-pc__prefs__intro-main,
.shopify-pc__prefs__intro-explain { color: rgb(255 255 255 / 0.72) !important; }
#shopify-pc__prefs__dialog a { color: #fff !important; text-decoration: underline !important; }
.shopify-pc__prefs__option { border-color: rgb(255 255 255 / 0.10) !important; }
#shopify-pc__prefs__dialog button {
  font-family: inherit !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  letter-spacing: 0.015em !important;
}
/* Accept all + Decline all = white filled; Save my choices = outlined */
#shopify-pc__prefs__header-accept,
#shopify-pc__prefs__header-decline {
  background: #ffffff !important;
  color: #101010 !important;
  border: 1.5px solid #ffffff !important;
  min-height: 44px !important;
}
#shopify-pc__prefs__header-save {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  min-height: 44px !important;
}

/* Layout: title (top) → scrollable options (middle) → action buttons (bottom).
   JS reparents the buttons (.shopify-pc__prefs__header-actions) to the end of
   the dialog; this makes the dialog a flex column so options scroll and the
   buttons pin as a bottom bar. order:99 is a belt in case JS hasn't moved it. */
#shopify-pc__prefs__dialog {
  display: flex !important;
  flex-direction: column !important;
}
.shopify-pc__prefs__scrollable {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.shopify-pc__prefs__header-actions {
  order: 99 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;      /* row, not stacked full-width */
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;                  /* tight, kills the big vertical gaps */
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgb(255 255 255 / 0.10) !important;
}
/* buttons sized to their text + centered — never full width */
.shopify-pc__prefs__header-actions > button {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 16px !important;
}
/* End PUMPLAB_COOKIE_BANNER_STYLE_V1 */




/* PUMPLAB_LOYALTY_SUMMARY_V1 */
.pl-loyalty-summary { display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-5); background: #1E1E1E; border-radius: var(--rounded-lg, 12px); }
.pl-loyalty-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.pl-loyalty-summary__tier { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #fff; color: #101010; font-size: .85rem; }
.pl-loyalty-summary__tier--black { background: #101010; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.pl-loyalty-summary__balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.pl-loyalty-summary__pts { font-weight: 700; font-size: 1.4rem; color: #fff; }
.pl-loyalty-summary__kr { font-size: .8rem; color: rgb(255 255 255 / .45); }
.pl-loyalty-summary__bar { height: 6px; border-radius: 999px; background: rgb(255 255 255 / .12); overflow: hidden; }
.pl-loyalty-summary__bar span { display: block; height: 100%; border-radius: 999px; background: #fff; transition: width .6s cubic-bezier(.22,1,.36,1); }
.pl-loyalty-summary__hint { margin-top: var(--spacing-2); font-size: .9rem; color: rgb(255 255 255 / .7); }
.pl-loyalty-summary__hint--max { color: #fff; }
.pl-loyalty-summary--compact { padding: var(--spacing-3); }
/* End PUMPLAB_LOYALTY_SUMMARY_V1 */

/* PUMPLAB_LOYALTY_ACCOUNT_V1 */
.pl-loyalty-account-block { display: flex; flex-direction: column; gap: var(--spacing-3); max-width: 520px; margin: 0 auto var(--spacing-10); }
.pl-loyalty-account-link { align-self: flex-start; font-size: .9rem; }
/* End PUMPLAB_LOYALTY_ACCOUNT_V1 */

/* PUMPLAB_LOYALTY_PAGE_V1 */
.pl-loyalty-page { background: var(--pl-loyalty-bg, #141414); color: #fff; padding: var(--spacing-16) var(--container-gutter); }
.pl-loyalty-page__inner { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-14); }
/* Title + eyebrow: match the contact-page heading look exactly (the site's canonical page title).
   Global .h2 is weight 900 / -0.04em (too heavy); the contact title is weight 800 / -0.02em.
   .subheading base lacks the wide uppercase treatment outside .shopify-section--contact. */
.pl-loyalty-page .h2 { font-weight: 800; letter-spacing: -0.02em; margin: var(--spacing-2) 0; }
.pl-loyalty-page .subheading { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.pl-loyalty-page__sub { color: rgb(255 255 255 / .6); max-width: 48ch; margin-top: var(--spacing-4); }
.pl-loyalty-hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--spacing-16));
  min-height: clamp(480px, 80vh, 880px);
  display: flex; align-items: flex-end; overflow: hidden;
  background-color: #141414;
  background-image: var(--pl-hero-img, linear-gradient(160deg,#1e1e1e 0%,#141414 100%));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.pl-loyalty-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgb(8 9 11 / .92) 0%, rgb(8 9 11 / .55) 30%, rgb(8 9 11 / .12) 60%, transparent 84%);
}
/* PUMPLAB_LOYALTY_HERO_VIDEO_V1 — full-bleed autoplay bg behind the scrim; content stays on top */
.pl-loyalty-hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* mobile = portrait onboarding banner; desktop = wide banner (portrait would crop to a strip) */
@media (min-width: 700px) { .pl-loyalty-hero__video--mobile { display: none; } }
@media (max-width: 699px) { .pl-loyalty-hero__video--desktop { display: none; } }
/* desktop: match the homepage drop-hero height (viewport minus the ~124px header group). Mobile keeps its own. */
@media (min-width: 700px) {
  .pl-loyalty-hero { min-height: calc(100vh - 124px); min-height: calc(100svh - 124px); }
}
@media (min-width: 2000px) {
  .pl-loyalty-hero { min-height: clamp(580px, 82vh, 1100px); }
}
.pl-loyalty-hero__content {
  position: relative; z-index: 1;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 0 var(--container-gutter) clamp(40px, 6.5vh, 80px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pl-loyalty-hero__content .pl-loyalty-page__sub { color: rgb(255 255 255 / .74); margin-top: var(--spacing-2); }
/* hero: drop the subtitle on desktop — title + CTA only, matches the main hero */
@media (min-width: 700px) { .pl-loyalty-hero__content .pl-loyalty-page__sub { display: none; } }
/* hero title: last word (rewarded / belönad) in savings-green */
.pl-loyalty-hero .pl-hero-hl { color: #2ecc71; }
.pl-loyalty-hero__content .pl-loyalty-page__cta-row { margin-top: var(--spacing-6); justify-content: center; }
.pl-loyalty-hero__cta-label { color: rgb(255 255 255 / .8); margin-top: var(--spacing-5); margin-bottom: var(--spacing-3); }
.pl-loyalty-page__inner { margin-top: var(--spacing-12); }
.pl-loyalty-page__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--spacing-2); }
.pl-loyalty-page__cta-end { text-align: center; padding: var(--spacing-8) 0 var(--spacing-4); }
.pl-loyalty-page__cta-end .pl-loyalty-page__cta-row { justify-content: center; }
/* CTAs cloned 1:1 from the drop-hero banner buttons */
.pl-loyalty-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: clamp(8px, 0.6vw, 11px) clamp(18px, 1.45vw, 27px);
  font-family: inherit; font-size: clamp(0.95rem, 0.85vw, 1.1rem); font-weight: 600; letter-spacing: 0.015em;
  border: 1.5px solid transparent; border-radius: 7px; cursor: pointer; text-decoration: none;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1);
  -webkit-tap-highlight-color: transparent;
}
.pl-loyalty-cta--primary { background: #ffffff; color: #101010; border-color: #ffffff; }
.pl-loyalty-cta--secondary { background: transparent; color: #ffffff; border-width: 2px; border-color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .pl-loyalty-cta--primary:hover { background: #ebebeb; border-color: #ebebeb; }
  .pl-loyalty-cta--secondary:hover { background: #ffffff; color: #101010; border-color: #ffffff; }
}
.pl-loyalty-cta:active { transform: scale(0.97); }
.pl-loyalty-page__h2 {
  font-family: var(--heading-font-family); font-weight: var(--heading-font-weight, 800);
  font-size: clamp(1.7rem, 2.4vw, 2.25rem); letter-spacing: -.02em; line-height: 1; color: #fff;
  margin-bottom: var(--spacing-6);
}
.pl-loyalty-how { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-4); }
.pl-loyalty-how li { display: flex; align-items: baseline; gap: var(--spacing-3); color: rgb(255 255 255 / .8); }
.pl-loyalty-how li span { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: #101010; font-weight: 700; }

/* PUMPLAB_LOYALTY_STEPS_V3 — scroll-driven path roadmap + per-step media */
.pl-loyalty-page__how { text-align: center; }
.pl-loyalty-page__how .pl-loyalty-page__h2 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); margin-bottom: var(--spacing-3); }
.pl-loyalty-how-sub { color: rgb(255 255 255 / .55); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.45; max-width: 52ch; margin: 0 auto var(--spacing-12); }
.pl-loyalty-page__tiers .pl-loyalty-page__h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: var(--spacing-2); }
.pl-loyalty-tiers-sub { color: rgb(255 255 255 / .55); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.45; max-width: 56ch; margin: 0 0 var(--spacing-7); }
.pl-loyalty-page__how .pl-loyalty-steps { text-align: left; }
.pl-loyalty-page__how .pl-loyalty-step--right { text-align: right; }
.pl-loyalty-path { position: relative; padding: 8px 0 130px; --reveal: 0%; max-width: 1040px; margin: 0 auto; }
.pl-loyalty-path__start { position: absolute; left: calc(50% - 2px); top: 10px; width: 4px; height: 4px; pointer-events: none; }
.pl-loyalty-path__end { position: absolute; left: calc(50% - 2px); bottom: 24px; width: 4px; height: 4px; pointer-events: none; }
.pl-loyalty-mobile-arrow { display: none; }
.pl-loyalty-path__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pl-loyalty-path__line path {
  fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 3;
  stroke-dasharray: 3 9; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
/* JS-armed: dotted track draws top -> down as you scroll */
.pl-loyalty-path.is-armed .pl-loyalty-path__line {
  -webkit-mask: linear-gradient(to bottom, #000 0 var(--reveal), transparent var(--reveal));
          mask: linear-gradient(to bottom, #000 0 var(--reveal), transparent var(--reveal));
}

.pl-loyalty-steps {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-rows: repeat(3, 470px);
}
.pl-loyalty-step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; cursor: default; }
.pl-loyalty-step__node { display: flex; align-items: center; gap: 24px; grid-row: 1; }
.pl-loyalty-step__media { grid-row: 1; }
/* node highlighted when the path reaches it (scroll dwell) */
.pl-loyalty-step.is-reached .pl-loyalty-step__num {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgb(20 20 22 / .92), 0 0 20px 3px rgb(255 255 255 / .28), 0 8px 22px -8px rgb(0 0 0 / .7);
}
.pl-loyalty-step--left  .pl-loyalty-step__node  { grid-column: 1; justify-self: start; }
.pl-loyalty-step--left  .pl-loyalty-step__media { grid-column: 2; justify-self: end; }
.pl-loyalty-step--right .pl-loyalty-step__node  { grid-column: 2; justify-self: end; flex-direction: row-reverse; text-align: right; }
.pl-loyalty-step--right .pl-loyalty-step__media { grid-column: 1; justify-self: start; }
.pl-loyalty-step--left  { --media-from: 44px; }
.pl-loyalty-step--right { --media-from: -44px; }

.pl-loyalty-step__num {
  flex: 0 0 auto;
  width: 66px; height: 66px; display: grid; place-items: center; border-radius: 999px;
  background: radial-gradient(120% 120% at 35% 25%, #ffffff, #e9e9ec);
  color: #0c0c0e; font-family: var(--heading-font-family); font-weight: 800; font-size: 1.85rem;
  box-shadow: 0 0 0 9px rgb(20 20 22 / .95), inset 0 -2px 4px rgb(0 0 0 / .12), 0 8px 22px -8px rgb(0 0 0 / .7);
  transition: box-shadow 280ms ease, transform 280ms cubic-bezier(0.22,1,0.36,1);
}
.pl-loyalty-step__body { display: flex; flex-direction: column; gap: 7px; }
.pl-loyalty-step__title {
  font-family: var(--heading-font-family); font-weight: var(--heading-font-weight, 800);
  text-transform: uppercase; letter-spacing: -.01em; font-size: 1.55rem; line-height: 1; color: #fff;
}
.pl-loyalty-step__text { font-size: 1.08rem; line-height: 1.4; color: rgb(255 255 255 / .6); }
.pl-loyalty-step__text strong { color: #fff; font-weight: 700; }

.pl-loyalty-step__media {
  position: relative; isolation: isolate; /* anchor + contain the mix-blend-mode video (V1) */
  width: 100%; max-width: 460px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .12); /* hairline defines the box against the page bg */
  background-color: #1e1e1e;
  background-image: var(--img, linear-gradient(135deg, #1e1e1e, #141414));
  background-size: cover; background-position: center;
}
/* PUMPLAB_LOYALTY_STEP_VIDEO_V1 — video fills the media box (autoplay loop), cover-cropped over the image bg */
.pl-loyalty-step__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* per-breakpoint variant: desktop file (taller framing) ≥768px, mobile file ≤767px */
@media (min-width: 768px) { .pl-loyalty-step__video--mobile { display: none; } }
@media (max-width: 767px) { .pl-loyalty-step__video--desktop { display: none; } }
/* black-bg render clip: lighten drops the pure-black bg to the box gradient, keeps the phone */
.pl-loyalty-step__video--blend { mix-blend-mode: lighten; }

/* scroll-reveal animation (only when JS-armed; no-JS = everything visible) */
.pl-loyalty-step { transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
.pl-loyalty-step__media { transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), transform 720ms cubic-bezier(0.22,1,0.36,1); }
.pl-loyalty-path.is-armed .pl-loyalty-step { opacity: 0; transform: translateY(28px); }
.pl-loyalty-path.is-armed .pl-loyalty-step__media { opacity: 0; transform: translateX(var(--media-from, 40px)); }
.pl-loyalty-path.is-armed .pl-loyalty-step.is-visible { opacity: 1; transform: none; }
.pl-loyalty-path.is-armed .pl-loyalty-step.is-visible .pl-loyalty-step__media { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .pl-loyalty-step:hover .pl-loyalty-step__num {
    transform: scale(1.08);
    box-shadow: 0 0 0 9px rgb(20 20 22 / .95), 0 0 0 13px rgb(255 255 255 / .1), inset 0 -2px 4px rgb(0 0 0 / .12), 0 8px 22px -8px rgb(0 0 0 / .7);
  }
}

@media (max-width: 767px) {
  /* hero subtitle is redundant with the title on mobile */
  .pl-loyalty-page__sub { display: none; }
  .pl-loyalty-path { max-width: none; padding-bottom: 24px; }
  /* dotted path stays on mobile, behind the cards (line z-index:0 < steps z-index:1) */
  .pl-loyalty-path__line { display: block; }
  /* pull the path right up under the heading so the curve starts high and has room to swing */
  .pl-loyalty-how-sub { margin-bottom: var(--spacing-6); }
  .pl-loyalty-path { padding-top: 0; }
  .pl-loyalty-path__start { left: calc(50% - 2px); top: 6px; }
  .pl-loyalty-steps { display: flex; flex-direction: column; gap: 30px; }
  .pl-loyalty-steps::before { display: none; }
  .pl-loyalty-step { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .pl-loyalty-step:first-child { margin-top: 116px; } /* tall gap below the heading -> the title->node 1 curve starts high & swings gently (no text crossing) */
  .pl-loyalty-step__node, .pl-loyalty-step--right .pl-loyalty-step__node { flex-direction: row; text-align: left; }
  .pl-loyalty-step__media { order: 2; aspect-ratio: 16 / 9; max-width: none; }
  .pl-loyalty-path.is-armed .pl-loyalty-step__media { transform: translateY(22px); }
  .pl-loyalty-mobile-arrow { display: flex; justify-content: center; color: rgb(255 255 255 / .55); margin-top: 44px; }
  .pl-loyalty-mobile-arrow svg { width: 44px; height: 44px; }
}

/* PUMPLAB_LOYALTY_EARN_V2 - ways-to-earn grid (flat dark cards, NO glass border, icon-forward) */
.pl-loyalty-page__earn { text-align: center; margin-top: var(--spacing-16); }
.pl-loyalty-page__earn .pl-loyalty-page__h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: var(--spacing-2); }
.pl-loyalty-earn-sub { color: rgb(255 255 255 / .55); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.45; margin: 0 auto var(--spacing-8); }
.pl-loyalty-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.pl-loyalty-earn__card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px 26px; border-radius: var(--rounded-lg); min-height: 256px;
  background: #1e1e1e; color: #fff; text-decoration: none; cursor: pointer;
  transition: background-color 320ms ease;
}
.pl-loyalty-earn__card > :not(.pl-loyalty-earn__cta) { transition: opacity 260ms ease; }
/* hover CTA: content dims, white pill pops in (no card lift) */
.pl-loyalty-earn__cta {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transition: opacity 240ms ease; pointer-events: none;
}
.pl-loyalty-earn__cta-btn {
  display: inline-flex; align-items: center; padding: 11px 24px; border-radius: 8px;
  background: #fff; color: #111; font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  transform: translateY(10px) scale(.96);
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.pl-loyalty-earn__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; gap: 26px; min-height: 0; padding: 24px 28px; }
.pl-loyalty-earn__wide-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 auto; }
.pl-loyalty-earn__card--wide .pl-loyalty-earn__text { flex: 1; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .pl-loyalty-earn__card:hover { background-color: #181818; }
  .pl-loyalty-earn__card:hover > :not(.pl-loyalty-earn__cta) { opacity: .12; }
  .pl-loyalty-earn__card:hover .pl-loyalty-earn__cta { opacity: 1; }
  .pl-loyalty-earn__card:hover .pl-loyalty-earn__cta-btn { transform: none; }
}
.pl-loyalty-earn__icon {
  flex: 0 0 auto; width: 60px; height: 60px; display: grid; place-items: center;
  border-radius: var(--rounded); background: #141414; color: #fff; margin-bottom: 4px;
}
.pl-loyalty-earn__icon svg { width: 32px; height: 32px; }
.pl-loyalty-earn__value { font-family: var(--heading-font-family); font-weight: 800; font-size: 1.9rem; line-height: 1; color: #fff; }
.pl-loyalty-earn__value small { font-size: .82rem; font-weight: 600; color: rgb(255 255 255 / .5); }
.pl-loyalty-earn__title { font-family: var(--heading-font-family); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.12rem; line-height: 1.05; color: #fff; }
.pl-loyalty-earn__text { font-size: .97rem; line-height: 1.4; color: rgb(255 255 255 / .55); margin: 0; margin-top: auto; }
@media (max-width: 999px) {
  .pl-loyalty-earn { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .pl-loyalty-page__earn { margin-top: var(--spacing-12); }
  /* outer grid = 2 columns; default = full-width row, last 2 (IG + TikTok) split into a 2-up row */
  .pl-loyalty-earn { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pl-loyalty-earn__card,
  .pl-loyalty-earn__card--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon value" "icon title";
    column-gap: 14px; row-gap: 6px; align-items: center;
    padding: 14px 16px; min-height: 0;
  }
  .pl-loyalty-earn__card--wide .pl-loyalty-earn__wide-body { display: contents; }
  .pl-loyalty-earn__icon { grid-area: icon; width: 48px; height: 48px; border-radius: 10px; margin-bottom: 0; align-self: center; }
  .pl-loyalty-earn__icon svg { width: 26px; height: 26px; }
  .pl-loyalty-earn__value { grid-area: value; align-self: end; font-size: 1.3rem; }
  .pl-loyalty-earn__title { grid-area: title; align-self: start; font-weight: 500; font-size: .9rem; color: rgb(255 255 255 / .58); text-transform: none; letter-spacing: 0; }
  .pl-loyalty-earn__text { display: none; }
  /* social pair = 2-up. Stack icon on top of label so the half-width cells aren't cramped */
  .pl-loyalty-earn > .pl-loyalty-earn__card:nth-last-child(-n+2) {
    grid-column: span 1;
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "value" "title";
    text-align: center;
    padding: 18px 12px;
    row-gap: 4px;
  }
  .pl-loyalty-earn > .pl-loyalty-earn__card:nth-last-child(-n+2) .pl-loyalty-earn__icon { margin: 0 auto 2px; width: 44px; height: 44px; }
  .pl-loyalty-earn > .pl-loyalty-earn__card:nth-last-child(-n+2) .pl-loyalty-earn__value { align-self: center; font-size: 1.15rem; }
  .pl-loyalty-earn > .pl-loyalty-earn__card:nth-last-child(-n+2) .pl-loyalty-earn__title { justify-self: center; font-size: .82rem; }
}

/* Loyalty FAQ — straight port of the contact-page FAQ rules (which the user spent a long time
   stabilising, esp. the last-row jump). Scope mirrored to .shopify-section--loyalty-faq so the
   contact FAQ stays untouched. */
.shopify-section--loyalty-faq .accordion-box {
  background: rgb(255 255 255 / 0.05);
  border: none;
}
/* Last accordion — border-bottom removal causes scrollHeight mismatch.
   Restore it invisibly so the height measurement is correct (the fix for the "last row jumps" bug). */
.shopify-section--loyalty-faq .accordion-box > :last-child {
  border-block-end-width: 1px;
  border-block-end-color: transparent;
}
.shopify-section--loyalty-faq .accordion {
  border-color: transparent;
  transition: border-color 0.15s ease;
}
.shopify-section--loyalty-faq .accordion[open][aria-expanded="true"] {
  border-block-end-color: rgb(255 255 255 / 0.08);
}
.shopify-section--loyalty-faq .accordion-box > :last-child[open] {
  border-block-end-color: transparent;
}
.shopify-section--loyalty-faq .accordion__toggle {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}
.shopify-section--loyalty-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--loyalty-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--loyalty-faq .accordion__toggle:hover::before { opacity: 1; }
}
.shopify-section--loyalty-faq .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--loyalty-faq .group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate {
  transition: background 0.2s ease, transform 0.5s cubic-bezier(.22, 1, .36, 1);
}
.shopify-section--loyalty-faq .accordion__content { margin-block-start: var(--spacing-2); }
.shopify-section--loyalty-faq .accordion__content .prose {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.95em;
}
.shopify-section--loyalty-faq .accordion__content .prose a,
.shopify-section--loyalty-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;
}
.shopify-section--loyalty-faq .text-subdued { color: #818181 !important; }

/* final CTA moved under the FAQ */
.pl-loyalty-faq-cta { margin-top: var(--spacing-14); text-align: center; }

/* PUMPLAB_LOYALTY_TIERS_V5 — metallic tier cards in a row (wide, big name, premium gem fx) */
.pl-loyalty-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 999px) {
  .pl-loyalty-tiers { grid-template-columns: 1fr 1fr; }
  .pl-loyalty-tier--black { grid-column: 1 / -1; }
  .pl-loyalty-tiers-bracket { display: none; }
}
/* tier cards float in AFTER the heading + bracket. Silver–Diamond reveal with the section (.is-in);
   Black waits for its OWN in-view trigger (.pl-black-go, added by a JS IntersectionObserver) so its
   entrance is never missed when you scroll past the top tiers fast. */
.pl-loyalty-tiers.is-armed .pl-loyalty-tier {
  opacity: 0; transform: translateY(34px); /* snaps hidden at load — NO transition here, else the class-add ghosts a 1->0 fade */
}
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:not(.pl-loyalty-tier--black) {
  opacity: 1; transform: none;
  /* keep `translate` (hover lift) AND `filter` (Diamond/Black hover glow) in the list, else this
     armed rule drops them from the base transition and the hover glow snaps in instantly. */
  transition: opacity 650ms cubic-bezier(0.22,1,0.36,1), transform 650ms cubic-bezier(0.22,1,0.36,1), translate 260ms cubic-bezier(0.22,1,0.36,1), filter 480ms ease;
}
/* default / mobile: first four snap in quick + even. Three-value transition-delay maps to
   (opacity, transform, translate) so the hover-lift translate never inherits the cascade delay. */
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(1) { transition-delay: .2s, .2s, 0s; }
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(2) { transition-delay: .32s, .32s, 0s; }
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(3) { transition-delay: .44s, .44s, 0s; }
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(4) { transition-delay: .56s, .56s, 0s; }
@media (min-width: 1000px) {
  .pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(1) { transition-delay: .35s, .35s, 0s; }
  .pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(2) { transition-delay: .5s, .5s, 0s; }
  .pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(3) { transition-delay: .65s, .65s, 0s; }
  .pl-loyalty-page__tiers.is-in .pl-loyalty-tiers.is-armed .pl-loyalty-tier:nth-child(4) { transition-delay: .8s, .8s, 0s; }
}
/* BLACK = premium: a light keeps travelling its border ring (NOT a flat glow) */
.pl-loyalty-page__tiers .pl-loyalty-tier--black::before {
  opacity: .75;
  animation-play-state: running;
  animation-duration: 950ms, 5000ms; /* brighter + livelier travelling border light (specificity beats the base ::before rule) */
}
.pl-loyalty-tier--black::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / .12) 46%, rgb(255 255 255 / .28) 50%, rgb(255 255 255 / .12) 54%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg); opacity: 0;
}
/* Black's slow majestic entrance + arrival bloom + diagonal sweep — fires when Black ITSELF scrolls into view */
.pl-loyalty-tiers.is-armed .pl-loyalty-tier--black.pl-black-go {
  opacity: 1; transform: none;
  transition: opacity 1150ms cubic-bezier(0.22,1,0.36,1), transform 1150ms cubic-bezier(0.22,1,0.36,1), translate 260ms cubic-bezier(0.22,1,0.36,1), filter 480ms ease;
  transition-delay: .15s, .15s, 0s; /* per-property: opacity/transform get the reveal delay, translate stays 0s so hover lift is responsive */
  animation: pl_loyalty_black_bloom 2400ms ease-out .2s 1 both;
}
.pl-loyalty-tier--black.pl-black-go::after {
  animation: pl_loyalty_black_shine 2400ms cubic-bezier(0.33, 0, 0.2, 1) .35s 1 both;
}
@media (min-width: 1000px) {
  /* desktop: Black holds a touch so it lands after Silver–Diamond (the cascade beat) */
  .pl-loyalty-tiers.is-armed .pl-loyalty-tier--black.pl-black-go { transition-delay: 1.0s, 1.0s, 0s; animation-delay: 1.0s; }
  .pl-loyalty-tier--black.pl-black-go::after { animation-delay: 1.15s; }
}
@keyframes pl_loyalty_black_bloom {
  0%   { box-shadow: inset 0 0 60px -22px rgb(90 120 165 / .22), inset 0 0 0 1px rgb(255 255 255 / .12), 0 0 0 0 rgb(150 175 220 / 0); }
  42%  { box-shadow: inset 0 0 72px -18px rgb(115 145 200 / .52), inset 0 0 0 1px rgb(255 255 255 / .32), 0 0 60px 3px rgb(150 175 220 / .4), 0 0 130px 18px rgb(110 140 190 / .2); }
  100% { box-shadow: inset 0 0 60px -22px rgb(90 120 165 / .22), inset 0 0 0 1px rgb(255 255 255 / .12), 0 0 0 0 rgb(150 175 220 / 0); }
}
@keyframes pl_loyalty_black_shine {
  0%   { transform: translateX(-160%) skewX(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(320%) skewX(-12deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-loyalty-tier--black::before { animation-play-state: paused; }
  .pl-loyalty-tiers.is-armed .pl-loyalty-tier--black.pl-black-go { animation: none; }
  .pl-loyalty-tier--black.pl-black-go::after { animation: none; }
}
/* tier hover lift = pure CSS on the `translate` property (separate from `transform`, so the
   reveal animation that animates `transform: translateY(34px) -> none` doesn't collide with it).
   This handles rapid pointer events smoothly without the WAAPI compositor jitter we saw before. */
.pl-loyalty-tier { translate: 0 0; transition: translate 260ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) {
  .pl-loyalty-tier:hover { translate: 0 -5px; }
}
/* finale: dotted bracket framing the top + sides of the tiers, fading downward */
.pl-loyalty-page__tiers { position: relative; }
.pl-loyalty-tiers-frame { position: relative; }
.pl-loyalty-tiers-bracket {
  position: absolute; left: -22px; width: calc(100% + 44px); top: -16px; height: 80%;
  display: block; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 800ms ease;
  -webkit-mask: linear-gradient(to bottom, #000 0 46%, transparent 95%);
          mask: linear-gradient(to bottom, #000 0 46%, transparent 95%);
}
.pl-loyalty-page__tiers.is-in .pl-loyalty-tiers-bracket { opacity: 1; }
/* heading + sub stay hidden until the bracket reveals, so the tiers don't spoil before the frame draws in */
.pl-loyalty-page__tiers.pl-tiers-armed .pl-loyalty-page__h2,
.pl-loyalty-page__tiers.pl-tiers-armed .pl-loyalty-tiers-sub {
  opacity: 0; transform: translateY(14px); /* snap to hidden at load — NO transition here, else the class-add ghosts a 1->0 fade that never settles */
}
.pl-loyalty-page__tiers.pl-tiers-armed.is-in .pl-loyalty-page__h2,
.pl-loyalty-page__tiers.pl-tiers-armed.is-in .pl-loyalty-tiers-sub {
  opacity: 1; transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); /* animate only the reveal (into is-in) */
}
.pl-loyalty-tiers-bracket path {
  fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 2.5;
  stroke-dasharray: 2.5 8; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) { .pl-loyalty-tiers-bracket { opacity: 1 !important; } }
@media (max-width: 999px) { .pl-loyalty-tiers-bracket { display: none !important; } }

.pl-loyalty-tier {
  --tier-accent: linear-gradient(90deg,#cfd5db,#9aa1a8);
  --tier-text:   linear-gradient(180deg,#f4f6f8,#aeb4ba);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 240px;
  padding: 20px 22px 18px;
  border-radius: 12px;
  background: linear-gradient(160deg,#212325,#141517);
  cursor: default;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms cubic-bezier(0.22,1,0.36,1), filter 480ms ease;
}
.pl-loyalty-tier:focus-visible { outline: 2px solid rgb(255 255 255 / .5); outline-offset: 2px; }
/* content above the fx + sheen layers */
.pl-loyalty-tier > :not(.pl-loyalty-tier__fx) { position: relative; z-index: 2; }
/* hover = product-card sweep outline (light streak travels the 1px border ring; no glow) */
.pl-loyalty-tier::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(rgb(255 255 255 / .05), rgb(255 255 255 / .05)) padding-box,
    repeating-linear-gradient(110deg,
      rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 26%,
      rgb(255 255 255 / .5) 50%,
      rgb(255 255 255 / 0) 74%, 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);
          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;
}
/* Diamond carries the traveling rim-light ON by default (not just on hover) + a soft glow. */
.pl-loyalty-tier--diamond::before { opacity: 1; animation-play-state: running; filter: drop-shadow(0 0 6px rgb(220 235 255 / .5)); }

/* fx layer (per-tier gem effects) */
@property --pl-shimmer-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pl-loyalty-tier__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; }

/* DIAMOND — facets stay fixed; only the LIGHT shifts across them */
.pl-loyalty-tier--diamond .pl-loyalty-tier__fx {
  mix-blend-mode: screen; overflow: hidden;
  background:
    linear-gradient(105deg, transparent 42%, rgb(240 248 255 / .18) 50%, transparent 58%),
    conic-gradient(from 200deg at 36% 26%,
      rgb(232 243 255 / .12), rgb(255 255 255 / .10), rgb(218 236 255 / .12),
      rgb(246 250 255 / .07), rgb(232 243 255 / .12));
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  animation: pl_tier_light 7s linear infinite;
}
@keyframes pl_tier_light {
  0%   { background-position: 180% 0, 0 0; }
  100% { background-position: -90% 0, 0 0; }
}

/* BLACK — shimmer travels around the OUTLINE (rotating conic masked to the border ring) */
.pl-loyalty-tier--black .pl-loyalty-tier__fx {
  padding: 1.5px;
  background: conic-gradient(from var(--pl-shimmer-angle),
    transparent 0deg, transparent 70deg,
    rgb(180 205 240 / .55) 116deg, rgb(255 255 255 / .95) 150deg, rgb(190 210 245 / .6) 184deg,
    transparent 235deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pl_tier_shimmer 5s linear infinite;
}
@keyframes pl_tier_shimmer { to { --pl-shimmer-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) { .pl-loyalty-tier__fx { animation: none !important; } }

/* per-tier material */
.pl-loyalty-tier--silver {
  background:
    radial-gradient(120% 80% at 24% 0%, rgb(228 236 247 / .26), transparent 60%),
    linear-gradient(160deg, #424954, #1f2229);
}
.pl-loyalty-tier--gold {
  background:
    radial-gradient(82% 56% at 27% 0%, rgb(255 233 170 / .34), transparent 60%),
    radial-gradient(140% 92% at 22% -12%, rgb(212 168 78 / .28), transparent 60%),
    linear-gradient(160deg, #6c5526, #2a1d0c);
}
.pl-loyalty-tier--platinum {
  background:
    radial-gradient(75% 50% at 30% 2%, rgb(248 252 255 / .34), transparent 58%),
    radial-gradient(150% 100% at 26% -12%, rgb(214 228 245 / .32), transparent 62%),
    linear-gradient(158deg, #a4b0c0 0%, #7e8a9a 34%, #545d6b 64%, #353c47 100%);
  color: #f4f8fc;
}
.pl-loyalty-tier--diamond  {
  background:
    linear-gradient(100deg, rgb(18 28 42 / .80) 0%, rgb(15 23 36 / .42) 50%, rgb(14 22 34 / .14) 100%),
    linear-gradient(#7a7a7a,#7a7a7a),
    var(--pl-tex, none),
    #20262e;
  background-size: cover, cover, 230%, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal, normal;
}
.pl-loyalty-tier--black {
  background:
    radial-gradient(circle 2px at 28% 25%, rgb(255 255 255 / .95), transparent 50%),
    radial-gradient(circle 1.5px at 70% 58%, rgb(255 255 255 / .8), transparent 50%),
    radial-gradient(circle 1px at 86% 33%, rgb(255 255 255 / .7), transparent 50%),
    radial-gradient(140% 70% at 30% -22%, rgb(120 150 200 / .14), transparent 50%),
    linear-gradient(160deg, rgb(0 0 0 / .88), rgb(0 0 0 / .94)),
    linear-gradient(#6a6a6a,#6a6a6a),
    var(--pl-tex, none),
    #050507;
  background-size: cover, cover, cover, cover, cover, cover, 240%, cover;
  background-position: center, center, center, center, center, center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, normal, normal, normal, color, normal, normal;
  box-shadow: inset 0 0 60px -22px rgb(90 120 165 / .22), inset 0 0 0 1px rgb(255 255 255 / .12);
}

/* name — big Monument display, metal-filled */
.pl-loyalty-tier__name {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight, 800);
  text-transform: uppercase; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(1.5rem, 1.8vw, 1.85rem);
  color: #fff;
}
.pl-loyalty-tier__floor { margin-top: 6px; font-size: .8rem; color: rgb(255 255 255 / .42); }

/* multiplier = hero number, pinned to lower block */
.pl-loyalty-tier__mult {
  margin-top: auto;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight, 800);
  font-size: clamp(1.9rem, 2.2vw, 2.3rem); line-height: 1; letter-spacing: -.02em; color: #fff;
  display: flex; align-items: baseline; gap: 5px;
}
.pl-loyalty-tier__mult small {
  font-family: var(--text-font-family, inherit);
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: rgb(255 255 255 / .5); text-transform: lowercase;
}

/* perk — hairline footnote below the multiplier */
.pl-loyalty-tier__perks {
  list-style: none; margin: 13px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  display: flex; flex-direction: column; gap: 8px;
}
.pl-loyalty-tier__perk {
  position: relative; padding-left: 23px;
  font-size: .92rem; line-height: 1.25; font-weight: 600; color: #fff;
}
.pl-loyalty-tier__perk::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .pl-loyalty-tier:hover { transform: translateY(-3px); }
  .pl-loyalty-tier:hover::before { opacity: 1; transition-delay: 70ms; animation-play-state: running; }
}
/* End PUMPLAB_LOYALTY_TIERS_V5 */
.pl-loyalty-page__status--guest { display: flex; flex-direction: column; gap: var(--spacing-4); align-items: flex-start; }
/* End PUMPLAB_LOYALTY_PAGE_V1 */

/* PUMPLAB_CART_LOYALTY_REDEEM_V1 — cart drawer redemption slider (Sub-Plan C5).
   White/neutral only — accent #A79F8A is forbidden in site UI (promo only). */
.pl-redeem {
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: var(--rounded);
  background: rgb(255 255 255 / .03);
  overflow: hidden;
}
.pl-redeem__row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: transparent; border: 0; color: inherit;
  cursor: pointer; text-align: left; font: inherit;
  transition: background 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .pl-redeem__row:hover { background: rgb(255 255 255 / .05); }
}
.pl-redeem__row-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--rounded-sm); background: rgb(255 255 255 / .06); color: #fff; }
.pl-redeem__row-label { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-redeem__row-title { font-weight: 600; font-size: .95rem; color: #fff; }
.pl-redeem__row-meta { font-size: .82rem; color: rgb(255 255 255 / .55); }
/* PUMPLAB_GUEST_EARN_CTA_V1 — guest earn-nudge row (non-expandable variant of the redeem row). */
.pl-guestearn__row { cursor: default; }
.pl-guestearn .pl-redeem__row-meta a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pl-guestearn .pl-redeem__row-meta a:hover { color: rgb(255 255 255 / .75); } }
/* Member-locked variant: green filled lock in the icon slot (same locked-points language as
   the account hub's balance lock). */
.pl-guestearn__lockico { color: rgb(108 220 142); }
/* Earn incentive on the member redeem row — inline right after the title, progress-green. */
.pl-redeem__row-top { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.pl-redeem__row-earn { font-size: .95rem; font-weight: 600; color: rgb(108 220 142); white-space: nowrap; }
/* Mobile: the earn line moves to the BOTTOM of the box (title / balance / earn) instead of
   wrapping awkwardly between title and balance. display:contents lets the label column reorder. */
@media (max-width: 700px) {
  .pl-redeem__row-label { display: flex; flex-direction: column; }
  .pl-redeem__row-top { display: contents; }
  .pl-redeem__row-title { order: 1; }
  .pl-redeem__row-meta { order: 2; }
  .pl-redeem__row-earn { order: 3; margin-top: 3px; font-size: .88rem; }
}
/* Mobile: compact copy — "poäng" -> "p", the trailing clause drops, so the row is two short lines. */
.pl-guestearn__short { display: none; }
@media (max-width: 700px) {
  .pl-guestearn__long { display: none; }
  .pl-guestearn__short { display: inline; }
}
/* End PUMPLAB_GUEST_EARN_CTA_V1 */
.pl-redeem__row-meta strong { color: #fff; font-weight: 700; }
.pl-redeem__row-caret { flex: 0 0 auto; color: rgb(255 255 255 / .55); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.pl-redeem.is-open .pl-redeem__row-caret { transform: rotate(180deg); }
.pl-redeem.is-loading .pl-redeem__row { opacity: .6; pointer-events: none; }
/* Busy lock — while a redeem/clear is being applied + re-evaluated, the slider and buttons are
   disabled so a rapid second change can't fire a concurrent request that races the metafield write.
   Unlocks when the discount has actually been re-evaluated onto the cart. */
.pl-redeem.is-busy .pl-redeem__slider-row,
.pl-redeem.is-busy .pl-redeem__clear { pointer-events: none; opacity: .45; }
.pl-redeem.is-busy .pl-redeem__slider,
.pl-redeem.is-busy .pl-redeem__max-btn { cursor: default; }
.pl-redeem__spinner { display: none; flex: 0 0 auto; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: pl-redeem-spin .6s linear infinite; }
.pl-redeem.is-busy .pl-redeem__spinner { display: inline-block; }
@keyframes pl-redeem-spin { to { transform: rotate(360deg); } }

.pl-redeem__panel { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgb(255 255 255 / .06); }
.pl-redeem__slider-row { display: flex; align-items: center; gap: 10px; }
.pl-redeem__slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; cursor: pointer; background: linear-gradient(to right, #fff var(--pl-fill, 0%), rgb(255 255 255 / .12) var(--pl-fill, 0%)); }
.pl-redeem__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .4); transition: transform 160ms ease; }
.pl-redeem__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .4); border: 0; }
/* Firefox paints fill via ::-moz-range-progress (element-bg gradient is hidden behind its track pseudo). */
.pl-redeem__slider::-moz-range-track { height: 4px; border-radius: 999px; background: rgb(255 255 255 / .12); }
.pl-redeem__slider::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; }
.pl-redeem__slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.pl-redeem__max-btn { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--rounded-sm); background: rgb(255 255 255 / .06); color: #fff; border: 1px solid rgb(255 255 255 / .1); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pl-redeem__max-btn:hover { background: rgb(255 255 255 / .12); }
}
.pl-redeem__readout { display: flex; align-items: baseline; gap: 6px; font-size: .92rem; }
.pl-redeem__readout-label { color: rgb(255 255 255 / .55); }
.pl-redeem__readout-value { font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -.01em; }
.pl-redeem__readout-unit { color: rgb(255 255 255 / .55); font-weight: 600; }
.pl-redeem__kr-equiv { margin: -2px 0 0 0; font-size: .82rem; color: rgb(255 255 255 / .5); }
.pl-redeem__kr-equiv span { color: rgb(255 255 255 / .75); font-weight: 600; }
.pl-redeem__note { margin: 6px 0 0 0; font-size: .76rem; color: rgb(255 255 255 / .4); }
/* "= X poäng använda" is redundant with the readout ("Använder X kr") — drop it on all sizes. */
.pl-redeem__kr-equiv { display: none; }
/* Mobile also drops the reassurance note (checkout is authoritative) to save drawer height. */
@media (max-width: 700px) {
  .pl-redeem__note { display: none; }
}
.pl-redeem__clear { margin-left: auto; background: transparent; border: 0; color: rgb(255 255 255 / .65); font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .pl-redeem__clear:hover { color: #fff; }
}
.pl-redeem__status { margin: 0; font-size: .82rem; color: rgb(255 255 255 / .55); }
/* Empty status line reserved min-height + the panel gap = dead space at the bottom. Remove it
   from layout entirely when there's no message; it re-appears (as a flex child) when populated. */
.pl-redeem__status:empty { display: none; }
.pl-redeem__status.is-error { color: #ff8a8a; }
/* End PUMPLAB_CART_LOYALTY_REDEEM_V1 */

/* PUMPLAB_LOYALTY_ACCOUNT_V2 — member profile / loyalty hub */
.pl-acct { padding-block: var(--spacing-12) var(--spacing-16); }
/* Header row: title (col 1, 330px = rail width) + tabs (col 2 = content width), bottom-aligned so tabs sit on the title's baseline. */
.pl-acct__top { display: grid; grid-template-columns: 330px 1fr; gap: 24px; align-items: end; margin-bottom: 24px; }
.pl-acct__pagehead { margin: 0; }
.pl-acct__eyebrow.subheading { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin: 0 0 8px; }
.pl-acct__title.h2 { font-weight: 800; letter-spacing: -.02em; margin: 0; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; white-space: nowrap; }
.pl-acct__grid { display: flex; gap: 24px; align-items: flex-start; }
/* Mobile: flatten the two outer wrappers (pl-acct__top + pl-acct__grid) via display:contents
   so their children become direct flex children of .pl-acct. Then reorder visually:
   title -> identity rail -> tabs -> content. Keeps the tabs glued to the panel content so
   switching tabs doesn't require scrolling past the identity card every time. */
@media (max-width: 749px) {
  .pl-acct { display: flex; flex-direction: column; gap: 16px; }
  .pl-acct__top { display: contents; }
  .pl-acct__pagehead { order: 1; }
  .pl-acct__tabs-wrap { order: 3; }
  .pl-acct__tabs { overflow-x: auto; }
}
/* Identity rail — split design: tier-metallic hero at top, dark body below.
   No outline anywhere. Sticky on desktop. */
.pl-acct__rail { flex: 0 0 330px; position: sticky; top: calc(var(--header-height, 80px) + 16px); padding: 0; display: flex; flex-direction: column; }
.pl-acct__rail-card { background: #1E1E1E; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
/* Tier hero — top section. Per-tier metallic via .pl-loyalty-summary__tier--{name}.
   Shiny edge: inset top highlight + faint outer ring so the metallic section reads as
   a lifted card. Customer name stays white; tier color only colors the small corner chip. */
.pl-acct__rail-hero { position: relative; padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* Keep avatar / name / badge above the sweep + glimmer layers (they must not paint over them). */
.pl-acct__rail-hero > * { position: relative; z-index: 2; }
/* Shine outline — thicker sweep angled more toward the right (top-left bright -> mid-right
   transparent by 45%, so the bottom edge of the ring stays invisible). */
.pl-acct__rail-hero::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px 12px 0 0; pointer-events: none;
  padding: 2px;
  background: linear-gradient(165deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 5;
}
/* DIAMOND rail-hero — same facet-light shimmer as the Diamond road-card (and onboarding
   page Diamond). 7s linear loop, blended `screen` over the metallic base. */
.pl-acct__rail-hero.pl-loyalty-summary__tier--diamond::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 12px 12px 0 0; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  /* Clean linear sweep only — the conic-gradient anchor at 36% 26% was creating an uneven
     bright spot on the left side that pulsed weirdly when the linear sweep overlapped it.
     Metallic Diamond base recipe (`:is()` rule with radial gradients) already provides
     ambient facet character on its own. */
  background:
    linear-gradient(105deg, transparent 45%, rgb(240 248 255 / .10) 50%, transparent 55%);
  background-size: 260% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  animation: pl_tier_light 7s linear infinite;
}
/* BLACK rail-hero — traveling-light sweep ring (the premium glowing outline). Softer
   highlight + slower loop + wider falloff so it reads as polished glow rather than a flat
   band sweeping across. Matches the Black road-card refined recipe. */
.pl-acct__rail-hero.pl-loyalty-summary__tier--black::after {
  content: ""; position: absolute; inset: 0; z-index: 5;
  border-radius: 12px 12px 0 0; padding: 2px; pointer-events: none;
  background:
    linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)) padding-box,
    repeating-linear-gradient(110deg,
      rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 32%,
      rgb(255 255 255 / .6) 50%,
      rgb(255 255 255 / 0) 68%, rgb(255 255 255 / 0) 100%) border-box;
  background-size: auto, 200% 100%;
  background-position: 0 0, -40% 0;
  opacity: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pl_plab_loop_v9 4500ms linear infinite;
}
.pl-acct__rail-hero.pl-loyalty-summary__tier--black {
  animation: pl-acct-black-bloom 4.5s ease-in-out infinite;
}
/* PLATINUM rail-hero — clean traveling light sweep, matching the road-card. */
.pl-acct__rail-hero.pl-loyalty-summary__tier--platinum::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 12px 12px 0 0; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgb(245 250 255 / .2) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 180% 0; background-repeat: no-repeat;
  animation: pl_tier_light 7.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pl-acct__rail-hero.pl-loyalty-summary__tier--diamond::after,
  .pl-acct__rail-hero.pl-loyalty-summary__tier--platinum::after,
  .pl-acct__rail-hero.pl-loyalty-summary__tier--black::after { animation: none; }
  .pl-acct__rail-hero.pl-loyalty-summary__tier--black { animation: none; }
}
.pl-acct__rail-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.pl-acct__rail-tier-chip { position: absolute; top: 14px; right: 14px; padding: 5px 10px; background: rgb(0 0 0 / .4); border-radius: 6px; font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: inherit; backdrop-filter: blur(4px); }
/* PUMPLAB_LOYALTY_AVATAR_V1 — clickable profile-picture widget on the rail hero. Click = upload
   (cropped/compressed client-side, stored base64 in loyalty.avatar via the app proxy); falls back to
   the monogram when unset. "×" removes; spinner overlay while saving. */
.pl-acct__avatar-wrap { position: relative; width: 80px; margin-bottom: 6px; }
.pl-acct__avatar { position: relative; width: 80px; height: 80px; border: 0; padding: 0; border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, rgb(255 255 255 / .14), rgb(0 0 0 / .3)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.85rem; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pl-acct__avatar-mono { line-height: 1; }
.pl-acct__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.pl-acct__avatar-wrap.is-set .pl-acct__avatar-img { display: block; }
.pl-acct__avatar-wrap.is-set .pl-acct__avatar-mono { display: none; }
.pl-acct__avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* camera overlay — the ONLY affordance: revealed on hover (desktop), shown subtly on touch */
.pl-acct__avatar-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .42); color: #fff; opacity: 0; transition: opacity .18s ease; }
.pl-acct__avatar-cam svg { width: 23px; height: 23px; }
@media (hover: hover) and (pointer: fine) { .pl-acct__avatar:hover .pl-acct__avatar-cam, .pl-acct__avatar:focus-visible .pl-acct__avatar-cam { opacity: 1; } }
/* Touch (mobile): drop the camera overlay; surface a white edit badge at the avatar corner instead. */
.pl-acct__avatar-editbtn { position: absolute; right: -2px; bottom: -2px; z-index: 1; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #141414; box-shadow: 0 2px 8px rgb(0 0 0 / .4); cursor: pointer; }
.pl-acct__avatar-editbtn svg { width: 15px; height: 15px; }
.pl-acct__avatar-wrap.is-busy .pl-acct__avatar-editbtn { opacity: .4; pointer-events: none; }
@media (hover: none) { .pl-acct__avatar-cam { opacity: 0; } .pl-acct__avatar-editbtn { display: inline-flex; } }
/* saving overlay */
.pl-acct__avatar-spin { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgb(0 0 0 / .45); }
.pl-acct__avatar-spin::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; animation: pl-avatar-spin .7s linear infinite; }
.pl-acct__avatar-wrap.is-busy .pl-acct__avatar-spin { display: flex; }
.pl-acct__avatar-wrap.is-busy .pl-acct__avatar-cam { opacity: 0; }
@keyframes pl-avatar-spin { to { transform: rotate(360deg); } }
.pl-acct__avatar-file { display: none; }
/* End PUMPLAB_LOYALTY_AVATAR_V1 */

/* PUMPLAB_LOYALTY_AVATAR_CROP_V1 — pan/zoom crop editor modal. */
.pl-avcrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / .72); backdrop-filter: blur(3px); animation: pl-avcrop-in .18s ease; }
@keyframes pl-avcrop-in { from { opacity: 0; } }
.pl-avcrop__box { width: min(340px, 100%); background: #1c1c1c; border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.pl-avcrop__title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; text-align: center; margin-bottom: 16px; }
.pl-avcrop__stage { position: relative; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #0e0e0e; touch-action: none; cursor: grab; user-select: none; }
.pl-avcrop__stage:active { cursor: grabbing; }
.pl-avcrop__img { position: absolute; max-width: none; will-change: left, top, width; pointer-events: none; }
/* Circle mask: darken outside the circle so the crop preview reads as the round avatar. */
.pl-avcrop__ring { position: absolute; inset: 0; pointer-events: none; border-radius: 12px; box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 0); }
.pl-avcrop__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgb(0 0 0 / .5); }
.pl-avcrop__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 255 255 / .85); z-index: 1; }
.pl-avcrop__zoom { display: flex; align-items: center; gap: 10px; margin: 16px 2px 4px; }
.pl-avcrop__zi { flex: 0 0 auto; border-radius: 50%; background: rgb(255 255 255 / .5); }
.pl-avcrop__zi--s { width: 8px; height: 8px; }
.pl-avcrop__zi--l { width: 14px; height: 14px; }
.pl-avcrop__zoom input[type=range] { flex: 1; accent-color: #fff; height: 4px; cursor: pointer; }
.pl-avcrop__actions { display: flex; gap: 10px; margin-top: 16px; }
.pl-avcrop__btn { flex: 1; padding: 11px; border-radius: 10px; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; border: 1.5px solid transparent; transition: filter .15s ease, border-color .2s ease; }
.pl-avcrop__btn:active { transform: scale(.98); }
.pl-avcrop__btn--solid { background: #fff; color: #111; }
.pl-avcrop__btn--solid:hover { filter: brightness(.93); }
.pl-avcrop__btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .3); }
.pl-avcrop__btn--ghost:hover { border-color: rgb(255 255 255 / .6); }
@media (prefers-reduced-motion: reduce) { .pl-avcrop { animation: none; } }
/* End PUMPLAB_LOYALTY_AVATAR_CROP_V1 */

/* PUMPLAB_LOYALTY_LEADERBOARD_V1 — rank chip on the profile card + Topplista board */
/* Rank badge — top-left of the rail hero, mirroring the DIAMOND tier chip top-right. */
.pl-acct__rankchip { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: rgb(0 0 0 / .4); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .03em; backdrop-filter: blur(4px); }
.pl-acct__rankchip[hidden] { display: none; }
/* Leaderboard rank as its own left-aligned stat (icon + #N value + "Placering" label), links to the Topplista tab. */
.pl-acct__stat--rank[hidden] { display: none; }
.pl-acct__statrank { display: flex; align-items: center; gap: 7px; line-height: 1; text-decoration: none; color: #fff; }
.pl-acct__statrank svg { width: 22px; height: 22px; color: rgb(255 255 255 / .55); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .pl-acct__statrank:hover svg { color: #fff; } }
/* Podium ranks get the medal metals (same gradients as the mini-board medal numbers). */
.pl-acct__statrank-num--1 { background: linear-gradient(145deg,#fbe7a6,#d9af4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-acct__statrank-num--2 { background: linear-gradient(145deg,#f4f7fa,#a4adb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-acct__statrank-num--3 { background: linear-gradient(145deg,#f0c79e,#a86c3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Movement since last visit — green climb / red drop (progress-delta green, clawback red). */
.pl-acct__statrank-delta { font-size: .74rem; font-weight: 800; letter-spacing: .01em; align-self: flex-start; margin-top: 1px; }
.pl-acct__statrank-delta.is-up { color: rgb(108 220 142); }
.pl-acct__statrank-delta.is-down { color: #ff8a8a; }
.pl-acct__lb-you { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .08); margin-bottom: 8px; }
.pl-acct__lb-you-rank { font-weight: 800; font-size: 1.8rem; color: #fff; }
.pl-acct__lb-you-meta { color: rgb(255 255 255 / .6); font-size: .9rem; }
.pl-acct__lb-list { list-style: none; margin: 0; padding: 0; }
.pl-acct__lb-row { display: grid; grid-template-columns: 36px 44px 1fr auto; align-items: center; gap: 18px; padding: 17px 6px; border-bottom: 1px solid rgb(255 255 255 / .05); }
.pl-acct__lb-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-acct__lb-row.is-you { background: rgb(255 255 255 / .05); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.pl-acct__lb-rank { font-weight: 700; font-size: .95rem; color: rgb(255 255 255 / .6); text-align: center; }
/* Per-row movement arrow (since your last visit). Up = green, down = red. */
.pl-acct__lb-delta { display: inline-flex; align-items: center; margin-right: 5px; font-size: .78rem; font-weight: 800; letter-spacing: -.02em; vertical-align: middle; }
.pl-acct__lb-delta-ar { font-size: .55rem; margin-left: 1px; line-height: 1; }
.pl-acct__lb-delta.is-up { color: rgb(108 220 142); }
.pl-acct__lb-delta.is-down { color: #ff8a8a; }
.pl-acct__lb-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pl-acct__lb-av--mono { display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .12); color: #fff; font-weight: 800; font-size: 1.05rem; }
.pl-acct__lb-name { font-weight: 700; font-size: 1.02rem; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__lb-tier { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgb(255 255 255 / .1); }
.pl-acct__lb-pts { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .85); font-size: .95rem; font-weight: 600; }
.pl-acct__lb-empty { color: rgb(255 255 255 / .55); padding: 18px 0; }
/* Period-toggle loading state — spinner + dim the swappable content so the All-time/Månad switch reads as loading + fades smoothly. */
.pl-acct__lb { position: relative; }
.pl-acct__lb-spin { position: absolute; left: 50%; top: 150px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .15); border-top-color: #fff; animation: pl-avatar-spin .7s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 3; }
.pl-acct__lb-podium, .pl-acct__lb-list, .pl-acct__lb-you { transition: opacity .2s ease; }
.pl-acct__lb.is-loading .pl-acct__lb-spin { opacity: 1; }
.pl-acct__lb.is-loading .pl-acct__lb-podium, .pl-acct__lb.is-loading .pl-acct__lb-list, .pl-acct__lb.is-loading .pl-acct__lb-you { opacity: .3; }
/* Top-3 podium — real winners' pedestal: #1 centre tallest gold, #2 left silver, #3 right bronze.
   Row is flex-end so the differing pedestal heights step the avatars (1 highest). */
.pl-acct__lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 28px 0 22px; }
.pl-acct__lb-pod { flex: 1; max-width: 168px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pl-acct__lb-pod-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.pl-acct__lb-pod-tier { margin-top: 8px; }
.pl-acct__lb-pod-av--mono { display: flex; align-items: center; justify-content: center; background: #1c1c1c; color: #fff; font-weight: 800; font-size: 1.2rem; }
.pl-acct__lb-pod--1 .pl-acct__lb-pod-av { width: 66px; height: 66px; box-shadow: 0 0 0 3px #dcb24e, 0 0 24px rgb(224 180 74 / .4); }
.pl-acct__lb-pod--2 .pl-acct__lb-pod-av { box-shadow: 0 0 0 3px #b9c2cd; }
.pl-acct__lb-pod--3 .pl-acct__lb-pod-av { box-shadow: 0 0 0 3px #c08552; }
.pl-acct__lb-pod-name { font-weight: 800; font-size: .92rem; color: #fff; max-width: 100%; padding: 0 4px; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__lb-pod-pts { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .55); font-size: .8rem; margin-bottom: 0; }
.pl-acct__lb-pod-base { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.pl-acct__lb-pod--1 .pl-acct__lb-pod-base { height: 118px; background: linear-gradient(160deg, #fbe7a6, #e8c768 38%, #c79a3a 76%, #dcae4e); }
.pl-acct__lb-pod--2 .pl-acct__lb-pod-base { height: 88px; background: linear-gradient(160deg, #f4f7fa, #cfd6de 38%, #9aa3ad 76%, #c4ccd4); }
.pl-acct__lb-pod--3 .pl-acct__lb-pod-base { height: 70px; background: linear-gradient(160deg, #f0c79e, #cf9460 38%, #9c6334 76%, #c08552); }
.pl-acct__lb-pod-num { font-weight: 800; letter-spacing: -.03em; line-height: .82; }
.pl-acct__lb-pod--1 .pl-acct__lb-pod-num { font-size: 4rem; color: #4a370c; }
.pl-acct__lb-pod--2 .pl-acct__lb-pod-num { font-size: 2.9rem; color: #333b44; }
.pl-acct__lb-pod--3 .pl-acct__lb-pod-num { font-size: 2.4rem; color: #46280f; }
@media (max-width: 749px) {
  .pl-acct__lb-pod-av { width: 46px; height: 46px; }
  .pl-acct__lb-pod--1 .pl-acct__lb-pod-av { width: 54px; height: 54px; }
  .pl-acct__lb-pod-name { font-size: .76rem; }
  .pl-acct__lb-pod--1 .pl-acct__lb-pod-base { height: 96px; }
  .pl-acct__lb-pod--2 .pl-acct__lb-pod-base { height: 68px; }
  .pl-acct__lb-pod--3 .pl-acct__lb-pod-base { height: 48px; }
  .pl-acct__lb-pod--1 .pl-acct__lb-pod-num { font-size: 3rem; }
  .pl-acct__lb-pod--2 .pl-acct__lb-pod-num { font-size: 2.2rem; }
  .pl-acct__lb-pod--3 .pl-acct__lb-pod-num { font-size: 1.9rem; }
}
/* Sticky own-position bar (mobile) — pins your rank to the bottom while scrolling, in your tier's metal */
.pl-acct__lb-sticky { position: sticky; bottom: 8px; z-index: 2; display: none; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #1E1E1E; border: 1px solid rgb(255 255 255 / .2); box-shadow: 0 6px 22px rgb(0 0 0 / .45); }
.pl-acct__lb-sticky-rank { font-weight: 800; font-size: 1.1rem; }
.pl-acct__lb-sticky-av { display: inline-flex; flex-shrink: 0; }
.pl-acct__lb-sticky-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pl-acct__lb-sticky-img--mono { display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .2); color: #fff; font-weight: 800; font-size: .8rem; }
.pl-acct__lb-sticky-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__lb-sticky-pts { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
@media (max-width: 749px) {
  .pl-acct__lb-sticky { display: flex; }
  .pl-acct__lb-you { display: none; }
  .pl-acct__lb-meta { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pl-acct__lb-tier { font-size: .58rem; padding: 2px 6px; }
  .pl-acct__lb-row { grid-template-columns: 30px 40px 1fr auto; gap: 14px; }
  .pl-acct__lb-av, .pl-acct__lb-av--mono { width: 40px; height: 40px; }
  .pl-acct__lb-name { font-size: .92rem; width: 100%; text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .pl-acct__lb-pts { font-size: .85rem; padding-left: 8px; }
}
/* Desktop: constrain the board to a centred column so the podium isn't lost and rows aren't stretched edge-to-edge across the wide card. */
@media (min-width: 750px) {
  .pl-acct__lb-podium { max-width: 680px; margin-inline: auto; }
  .pl-acct__lb-pod { max-width: 220px; }
}
/* Mini leaderboard on the Översikt tab — your rank + top 3 + a "Se hela" link. */
.pl-acct__lbmini-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-acct__lbmini-you { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 4px; }
.pl-acct__lbmini-you-rank { font-weight: 800; font-size: 1.5rem; color: #fff; }
.pl-acct__lbmini-you-meta { color: rgb(255 255 255 / .6); font-size: .88rem; }
.pl-acct__lbmini-list { list-style: none; margin: 6px 0 0; padding: 0; }
.pl-acct__lbmini-row { display: grid; grid-template-columns: 20px 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgb(255 255 255 / .06); }
.pl-acct__lbmini-rank { font-weight: 800; color: rgb(255 255 255 / .55); text-align: center; font-size: .95rem; }
.pl-acct__lbmini-rank--1 { background: linear-gradient(145deg,#fbe7a6,#d9af4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-acct__lbmini-rank--2 { background: linear-gradient(145deg,#f4f7fa,#a4adb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-acct__lbmini-rank--3 { background: linear-gradient(145deg,#f0c79e,#a86c3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-acct__lbmini-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pl-acct__lbmini-av--mono { display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .12); color: #fff; font-weight: 800; font-size: .75rem; }
.pl-acct__lbmini-name { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__lbmini-pts { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .75); font-size: .85rem; }
/* All-time / Månad toggle (top-right of the Topplista header) + month countdown */
.pl-acct__lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-bottom: 4px; }
.pl-acct__lb-head-left { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; min-height: 58px; }
.pl-acct__lb-titlerow .pl-acct__card-eyebrow { margin-bottom: 0; }
.pl-acct__lb-titlerow { display: flex; align-items: center; gap: 8px; }
.pl-acct__lb-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .7); font-weight: 800; font-size: .8rem; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background-color .15s ease, color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__lb-help-btn:hover { background: rgb(255 255 255 / .18); color: #fff; } }
.pl-acct__lb-help { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: min(320px, 78vw); padding: 14px 16px; border-radius: 12px; background: #232323; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
.pl-acct__lb-help[hidden] { display: none; }
.pl-acct__lb-help p { margin: 0; font-size: .85rem; line-height: 1.5; color: rgb(255 255 255 / .8); }
.pl-acct__lb-help p + p { margin-top: 8px; }
.pl-acct__lb-toggle { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pl-acct__lb-toggle-tabs { display: inline-flex; background: rgb(255 255 255 / .06); border-radius: 9px; padding: 2px; }
.pl-acct__lb-toggle-btn { border: 0; background: transparent; color: rgb(255 255 255 / .6); font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.pl-acct__lb-toggle-btn.is-active { background: #fff; color: #101010; }
/* Mobile: 3 toggles (All-time / Månad / Vinnare) drop to a full-width segmented row so they fit. */
@media (max-width: 700px) {
  .pl-acct__lb-head { flex-wrap: wrap; }
  .pl-acct__lb-toggle { width: 100%; align-items: stretch; }
  .pl-acct__lb-toggle-tabs { display: flex; width: 100%; }
  .pl-acct__lb-toggle-btn { flex: 1 1 0; text-align: center; padding: 7px 4px; }
}
.pl-acct__lb-countdown { font-size: .8rem; font-weight: 700; color: rgb(255 255 255 / .55); }
.pl-acct__lb-refresh { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .72rem; font-weight: 600; color: rgb(255 255 255 / .4); }
.pl-acct__lb-refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: #8ee6a8; flex: 0 0 auto; }
.pl-acct__lb-refresh.is-refreshing .pl-acct__lb-refresh-dot { background: #eab45a; animation: pl-lb-refresh-pulse 1s ease-in-out infinite; }
@keyframes pl-lb-refresh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Tidigare vinnare */
.pl-acct__lb-winners { margin-top: 16px; }
.pl-acct__lb-winners-list { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.pl-acct__lb-win { border: 1px solid rgb(255 255 255 / .08); border-radius: 14px; padding: 14px 16px; background: rgb(255 255 255 / .02); }
.pl-acct__lb-win.is-checking { border-color: rgb(235 170 80 / .3); }
.pl-acct__lb-win-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pl-acct__lb-win-month { font-weight: 800; color: #fff; font-size: .98rem; letter-spacing: -.01em; }
.pl-acct__lb-win-badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgb(233 196 106 / .16); color: #e9c46a; white-space: nowrap; }
.pl-acct__lb-win-badge.is-checking { background: rgb(235 170 80 / .14); color: #eab45a; text-transform: none; letter-spacing: 0; font-weight: 600; }
.pl-acct__lb-win-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-acct__lb-win-row { display: flex; align-items: center; gap: 10px; }
.pl-acct__lb-win.is-checking .pl-acct__lb-win-row { opacity: .8; }
.pl-acct__lb-win-medal { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #1a1a1a; }
.pl-acct__lb-win-medal--1 { background: linear-gradient(160deg, #f4d270, #d9a92e); }
.pl-acct__lb-win-medal--2 { background: linear-gradient(160deg, #dfe3e8, #aab1bb); }
.pl-acct__lb-win-medal--3 { background: linear-gradient(160deg, #d99b6c, #b06a3c); }
.pl-acct__lb-win-av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pl-acct__lb-win-av--mono { display: grid; place-items: center; background: rgb(255 255 255 / .1); color: #fff; font-size: .78rem; font-weight: 700; }
.pl-acct__lb-win-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__lb-win-tier { flex: 0 0 auto; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pl-acct__lb-win-pts { flex: 0 0 auto; font-weight: 700; color: rgb(255 255 255 / .8); font-size: .85rem; }
@media (max-width: 700px) { .pl-acct__lb-win-tier { display: none; } }
/* End PUMPLAB_LOYALTY_LEADERBOARD_V1 */
.pl-acct__name { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: #fff; }
/* Member number + "Sedan YYYY" — a quiet footer row below the rail shortcuts (under Logga ut). */
.pl-acct__memberline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .07); }
.pl-acct__memberno { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: rgb(255 255 255 / .6); white-space: nowrap; }
.pl-acct__since { font-size: .72rem; letter-spacing: .04em; color: rgb(255 255 255 / .45); white-space: nowrap; }
/* Legacy .pl-acct__tier — kept for any place that still uses the wide pill style. */
.pl-acct__tier { display: block; width: 100%; padding: 14px 18px; border-radius: 12px; font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-align: center; background: linear-gradient(160deg, #2c2f35, #15171b); box-shadow: 0 4px 18px rgb(0 0 0 / .35); position: relative; overflow: hidden; }
/* Per-tier material — mirrors .pl-loyalty-tier--{name} from the onboarding page.
   Applied to rail-hero (split tier-card), tier badge (legacy), and roadmap nodes via :is()
   so the metallic language is shared by every tier surface on the page. */
:is(.pl-acct__rail-hero, .pl-acct__tier, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-acct__perkspend, .pl-lbprofile__hero).pl-loyalty-summary__tier--silver   { background: radial-gradient(120% 80% at 24% 0%, rgb(228 236 247 / .26), transparent 60%), linear-gradient(160deg, #424954, #1f2229); color: #fff; }
:is(.pl-acct__rail-hero, .pl-acct__tier, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-acct__perkspend, .pl-lbprofile__hero).pl-loyalty-summary__tier--gold     { background: radial-gradient(82% 56% at 27% 0%, rgb(255 233 170 / .34), transparent 60%), radial-gradient(140% 92% at 22% -12%, rgb(212 168 78 / .28), transparent 60%), linear-gradient(160deg, #6c5526, #2a1d0c); color: #fbe4a6; }
:is(.pl-acct__rail-hero, .pl-acct__tier, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-acct__perkspend, .pl-lbprofile__hero).pl-loyalty-summary__tier--platinum { background: radial-gradient(75% 50% at 30% 2%, rgb(248 252 255 / .34), transparent 58%), radial-gradient(150% 100% at 26% -12%, rgb(214 228 245 / .32), transparent 62%), linear-gradient(158deg, #a4b0c0 0%, #7e8a9a 34%, #545d6b 64%, #353c47 100%); color: #f6f9fd; }
/* Diamond + Black share the same gem-texture (`--pl-tex` set via inline style in Liquid)
   as the loyalty-page tier cards. Multi-layer bg mirrors .pl-loyalty-tier--{diamond,black}. */
:is(.pl-acct__rail-hero, .pl-acct__tier, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-acct__perkspend, .pl-lbprofile__hero).pl-loyalty-summary__tier--diamond {
  background:
    linear-gradient(100deg, rgb(18 28 42 / .80) 0%, rgb(15 23 36 / .42) 50%, rgb(14 22 34 / .14) 100%),
    linear-gradient(#7a7a7a,#7a7a7a),
    var(--pl-tex, none),
    #20262e;
  background-size: cover, cover, 230%, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, color, normal, normal;
  color: #d6ecf9;
}
/* Diamond leaderboard chip — the busy gem texture has light crystal patches, so the light-blue
   text vanished into them at chip size. Swap it for a clean dark diamond-blue gradient (texture is
   just noise this small) so the light text always reads. Big Diamond cards keep the gem via the
   shared rule. (Isac 2026-07-09) */
.pl-acct__lb-tier.pl-loyalty-summary__tier--diamond { background: linear-gradient(155deg, #dcefff 0%, #9cc4ea 100%); color: #17293f; }
:is(.pl-acct__rail-hero, .pl-acct__tier, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-acct__perkspend, .pl-lbprofile__hero).pl-loyalty-summary__tier--black {
  background:
    radial-gradient(circle 2px at 28% 25%, rgb(255 255 255 / .95), transparent 50%),
    radial-gradient(circle 1.5px at 70% 58%, rgb(255 255 255 / .8), transparent 50%),
    radial-gradient(circle 1px at 86% 33%, rgb(255 255 255 / .7), transparent 50%),
    radial-gradient(140% 70% at 30% -22%, rgb(120 150 200 / .14), transparent 50%),
    linear-gradient(160deg, rgb(0 0 0 / .88), rgb(0 0 0 / .94)),
    linear-gradient(#6a6a6a,#6a6a6a),
    var(--pl-tex, none),
    #050507;
  background-size: cover, cover, cover, cover, cover, cover, 240%, cover;
  background-position: center, center, center, center, center, center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, normal, normal, normal, color, normal, normal;
  color: #fff;
}
/* "Ingen" fallback — no metallic, just dark neutral. Used for the prev slot when current = Silver, and for the rail when the customer is still pre-Silver. */
:is(.pl-acct__rail-hero, .pl-acct__road-name, .pl-acct__road-card, .pl-tier-badge, .pl-acct__notif-icon, .pl-toast__icon, .pl-acct__lb-tier, .pl-acct__lb-sticky, .pl-lbprofile__hero).pl-loyalty-summary__tier--ingen { background: linear-gradient(160deg, #232323, #161616); color: rgb(255 255 255 / .8); }
.pl-acct__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding-block: 4px; }
.pl-acct__stat--wide { grid-column: 1 / -1; }
.pl-acct__stat-num { display: block; font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
/* mobile: the "X kr to <tier>" stat taps through to the loyalty-progress card */
@media (max-width: 749px) { .pl-acct__stat[data-pl-tonext] { cursor: pointer; -webkit-tap-highlight-color: transparent; } .pl-acct__stat[data-pl-tonext]:active { opacity: .6; } }
.pl-acct__stat-lab { display: block; font-size: .72rem; color: rgb(255 255 255 / .45); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
/* PUMPLAB_LOYALTY_VESTING_V1 — pending points shown under "Poäng" + perks-pending banner. Reuses the
   loyalty progress-delta green (NOT the brand accent) so pending reads as "earned, on its way". */
.pl-acct__stat-pending { display: block; margin-top: 3px; color: rgb(108 220 142); font-weight: 700; font-size: .7rem; text-transform: none; letter-spacing: .01em; }
/* Live "+X p" delta under the points number when points are added (code redeem, bonus). Same green
   + fade-in as the tier-progress delta; only shown by JS once the stat is actually on screen. */
.pl-acct__stat-delta { display: block; overflow: hidden; max-height: 0; margin-top: 0; color: rgb(108 220 142); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; opacity: 0; transform: translateY(-3px); transition: max-height .32s ease, margin-top .32s ease, opacity .3s ease, transform .3s ease; pointer-events: none; font-variant-numeric: tabular-nums; }
.pl-acct__stat-delta[hidden] { display: none; }
/* max-height/margin animate so the row (and the card height) collapses smoothly instead of snapping. */
.pl-acct__stat-delta.is-in { max-height: 2.4em; margin-top: 4px; opacity: 1; transform: translateY(0); }
/* Sub-Silver locked balance — filled Material lock left of the number (the number is what
   reads as spendable), green to tie into the "låses upp vid Silver" note below. */
.pl-acct__stat-num--locked { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.pl-acct__stat-lock { display: inline-flex; flex: 0 0 auto; color: rgb(108 220 142); }
.pl-acct__stat-lock svg { width: 16px; height: 16px; display: block; }
.pl-acct__perkspend { display: flex; align-items: center; gap: 11px; margin: 0; padding: 12px 15px; border-radius: 12px; background: linear-gradient(160deg, #232323, #161616); position: relative; overflow: hidden; }
/* Banner wears the reached tier's metal via the shared :is() recipes above; text/icon
   inherit the tier's foreground color. Shine outline mirrors the rail-hero ring. */
.pl-acct__perkspend::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(165deg, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 2;
}
.pl-acct__perkspend > * { position: relative; z-index: 1; }
.pl-acct__perkspend-ico { flex: 0 0 auto; width: 20px; height: 20px; color: currentColor; display: inline-flex; }
.pl-acct__perkspend-ico svg { width: 20px; height: 20px; }
.pl-acct__perkspend-txt { font-size: .88rem; line-height: 1.45; color: currentColor; opacity: .92; }
.pl-acct__perkspend-txt strong { color: #fff; font-weight: 800; }
/* Action shortcuts — icon-left, label-centre, arrow-right. First row is the primary CTA
   (white solid, "Köp nu" vibe); other two are muted ghost rows. */
.pl-acct__shortcuts { display: flex; flex-direction: column; gap: 8px; }
.pl-acct__shortcuts a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: rgb(255 255 255 / .04); border-radius: 8px; color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color 200ms ease, color 200ms ease, transform 110ms cubic-bezier(.22, 1, .36, 1), filter 110ms ease; }
.pl-acct__shortcuts a > span:not(.pl-acct__shortcut-arr) { flex: 1; }
@media (hover: hover) and (pointer: fine) { .pl-acct__shortcuts a:hover { background: rgb(255 255 255 / .1); } }
/* Subtle press feedback — a 1px push + slight brighten (no size change). Works on touch + mouse. */
.pl-acct__shortcuts a:active { transform: translateY(1px); filter: brightness(1.12); }
.pl-acct__shortcuts__primary { background: transparent !important; color: #fff !important; font-weight: 700 !important; box-shadow: inset 0 0 0 1.5px #fff; transition: background-color 220ms ease, color 220ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__shortcuts__primary:hover { background: #fff !important; color: #101010 !important; } }
/* PUMPLAB_ACCT_LOGOUT_V1 — logout: red-fill hover on desktop (in the rail); on mobile it moves out
   of the top shortcut rail into the bottom of the Konto tab (reclaims space). */
@media (hover: hover) and (pointer: fine) { .pl-acct__shortcut--logout:hover { background: #dc2626 !important; color: #fff !important; } }
.pl-acct__konto-logout { display: none; }
@media (max-width: 699px) {
  .pl-acct__shortcuts .pl-acct__shortcut--logout { display: none; }
  .pl-acct__konto-logout { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; padding: 12px 14px; background: rgb(255 255 255 / .04); border-radius: 8px; color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; }
  .pl-acct__konto-logout:active { background: #dc2626; color: #fff; }
}
.pl-acct__shortcut-ico { flex: 0 0 auto; width: 18px; height: 18px; }
/* SVG arrow — replaces the unicode → which rendered as a long stylized ⟶ in the rail's
   display font. Consistent stroke weight with the shortcut icons. */
.pl-acct__shortcut-arr { flex: 0 0 auto; width: 16px; height: 16px; opacity: .55; }
.pl-acct__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Tab nav — inline text, simple background fade-in on hover (no slide-up).
   Wrapper exists so we can layer edge-fade gradients (::before / ::after) on top of the
   scrolling row without affecting layout. Fade visibility is controlled via data-pl-scroll
   ("start" / "middle" / "end" / "none") set by the section JS on scroll/resize. */
.pl-acct__tabs-wrap { position: relative; }
.pl-acct__tabs-wrap::before,
.pl-acct__tabs-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 1px; width: 40px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity 220ms ease;
}
.pl-acct__tabs-wrap::before { left: 0; background: linear-gradient(to right, rgb(var(--background)) 12%, rgb(var(--background) / 0)); }
.pl-acct__tabs-wrap::after  { right: 0; background: linear-gradient(to left,  rgb(var(--background)) 12%, rgb(var(--background) / 0)); }
.pl-acct__tabs-wrap[data-pl-scroll="start"]::after { opacity: 1; }
.pl-acct__tabs-wrap[data-pl-scroll="middle"]::before,
.pl-acct__tabs-wrap[data-pl-scroll="middle"]::after { opacity: 1; }
.pl-acct__tabs-wrap[data-pl-scroll="end"]::before { opacity: 1; }
.pl-acct__tabs { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 12px; border-bottom: 1px solid rgb(255 255 255 / .08); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.pl-acct__tabs::-webkit-scrollbar { display: none; }
.pl-acct__tab {
  position: relative;
  padding: 12px 12px 14px; margin: 0;
  background: rgb(255 255 255 / 0); border: 0; border-radius: 6px;
  font-size: .92rem; font-weight: 600; color: rgb(255 255 255 / .55);
  cursor: pointer; white-space: nowrap;
  transition: color 220ms ease, background-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .pl-acct__tab:hover { color: #fff; background: rgb(255 255 255 / .06); }
}
.pl-acct__tab.is-active { color: #fff; font-weight: 700; }
.pl-acct__tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: #fff; border-radius: 3px 3px 0 0;
}
.pl-acct__tab-count { opacity: .55; margin-left: 4px; font-weight: 600; }
.pl-acct__tab-count.is-hidden { display: none; }
/* The Aktivitet notification count is a white circle badge (matches the header account-icon
   pill) rather than the dimmed inline number used by "Beställningar 12". */
.pl-acct__tab-count[data-pl-notif-tabcount] { opacity: 1; margin-left: 6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #fff; color: #101010; font-family: var(--text-font-family, sans-serif); font-size: .7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle; }
.pl-acct__tab-count[data-pl-notif-tabcount].is-hidden { display: none; }
/* Panel slide-in — fades + slides each time .is-active is set. JS reflows the class on switch
   to re-trigger the animation. [hidden] hides inactive panels (display:none). */
.pl-acct__panel { display: flex; flex-direction: column; gap: 14px; }
.pl-acct__panel[hidden] { display: none; }
.pl-acct__panel.is-active { animation: pl-acct-panel-in 360ms cubic-bezier(.22,1,.36,1) both; }
/* Orders (desktop): the cards stagger in one-by-one via JS, so skip the whole-panel slide-in
   (it would race the per-card reveal). Mobile keeps the panel slide-in — no per-card stagger there. */
@media (min-width: 700px) { .pl-acct__panel[data-pl-panel="bestallningar"].is-active { animation: none; } }
@keyframes pl-acct-panel-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .pl-acct__panel.is-active { animation: none; } }
/* Stable page height when flicking tabs — keeps the footer from jumping. Desktop only. */
@media (min-width: 750px) { .pl-acct__main { min-height: 72vh; } }
/* Mobile: short tabs (e.g. Beställningar with few orders) let the footer ride up — reserve height. */
@media (max-width: 749px) { .pl-acct__main { min-height: 68vh; } }
/* Beta notice — friendly personal note from Isac (account hub + login page), dismissible. */
.pl-acct__beta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #1E1E1E; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; margin-bottom: 16px; text-align: left; }
/* On the login page: no card — white text with a big low-opacity speech bubble skewed into the
   bottom corner behind it (swap the bubble for a dev photo later). */
.pl-login__beta { margin-top: 24px; max-width: 360px; margin-inline: auto; }
.pl-login__beta .pl-acct__beta { position: relative; overflow: visible; display: block; margin-bottom: 0; background: none; border: 0; padding: 10px 8px 14px; text-align: center; }
/* Placeholder avatar top-left (swap the SVG for a photo <img> later) — with the bubble bottom-right
   it gives a diagonal composition. Hidden on the account card variant. */
.pl-acct__beta-avatar { display: none; }
/* Avatar sits at the first body line ("Jag"), its right edge just touching the text. */
.pl-login__beta .pl-acct__beta-avatar { display: grid; place-items: center; position: absolute; left: -6px; top: 30px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .4); z-index: 1; }
.pl-login__beta .pl-acct__beta-avatar svg { width: 24px; height: 24px; }
.pl-login__beta .pl-acct__beta-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Faded speech bubble (tail points right) sitting a bit behind the email line ("pumplab.se"). */
.pl-login__beta .pl-acct__beta-ico { position: absolute; right: 8px; bottom: 34px; width: 58px; height: 58px; background: none; border-radius: 0; opacity: .07; transform: rotate(16deg) scaleX(-1); pointer-events: none; }
.pl-login__beta .pl-acct__beta-ico svg { width: 100%; height: 100%; stroke-width: 1.3; }
.pl-login__beta .pl-acct__beta-body { position: relative; z-index: 1; }
.pl-login__beta .pl-acct__beta-title { color: #fff; font-size: 1.5rem; margin-bottom: 6px; }
.pl-login__beta .pl-acct__beta-text { color: rgb(255 255 255 / .82); max-width: 320px; margin-inline: auto; text-wrap: balance; }
.pl-login__beta .pl-acct__beta-sign { color: rgb(255 255 255 / .55); margin-top: 14px; }
.pl-acct__beta[hidden] { display: none; }
.pl-acct__beta-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .08); color: #fff; }
.pl-acct__beta-ico svg { width: 18px; height: 18px; }
.pl-acct__beta-body { min-width: 0; }
.pl-acct__beta-title { margin: 0 0 2px; font-weight: 800; font-size: .9rem; color: #fff; }
.pl-acct__beta-text { margin: 0; font-size: .84rem; line-height: 1.5; color: rgb(255 255 255 / .6); }
.pl-acct__beta-sign { margin: 6px 0 0; font-size: .8rem; font-weight: 700; color: rgb(255 255 255 / .5); }
/* Compact footer variant — a quiet one-liner under the newsletter (desktop + mobile). */
.pl-beta-compact { display: block; margin-top: 26px; max-width: 440px; font-size: .82rem; line-height: 1.5; opacity: .55; }
.pl-beta-compact a { text-decoration: underline; text-underline-offset: 2px; opacity: 1; font-weight: 600; }
.pl-acct__beta-text a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pl-acct__beta-close { flex: 0 0 auto; margin: -4px -6px 0 0; width: 28px; height: 28px; border: 0; background: none; color: rgb(255 255 255 / .5); font-size: 22px; line-height: 1; cursor: pointer; }
.pl-acct__beta-close:hover { color: #fff; }
/* Beta hej-note: box-less, avatar-led, centered. Desktop = under the account card (rail slot);
   mobile = between the perks card and recent orders (mid slot). Both share --bare styling. */
@media (min-width: 750px) { .pl-acct__beta-slot--mid { display: none; } }
@media (max-width: 749px) { .pl-acct__beta-slot--rail { display: none; } }
.pl-acct__beta-slot--rail { margin-top: 12px; }
.pl-acct__beta-slot--bare .pl-acct__beta { background: none; border: 0; padding: 6px 2px 2px; margin-bottom: 0; flex-direction: column; align-items: center; text-align: center; position: relative; }
.pl-acct__beta-slot--bare .pl-acct__beta-ico { display: none; }
.pl-acct__beta-slot--bare .pl-acct__beta-close { position: absolute; top: 0; right: 0; margin: 0; }
.pl-acct__beta-slot--bare .pl-acct__beta-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgb(255 255 255 / .08); }
.pl-acct__beta-slot--bare .pl-acct__beta-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-acct__beta-slot--bare .pl-acct__beta-body { max-width: 520px; }
/* Support note under Beställningar — fills the space + points at contact. */
.pl-acct__orders-support { margin-top: 18px; text-align: center; font-size: .88rem; line-height: 1.5; color: rgb(255 255 255 / .5); }
.pl-acct__orders-support p { margin: 0; }
.pl-acct__orders-support-ico { display: block; width: 26px; height: 26px; margin: 0 auto 8px; color: rgb(255 255 255 / .4); }
.pl-acct__orders-support a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* "Till toppen" — a quiet centered text row + up-arrow at the bottom of Översikt. */
.pl-acct__totop { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 4px; padding: 14px; background: none; border: 0; color: rgb(255 255 255 / .55); font-weight: 700; font-size: .85rem; letter-spacing: .02em; cursor: pointer; transition: color .15s ease; }
.pl-acct__totop:hover { color: #fff; }
.pl-acct__totop svg { width: 15px; height: 15px; }
.pl-acct__stub { color: rgb(255 255 255 / .4); padding: 24px; }
@media (max-width: 749px) {
  .pl-acct__grid { display: contents; }
  .pl-acct__rail { order: 2; position: static; flex: none; width: 100%; }
  .pl-acct__main { order: 4; width: 100%; }
}
.pl-acct__card { background: #1E1E1E; border-radius: 12px; padding: 22px; }
/* Card eyebrow = section heading inside the account hub. Bigger + white + heavier weight so each
   card reads as a real section title (h2 feeling) rather than a muted label above the content. */
.pl-acct__card-eyebrow { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin-bottom: 18px; }
/* Optional one-liner subtitle right under the eyebrow. Sits in the card-head's left column
   when present, so the right-aligned card-link stays anchored on its own column. */
.pl-acct__card-sub { font-size: .92rem; color: rgb(255 255 255 / .55); line-height: 1.4; margin: 6px 0 0; }
/* "Din väg uppåt" — full mini tier-cards mirroring .pl-loyalty-tier from the onboarding page.
   Reuses the EXACT same hover behaviour (sweep ring travelling along the 1px border via
   ::before + pl_plab_intro_v9 / pl_plab_loop_v9), the same text classes' sizes, the same
   SVG-mask checkmark in the perks list. Different markup classes only because the data shape
   (prev/now/next + tag) is different. */
/* All-tiers view — 5-card grid, shown when "Se alla nivåer" is toggled on. Reuses
   .pl-acct__road-card so all metallic palette + sweep ring + text sizes carry over.
   Current tier card gets the same lifted ring it has in the focus view. */
.pl-acct__road-all { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
/* `[hidden]` must win over the display:grid above — UA `display:none` is otherwise lost
   to author-style cascade. Same trick for the focus view when toggled hidden. */
.pl-acct__road-all[hidden], .pl-acct__road[hidden], [data-pl-roadview][hidden] { display: none !important; }
.pl-acct__road-all .pl-acct__road-card { min-height: 240px; padding: 18px 16px; }
.pl-acct__road-all .pl-acct__road-card.is-now { box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 24px rgb(0 0 0 / .55); transform: translateY(-2px); }
@media (max-width: 999px) { .pl-acct__road-all { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) {
  .pl-acct__road-all { grid-template-columns: 1fr 1fr; }
  /* Black is the odd 5th card — span it full width at the bottom, same as the onboarding
     loyalty-page tier grid (.pl-loyalty-tier--black { grid-column: 1 / -1 }). */
  .pl-acct__road-all .pl-acct__road-card.pl-loyalty-summary__tier--black { grid-column: 1 / -1; }
}

.pl-acct__road { display: flex; align-items: stretch; gap: 0; margin-bottom: 14px; position: relative; }
/* Cards get a wider share; the track between them extends behind both card edges via
   negative margin + lower z-index. */
.pl-acct__road-step { flex: 0 1 290px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.pl-acct__road-step.is-now { flex: 0 1 320px; }
/* Next card gets a constant, subtle version of the hover sweep so the eye is drawn there. */
.pl-acct__road-step.is-next .pl-acct__road-card::before {
  opacity: .35;
  animation-play-state: running;
}
/* BLACK tier = premium. Copy onboarding's exact outline treatment (.pl-loyalty-tier--black::before
   at line 26669): full opacity, livelier ~3.5s loop, brighter highlight band, slightly thicker
   border ring. On the account page this needs to be the dominant "alive" signal — the bloom
   alone is too quiet without the traveling-light ring around the rim.
   IMPORTANT: use `background-image` here, NOT the `background` shorthand — the shorthand resets
   `background-position` to 0/0 which the loop animation interpolates from, killing the motion.
   The :is(...) wrapper bumps specificity to (0,4,1) so it beats both the generic
   `.pl-acct__road-step.is-next .pl-acct__road-card::before` dimming (0,3,1) AND the all-view
   layout — Black must read at full brightness regardless of position. */
:is(.pl-acct__road-step, .pl-acct__road-all) .pl-acct__road-card.pl-loyalty-summary__tier--black::before,
.pl-acct__road-card.pl-loyalty-summary__tier--black::before {
  opacity: 1;
  padding: 2px;
  animation-play-state: running;
  animation-duration: 4500ms;
  /* Refined sweep — softer highlight (.6 vs the harsh .9), wider band falloff (32→68 vs 24→76)
     and a more visible static rim (.22). Reads as a polished glowing ring rather than a cheap
     flat band swept across. */
  background-image:
    linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)),
    repeating-linear-gradient(110deg,
      rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 32%,
      rgb(255 255 255 / .6) 50%,
      rgb(255 255 255 / 0) 68%, rgb(255 255 255 / 0) 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
/* BLACK ::after = clean diagonal lightsweep — same recipe + animation as the Diamond
   road-card so the two premium tiers have matching sheen language on the account hub.
   Wider band, brighter highlight (.22), pl_tier_light 7s linear loop. Outline ring
   (::before) + bloom (box-shadow) stay untouched — only the lightsweep changes. */
.pl-acct__road-card.pl-loyalty-summary__tier--black::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 43%, rgb(255 255 255 / .24) 50%, transparent 57%);
  background-size: 260% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  animation: pl_tier_light 7s linear infinite;
}
/* BLACK intense bloom — slow pulsing outer halo + inset blue rim. Same recipe + colours
   as the onboarding `pl_loyalty_black_bloom` (60px/3px inner glow + 130px/18px wide aura
   + inset 72px blue rim), just looped infinite instead of one-shot on scroll-into-view.
   The premium tier needs to read as "alive" even when static on the account hub. */
.pl-acct__road-card.pl-loyalty-summary__tier--black {
  animation: pl-acct-black-bloom 5s ease-in-out infinite;
}
@keyframes pl-acct-black-bloom {
  0%, 100% {
    box-shadow:
      inset 0 0 64px -22px rgb(100 130 180 / .26),
      inset 0 0 0 1px rgb(255 255 255 / .18),
      0 0 32px 2px rgb(150 175 220 / .16),
      0 0 80px 8px rgb(110 140 190 / .08);
  }
  50% {
    box-shadow:
      inset 0 0 72px -18px rgb(115 145 200 / .4),
      inset 0 0 0 1px rgb(255 255 255 / .28),
      0 0 44px 3px rgb(150 175 220 / .28),
      0 0 100px 12px rgb(110 140 190 / .14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pl-acct__road-card.pl-loyalty-summary__tier--black::after { animation: none; opacity: 0; }
  .pl-acct__road-card.pl-loyalty-summary__tier--black { animation: none; box-shadow: 0 0 32px 6px rgb(150 175 220 / .22); }
}
/* DIAMOND — the shifting facet light from the onboarding page. ::after layer with the same
   linear + conic gradients and `pl_tier_light` 7s animation (defined globally). Sits below
   the card text (z-index 0) so legibility stays intact. */
.pl-acct__road-card.pl-loyalty-summary__tier--diamond::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  /* Clean linear sweep only — the conic-gradient anchor at 36% 26% was creating an uneven
     bright spot on the left side that pulsed weirdly when the linear sweep overlapped it.
     Metallic Diamond base recipe (`:is()` rule with radial gradients) already provides
     ambient facet character on its own. */
  background:
    linear-gradient(105deg, transparent 45%, rgb(240 248 255 / .10) 50%, transparent 55%);
  background-size: 260% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  animation: pl_tier_light 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pl-acct__road-card.pl-loyalty-summary__tier--diamond::after { animation: none; }
}
/* PLATINUM road-card — a clean traveling light sweep (universal sheen on the silver tier). */
.pl-acct__road-card.pl-loyalty-summary__tier--platinum::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgb(245 250 255 / .22) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 180% 0; background-repeat: no-repeat;
  animation: pl_tier_light 7.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pl-acct__road-card.pl-loyalty-summary__tier--platinum::after { animation: none; }
}
/* Desync the per-tier sweeps with negative delays so adjacent cards never sweep in unison
   (synced sweeps read as mechanical). Declared after the shorthands so the delay sticks. */
.pl-acct__road-card.pl-loyalty-summary__tier--platinum::after { animation-delay: -1.5s; }
.pl-acct__road-card.pl-loyalty-summary__tier--diamond::after  { animation-delay: -4.6s; }
.pl-acct__road-card.pl-loyalty-summary__tier--black::after    { animation-delay: -7s; }
.pl-acct__rail-hero.pl-loyalty-summary__tier--platinum::after { animation-delay: -3.4s; }
.pl-acct__rail-hero.pl-loyalty-summary__tier--diamond::after  { animation-delay: -6.5s; }
@media (hover: hover) and (pointer: fine) {
  .pl-acct__road-step.is-next .pl-acct__road-card:hover::before { opacity: 1; }
}
.pl-acct__road-card {
  --tier-accent: linear-gradient(90deg,#cfd5db,#9aa1a8);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: 220px;
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg,#212325,#141517);
  cursor: default;
  translate: 0 0;
  transition: translate 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 480ms ease;
}
.pl-acct__road-card > * { position: relative; z-index: 2; }
/* Same traveling-light sweep ring as the onboarding cards. Paused by default, runs on hover. */
.pl-acct__road-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 4; pointer-events: none;
  background:
    linear-gradient(rgb(255 255 255 / .05), rgb(255 255 255 / .05)) padding-box,
    repeating-linear-gradient(110deg,
      rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 26%,
      rgb(255 255 255 / .5) 50%,
      rgb(255 255 255 / 0) 74%, 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);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  /* Skip the intro burst (pl_plab_intro_v9 swept ~3 laps in 950ms — designed for the
     onboarding cards' reveal-into-view, jarring as a hover entrance on a static card).
     Just the slow 5.2s loop here, paused by default and resumed on hover / for the next card. */
  animation: pl_plab_loop_v9 5200ms linear infinite;
  animation-play-state: paused;
}
/* Diamond carries the traveling rim-light ON by default (not just on hover) + a soft glow. */
.pl-acct__road-card.pl-loyalty-summary__tier--diamond::before {
  opacity: 1; animation-play-state: running;
  filter: drop-shadow(0 0 6px rgb(220 235 255 / .5));
}
/* Account roadmap cards are display-only — no lift, no pointer. The rim-light hover stays. */
@media (hover: hover) and (pointer: fine) {
  .pl-acct__road-card:hover::before { opacity: 1; animation-play-state: running; }
  /* Premium tiers (Diamond + Black) glow stronger on hover — only the interactive tier cards
     (roadmap + onboarding), NOT the rail-hero identity card. drop-shadow filter so it never
     fights Black's box-shadow bloom. */
  .pl-acct__road-card.pl-loyalty-summary__tier--diamond:hover,
  .pl-loyalty-tier--diamond:hover { filter: drop-shadow(0 0 13px rgb(205 228 255 / .42)); }
  .pl-acct__road-card.pl-loyalty-summary__tier--diamond:hover::before,
  .pl-loyalty-tier--diamond:hover::before { filter: drop-shadow(0 0 11px rgb(220 235 255 / .7)) drop-shadow(0 0 3px rgb(255 255 255 / .85)); }
  .pl-acct__road-card.pl-loyalty-summary__tier--black:hover,
  .pl-loyalty-tier--black:hover { filter: drop-shadow(0 0 21px rgb(150 175 220 / .6)); }
}
/* Text — same families + sizes as .pl-loyalty-tier__* on the onboarding page, dialled down a
   notch because the roadmap is 3 cards in a narrower column. */
.pl-acct__road-card-name {
  font-family: var(--heading-font-family); font-weight: var(--heading-font-weight, 800);
  text-transform: uppercase; letter-spacing: -.02em; line-height: .95;
  font-size: clamp(1.2rem, 1.3vw, 1.5rem); color: #fff;
}
.pl-acct__road-card-floor { margin-top: 6px; font-size: .78rem; color: rgb(255 255 255 / .5); }
.pl-acct__road-card-mult {
  margin-top: auto;
  font-family: var(--heading-font-family); font-weight: var(--heading-font-weight, 800);
  font-size: clamp(1.5rem, 1.6vw, 1.85rem); line-height: 1; letter-spacing: -.02em; color: #fff;
  display: flex; align-items: baseline; gap: 5px;
}
.pl-acct__road-card-mult small { font-family: var(--text-font-family, inherit); font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: rgb(255 255 255 / .5); text-transform: lowercase; }
.pl-acct__road-card-mult--locked { font-size: clamp(1rem, 1.1vw, 1.2rem); color: rgb(255 255 255 / .85); align-items: flex-start; flex-direction: column; gap: 4px; }
.pl-acct__road-card-mult--locked small { font-size: .68rem; letter-spacing: 0; text-transform: none; }
.pl-acct__road-card-perks {
  list-style: none; margin: 13px 0 0; padding: 13px 0 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  display: flex; flex-direction: column; gap: 7px;
}
.pl-acct__road-card-perks li {
  position: relative; padding-left: 22px;
  font-size: .82rem; line-height: 1.25; font-weight: 600; color: #fff;
}
.pl-acct__road-card-perks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pl-acct__road-tag { font-size: .7rem; color: rgb(255 255 255 / .5); text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.pl-acct__road-step.is-now .pl-acct__road-tag { color: #fff; font-weight: 700; }
/* Progress track — flat rectangle that visually LEAVES the current card on the left
   (negative margin + lower z-index so it tucks behind the gold card's right edge) and ENDS
   in a chunkier arrowhead pointing at the next card. Shimmer flows along the fill to give
   the path a sense of motion toward the destination. */
.pl-acct__road-track {
  flex: 1 1 0; min-width: 100px;
  align-self: center;
  display: flex; flex-direction: column; gap: 14px;
  margin-inline: -24px;       /* tucks both ends behind the neighbouring cards */
  padding-inline: 0;
  position: relative; z-index: 1;
}
/* While the count-up ticks, reserve max width + tabular digits + right-align so the shrinking number
   ("€3.500,00" → "€10,00") doesn't wobble / re-centre the "to Black" line each frame. */
.pl-acct__road-track-label [data-pl-progress-num].is-counting { display: inline-block; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.pl-acct__road-track-bar {
  height: 18px;
  /* Bar bg carries a soft tint from the CURRENT tier colour (CSS var set on .pl-acct via
     Liquid) on the left, fading into the neutral .07 white track. */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pl-cur-tier-color, #fff) 45%, transparent) 0%, color-mix(in srgb, var(--pl-cur-tier-color, #fff) 0%, transparent) 28%),
    rgb(255 255 255 / .07);
  overflow: hidden;
  position: relative;
  border-radius: 0;
}
.pl-acct__road-track-bar > span {
  display: block; height: 100%;
  position: relative;
  border-radius: 0 4px 4px 0; /* track stays square (reaches the tier edges); only the fill's leading edge rounds */
  /* Fill: dominant tier metal across most of the bar (so the journey reads as "from the
     current tier I'm leaving"), brightening only at the leading 30% via a color-mix with white
     for a polished glow-into-next-tier feel. The leading-edge pulsing halo (::after) provides
     forward motion on its own — the sweep flow animation was weird and got dropped. */
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--pl-cur-tier-color, #fff) 70%, #fff 30%) 0%,
      color-mix(in srgb, var(--pl-cur-tier-color, #fff) 30%, #fff 70%) 35%,
      #fff 70%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--pl-cur-tier-color, #fff) 30%, transparent);
  transform-origin: left center;
  animation: pl-acct-fill 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
/* Pulsing glow at the fill's leading edge — invisible anchor (0×0), the box-shadow's
   blur is what the eye sees: a soft white halo that breathes. */
.pl-acct__road-track-bar > span::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 0; height: 0;
  background: transparent;
  box-shadow: 0 0 18px 8px rgb(255 255 255 / .55);
  transform: translateY(-50%);
  animation: pl-acct-pulse 1.6s ease-in-out infinite;
}
@keyframes pl-acct-flow {
  from { background-position: -100% 0, 0 0; }
  to   { background-position: 200% 0, 0 0; }
}
@keyframes pl-acct-pulse {
  0%, 100% { opacity: .55; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-acct__road-track-bar > span { animation: pl-acct-fill 1.1s cubic-bezier(.22, 1, .36, 1) both; }
  .pl-acct__road-track-bar > span::after { animation: none; opacity: .85; }
}
/* Max-tier (Black) completed track: bar is full + static. Solid tier metal across with a
   subtle inset highlight — no flow, no leading halo, the journey is done. */
.pl-acct__road-track--max .pl-acct__road-track-bar > span {
  animation: pl-acct-fill 1.1s cubic-bezier(.22, 1, .36, 1) both;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pl-cur-tier-color, #fff) 75%, #fff 25%) 0%,
    var(--pl-cur-tier-color, #fff) 100%);
}
.pl-acct__road-track--max .pl-acct__road-track-bar > span::after { display: none; }
.pl-acct__road-track-label {
  font-size: .88rem; color: rgb(255 255 255 / .7);
  text-align: center; line-height: 1.3;
  padding-inline: 24px; /* compensate for the negative margin so the label stays centred over the visible bar */
}
.pl-acct__road-track-label strong { color: #fff; font-weight: 800; white-space: nowrap; }
@media (min-width: 1000px) { .pl-acct__road-track-label strong { font-size: 1.3rem; } }
/* Green "+X kr" delta that ticks down to 0 as the bar fills (one-shot when spend grew). Absolutely
   positioned below the label so it never pushes the bar up when it appears. */
.pl-acct__road-track-delta { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; text-align: center; font-size: 1.15rem; font-weight: 800; color: rgb(108 220 142); opacity: 0; transform: translateY(-3px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.pl-acct__road-track-delta.is-in { opacity: 1; transform: translateY(0); }

/* Loyalty roadmap = the locked .pl-acct__road focus view (current tier + bar + next). The scrollable
   carousel (.pl-acct__roadx*) was removed after endless glow/overflow/mobile issues — history now
   lives in the "Se alla nivåer" all-tiers toggle. */
/* Completed-segment bars (the 100% "Avklarad" bars in history) read dimmer than the live one. */
.pl-acct__road-track--done .pl-acct__road-track-label { color: rgb(255 255 255 / .42); }
.pl-acct__road-track--done .pl-acct__road-track-bar > span { background: rgb(255 255 255 / .5); }
@media (max-width: 700px) {
  /* "?" to the card's top-right on mobile, no extra padding. */
  .pl-acct__card-head { position: relative; }
  .pl-acct__card-head .pl-acct__help { position: absolute; top: 2px; right: 0; margin: 0; transform: none; }
}
/* Below ~999px the 2-card-with-track layout becomes too tight — the centred label gets
   crushed between the cards on either side. Switch to a clean vertical stack: cards on
   top of each other with a slim capsule progress bar between them. No chevron / arrow
   shape — the bar just shows progress as a horizontal pill. */
/* Stack the two tier cards vertically across the whole NARROW-DESKTOP range, not just <1000px:
   between 1000-1149px the rail is still beside the main column, leaving it ~670px wide where two
   ~290px cards + the track squish (Isac 2026-07-09). 1150px is the first width the horizontal
   focus view breathes. The stacked layout is the proven mobile one — just applied wider. */
@media (max-width: 1149px) {
  /* Vertical stack: cards + track each take their NATURAL height. The base rules give the
     step flex:1 1 auto and the track flex:1 1 0 — both GROW, which in a column flex makes
     them stretch to fill any extra container height (the content panel stretches to the
     sticky identity-rail height via the hub grid), and that surplus gets distributed as a
     big empty gap between the current-tier card and the progress bar. flex:0 0 auto pins
     every child to content height so there's no surplus to distribute. */
  .pl-acct__road { flex-direction: column; align-items: stretch; gap: 14px; }
  /* CRITICAL: the desktop `flex: 0 1 290px/320px` basis is a WIDTH in the row layout, but in
     this column it becomes a HEIGHT — forcing each step ~290-320px tall and leaving a big
     empty gap below the (shorter) card content. The `.is-now` rule is two-class specificity
     so the single-class reset below it must be matched on `.is-now` too, or it loses. */
  .pl-acct__road-step,
  .pl-acct__road-step.is-now { flex: 0 0 auto; max-width: none; }
  .pl-acct__road-track { flex: 0 0 auto; align-self: stretch; padding: 0; margin: 0; width: 100%; gap: 10px; }
  /* Mobile: the progress IS the hero (the motivating "X kr till next" number) — make the bar thicker
     and the amount big, so it doesn't read as a thin line lost between two large cards. */
  .pl-acct__road-track-bar { clip-path: none; height: 14px; border-radius: 999px; }
  .pl-acct__road-track-bar > span { border-radius: 999px; }
  .pl-acct__road-track-label { padding-inline: 0; font-size: 1rem; color: rgb(255 255 255 / .6); }
  .pl-acct__road-track-label strong { display: block; font-size: 1.7rem; line-height: 1.1; margin-bottom: 1px; }
  /* In the vertical mobile stack the absolute delta would land on the next card — keep it in flow.
     max-height/margin animate so the card height eases when it appears/disappears (no snap). */
  .pl-acct__road-track-delta { position: static; margin-top: 0; font-size: 1.05rem; max-height: 0; overflow: hidden; transition: max-height .32s ease, margin-top .32s ease, opacity .3s ease, transform .3s ease; }
  .pl-acct__road-track-delta.is-in { max-height: 2em; margin-top: 6px; }
}
.pl-acct__bar { height: 8px; border-radius: 999px; background: rgb(255 255 255 / .1); overflow: hidden; }
.pl-acct__bar > span { display: block; height: 100%; background: #fff; transform-origin: left center; animation: pl-acct-fill 1.1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pl-acct-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pl-acct__bar > span { animation: none; } }
.pl-acct__road-hint { font-size: .84rem; color: rgb(255 255 255 / .6); margin-top: 10px; }
.pl-acct__road-hint strong { color: #fff; }
/* Förmåner grid — horizontal list of every perk in the program. Active (unlocked) perks
   light up with white icon + check; locked perks dim to .35 and show "Vid {tier}". */
.pl-acct__road-perks { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .07); }
.pl-acct__road-perks-head { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .55); margin-bottom: 14px; }
.pl-acct__road-perks-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pl-acct__road-perk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 10px; background: rgb(255 255 255 / .04); border-radius: 10px; opacity: .4; transition: opacity 220ms ease, background-color 220ms ease; }
.pl-acct__road-perk.is-active { opacity: 1; background: rgb(255 255 255 / .08); }
/* Icon stroke uses a SOLID #fff via currentColor; opacity lives on the WRAPPER so overlapping
   stroke segments don't add up to a brighter outline (alpha-compositing trap). */
.pl-acct__road-perk-ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #fff; opacity: .55; }
.pl-acct__road-perk.is-active .pl-acct__road-perk-ico { opacity: 1; }
.pl-acct__road-perk-ico svg { width: 100%; height: 100%; }
.pl-acct__road-perk-name { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.2; }
.pl-acct__road-perk-status { font-size: .68rem; font-weight: 600; color: rgb(255 255 255 / .55); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.pl-acct__road-perk.is-active .pl-acct__road-perk-status { color: rgb(142 230 168 / .85); }
.pl-acct__road-perk-check { display: inline-block; margin-right: 2px; }
@media (max-width: 999px) { .pl-acct__road-perks-grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: the 2x3 grid eats a lot of scroll → clamp to ~1.5 perk-rows and fade the overflow into a
   white "Visa mer" label that sits ON the gradient. Toggles open/closed. Desktop/tablet: no clamp,
   the fade label is hidden entirely. */
.pl-acct__road-perks-fade { display: none; }
@media (max-width: 599px) {
  .pl-acct__road-perks-grid { grid-template-columns: 1fr 1fr; }
  /* ~1.5 perk-rows visible so it's clear there are more; the gradient fades the clipped bottom.
     JS drives max-height to the exact scrollHeight so the collapse animates real pixels (a fixed
     large open value would waste the transition before the content starts visibly moving). */
  .pl-acct__road-perks-clip { position: relative; max-height: 172px; overflow: hidden; transition: max-height .45s ease; }
  /* Gradient is always present; its opacity fades in/out on the SAME transition as max-height so
     closing is one smooth motion (not gradient-pops-then-slides). */
  .pl-acct__road-perks-clip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(30, 30, 30, 0), #1E1E1E 88%); pointer-events: none; opacity: 1; transition: opacity .45s ease; }
  .pl-acct__road-perks-clip.is-open::after { opacity: 0; }
  /* Toggle = a static centered row BELOW the clip. It never repositions on toggle (only the clip's
     max-height animates), so closing stays smooth + reliable. */
  .pl-acct__road-perks-fade { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0 2px; border: 0; background: none; color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
}
.pl-acct__give { text-align: center; }
.pl-acct__give-num { display: block; font-weight: 800; font-size: 1.85rem; letter-spacing: -.02em; color: #fff; line-height: 1; }
.pl-acct__give-num--perk { font-size: 1rem; line-height: 1.2; letter-spacing: 0; }
.pl-acct__give-lab { display: block; font-size: .72rem; color: rgb(255 255 255 / .5); margin-top: 4px; }
.pl-acct__modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pl-acct__mod-strong { font-weight: 700; font-size: 1.05rem; color: #fff; }
.pl-acct__mod-status { font-size: .82rem; color: rgb(255 255 255 / .6); margin-top: 3px; }
.pl-acct__mod-foot { display: block; font-size: .8rem; color: rgb(255 255 255 / .55); margin-top: 10px; border-top: 1px solid rgb(255 255 255 / .07); padding-top: 10px; }
.pl-acct__mod-foot strong { color: #fff; }
.pl-acct__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-acct__quick a { display: flex; flex-direction: column; gap: 2px; background: rgb(255 255 255 / .05); border-radius: 10px; padding: 14px; font-size: .82rem; color: rgb(255 255 255 / .7); text-decoration: none; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__quick a:hover { background: rgb(255 255 255 / .1); } }
.pl-acct__quick strong { color: #fff; font-size: 1.05rem; }
/* "Tjäna poäng" full-width CTA — solid white pill below the 3 quick-earn rows. Desktop
   keeps it visible but inline-ish; mobile gets the full-width emphasis. */
.pl-acct__quick-cta { display: none; margin-top: 14px; padding: 14px 18px; border-radius: 10px; background: #fff; color: #0a0a0a; text-align: center; text-decoration: none; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; transition: background-color 200ms ease, transform 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__quick-cta:hover { background: rgb(255 255 255 / .9); transform: translateY(-1px); } }
@media (max-width: 749px) { .pl-acct__quick { grid-template-columns: 1fr; } .pl-acct__quick-cta { display: block; } }
@media (max-width: 749px) { .pl-acct__modules { grid-template-columns: 1fr; } }
.pl-acct__orders { display: flex; flex-direction: column; gap: 14px; }

/* PUMPLAB_LOYALTY_ORDERCARD_V1 — Nike-style order row: BIG product image (left) · status chips +
   Monument name + variant + meta (middle) · stacked [Visa] [Köp igen] buttons (right). Neutral only. */
.pl-ordercard { background: #1E1E1E; border-radius: 12px; padding: 18px; transition: background-color .18s ease; }
.pl-ordercard__row { display: flex; align-items: flex-start; gap: 20px; }
/* The whole product area (image + info) links to the order detail page; the action buttons stay separate. */
.pl-ordercard__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 24px; text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { .pl-ordercard:has(.pl-ordercard__main:hover) { background: #242424; } }
.pl-ordercard__media { flex: 0 0 auto; width: 200px; }
.pl-ordercard__img { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 12px; background: #2a2a2a; }
.pl-ordercard__thumb-ph { background: repeating-linear-gradient(45deg, #262626, #262626 6px, #2c2c2c 6px, #2c2c2c 12px); }
/* Info column vertically centred against the big image so the text isn't stranded up top. */
.pl-ordercard__info { flex: 1 1 auto; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 6px; }
.pl-ordercard__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pl-ordercard__status { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.pl-ordercard__status-main { font-weight: 700; font-size: .95rem; color: rgb(255 255 255 / .7); }
.pl-ordercard__status-sub { font-size: .85rem; color: rgb(255 255 255 / .55); }
.pl-ordercard__status--ok .pl-ordercard__status-main, .pl-ordercard__status--ok .pl-ordercard__status-sub { color: #63d68f; }
.pl-ordercard__status--warn .pl-ordercard__status-main { color: #ff9d9d; }
.pl-ordercard__status--pending .pl-ordercard__status-main { color: #eab45a; }
.pl-ordercard__name { color: #fff; font-family: 'Monument Extended Black', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: .01em; line-height: 1.1; }
.pl-ordercard__name .pl-tm { font-size: .45em; vertical-align: super; margin-left: 1px; opacity: .7; }
.pl-ordercard__variant { font-size: .88rem; color: rgb(255 255 255 / .55); }
.pl-ordercard__more { font-size: .82rem; color: rgb(255 255 255 / .5); }
.pl-ordercard__rest { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pl-ordercard__rest-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #2a2a2a; display: block; }
.pl-ordercard__rest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-ordercard__rest-thumb .pl-ordercard__thumb-ph { display: block; width: 100%; height: 100%; }
.pl-ordercard__rest-more { font-size: .82rem; color: rgb(255 255 255 / .5); }
.pl-ordercard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: .82rem; color: rgb(255 255 255 / .5); }
.pl-ordercard__meta-id, .pl-ordercard__meta-total { font-weight: 700; color: rgb(255 255 255 / .7); }
.pl-ordercard__meta-dot { opacity: .5; }
.pl-ordercard__actions { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 170px; }
.pl-ordercard__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer; border: 0; transition: background-color .18s ease, color .18s ease, opacity .18s ease; white-space: nowrap; }
.pl-ordercard__btn--solid { background: #fff; color: #111; }
.pl-ordercard__btn--ghost { background: rgb(255 255 255 / .08); color: #fff; }
.pl-ordercard__btn--link { background: none; color: rgb(255 255 255 / .6); padding: 4px 16px; font-weight: 600; font-size: .82rem; }
.pl-ordercard__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .pl-ordercard__btn--solid:hover { background: rgb(255 255 255 / .85); }
  .pl-ordercard__btn--ghost:hover { background: rgb(255 255 255 / .16); }
  .pl-ordercard__btn--link:hover { color: #fff; }
}
.pl-ordercard__note { margin: 12px 0 0; font-size: .8rem; color: rgb(255 255 255 / .6); }
.pl-ordercard__note--error { color: #ff9d9d; }
/* Mobile: image top-left smaller, actions become a full-width button row below. */
/* Mobile: image left + info right (top-aligned), buttons full-width below. */
@media (max-width: 640px) {
  .pl-ordercard__row { flex-wrap: wrap; gap: 16px; align-items: flex-start; }
  .pl-ordercard__main { flex-basis: 100%; gap: 16px; }
  .pl-ordercard__media { width: 128px; align-self: flex-start; }
  .pl-ordercard__img { width: 128px; height: 128px; }
  .pl-ordercard__info { flex-basis: calc(100% - 144px); align-self: flex-start; gap: 4px; }
  .pl-ordercard__name { font-size: 1.3rem; }
  .pl-ordercard__actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .pl-ordercard__actions .pl-ordercard__btn--solid, .pl-ordercard__actions .pl-ordercard__btn--ghost { flex: 1 1 40%; }
  /* "Spåra paket" is desktop-only per Isac — hide on phones (tracking still lives in the detail view). */
  .pl-ordercard__btn--link { display: none; }
}

/* PUMPLAB_CART_EMPTY_BTN_V1 — exact copy of the drop-hero primary CTA. Scoped over
   `.prose a:not(.button)` (0,2,1) which otherwise injects an underline-gradient background
   and kills the white fill. */
.cart-drawer .empty-state .pl-cart-empty__btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 27px; font-family: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: .015em; border: 1.5px solid #fff; border-radius: 7px; background: #fff; color: #101010; text-decoration: none; cursor: pointer; transition: background-color .24s ease, border-color .24s ease, transform .22s cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .cart-drawer .empty-state .pl-cart-empty__btn:hover { background: #ebebeb; border-color: #ebebeb; } }
.cart-drawer .empty-state .pl-cart-empty__btn:active { transform: scale(.97); }
/* Let the message use the full drawer width so "vi har allt för din träning" stays one line. */
.cart-drawer .empty-state .pl-cart-empty__msg { max-width: none; text-wrap: pretty; }

/* PUMPLAB_LOYALTY_ORDERVIEW_ANIM_V1 — crossfade the Beställningar list ↔ order detail. Outgoing
   view fades down/out, incoming view fades + rises in. Reduced-motion → instant. */
.pl-acct-out { opacity: 0; transform: translateY(6px); transition: opacity .17s ease, transform .17s ease; pointer-events: none; }
@keyframes pl-acct-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pl-acct-in { animation: pl-acct-in .34s cubic-bezier(.22, 1, .36, 1) both; }
/* Staggered per-row entrance (cards on the way back, receipt rows in the detail). */
@keyframes pl-acct-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pl-acct-rise { animation: pl-acct-rise .44s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .pl-acct-in { animation: none; } .pl-acct-out { transition: none; } .pl-acct-rise { animation: none; } }

/* PUMPLAB_LOYALTY_ORDERDETAIL_V1 — in-page order detail (receipt look). */
.pl-orderdet__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 0; border: 0; background: none; color: rgb(255 255 255 / .6); font-weight: 600; font-size: .9rem; cursor: pointer; transition: color .18s ease; }
.pl-orderdet__back svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .pl-orderdet__back:hover { color: #fff; } }
.pl-orderdet__head { margin-bottom: 20px; }
.pl-orderdet__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pl-orderdet__title { margin: 0; font-weight: 800; font-size: 1.6rem; letter-spacing: -.01em; color: #fff; }
.pl-orderdet__headchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-orderdet__sub { margin-top: 6px; font-size: .9rem; color: rgb(255 255 255 / .5); }
.pl-orderdet__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.pl-orderdet__action { display: flex; align-items: center; gap: 12px; background: #1E1E1E; border-radius: 12px; padding: 16px 18px; text-decoration: none; color: #fff; transition: background-color .18s ease; }
@media (hover: hover) and (pointer: fine) { a.pl-orderdet__action:hover { background: #242424; } }
.pl-orderdet__action.is-disabled { opacity: .5; pointer-events: none; }
.pl-orderdet__action-ico { flex: 0 0 auto; display: inline-flex; color: #fff; }
.pl-orderdet__action-ico svg { width: 22px; height: 22px; }
.pl-orderdet__action-label { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: .95rem; }
.pl-orderdet__action-note { font-weight: 500; font-size: .78rem; color: rgb(255 255 255 / .5); }
/* Cancel action as a card matching Spåra (cancel-order-action variant: 'card'). */
.pl-cancelrow--card { display: block; background: #1E1E1E; border-radius: 12px; transition: background-color .18s ease; }
.pl-cancelrow--card .pl-cancelrow__trigger { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; color: #fff; }
.pl-cancelrow--card .pl-cancelrow__ico { flex: 0 0 auto; display: inline-flex; }
.pl-cancelrow--card .pl-cancelrow__ico svg { width: 22px; height: 22px; }
.pl-cancelrow--card .pl-cancelrow__label { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; font-weight: 700; font-size: .95rem; }
.pl-cancelrow--card .pl-cancelrow__note { font-weight: 500; font-size: .78rem; color: rgb(255 255 255 / .5); }
.pl-cancelrow--card .pl-cancelrow__confirm { padding: 0 18px 16px; gap: 10px; justify-content: flex-start; }
.pl-cancelrow--card .pl-cancelrow__q { flex-basis: 100%; text-align: left; }
@media (hover: hover) and (pointer: fine) { .pl-cancelrow--card:hover { background: #242424; } .pl-cancelrow--card:hover .pl-cancelrow__trigger { color: #ff9d9d; } }
.pl-orderdet__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.pl-orderdet__col-main { display: flex; flex-direction: column; gap: 18px; }
.pl-orderdet__status { display: flex; flex-direction: column; gap: 1px; }
.pl-orderdet__status-main { font-weight: 700; font-size: 1.2rem; color: rgb(255 255 255 / .7); }
.pl-orderdet__status-sub { font-size: .92rem; color: rgb(255 255 255 / .55); margin-top: 2px; }
.pl-orderdet__status--ok .pl-orderdet__status-main, .pl-orderdet__status--ok .pl-orderdet__status-sub { color: #63d68f; }
.pl-orderdet__status--warn .pl-orderdet__status-main { color: #ff9d9d; }
.pl-orderdet__status--pending .pl-orderdet__status-main { color: #eab45a; }
.pl-orderdet__line { display: flex; align-items: center; gap: 22px; padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / .08); text-decoration: none; color: inherit; }
/* No hover highlight on the title/cover in the order view (per Isac) — still a link. */
.pl-orderdet__line:first-child { padding-top: 4px; }
.pl-orderdet__line:last-child { border-bottom: 0; }
.pl-orderdet__line-thumb { flex: 0 0 auto; width: 208px; height: 208px; border-radius: 14px; overflow: hidden; background: #2a2a2a; display: block; }
.pl-orderdet__line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-orderdet__thumb-ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #262626, #262626 6px, #2c2c2c 6px, #2c2c2c 12px); }
.pl-orderdet__line-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-orderdet__line-name { color: #fff; font-family: 'Monument Extended Black', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: .02em; }
.pl-orderdet__line-name .pl-tm { font-size: .5em; vertical-align: super; margin-left: 1px; opacity: .7; }
.pl-orderdet__line-variant { font-size: .82rem; color: rgb(255 255 255 / .55); }
.pl-orderdet__line-qty { font-size: .8rem; color: rgb(255 255 255 / .45); }
.pl-orderdet__line-price { flex: 0 0 auto; font-weight: 700; color: #fff; }
.pl-orderdet__receipt { display: flex; flex-direction: column; gap: 16px; }
.pl-orderdet__rblock { display: flex; flex-direction: column; gap: 6px; }
.pl-orderdet__rblock + .pl-orderdet__rblock { padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .08); }
.pl-orderdet__rhead { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .5); }
.pl-orderdet__radr, .pl-orderdet__radr p { margin: 0; font-size: .88rem; line-height: 1.6; color: rgb(255 255 255 / .85); }
.pl-orderdet__rpay { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: rgb(255 255 255 / .85); }
.pl-orderdet__rpay-ico { flex: 0 0 auto; display: inline-flex; color: rgb(255 255 255 / .65); }
.pl-orderdet__rpay-ico svg { width: 26px; height: 26px; }
.pl-orderdet__paylogo { display: inline-flex; }
.pl-orderdet__paylogo svg { width: 40px; height: auto; border-radius: 4px; }
/* Async payment badge: shimmer skeleton until the Worker responds, then reveal the logo — no
   generic-icon-then-swap flicker. */
.pl-orderdet__rpay[data-pl-pay-loading] .pl-orderdet__rpay-ico,
.pl-orderdet__rpay[data-pl-pay-loading] [data-pl-pay-text] { display: none; }
.pl-orderdet__pay-skel { display: none; width: 108px; height: 24px; border-radius: 6px; background: linear-gradient(90deg, rgb(255 255 255 / .05), rgb(255 255 255 / .13), rgb(255 255 255 / .05)); background-size: 200% 100%; animation: pl-pay-skel 1.15s ease-in-out infinite; }
.pl-orderdet__rpay[data-pl-pay-loading] .pl-orderdet__pay-skel { display: inline-block; }
@keyframes pl-pay-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pl-orderdet__pay-skel { animation: none; } }
.pl-orderdet__points { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: #fff; }
.pl-orderdet__points-ico { flex: 0 0 auto; width: 18px; height: 18px; color: #eab45a; }
.pl-orderdet__sum { display: flex; flex-direction: column; gap: 7px; }
.pl-orderdet__sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; color: rgb(255 255 255 / .7); }
.pl-orderdet__sum-row span:first-child { color: rgb(255 255 255 / .5); }
.pl-orderdet__sum-row--disc span { color: #8ee6a8 !important; }
.pl-orderdet__sum-row--total { padding-top: 8px; margin-top: 2px; border-top: 1px solid rgb(255 255 255 / .08); font-weight: 800; font-size: 1rem; }
.pl-orderdet__sum-row--total span { color: #fff !important; }
.pl-orderdet__help-links { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.pl-orderdet__help-links a { color: #fff; font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 749px) {
  .pl-orderdet__actions { grid-template-columns: 1fr; }
  .pl-orderdet__grid { grid-template-columns: 1fr; gap: 24px; }
  .pl-orderdet__title { font-size: 1.35rem; }
  .pl-orderdet__line { gap: 16px; }
  .pl-orderdet__line-thumb { width: 120px; height: 120px; }
  .pl-orderdet__line-name { font-size: 1.1rem; }
}

/* PUMPLAB_ACCT_PAGER_V1 — compact AJAX pager under the order list. */
.pl-acct__pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.pl-acct__pager-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.pl-acct__pager-btn svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .pl-acct__pager-btn:not(.is-disabled):hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); } }
.pl-acct__pager-btn.is-disabled { opacity: .3; pointer-events: none; }
.pl-acct__pager-info { font-size: .84rem; font-weight: 600; color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; }
.pl-acct__panel.is-paging .pl-acct__orders, .pl-acct__panel.is-paging .pl-acct__pager { opacity: .45; transition: opacity .15s ease; pointer-events: none; }
/* End PUMPLAB_ACCT_PAGER_V1 */
/* Order row — main link (name + meta) grows left; right column stacks total over the
   optional "Spåra" track link. */
.pl-acct__order { display: flex; align-items: flex-start; gap: 16px; background: #1E1E1E; border-radius: 12px; padding: 18px; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__order:hover { background: #242424; } }
.pl-acct__order-main { flex: 1 1 auto; min-width: 0; display: block; text-decoration: none; }
.pl-acct__order-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pl-acct__order-total { font-weight: 700; color: #fff; text-decoration: none; }
.pl-acct__order-track { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / .65); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 200ms ease; }
.pl-acct__order-track svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .pl-acct__order-track:hover { color: #fff; } }
.pl-acct__order-top { display: flex; justify-content: space-between; align-items: baseline; }
.pl-acct__order-name { font-weight: 700; color: #fff; }
.pl-acct__order-total { font-weight: 700; color: #fff; }
.pl-acct__order-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.pl-acct__order-date { font-size: .8rem; color: rgb(255 255 255 / .5); }
.pl-acct__chip { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .7); }
.pl-acct__chip--ok { background: rgb(46 204 113 / .14); color: #8ee6a8; }
.pl-acct__chip--pending { background: rgb(234 180 90 / .14); color: #eab45a; }
.pl-acct__chip--warn { background: rgb(255 138 138 / .12); color: #ff9d9d; }
.pl-acct__chip--refund { background: rgb(120 170 255 / .14); color: #9fc0ff; }
.pl-acct__chip--pending { background: rgb(235 170 80 / .14); color: #eab45a; }
/* Earn-tasks panel V2 — loyalty-page brand language (icon + Monument value + uppercase title + sentence desc + hover CTA pill), wrapped in account-page chrome (#1E1E1E + glass border) so it sits inside the hub. Uniform grid, no wide hero. */
.pl-acct__earnv2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pl-acct__earnv2-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; min-height: 220px; background: #1E1E1E; border-radius: 12px; color: #fff; text-decoration: none; cursor: pointer; transition: background-color 260ms ease; }
.pl-acct__earnv2-card--done { cursor: default; }
/* Birthday countdown — prominent, white, top-right of the card. */
.pl-acct__earnv2-countdown { position: absolute; top: 18px; right: 18px; text-align: right; font-size: .9rem; font-weight: 600; color: rgb(255 255 255 / .85); line-height: 1.15; }
.pl-acct__earnv2-countdown strong { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.pl-acct__earnv2-card > :not(.pl-acct__earnv2-cta) { transition: opacity 260ms ease; }
.pl-acct__earnv2-card--done { cursor: default; background: linear-gradient(160deg, rgb(46 204 113 / .1), #1E1E1E 60%); }
.pl-acct__earnv2-card--done .pl-acct__earnv2-title { color: #8ee6a8; }
.pl-acct__earnv2-check { display: inline-block; margin-left: 4px; color: #8ee6a8; }
.pl-acct__earnv2-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: #141414; color: #fff; margin-bottom: 4px; }
.pl-acct__earnv2-icon svg { width: 26px; height: 26px; }
.pl-acct__earnv2-value { font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1; color: #fff; }
.pl-acct__earnv2-value small { font-size: .72rem; font-weight: 600; color: rgb(255 255 255 / .5); letter-spacing: 0; }
.pl-acct__earnv2-title { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; line-height: 1.1; color: #fff; margin: 0; }
.pl-acct__earnv2-text { font-size: .88rem; line-height: 1.4; color: rgb(255 255 255 / .55); margin: 0; margin-top: auto; }
.pl-acct__earnv2-cta { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 220ms ease; pointer-events: none; border-radius: 12px; background: rgb(30 30 30 / .58); backdrop-filter: blur(2px); }
.pl-acct__earnv2-cta-btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 8px; background: #fff; color: #111; font-weight: 700; font-size: .92rem; letter-spacing: .01em; transform: translateY(8px) scale(.96); transition: transform 280ms cubic-bezier(0.22,1,0.36,1); }
@media (hover: hover) and (pointer: fine) {
  .pl-acct__earnv2-card:hover { background-color: #242424; }
  .pl-acct__earnv2-card[href]:hover > :not(.pl-acct__earnv2-cta) { opacity: .15; }
  .pl-acct__earnv2-card[href]:hover .pl-acct__earnv2-cta { opacity: 1; }
  .pl-acct__earnv2-card[href]:hover .pl-acct__earnv2-cta-btn { transform: none; }
}
.pl-acct__earn-note { font-size: .82rem; color: rgb(255 255 255 / .5); margin-top: 14px; }
@media (max-width: 999px) { .pl-acct__earnv2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .pl-acct__earnv2 { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  /* All earn cards go compact on mobile — icon left, points + label to its right; description kept below.
     Completed cards drop the "Klart..." blurb and show points + label + (birthday) countdown only. */
  .pl-acct__earnv2-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon value" "icon title" "text text" "tag tag"; align-items: center; column-gap: 14px; row-gap: 2px; min-height: 0; padding: 16px; }
  .pl-acct__earnv2-icon { grid-area: icon; margin: 0; align-self: center; }
  .pl-acct__earnv2-value { grid-area: value; font-size: 1.3rem; align-self: end; }
  .pl-acct__earnv2-title { grid-area: title; align-self: start; }
  .pl-acct__earnv2-text { grid-area: text; margin: 8px 0 0; }
  .pl-acct__earnv2-cta { display: none; }
  .pl-acct__earnv2-soon-tag { grid-area: tag; margin-top: 10px; }
  .pl-acct__earnv2-card--done { grid-template-columns: auto 1fr auto; grid-template-areas: "icon value count" "icon title count"; }
  .pl-acct__earnv2-card--done .pl-acct__earnv2-text { display: none; }
  .pl-acct__earnv2-card--done .pl-acct__earnv2-countdown { grid-area: count; position: static; top: auto; right: auto; align-self: center; }
  .pl-acct__earnv2-card--done .pl-acct__earnv2-countdown strong { font-size: 1.05rem; }
}

/* Earn-task status sections — Avklarade / Tjäna poäng / Kommer snart, stacked vertically. */
.pl-acct__earn-sec { margin-bottom: 26px; }
.pl-acct__earn-sec:last-of-type { margin-bottom: 0; }
.pl-acct__earn-sec-head { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .5); margin: 0 0 12px; }

/* --soon = built but not yet paying out. Greyed, non-interactive, "Kommer snart" tag. */
.pl-acct__earnv2-card--soon { cursor: default; opacity: .5; }
.pl-acct__earnv2-card--soon .pl-acct__earnv2-icon { background: #161616; color: rgb(255 255 255 / .6); }
.pl-acct__earnv2-card--soon .pl-acct__earnv2-value,
.pl-acct__earnv2-card--soon .pl-acct__earnv2-title { color: rgb(255 255 255 / .7); }
@media (hover: hover) and (pointer: fine) { .pl-acct__earnv2-card--soon:hover { background-color: #1E1E1E; } }
.pl-acct__earnv2-card--soon .pl-acct__earnv2-text { margin-top: auto; }

/* PUMPLAB_LOYALTY_CODE_REDEEM_V1 — full-width code-entry action bar at the top of the Tjäna-poäng
   tab. Distinct from the info earn-cards. Neutral/white only. */
.pl-code-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  padding: 18px 20px; background: #1E1E1E; border-radius: 12px; margin-bottom: 26px;
}
.pl-code-bar__lead { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }
.pl-code-bar__icon {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: rgb(255 255 255 / .06); color: #fff;
}
.pl-code-bar__icon svg { width: 22px; height: 22px; }
.pl-code-bar__copy { min-width: 0; }
.pl-code-bar__title { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.pl-code-bar__sub { margin: 2px 0 0; font-size: .85rem; color: rgb(255 255 255 / .55); }
.pl-code-bar__form { display: flex; gap: 8px; flex: 0 0 auto; }
.pl-code-bar__input {
  flex: 0 1 280px; min-width: 0; padding: 10px 15px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .05);
  color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
}
.pl-code-bar__input::placeholder { color: rgb(255 255 255 / .4); letter-spacing: normal; text-transform: none; }
.pl-code-bar__input:focus { outline: none; border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .08); }
.pl-code-bar__btn {
  flex: 0 0 auto; padding: 8px 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff; color: #111; font-weight: 700; font-size: .9rem;
}
.pl-code-bar__btn:disabled { opacity: .55; cursor: default; }
/* Loading state — hide the label + spin a dark spinner while the redeem request is in flight. */
.pl-code-bar__btn.is-loading, .pl-code-bar__btn.is-loading:disabled { color: transparent; opacity: 1; position: relative; pointer-events: none; }
.pl-code-bar__btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2px solid rgb(17 17 17 / .3); border-top-color: #111; border-radius: 50%; animation: pl-trust-spin 700ms linear infinite; }
.pl-code-bar__msg { flex-basis: 100%; margin: 0; font-size: .85rem; }
.pl-code-bar__msg:empty { display: none; }
.pl-code-bar__msg.is-ok { color: rgb(108 220 142); }
.pl-code-bar__msg.is-err { color: #ff8a8a; }
@media (max-width: 600px) {
  .pl-code-bar__form { flex-basis: 100%; }
  .pl-code-bar__input { flex: 1 1 auto; }
}
/* End PUMPLAB_LOYALTY_CODE_REDEEM_V1 */

/* PUMPLAB_LOYALTY_BADGES_V1 — earned-badge display + active picker + rail name badge */
.pl-acct__namerow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pl-acct__namebadge { height: 22px; width: auto; max-width: 140px; object-fit: contain; flex: 0 0 auto; }
.pl-badges__hint { margin: 0 0 14px; font-size: .85rem; color: rgb(255 255 255 / .55); }
.pl-badges__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
/* PUMPLAB_LOYALTY_BADGES_MORE_V1 — clamp the badge grid on mobile with a gradient fade + "Visa mer"
   toggle, exactly like the Dina förmåner grid. Only rendered when there are >4 badges. */
.pl-badges__fade { display: none; }
@media (max-width: 599px) {
  .pl-badges__clip--clampable { position: relative; max-height: 232px; overflow: hidden; transition: max-height .45s ease; }
  .pl-badges__clip--clampable::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(30, 30, 30, 0), #1E1E1E 88%); pointer-events: none; opacity: 1; transition: opacity .45s ease; }
  .pl-badges__clip--clampable.is-open::after { opacity: 0; }
  .pl-badges__fade { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0 2px; border: 0; background: none; color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
}
.pl-badges__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 8px 12px;
  background: rgb(255 255 255 / .04); border: 0; border-radius: 14px;
  cursor: pointer; color: #fff; transition: background 200ms ease, transform 160ms ease;
}
.pl-badges__item.is-active { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.pl-badges__frame { height: 60px; width: 100%; display: grid; place-items: center; }
/* Sit smaller than the frame so there's breathing room below before the label (matches the year box). */
.pl-badges__frame img { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.pl-badges__label { max-width: 100%; font-size: .75rem; text-align: center; color: rgb(255 255 255 / .72); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Corner checkbox = choose the badge shown next to the name (click enlarges the badge instead). */
.pl-badges__check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgb(255 255 255 / .3); background: rgb(0 0 0 / .3); color: transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pl-badges__check svg { width: 11px; height: 11px; }
.pl-badges__check:hover { border-color: rgb(255 255 255 / .55); }
.pl-badges__item.is-active .pl-badges__check { background: #fff; border-color: #fff; color: #111; }
/* Desktop: hide the select-check unless hovering the tile (active tile keeps its check so you can
   see which is selected). Touch devices keep it visible (no hover). */
@media (hover: hover) and (pointer: fine) {
  .pl-badges__check { opacity: 0; transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
  .pl-badges__item:hover .pl-badges__check,
  .pl-badges__item:focus-within .pl-badges__check,
  .pl-badges__item.is-active .pl-badges__check { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) { .pl-badges__item:hover { background: rgb(255 255 255 / .08); transform: translateY(-1px); } }
@media (max-width: 600px) {
  .pl-badges__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Wider tiles on mobile — keep the year box a compact natural pill (Monument is very wide), not
     stretched full-width, so it doesn't dominate the tile. */
  .pl-badges__frame { height: 54px; }
  .pl-badges__frame .pl-badge-year { width: auto; max-width: 80%; height: 42px; padding: 0 10px; font-size: 15px; }
  .pl-badges__frame img { height: 46px; }
}

/* Badge detail modal — click a badge to see it enlarged + description */
.pl-badge-modal { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: 20px; }
.pl-badge-modal[hidden] { display: none; }
.pl-badge-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .8); backdrop-filter: blur(6px); animation: pl-badge-fade .2s ease both; }
.pl-badge-modal:not([hidden]) .pl-badge-modal__panel { animation: pl-badge-pop .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pl-badge-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-badge-pop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
/* No card — the badge + text float directly on the blurred backdrop (like the tier overlay). */
.pl-badge-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 20px; background: transparent; border: 0; text-align: center; }
/* No close X anywhere — click/tap outside the badge closes (desktop + mobile). */
.pl-badge-modal__close { display: none; }
.pl-badge-modal__art { position: relative; height: 180px; display: grid; place-items: center; margin-bottom: 20px; touch-action: none; }
/* 3D tilt layer — drag/hover rotates it; springs back on release. Glare + hint below. */
.pl-badge-modal__tilt { position: relative; display: inline-block; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); touch-action: none; cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Stop Safari's long-press "save image" callout / drag-ghost on the draggable badge art. */
.pl-badge-modal__tilt img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.pl-badge-modal__tilt.is-tilting { transition: transform .09s ease-out; }
.pl-badge-modal__tilt.is-dragging { cursor: grabbing; }
.pl-badge-modal__tilt.is-hint { animation: pl-badge-tilt-hint 1.5s ease-in-out both; }
@keyframes pl-badge-tilt-hint { 0% { transform: rotateY(0) rotateX(0); } 22% { transform: rotateY(-14deg) rotateX(5deg); } 55% { transform: rotateY(12deg) rotateX(-4deg); } 100% { transform: rotateY(0) rotateX(0); } }
/* Holo glare (image badges only) — a soft highlight that tracks the tilt, masked to the art shape. */
.pl-badge-modal__glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 32%, transparent 60%); -webkit-mask: var(--pl-badge-src) center / contain no-repeat; mask: var(--pl-badge-src) center / contain no-repeat; }
.pl-badge-modal__tilt.is-tilting .pl-badge-modal__glare { opacity: 1; }
/* Holographic foil — a rainbow sheen masked to a region (--pl-foil-src: the badge art for 'full',
   or a mask image for parts). The gradient shifts with the tilt (--gx/--gy) so it reads as foil. */
.pl-badge-modal__foil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .28;
  mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg, rgba(255,0,128,.55) 0%, rgba(255,170,0,.55) 10%, rgba(120,255,90,.55) 22%, rgba(0,210,255,.55) 34%, rgba(150,80,255,.55) 46%, rgba(255,0,128,.55) 58%);
  background-size: 280% 280%; background-position: var(--gx, 50%) var(--gy, 50%);
  -webkit-mask: var(--pl-foil-src) center / contain no-repeat; mask: var(--pl-foil-src) center / contain no-repeat;
  transition: opacity .3s ease;
}
.pl-badge-modal__tilt.is-tilting .pl-badge-modal__foil { opacity: .95; }
/* 'auto' foil — luminance mask of the art itself: only the bright/metallic parts shimmer. */
.pl-badge-modal__foil--auto { -webkit-mask-mode: luminance; mask-mode: luminance; }
/* Swipe hint — a small fingertip dot that swipes left↔right once on open to signal it's draggable. */
.pl-badge-modal__swipehint { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 12px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .12); opacity: 0; pointer-events: none; z-index: 4; }
.pl-badge-modal__swipehint.is-on { animation: pl-badge-swipehint 1.9s ease-in-out both; }
@keyframes pl-badge-swipehint {
  0% { opacity: 0; transform: translateX(-34px) scale(.75); }
  14% { opacity: .95; transform: translateX(-34px) scale(.9); }
  50% { opacity: .95; transform: translateX(34px) scale(1); }
  86% { opacity: .95; transform: translateX(-34px) scale(.9); }
  100% { opacity: 0; transform: translateX(-20px) scale(.75); }
}
/* Legendary = twinkling gold sparkle stars over the badge (like the Diamond tier glimmer). */
.pl-badge-glitter { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pl-badge-sparkle {
  position: absolute; left: var(--x); top: var(--y); width: var(--size, 9px); height: var(--size, 9px);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #fff 0%, #ffe6a6 40%, transparent 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px rgba(255, 205, 110, .9));
  animation: pl-badge-sparkle var(--dur, 1.8s) ease-in-out var(--delay, 0s) infinite;
}
/* Epic = purple sparkles (legendary keeps the gold default above). */
.pl-badge-glitter--epic .pl-badge-sparkle { background: radial-gradient(circle, #fff 0%, #d9b8ff 40%, transparent 72%); filter: drop-shadow(0 0 5px rgba(170, 120, 255, .9)); }

/* Unlock cinematic — UPPLÅST eyebrow, badge scales in with a light sweep, + a choose CTA. */
.pl-badge-modal__kicker { font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .5); text-align: center; margin-bottom: 8px; }
.pl-badge-modal__kicker[hidden] { display: none; }
.pl-badge-modal__eyebrow { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; color: #fff; text-align: center; margin-bottom: 16px; }
.pl-badge-modal__eyebrow[hidden] { display: none; }
.pl-badge-modal__select { display: block; width: 100%; max-width: 260px; margin: 4px auto 0; padding: 13px; border: 0; border-radius: 12px; background: #fff; color: #111; font-weight: 800; font-size: .95rem; cursor: pointer; }
.pl-badge-modal__select[hidden] { display: none; }
.pl-badge-modal__select:hover { background: rgb(255 255 255 / .88); }
/* Badge visual wrapper — sizes tight to the badge so the light sweep is confined to it (not the
   full-width art box). Unlock only ever runs on image badges, so overflow-clipping is safe here. */
.pl-badge-modal__badgewrap { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; line-height: 0; touch-action: none; transform-origin: center center; }
/* PUMPLAB_LOYALTY_BADGEZOOM_V1 — when pinch/wheel-zoomed, lift the whole art box (badge + tilt + foil)
   above the modal's title/description/buttons so the enlarged badge OVERLAYS the text (never hides
   behind it). overflow is already visible on the panel + art, so the scaled badge is free to spill. */
.pl-badge-modal__art.is-zoomed { z-index: 6; }
/* height (not max-height) so viewBox-only SVGs — no intrinsic width/height — still get a definite
   size and render; width follows the ratio. */
.pl-badge-modal__badgewrap img { display: block; height: 180px; width: auto; max-width: 100%; object-fit: contain; }
/* Unlock cinematic — offset/staggered reveal (like the tier overlay): each row rises in on its own
   cue, badge scales in, then a light sweep confined to the badge, CTA comes in last. */
.pl-badge-modal:not([hidden]) .pl-badge-modal__panel.is-unlock { animation: none; } /* children stagger instead of a whole-panel pop */
.pl-badge-modal__panel.is-unlock .pl-badge-modal__kicker { animation: pl-badge-rise .5s cubic-bezier(.22, 1, .36, 1) both .05s; }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__eyebrow { animation: pl-badge-rise .5s cubic-bezier(.22, 1, .36, 1) both .22s; }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__badgewrap { animation: pl-badge-unlock-in 1.05s cubic-bezier(.22, 1, .36, 1) both .45s; }
/* Light sweep MASKED by the badge art (its alpha), so it hugs the exact silhouette + corner radius
   instead of sweeping a rectangle. --pl-badge-src is set in JS to the badge image url. The parent
   holds the (static) mask + clips; the ::before is the moving gradient bar. */
.pl-badge-modal__sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask: var(--pl-badge-src) center / contain no-repeat; mask: var(--pl-badge-src) center / contain no-repeat; }
.pl-badge-modal__sweep::before { content: ''; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%); transform: translateX(-140%); }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__sweep::before { animation: pl-badge-unlock-sweep 7.5s ease-in-out 1.35s infinite both; }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__title { animation: pl-badge-rise .5s cubic-bezier(.22, 1, .36, 1) both 1.2s; }
.pl-badge-modal__panel.is-unlock .pl-badge-rarity { animation: pl-badge-rise .5s cubic-bezier(.22, 1, .36, 1) both 1.5s; }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__desc { animation: pl-badge-rise .5s cubic-bezier(.22, 1, .36, 1) both 1.9s; }
.pl-badge-modal__panel.is-unlock .pl-badge-modal__select { animation: pl-badge-rise .55s cubic-bezier(.22, 1, .36, 1) both 2.35s; }
@keyframes pl-badge-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pl-badge-unlock-in { 0% { opacity: 0; transform: scale(.68) translateY(12px); } 62% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
/* Sweep travels in the first ~32% then holds off-screen the rest of the cycle → recurring shimmer
   with a clear gap between passes. */
@keyframes pl-badge-unlock-sweep { 0% { transform: translateX(-140%); } 32% { transform: translateX(140%); } 100% { transform: translateX(140%); } }
@keyframes pl-badge-sparkle {
  0%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
}
.pl-badge-modal__art img { max-height: 180px; max-width: 100%; width: auto; object-fit: contain; }
.pl-badge-modal__title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.pl-badge-modal__desc { margin: 0 0 22px; font-size: .92rem; line-height: 1.5; color: rgb(255 255 255 / .65); }

/* Rarity bar (detail view) — gradient track + marker at the rarity position + coloured name. */
.pl-badge-rarity { margin: 6px auto 20px; max-width: 260px; }
.pl-badge-rarity[hidden] { display: none; }
.pl-badge-rarity__track { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #8a8a8a 0%, #4bd07a 28%, #4aa3ff 52%, #a06bff 76%, #ffb020 100%); }
.pl-badge-rarity__marker { position: absolute; top: 50%; left: 10%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #1b1b1b; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgb(0 0 0 / .5); transition: left .4s cubic-bezier(.22, 1, .36, 1); }
.pl-badge-rarity__name { margin-top: 12px; font-size: 1rem; font-weight: 800; color: #fff; }
.pl-badge-rarity__sub { margin-top: 2px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .45); }
.pl-badge-rarity[data-rarity="common"] .pl-badge-rarity__name { color: #bcbcbc; }
.pl-badge-rarity[data-rarity="uncommon"] .pl-badge-rarity__name { color: #4bd07a; }
.pl-badge-rarity[data-rarity="rare"] .pl-badge-rarity__name { color: #4aa3ff; }
.pl-badge-rarity[data-rarity="epic"] .pl-badge-rarity__name { color: #b98bff; }
.pl-badge-rarity[data-rarity="legendary"] .pl-badge-rarity__name { color: #ffc24d; }
/* Rarity glow — epic subtle, legendary strong. */
.pl-badge-rarity[data-rarity="epic"] .pl-badge-rarity__marker { box-shadow: 0 0 9px 1px rgba(185, 139, 255, .6); }
.pl-badge-rarity[data-rarity="epic"] .pl-badge-rarity__name { text-shadow: 0 0 10px rgba(185, 139, 255, .4); }
.pl-badge-rarity[data-rarity="legendary"] .pl-badge-rarity__marker { box-shadow: 0 0 13px 2px rgba(255, 194, 77, .8); }
.pl-badge-rarity[data-rarity="legendary"] .pl-badge-rarity__name { text-shadow: 0 0 14px rgba(255, 194, 77, .6); }

/* Legendary year badge = gold, overriding the cool per-year hue, with a warm glow. */
.pl-badge-year.pl-badge-year--gold { background: linear-gradient(160deg, #4a3814, #241905); border-color: rgba(255, 205, 100, .6); color: #ffe6ac; }
.pl-badges__frame .pl-badge-year--gold { box-shadow: 0 0 16px rgba(255, 190, 70, .3); }
.pl-badge-modal__art .pl-badge-year--gold { box-shadow: 0 0 34px rgba(255, 190, 70, .4); }
.pl-badge-modal__back { display: block; width: 100%; max-width: 240px; margin: 4px auto 0; padding: 12px; border: 1px solid rgb(255 255 255 / .22); border-radius: 12px; background: rgb(255 255 255 / .04); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .15s ease; }
.pl-badge-modal__back:hover { background: rgb(255 255 255 / .1); }
/* Badge next to the name on the leaderboard (list / podium / mini) */
.pl-lb-namebadge { height: 16px; width: auto; max-width: 90px; object-fit: contain; display: inline-block; vertical-align: -3px; margin-left: 5px; }

/* Year badge — a generated text box in the brand font (no image). Elongated rounded box, the year
   in Monument. Sized per surface; height-normalized like image badges. */
.pl-badge-year {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  -webkit-user-select: none; user-select: none;
  font-family: 'Monument Extended Black', sans-serif; font-weight: 900; color: #fff;
  /* Subtle per-year tint: each year renders with a --pl-yhue (derived from the year). Falls back
     to a neutral hue. Stays dark + premium; only the border + a faint bg shift carry the hue. */
  background: linear-gradient(160deg, hsl(var(--pl-yhue, 220) 16% 20%), hsl(var(--pl-yhue, 220) 20% 10%));
  border: 2px solid hsl(var(--pl-yhue, 220) 34% 58% / .42);
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
}
/* Monument sits high in its line box — nudge the numerals down proportionally (em scales per size). */
.pl-badge-year__n { display: inline-block; transform: translateY(.07em); }
.pl-acct__namebadge-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pl-acct__namebadge-wrap[hidden] { display: none; }
/* Landing glow-pop — plays once right after "Använd" so the eye catches where the badge went. */
.pl-acct__namebadge-wrap.is-landed { animation: pl-namebadge-land 1.9s ease-out both; }
@keyframes pl-namebadge-land {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  22% { transform: scale(1.13); filter: drop-shadow(0 0 11px rgba(255, 255, 255, .9)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}
.pl-acct__namebadge-wrap .pl-badge-year { height: 22px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.pl-lb-namebadge.pl-badge-year { height: 16px; padding: 0 6px; font-size: 9.5px; border-radius: 5px; width: auto; max-width: none; vertical-align: middle; }
/* On mobile the badge sits next to the tier — lock BOTH to the same height so they line up exactly. */
@media (max-width: 700px) {
  .pl-lb-namebadge.pl-badge-year { padding: 0 5px; font-size: 8.5px; border-width: 1px; }
  .pl-acct__lb-tierrow .pl-acct__lb-tier,
  .pl-acct__lb-tierrow .pl-lb-namebadge.pl-badge-year { height: 16px; display: inline-flex; align-items: center; box-sizing: border-box; }
}
.pl-badges__frame .pl-badge-year { width: 100%; height: 46px; padding: 0 6px; font-size: 17px; border-radius: 10px; overflow: hidden; }
.pl-badge-modal__art .pl-badge-year { height: 128px; padding: 0 44px; font-size: 62px; border-radius: 20px; }

/* Leaderboard row: badge sits next to the name on desktop, next to the tier on mobile (the name
   row is tight on narrow screens). Rendered in both slots; CSS shows one per breakpoint. Podium
   + mini keep the name badge. */
.pl-acct__lb-tierrow { display: inline-flex; align-items: center; }
.pl-lb-badge-slot--tier { display: none; }
@media (max-width: 700px) {
  .pl-lb-badge-slot--name { display: none; }
  .pl-lb-badge-slot--tier { display: inline-flex; align-items: center; }
}
/* End PUMPLAB_LOYALTY_BADGES_V1 */

/* PUMPLAB_LOYALTY_BADGEBOOK_V1 — "Märkessamling" trigger row + full-collection overlay (owned lit,
   un-earned silhouettes). Rarity colours: common grey, uncommon green, rare blue, epic purple,
   legendary gold. */
.pl-bookentry { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; border: 1px solid rgb(255 255 255 / .09); background: #1b1b1b; transition: border-color .2s ease, background-color .2s ease, transform .12s ease; }
@media (hover: hover) and (pointer: fine) { .pl-bookentry:hover { border-color: rgb(255 255 255 / .22); background: #202020; } }
.pl-bookentry:active { transform: scale(.99); }
.pl-bookentry__ico { flex: 0 0 auto; width: 34px; height: 34px; color: #eab45a; }
.pl-bookentry__ico svg { width: 100%; height: 100%; }
.pl-bookentry__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-bookentry__title { font-weight: 800; letter-spacing: -.01em; color: #fff; }
.pl-bookentry__sub { font-size: .82rem; color: rgb(255 255 255 / .5); }
.pl-bookentry__arrow { flex: 0 0 auto; width: 20px; height: 20px; color: rgb(255 255 255 / .4); }
.pl-bookentry__arrow svg { width: 100%; height: 100%; }

.pl-book { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; overscroll-behavior: contain; }
.pl-book[hidden] { display: none; }
.pl-book__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pl-book__panel { position: relative; z-index: 1; width: 100%; max-width: 720px; background: #161616; border: 1px solid rgb(255 255 255 / .1); border-radius: 20px; padding: 26px 22px 30px; animation: pl-badge-pop .3s cubic-bezier(.22,1,.36,1) both; }
.pl-book__close { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: rgb(255 255 255 / .5); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.pl-book__close:hover { color: #fff; }
.pl-book__eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgb(255 255 255 / .45); }
.pl-book__title { margin: 4px 0 10px; font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; color: #fff; }
.pl-book__count { font-size: .95rem; color: rgb(255 255 255 / .7); }
.pl-book__count strong { color: #fff; }
.pl-book__progress { margin-top: 10px; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .08); overflow: hidden; }
.pl-book__bar { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #eab45a, #f6d089); transition: width .5s cubic-bezier(.22,1,.36,1); }
.pl-book__legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 18px; }
.pl-book__leg { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: rgb(255 255 255 / .55); }
.pl-book__leg i { width: 9px; height: 9px; border-radius: 99px; }
.pl-book__leg[data-rarity="common"] i, .pl-book__rarity[data-rarity="common"] { background: #9aa0a6; }
.pl-book__leg[data-rarity="uncommon"] i, .pl-book__rarity[data-rarity="uncommon"] { background: #4caf50; }
.pl-book__leg[data-rarity="rare"] i, .pl-book__rarity[data-rarity="rare"] { background: #4a90d9; }
.pl-book__leg[data-rarity="epic"] i, .pl-book__rarity[data-rarity="epic"] { background: #a866e0; }
.pl-book__leg[data-rarity="legendary"] i, .pl-book__rarity[data-rarity="legendary"] { background: #eab45a; }
.pl-book__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; }
.pl-book__cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; background: #1d1d1d; border: 1px solid rgb(255 255 255 / .07); border-radius: 14px; cursor: pointer; text-align: center; transition: border-color .18s ease, background-color .18s ease, transform .12s ease; }
.pl-book__cell.is-owned { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pl-book__cell.is-owned:hover { border-color: rgb(255 255 255 / .28); background: #232323; transform: translateY(-2px); } }
.pl-book__cell.is-locked { cursor: default; }
.pl-book__frame { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.pl-book__frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pl-book__yr { font-family: 'Monument Extended Black', sans-serif; font-weight: 900; font-size: 1.05rem; color: #fff; }
.pl-book__sil { filter: brightness(0) opacity(.32); }
.pl-book__sil--none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.6rem; color: rgb(255 255 255 / .25); filter: none; }
.pl-book__q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Monument Extended Black', sans-serif; font-weight: 900; font-size: 1.7rem; color: rgb(255 255 255 / .5); pointer-events: none; }
.pl-book__rarity { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 99px; border: 2px solid #1d1d1d; }
.pl-book__name { font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-book__cell.is-locked .pl-book__name { color: rgb(255 255 255 / .4); letter-spacing: .1em; }
.pl-book__hint { font-size: .68rem; color: rgb(255 255 255 / .4); line-height: 1.3; }
.pl-book__note { margin-top: 16px; font-size: .82rem; color: rgb(255 255 255 / .45); text-align: center; }
.pl-book__cell.is-shake { animation: pl-book-shake .4s ease; }
@keyframes pl-book-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (max-width: 640px) { .pl-book__grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; } .pl-book__frame { width: 62px; height: 62px; } .pl-book__panel { padding: 22px 16px 26px; } }
@media (prefers-reduced-motion: reduce) { .pl-book__cell.is-shake { animation: none; } .pl-book__bar { transition: none; } }
/* End PUMPLAB_LOYALTY_BADGEBOOK_V1 */

/* PUMPLAB_LB_PROFILE_V2 — public profile card: click a leaderboard row. Centered hero layout —
   big avatar (medal-metal ring for top-3), name + active badge, tier chip, stat tiles. The badge
   collection grid is gated off until the badge book ships (SHOW_BADGE_COLLECTION in
   pl-leaderboard.js); its styles below stay for that flip. */
.pl-acct__lb-row[data-pl-lb-rank], .pl-acct__lbmini-row[data-pl-lb-rank] { cursor: pointer; }
.pl-lbprofile { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px; }
.pl-lbprofile[hidden] { display: none; }
.pl-lbprofile__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .78); backdrop-filter: blur(6px); }
/* Panel mirrors the account rail card: dark #1E1E1E body, tier-gradient hero on top, one rounded
   surface with NO outline. */
.pl-lbprofile__panel { position: relative; z-index: 1; width: 100%; max-width: 360px; max-height: 82vh; overflow: hidden auto; padding: 0; background: #1E1E1E; border: 0; border-radius: 16px; text-align: center; animation: pl-badge-pop .28s cubic-bezier(.22, 1, .36, 1) both; }
.pl-lbprofile__close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgb(0 0 0 / .3); color: rgb(255 255 255 / .75); font-size: 24px; line-height: 1; cursor: pointer; transition: color .15s ease, background .15s ease, transform 70ms ease-in; }
.pl-lbprofile__close:hover { color: #fff; background: rgb(0 0 0 / .5); }
.pl-lbprofile__close:active { transform: scale(0.92); }
/* Hero = the tier surface (same per-tier :is() material as .pl-acct__rail-hero). Full-bleed to the
   panel's rounded top; the gradient darkens toward the bottom so it blends into the #1E1E1E body. */
.pl-lbprofile__hero { position: relative; padding: 30px 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pl-lbprofile__hero > * { position: relative; z-index: 2; }
/* Edge-rim highlight — the shiny top-left rim from the account rail-hero (a 1.5px masked ring). */
.pl-lbprofile__hero::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px 16px 0 0; pointer-events: none; padding: 1.5px; z-index: 5;
  background: linear-gradient(165deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pl-lbprofile__tierchip { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: rgb(0 0 0 / .4); border-radius: 6px; font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: inherit; backdrop-filter: blur(4px); }
.pl-lbprofile__avwrap { display: inline-grid; place-items: center; border-radius: 50%; animation: pl-lbprof-in .42s cubic-bezier(.22, 1, .36, 1) both; }
.pl-lbprofile__avwrap--m1, .pl-lbprofile__avwrap--m2, .pl-lbprofile__avwrap--m3 { padding: 3px; }
.pl-lbprofile__avwrap--m1 { background: linear-gradient(160deg, #f4d270, #d9a92e); box-shadow: 0 0 24px rgb(244 210 112 / .32); }
.pl-lbprofile__avwrap--m2 { background: linear-gradient(160deg, #dfe3e8, #aab1bb); box-shadow: 0 0 24px rgb(223 227 232 / .24); }
.pl-lbprofile__avwrap--m3 { background: linear-gradient(160deg, #eaa877, #bd7038); box-shadow: 0 0 24px rgb(234 168 119 / .3); }
/* Size + border live ONLY on the .pl-lbprofile__av container; the img/mono FILL it at 100%. Sizing
   the mono span independently (it also matched .pl-lbprofile__av-mono) made it 82px inside the
   container's 76px bordered content area on medal cards, so it overflowed down-right and its centered
   letter landed off-center — images filled 100% and were unaffected (the exact bug). */
.pl-lbprofile__av { width: 82px; height: 82px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 14px rgb(0 0 0 / .3), inset 0 0 0 1px rgb(255 255 255 / .2); }
:is(.pl-lbprofile__avwrap--m1, .pl-lbprofile__avwrap--m2, .pl-lbprofile__avwrap--m3) .pl-lbprofile__av { box-shadow: 0 4px 14px rgb(0 0 0 / .3); border: 3px solid #1c1c1c; }
.pl-lbprofile__av img, .pl-lbprofile__av-mono { width: 100%; height: 100%; }
.pl-lbprofile__av img { object-fit: cover; display: block; }
/* OPAQUE bg — a translucent mono let the tier gradient bleed through. Solid dark circle. */
.pl-lbprofile__av-mono { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #343434, #222); font-weight: 800; font-size: 30px; line-height: 1; color: #fff; }
.pl-lbprofile__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #fff; display: flex; align-items: center; justify-content: center; gap: 2px; animation: pl-lbprof-in .42s cubic-bezier(.22, 1, .36, 1) .05s both; }
.pl-lbprofile__name .pl-lb-namebadge { margin-left: 6px; }
/* Stats live on the dark body — flat, no boxes. */
.pl-lbprofile__stats { display: flex; justify-content: center; gap: 52px; padding: 22px 24px 26px; animation: pl-lbprof-in .42s cubic-bezier(.22, 1, .36, 1) .13s both; }
.pl-lbprofile__stat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pl-lbprofile__stat-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pl-lbprofile__stat-num--m1 { background: linear-gradient(160deg, #f4d270, #d9a92e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-lbprofile__stat-num--m2 { background: linear-gradient(160deg, #dfe3e8, #aab1bb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-lbprofile__stat-num--m3 { background: linear-gradient(160deg, #d99b6c, #b06a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-lbprofile__stat-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .45); }
/* Opacity-only (no translate) so nothing extends past the panel during entry — a translateY start
   pushed content below the panel and flashed a scrollbar for the first frames. */
@keyframes pl-lbprof-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pl-lbprofile__avwrap, .pl-lbprofile__name, .pl-lbprofile__stats { animation: none; } }
.pl-lbprofile__badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin: 4px 24px 26px; }
.pl-lbprofile__badges[hidden] { display: none; }
.pl-lbprofile__badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; background: rgb(255 255 255 / .04); border-radius: 12px; }
.pl-lbprofile__badge-frame { height: 54px; width: 100%; display: grid; place-items: center; }
.pl-lbprofile__badge-frame img { height: 46px; width: auto; max-width: 100%; object-fit: contain; }
.pl-lbprofile__badge-frame .pl-badge-year { width: auto; max-width: 100%; height: 40px; padding: 0 12px; font-size: 16px; border-radius: 9px; }
.pl-lbprofile__badge-label { font-size: .72rem; text-align: center; color: rgb(255 255 255 / .7); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-lbprofile__empty { margin-top: 18px; text-align: center; color: rgb(255 255 255 / .5); font-size: .9rem; }
/* End PUMPLAB_LB_PROFILE_V2 */
.pl-acct__earnv2-soon-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .6); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pl-acct__rev-lead { font-size: .9rem; color: rgb(255 255 255 / .7); margin-bottom: 12px; }
.pl-acct__rev-lead strong { color: #fff; }
.pl-acct__rev-list { display: flex; flex-direction: column; gap: 8px; }
.pl-acct__rev-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: rgb(255 255 255 / .05); border-radius: 10px; text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { .pl-acct__rev-item:hover { background: rgb(255 255 255 / .1); } }
.pl-acct__rev-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: rgb(255 255 255 / .04); display: grid; place-items: center; }
.pl-acct__rev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-acct__rev-prod { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__rev-item--done { background: rgb(46 204 113 / .07); }
@media (hover: hover) and (pointer: fine) { .pl-acct__rev-item--done:hover { background: rgb(46 204 113 / .12); } }
.pl-acct__rev-item--done .pl-acct__rev-cta { color: #cfeed7; }
.pl-acct__rev-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(46 204 113 / .25); color: #8ee6a8; font-weight: 800; font-size: .7rem; vertical-align: middle; margin-right: 4px; }
.pl-acct__rev-prod { font-weight: 600; color: #fff; }
.pl-acct__rev-cta { font-size: .82rem; color: rgb(255 255 255 / .6); white-space: nowrap; }
.pl-acct__rev-cta strong { color: #fff; }
/* "Verifierar..." state after clicking a review card (mirrors the Trustpilot pending look). */
.pl-acct__rev-item.is-verifying .pl-acct__rev-cta { display: inline-flex; align-items: center; gap: 7px; color: rgb(255 255 255 / .7); }
/* "Ingen recension hittad" — the verify window elapsed with no review found (amber, not the brand accent). */
.pl-acct__rev-item.is-failed .pl-acct__rev-cta { color: rgb(232 168 96); }
.pl-acct__kv { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pl-acct__kv > div { display: flex; flex-direction: column; gap: 3px; }
.pl-acct__kv dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .45); }
.pl-acct__kv dd { margin: 0; color: #fff; }
.pl-acct__kv-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .07); }
/* Birthday — set-once via App Proxy. Locked state shows formatted date + "Låst" chip;
   un-set state shows a date picker + Spara button matching the brand's white-CTA recipe. */
.pl-acct__bday-value { color: #fff; font-weight: 600; }
.pl-acct__bday-locked { display: inline-flex; align-items: center; margin-left: 8px; color: rgb(255 255 255 / .45); vertical-align: middle; }
.pl-acct__bday-locked svg { width: 14px; height: 14px; }
.pl-acct__bday-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Day / Månad / År dropdowns — dark, custom caret, no native date-input weirdness. */
.pl-acct__bday-selects { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pl-acct__bday-select {
  flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none;
  background: rgb(255 255 255 / .06) no-repeat right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 0; border-radius: 8px; padding: 10px 28px 10px 12px; color: #fff; font-size: .9rem; font-family: inherit; cursor: pointer;
  color-scheme: dark; transition: background-color 200ms ease;
}
.pl-acct__bday-select--month { flex: 1.5 1 0; }
.pl-acct__bday-select:focus { outline: none; background-color: rgb(255 255 255 / .12); }
.pl-acct__bday-select:invalid { color: rgb(255 255 255 / .5); }
.pl-acct__bday-select option { color: #fff; background: #1a1a1a; }
.pl-acct__bday-save { padding: 10px 18px; border-radius: 7px; background: #fff; color: #101010; border: 1.5px solid #fff; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .pl-acct__bday-save:hover { background: #ebebeb; border-color: #ebebeb; } }
.pl-acct__bday-save:active { transform: scale(.97); }
.pl-acct__bday-save:disabled { opacity: .6; cursor: not-allowed; }
.pl-acct__bday-status { font-size: .82rem; color: rgb(255 255 255 / .65); }
.pl-acct__bday-status[data-tone="ok"] { color: rgb(140 220 160); }
.pl-acct__bday-status[data-tone="err"] { color: rgb(240 140 140); }
/* PUMPLAB_LOYALTY_DISPLAYNAME_V1 — editable cosmetic display name in the Konto panel (real customer.name stays locked). */
.pl-acct__dname-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-acct__dname-input { flex: 1 1 140px; min-width: 0; background: rgb(255 255 255 / .06); border: 0; border-radius: 8px; padding: 10px 12px; color: #fff; font-size: .9rem; font-family: inherit; }
.pl-acct__dname-input::placeholder { color: rgb(255 255 255 / .4); }
.pl-acct__dname-input:focus { outline: none; background: rgb(255 255 255 / .12); }
.pl-acct__dname-save { padding: 10px 16px; border-radius: 7px; background: #fff; color: #101010; border: 1.5px solid #fff; font-weight: 600; font-size: .88rem; cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(.22,1,.36,1); }
@media (hover: hover) and (pointer: fine) { .pl-acct__dname-save:hover { background: #ebebeb; border-color: #ebebeb; } }
.pl-acct__dname-save:active { transform: scale(.97); }
.pl-acct__dname-save:disabled { opacity: .6; cursor: not-allowed; }
.pl-acct__dname-form .pl-acct__bday-status { flex-basis: 100%; }
/* inline-edit rows — value + hover pencil; click reveals the editor (display name, gender) */
.pl-acct__editrow-view { display: flex; align-items: center; gap: 8px; }
.pl-acct__editrow-view[hidden], .pl-acct__editrow-form[hidden] { display: none; }
.pl-acct__editrow-val { color: #fff; }
.pl-acct__editrow-pencil { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgb(255 255 255 / .5); cursor: pointer; opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.pl-acct__editrow-pencil svg { width: 15px; height: 15px; }
.pl-acct__editrow:hover .pl-acct__editrow-pencil, .pl-acct__editrow-pencil:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .pl-acct__editrow-pencil:hover { background: rgb(255 255 255 / .08); color: #fff; } }
@media (hover: none) { .pl-acct__editrow-pencil { opacity: .55; } }
.pl-acct__editrow-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-acct__editrow-cancel { padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: rgb(255 255 255 / .6); font-size: .88rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pl-acct__editrow-cancel:hover { color: #fff; } }
/* End PUMPLAB_LOYALTY_DISPLAYNAME_V1 */
/* Mobile: selects fill the row, Spara goes full-width below — no cramped wrap. */
@media (max-width: 700px) {
  .pl-acct__bday-selects { flex-basis: 100%; }
  .pl-acct__bday-save { width: 100%; }
  .pl-acct__bday-status { flex-basis: 100%; }
}
/* Gender — single dark dropdown, auto-saves. Reuses the bday-select look but sized to content. */
.pl-acct__gender-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-acct__gender-select { flex: 0 0 auto; min-width: 140px; padding-block: 8px; }
.pl-acct__bday-hint { font-size: .8rem; color: rgb(255 255 255 / .55); margin: 8px 0 0; line-height: 1.5; }
.pl-acct__bday-hint strong { color: rgb(255 255 255 / .8); font-weight: 600; }
.pl-acct__card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.pl-acct__help { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle; transform: translateY(-2px); border-radius: 50%; background: #303030; color: rgb(255 255 255 / .75); font-size: .72rem; font-weight: 700; text-decoration: none; line-height: 1; transition: background-color 180ms ease, color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__help:hover { background: #3d3d3d; color: #fff; } }
.pl-acct__card-head .pl-acct__card-eyebrow { margin-bottom: 0; }
/* "Se alla →" / "Visa alla" pattern — white text, plain background fade-in on hover
   (the rest of the site uses fade-ins, not slide-ups). White-fill on hover, text flips
   dark. NOT accent color (#A79F8A is promo-only). */
.pl-acct__card-link,
.pl-acct__rev-all,
.pl-acct__addr-add,
.pl-acct__kv-actions a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--rounded-button); font-size: .85rem; font-weight: 650;
  color: #fff; background: rgb(255 255 255 / 0); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .pl-acct__card-link:hover,
  .pl-acct__rev-all:hover,
  .pl-acct__addr-add:hover,
  .pl-acct__kv-actions a:hover { color: #101010; background: #fff; }
}
.pl-acct__recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-acct__recent-card { min-width: 0; display: flex; gap: 12px; align-items: center; background: rgb(255 255 255 / .05); border-radius: 10px; padding: 14px; text-decoration: none; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__recent-card:hover { background: rgb(255 255 255 / .1); } }
.pl-acct__recent-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: rgb(255 255 255 / .05); display: flex; align-items: center; justify-content: center; }
.pl-acct__recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-acct__recent-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pl-acct__recent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-acct__recent-name { min-width: 0; font-weight: 700; color: #fff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__recent-meta { font-size: .74rem; color: rgb(255 255 255 / .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__recent-total { font-weight: 700; color: #fff; font-size: .92rem; }
/* Drop to 2 then 1 column before the cards get crushed, so an order never spills off the edge. */
@media (max-width: 1140px) { .pl-acct__recent { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pl-acct__recent { grid-template-columns: 1fr; } }
/* Mobile: peek the Senaste beställningar list at ~1.5 cards with a gradient fade + a "Visa mer"
   toggle, mirroring the Dina förmåner peek. Desktop shows the full 3-up row (fade hidden, no clamp). */
.pl-acct__recent-fade { display: none; }
@media (max-width: 599px) {
  .pl-acct__recent-clip { position: relative; max-height: 160px; overflow: hidden; transition: max-height .45s ease; }
  .pl-acct__recent-clip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(30, 30, 30, 0), #1E1E1E 88%); pointer-events: none; opacity: 1; transition: opacity .45s ease; }
  .pl-acct__recent-clip.is-open::after { opacity: 0; }
  .pl-acct__recent-fade { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0 2px; border: 0; background: none; color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
}
.pl-acct__unlock { font-size: .92rem; line-height: 1.5; color: rgb(255 255 255 / .7); margin: 0; }
.pl-acct__unlock strong { color: #fff; }
/* .pl-acct__addr-add now shares the .pl-acct__card-link recipe — see selector list above. */
.pl-acct__addr-empty { color: rgb(255 255 255 / .5); font-size: .9rem; margin: 0; }

/* Trustpilot honor-system bonus card — three visual states: idle (button), pending
   (spinner + countdown, fake "verifying"), claimed (green ✓ + done message).
   Brand: star + wordmark recreated using Trustpilot brand green #00B67A. Swap the star SVG
   for the official trustpilot.com/brand asset when convenient. */
.pl-trust__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pl-trust__brand-star { width: 20px; height: 20px; flex: 0 0 auto; }
.pl-trust__brand-word { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.pl-trust__body { display: flex; flex-direction: column; gap: 12px; }
.pl-trust__msg { font-size: .9rem; line-height: 1.5; color: rgb(255 255 255 / .7); margin: 0; }
.pl-trust__msg strong { color: #fff; font-weight: 700; }
.pl-trust__cta { align-self: flex-start; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px; background: #fff; color: #111; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background-color 200ms ease, transform 220ms cubic-bezier(0.22,1,0.36,1); }
@media (hover: hover) and (pointer: fine) { .pl-trust__cta:hover { background: #f1f1f1; } }
.pl-trust__cta:active { transform: scale(.98); }
.pl-trust__msg--pending { color: rgb(255 255 255 / .8); }
.pl-trust__msg--done { color: #cfeed7; }
.pl-trust__check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(46 204 113 / .18); color: #6fd98a; font-weight: 800; font-size: .85rem; vertical-align: middle; margin-right: 6px; }
.pl-trust__spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: pl-trust-spin 800ms linear infinite; vertical-align: middle; }
.pl-trust__msg .pl-trust__spinner { margin-right: 7px; }
@keyframes pl-trust-spin { to { transform: rotate(360deg); } }
/* Pending state on the Tjäna poäng grid Trustpilot card. */
/* Trustpilot earn card: its body is wrapped in .pl-trust-earn__body (needed for the JS pending
   swap), so on the mobile earn-card grid the text loses its "text" area and the value/title drift.
   Give the wrapper the text area + force left alignment so it matches the other earn cards. */
.pl-trust-earn .pl-acct__earnv2-value,
.pl-trust-earn .pl-acct__earnv2-title,
.pl-trust-earn__body { text-align: left; justify-self: start; }
@media (max-width: 599px) { .pl-trust-earn__body { grid-area: text; min-width: 0; } }
.pl-trust-earn__pending { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .8); margin-top: auto; }
.pl-trust-earn__spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: pl-trust-spin 800ms linear infinite; flex: 0 0 auto; }
.pl-acct__addr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-acct__addr { background: rgb(255 255 255 / .05); border-radius: 10px; padding: 16px; }
.pl-acct__addr-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .45); margin-bottom: 6px; }
.pl-acct__addr-body { color: rgb(255 255 255 / .85); font-size: .9rem; line-height: 1.5; }
.pl-acct__addr-body p { margin: 0; }
.pl-acct__addr-actions { display: flex; gap: 14px; margin-top: 12px; border-top: 1px solid rgb(255 255 255 / .07); padding-top: 10px; }
.pl-acct__addr-actions button { background: none; border: 0; color: rgb(255 255 255 / .65); font-size: .82rem; text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit; }
.pl-acct__addr-actions button:hover { color: #fff; }
.pl-acct__addr-actions form { margin: 0; display: inline; }
@media (max-width: 749px) { .pl-acct__addr-list { grid-template-columns: 1fr; } }
/* Dina siffror — stat grid */
.pl-acct__statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pl-acct__statx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-acct__statx--wide { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / .07); padding-top: 14px; margin-top: 2px; }
.pl-acct__statx-num { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.05; }
.pl-acct__statx-num--sm { font-size: 1.05rem; line-height: 1.25; }
.pl-acct__statx-lab { font-size: .72rem; color: rgb(255 255 255 / .5); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 749px) { .pl-acct__statgrid { grid-template-columns: 1fr 1fr; } }
/* Topplista — top-3 product podium */
.pl-acct__podium-wrap { margin-top: 18px; border-top: 1px solid rgb(255 255 255 / .07); padding-top: 16px; }
.pl-acct__podium-title { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin-bottom: 16px; }
.pl-acct__podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; }
.pl-acct__pod { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
/* Thumb wrapper has NO overflow:hidden so the rank chip can sit on the outside corner.
   The image clips itself via its own border-radius. */
.pl-acct__pod-thumb { position: relative; width: 84px; height: 84px; background: rgb(255 255 255 / .05); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.pl-acct__pod--1 .pl-acct__pod-thumb { width: 108px; height: 108px; }
.pl-acct__pod-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
/* Podium rank chips — flat solid chips with a thin white border ring + subtle drop shadow.
   Dropped the radial-gradient + linear-gradient combo that made the numbers feel embossed/3D
   and "wonky"; clean flat colour reads cleaner at 24px. */
.pl-acct__pod-rank { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; letter-spacing: -.01em; border-radius: 50%; color: #1a1a1a; box-shadow: 0 0 0 1.5px #0e0e0e, 0 2px 6px rgb(0 0 0 / .55); }
.pl-acct__pod-rank--1 { background: #e0b34d; }
.pl-acct__pod-rank--2 { background: #c4c4c4; }
.pl-acct__pod-rank--3 { background: #c98555; color: #fff; }
.pl-acct__pod-name { font-size: .98rem; font-weight: 700; color: #fff; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-acct__pod-qty { font-size: .74rem; color: rgb(255 255 255 / .55); }
/* Bars taller + flatter — single colour with a very subtle inner highlight so they read as solid blocks. */
.pl-acct__pod-bar { width: 100%; border-radius: 6px 6px 0 0; margin-top: 6px; }
.pl-acct__pod-bar--1 { height: 64px; background: #c89538; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.pl-acct__pod-bar--2 { height: 46px; background: #b0b0b0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
.pl-acct__pod-bar--3 { height: 32px; background: #b97333; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
@media (max-width: 749px) { .pl-acct__pod-thumb { width: 64px; height: 64px; } .pl-acct__pod--1 .pl-acct__pod-thumb { width: 82px; height: 82px; } .pl-acct__pod-name { font-size: .86rem; } }
/* End PUMPLAB_LOYALTY_ACCOUNT_V2 */

/* PUMPLAB_LOYALTY_ORDER_V1 — single order detail page (customers/order template).
   Brand-match overlay on top of the stock Maestrooo .account / .order-summary / .address
   structure: Monument title, dark glass-bordered cards for the items table + address
   blocks, account-hub back-link. Doesn't restructure the markup — just re-skins it. */
.pl-acc-order { padding-block: var(--spacing-6) var(--spacing-12); padding-inline: clamp(16px, 4vw, 28px); max-width: 1560px; margin-inline: auto; }
/* Header layout — back-button on top, heading below. Stock Maestrooo `.account-header--back`
   positions back-button absolutely (causing "Tillbaka" to overlap the order title);
   override to a clean stacked column. */
.pl-acc-order .account-header,
.pl-acc-order .account-header--back { position: static !important; display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.pl-acc-order .account-header .back-button { position: static !important; transform: none !important; }
/* Back-button — re-uses `.pl-acct__card-link` (the "Se alla nivåer →" style on the
   account-hub roadmap card) so the back-affordance matches the rest of the brand
   surface exactly. Just needs to anchor itself at flex-start within the header column. */
.pl-acc-order__back { align-self: flex-start; }
.pl-acc-order__heading { text-align: left; gap: 6px; }
.pl-acc-order__eyebrow.subheading { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin: 0; }
.pl-acc-order__title { font-weight: 800; letter-spacing: -.02em; line-height: 1; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; color: #fff; }
.pl-acc-order__date { font-size: .88rem; color: rgb(255 255 255 / .5); margin: 0; }
/* Order summary card — replaces the stock <table> layout that left dead-space in the
   product column (Shopify's `line-item` snippet has fixed inner width; table-layout auto
   sized the cell wider than its content). Now a div-based flex layout we fully control —
   thumb + product info take natural width on the left, line-total sits on the right via
   flex-grow on the body + flex:0 0 auto on the price. `.order-summary` class kept on the
   wrapper for compat with any external CSS or banner-handler logic. */
.pl-acc-order .order-summary { background: #1E1E1E; border-radius: 12px; padding: 22px 26px; width: 100%; }

.pl-acc-order__summary-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / .07); font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .55); }

.pl-acc-order__lines { display: flex; flex-direction: column; }
/* Whole row is an <a> linking to the product PDP. Subtle hover (bg lift + thumb scale)
   matches the account-hub interactive surfaces. No underline anywhere. */
.pl-acc-order__line { display: flex; align-items: center; gap: 20px; padding: 20px 12px; margin-inline: -12px; border-bottom: 1px solid rgb(255 255 255 / .05); border-radius: 10px; text-decoration: none; color: inherit; transition: background-color 220ms ease; }
.pl-acc-order__line:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .pl-acc-order__line:hover { background: rgb(255 255 255 / .03); }
  .pl-acc-order__line:hover .pl-acc-order__line-thumb { transform: scale(1.03); }
}
.pl-acc-order__line-thumb { transition: transform 240ms ease; }
.pl-acc-order__line-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: rgb(255 255 255 / .04); flex: 0 0 auto; }
.pl-acc-order__line-thumb--placeholder { background: linear-gradient(135deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); }
.pl-acc-order__line-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pl-acc-order__line-title { color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin: 0; line-height: 1.2; font-family: 'Monument Wide Black', 'Inter', sans-serif; }
.pl-acc-order__line-variant { color: rgb(255 255 255 / .6); font-size: .92rem; margin: 0; }
.pl-acc-order__line-qty { color: rgb(255 255 255 / .65); font-size: .9rem; margin: 0; }
.pl-acc-order__line-qty strong { color: #fff; font-weight: 700; }
.pl-acc-order__line-total { flex: 0 0 auto; color: #fff; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pl-acc-order__summary-foot { padding-top: 22px; }
.pl-acc-order__summary-foot .v-stack { gap: 10px !important; max-width: 520px; margin-left: auto; }
.pl-acc-order__summary-foot .h-stack { font-size: .92rem; color: rgb(255 255 255 / .65); display: flex; gap: 16px; justify-content: space-between; align-items: baseline; }
.pl-acc-order__summary-foot .h-stack > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.pl-acc-order__summary-foot .h-stack > :last-child { flex: 0 0 auto; color: #fff; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-acc-order__summary-foot .h-stack + .h-stack { border-top: 1px solid rgb(255 255 255 / .04); padding-top: 10px; }
.pl-acc-order__summary-foot .h6 { font-weight: 800 !important; font-size: 1.15rem !important; letter-spacing: -.02em !important; color: #fff !important; }
.pl-acc-order__summary-foot .h-stack:has(.h6) { border-top: 1px solid rgb(255 255 255 / .15); padding-top: 14px; margin-top: 4px; }
/* Keep the stock 1fr / sidebar split so addresses stay top-right next to the order
   summary. Tighten the desktop grid gap so the addresses sit closer to the summary
   (stock uses var(--spacing-12) which leaves a big void on wide viewports). */
@media (min-width: 1150px) {
  .pl-acc-order .order { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-6); }
}

/* Address blocks -> cards. Two-column on desktop sidebar means each card is narrow;
   stack vertically on mobile + tighten padding. No borders. */
.pl-acc-order .order-addresses-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 999px) { .pl-acc-order .order-addresses-list { grid-template-columns: 1fr; } }
.pl-acc-order .order-addresses-list .address { background: #1E1E1E; border-radius: 12px; padding: 20px 22px; border: 0; }
.pl-acc-order .order-addresses-list .address .text-with-icon { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .55); margin-bottom: 10px; }
.pl-acc-order .order-addresses-list .address .text-with-icon svg { width: 18px; height: 18px; }
.pl-acc-order .order-addresses-list .address .text-with-icon .bold { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .65); margin: 0; }
.pl-acc-order .order-addresses-list .address > :not(.text-with-icon) { color: rgb(255 255 255 / .85); font-size: .92rem; line-height: 1.6; }

/* Account-banner nav suppressed everywhere — layout/theme.liquid no longer renders the
   section, but Shopify's layout-cache can keep serving stale renders for a while. Hide
   via CSS as a hard kill-switch so the stale nav never shows up even during the cache
   window. Safe to leave permanently — if we ever bring the section back we delete this. */
.shopify-section--account-banner,
.shopify-section.shopify-section--account-banner { display: none !important; }
/* Below rules preserved for reference if section is ever re-enabled — they brand-match
   the nav to the account-hub tab style. Currently dead code (parent hidden above). */
.shopify-section--account-banner .account-nav { background: transparent !important; padding-block: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.shopify-section--account-banner .account-nav .container { max-width: 1560px; padding-inline: clamp(16px, 4vw, 28px); }
.shopify-section--account-banner .account-nav ul { display: flex; gap: 0; justify-content: flex-start; padding: 0; margin: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.shopify-section--account-banner .account-nav ul::-webkit-scrollbar { display: none; }
.shopify-section--account-banner .account-nav__item { position: relative; }
.shopify-section--account-banner .account-nav__item a { display: inline-block; padding: 14px 16px; font-size: .92rem; font-weight: 600; color: rgb(255 255 255 / .55); text-decoration: none; white-space: nowrap; transition: color 220ms ease; border: 0; background: none; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
  .shopify-section--account-banner .account-nav__item a:hover { color: #fff; }
}
.shopify-section--account-banner .account-nav__item[aria-current="page"] a { color: #fff; font-weight: 700; }
.shopify-section--account-banner .account-nav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
  background: #fff; border-radius: 3px 3px 0 0;
}

/* Cancel / fulfilment banners — solid dark card matching the account-hub aesthetic.
   No glass-border outline (per Isac's brand-rule); colour comes purely from the bg tint
   and the icon, so cancelled/success states are still distinct at a glance. */
.pl-acc-order .banner--error { background: rgb(255 90 90 / .08) !important; border: 0 !important; color: rgb(255 200 200 / .9) !important; border-radius: 10px; padding: 16px 20px; font-size: .92rem; line-height: 1.5; }
.pl-acc-order .banner--success { background: rgb(80 200 120 / .08) !important; border: 0 !important; color: rgb(180 240 200 / .95) !important; border-radius: 10px; padding: 16px 20px; font-size: .92rem; line-height: 1.5; }

/* Mobile pass */
@media (max-width: 749px) {
  .pl-acc-order { padding-block: var(--spacing-8) var(--spacing-12); }
  .pl-acc-order__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .pl-acc-order .order-summary { padding: 18px 16px; }
  .pl-acc-order__line { gap: 14px; padding: 16px 0; }
  .pl-acc-order__line-thumb { width: 76px; height: 76px; border-radius: 8px; }
  .pl-acc-order__line-title { font-size: 1.05rem; }
  .pl-acc-order__line-total { font-size: 1rem; }
  .pl-acc-order__summary-foot .v-stack { max-width: 100%; }
  .pl-acc-order .order-addresses-list .address { padding: 16px 18px; }
}
/* End PUMPLAB_LOYALTY_ORDER_V1 */

/* PUMPLAB_LOGIN_V1 — login + recover-password page polish.
   Sits inside .shopify-section--main-customers-login. Brand-match: dark surface card,
   eyebrow + Monument-ish title (h2 inherits theme), white solid CTA.

   Full-page auth experience (Nike-inspired): hide header + footer on customers/{login,
   register, reset_password, activate_account} so the form sits centred on its own canvas.
   Body gets `.pl-auth-page` class from layout/theme.liquid for these page types. */
body.pl-auth-page #shopify-section-header,
body.pl-auth-page .shopify-section--header,
body.pl-auth-page .shopify-section-group-header-group,
body.pl-auth-page #shopify-section-footer,
body.pl-auth-page .shopify-section--footer,
body.pl-auth-page .shopify-section-group-footer-group,
body.pl-auth-page .shopify-section--announcement-bar { display: none !important; }
body.pl-auth-page { background: #0a0a0a; min-height: 100vh; }
body.pl-auth-page main { min-height: 100vh; display: flex; flex-direction: column; }

/* PUMPLAB logo at the top of auth pages — uses the real HEADER-LOGO-SVART.png asset,
   inverted to white via CSS filter (same trick as the launch-lockdown). Sits above the
   form, content starts higher up the viewport. */
.pl-login__logo { display: flex; justify-content: center; margin-bottom: clamp(48px, 8vh, 80px); }
.pl-login__logo img { width: clamp(140px, 14vw, 200px); height: auto; filter: invert(1); }
.pl-login { padding-block: clamp(40px, 6vh, 64px) 60px; min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; }
.pl-login__inner { width: 100%; }
@media (max-width: 749px) {
  .pl-login { padding-block: clamp(24px, 4vh, 40px) 32px; }
  .pl-login__logo { margin-bottom: 40px; }
  .pl-login__logo img { width: 140px; }
}
.pl-login__inner { max-width: 460px; margin-inline: auto; }
.pl-login__head { text-align: center; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.pl-login__eyebrow { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin: 0; }
.pl-login__title { font-weight: 800; letter-spacing: -.02em; margin: 0; color: #fff; }
/* "eller skapa konto" as a dimmer, smaller line centered under the big "Logga in". */
.pl-login__title-alt { display: block; font-size: .4em; font-weight: 700; letter-spacing: -.01em; color: rgb(255 255 255 / .5); margin-top: 12px; }
.pl-login__lede { color: rgb(255 255 255 / .65); font-size: .95rem; line-height: 1.55; margin: 8px 0 0; max-width: 380px; margin-inline: auto; }

.pl-login__card { background: #242424; border-radius: 14px; padding: 32px 28px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04); }
.pl-login__step { display: none; flex-direction: column; gap: 18px; }
.pl-login__step.is-active { display: flex; }
/* Animate the card's height between steps (JS sets the height to the active step) so the box grows
   smoothly instead of snapping ~94px on the email→password step. */
/* The form is a grid with gap:24px. Shopify's invisible .h-captcha activates on interaction as a
   (0-height) grid child, so the gap injected 24px below the content → card grew at the bottom. The
   form's only visible child is the steps wrapper, so kill the gap; a shown error banner gets its own. */
.form.pl-login__form { gap: 0; }
.pl-login__form .banner { margin-bottom: 20px; }
.pl-login__steps { overflow: hidden; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .pl-login__steps { transition: none; } }
/* CTA buttons — exact same recipe as `.pl-drop-hero__btn--primary` (the "Köp nu" pair on
   the homepage drop hero). Stretched to full width on auth surfaces. */
.pl-login__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 22px; font-family: inherit; font-size: clamp(0.95rem, 0.85vw, 1.05rem); font-weight: 600; letter-spacing: .015em; border: 1.5px solid transparent; border-radius: 7px; cursor: pointer; text-decoration: none; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-tap-highlight-color: transparent; }
.pl-login__btn { box-shadow: none !important; position: relative; }
.pl-login__btn--primary { background: #ffffff !important; color: #101010 !important; border-color: #ffffff !important; }
.pl-login__btn--secondary { background: transparent; color: #ffffff; border-width: 2px; border-color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  /* NO lift on hover — just the bg shift. transform:none !important kills any theme
     button-hover translateY that bleeds in. */
  .pl-login__btn--primary:hover { background: #ebebeb !important; color: #101010 !important; border-color: #ebebeb !important; box-shadow: none !important; transform: none !important; }
  .pl-login__btn--secondary:hover { background: #ffffff; color: #101010; border-color: #ffffff; transform: none !important; }
}
.pl-login__btn:active { transform: scale(0.97) !important; }
/* Loading state — same spinner language as the ATC button. Label hides, spinner spins. */
.pl-login__btn.is-loading { color: transparent !important; -webkit-text-fill-color: transparent !important; pointer-events: none; }
.pl-login__btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgb(16 16 16 / .25); border-top-color: #101010; border-radius: 50%;
  animation: pl-login-spin .6s linear infinite;
}
@keyframes pl-login-spin { to { transform: rotate(360deg); } }
/* Legacy class — older login template instances may still ship this. Keep as alias. */
.pl-login__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 22px; font-size: 1.05rem; font-weight: 600; letter-spacing: .015em; border: 1.5px solid #fff; border-radius: 7px; background: #fff; color: #101010; cursor: pointer; text-decoration: none; transition: background-color 240ms ease, border-color 240ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) { .pl-login__cta:hover { background: #ebebeb; border-color: #ebebeb; } }
.pl-login__alt { text-align: center; font-size: .88rem; }
.pl-login__alt a { color: rgb(255 255 255 / .65); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .25); transition: color 180ms ease; }
.pl-login__alt a:hover { color: #fff; }
.pl-login__email-line { font-size: .85rem; color: rgb(255 255 255 / .65); margin: 0; padding: 12px 14px; background: #141414; border-radius: 8px; }
.pl-login__email-line strong { color: #fff; font-weight: 600; }
.pl-login__email-line a { color: rgb(255 255 255 / .7); text-decoration: underline; text-underline-offset: 2px; }
.pl-login__email-line a:hover { color: #fff; }
/* Name row — Förnamn + Efternamn side-by-side (Nike pattern). Stacks on narrow mobile.
   Grid of .pl-login__field wrappers so each field's "Obligatoriskt" hint stacks below
   its own input (not into the next grid cell). */
.pl-login__name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pl-login__field { display: flex; flex-direction: column; }
@media (max-width: 449px) { .pl-login__name-row { grid-template-columns: 1fr; } }

/* Invalid-state visuals — JS adds `.pl-invalid` to the .form-control on blur when the field
   is required+empty (Nike behaviour: click in → click out → red). A real DOM hint element
   (.pl-login__required) is appended, NOT a ::after, so click-targeting is never blocked. */
.pl-login .form-control.pl-invalid { background: rgb(255 90 90 / .08) !important; box-shadow: inset 0 0 0 1.5px rgb(255 90 90 / .5); }
.pl-login .form-control.pl-invalid .floating-label { color: rgb(255 130 130); }
/* Sits absolutely just under its field (in the existing gap) so showing it never grows the card. */
.pl-login__form .form-control { position: relative; }
.pl-login__required { position: absolute; top: 100%; left: 0; font-size: .76rem; font-weight: 600; color: rgb(255 130 130); margin: 3px 0 0; padding-inline: 2px; pointer-events: none; }

/* Password rules list — live-validation hints under the password field. ✕ → ✓ on met. */
.pl-login__pwd-wrap { display: flex; flex-direction: column; gap: 8px; position: relative; }
/* Eye toggle — sits over the right edge of the password input. Wrapped in .pl-login__pwd-field
   so positioning anchors to the input (not the larger wrap that holds rules below). */
.pl-login__pwd-field { position: relative; }
.pl-login__pwd-field .form-control { position: relative; }
.pl-login__pwd-eye { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: rgb(255 255 255 / .55); border-radius: 6px; transition: color 180ms ease, background-color 180ms ease; z-index: 2; }
.pl-login__pwd-eye:hover { color: #fff; background: rgb(255 255 255 / .05); }
.pl-login__pwd-eye svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-login__pwd-eye .pl-login__pwd-eye-off { display: none; }
.pl-login__pwd-eye.is-shown .pl-login__pwd-eye-on { display: none; }
.pl-login__pwd-eye.is-shown .pl-login__pwd-eye-off { display: inline-flex; }
/* Reserve room on the right of the password input for the eye button. */
.pl-login__pwd-wrap .input { padding-right: 50px !important; }
.pl-login__pwd-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: rgb(255 255 255 / .55); }
.pl-login__pwd-rules li { display: flex; align-items: center; gap: 8px; transition: color 200ms ease; }
.pl-login__pwd-rules li.is-met { color: rgb(140 220 160); }
.pl-login__pwd-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: .82rem; color: inherit; }

/* Gender — required dropdown (Man / Kvinna / Annat). Glass-input recipe + custom chevron. */
.pl-login__gender-block { border: 0; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.pl-login__gender-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); padding: 0; }
.pl-login__select-wrap { position: relative; }
.pl-login__select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: rgb(255 255 255 / .06); border: 0; border-radius: var(--rounded-input); padding: 13px 40px 13px 14px; color: #fff; font-size: .95rem; font-family: inherit; cursor: pointer; transition: background-color 200ms ease; }
.pl-login__select:focus { outline: none; background: rgb(255 255 255 / .12); }
.pl-login__select:invalid,
.pl-login__select option[value=""] { color: rgb(255 255 255 / .4); }
.pl-login__select option { color: #101010; }
.pl-login__select-chevron { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 18px; height: 18px; color: rgb(255 255 255 / .55); pointer-events: none; }
/* Required-but-empty flag (JS adds .pl-invalid on a blocked submit). */
.pl-login__gender-block.pl-invalid .pl-login__gender-label { color: rgb(255 130 130); }
.pl-login__gender-block.pl-invalid .pl-login__select { box-shadow: inset 0 0 0 1.5px rgb(255 90 90 / .5); }

/* Optional birthday block on register form — Day/Month/Year split (Nike-style). */
.pl-login__bday-block { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; border: 0; margin: 0; }
.pl-login__bday-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); padding: 0; }
.pl-login__bday-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.pl-login__bday-part { background: rgb(255 255 255 / 0.06); border: 0; border-radius: var(--rounded-input); padding: 12px 12px; color: #fff; font-size: .95rem; font-family: inherit; color-scheme: dark; transition: background-color 220ms ease; -moz-appearance: textfield; appearance: textfield; }
.pl-login__bday-part::-webkit-outer-spin-button,
.pl-login__bday-part::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-login__bday-part:focus { outline: none; background: rgb(255 255 255 / 0.12); }
.pl-login__bday-part::placeholder { color: rgb(255 255 255 / .35); }
.pl-login__bday-hint { font-size: .78rem; color: rgb(255 255 255 / .55); margin: 0; line-height: 1.4; }

/* Marketing-consent checkbox — theme's native .checkbox/.switch default to --accent
   (#A79F8A, promo-only) when checked + dim the label to opacity .7 + a near-invisible
   unchecked box, which all reads "greyed out". Override within .pl-login: visible
   unchecked box (lighter bg + subtle border), white-on check, full-opacity label. */
.pl-login .checkbox,
.pl-login .switch { background-color: rgb(255 255 255 / .12) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2) !important; }
.pl-login .switch:checked { background-color: #fff !important; }
.pl-login .checkbox:checked { background-color: #fff !important; box-shadow: inset 0 0 0 1px #fff !important; }
.pl-login .checkbox ~ label,
.pl-login .checkbox:checked ~ label,
.pl-login .switch ~ label { opacity: 1 !important; color: rgb(255 255 255 / .8) !important; font-size: .85rem; }

/* ToS consent — required checkbox on register form. Custom appearance:none box matching
   the snippet checkboxes (visible unchecked border, white-on check). */
.pl-login__consent { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; color: rgb(255 255 255 / .8); line-height: 1.45; cursor: pointer; }
.pl-login__consent input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; width: 16px; height: 16px; -webkit-appearance: none; appearance: none; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); border-radius: 3px; cursor: pointer; position: relative; transition: background-color .15s ease; }
.pl-login__consent input[type="checkbox"]:checked { background: #fff; box-shadow: inset 0 0 0 1px #fff; }
.pl-login__consent input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #101010; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pl-login__consent-req { color: rgb(255 130 130); font-weight: 700; }
.pl-login__consent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .35); }
.pl-login__consent a:hover { text-decoration-color: #fff; }
.pl-login__forgot { text-align: right; font-size: .82rem; margin-top: -4px; }
.pl-login__forgot a { color: rgb(255 255 255 / .6); text-decoration: underline; text-underline-offset: 3px; }
.pl-login__forgot a:hover { color: #fff; }
.pl-login__inner-box { text-align: left; }
.pl-login__sub-title { font-weight: 800; letter-spacing: -.01em; color: #fff; margin: 0 0 4px; }
.pl-login__sub-lede { color: rgb(255 255 255 / .6); font-size: .9rem; margin: 0 0 12px; }

/* Form inputs — match contact-page recipe (PUMPLAB_CONTACT_V1): borderless glass surface,
   bg-fade hover/focus, brighter-on-filled. Single source of truth for form inputs across
   customer-area pages. */
.pl-login .form-control,
.pl-login .input,
.pl-login .textarea,
.pl-login .select { border-radius: var(--rounded-input) !important; }
.pl-login .form-control { overflow: hidden; transition: background 0.18s ease; }
.pl-login .input,
.pl-login .textarea,
.pl-login .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; }
@media (hover: hover) and (pointer: fine) {
  .pl-login .form-control:not(:has(.select)):hover { background: rgb(255 255 255 / 0.05); }
  .pl-login .form-control:not(:has(.select)):hover :is(.input, .textarea) { color: #fff; }
}
.pl-login .form-control:focus-within { background: rgb(255 255 255 / 0.05); }
.pl-login .form-control:focus-within :is(.input, .textarea, .select) { color: #fff; }
.pl-login .input:not(:placeholder-shown),
.pl-login .textarea:not(:placeholder-shown) { color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.12); }
.pl-login .floating-label { transition: opacity 0.2s ease, transform 0.2s ease-in-out; z-index: 1; }
.pl-login .form-control:focus-within .floating-label { opacity: 0.8; }

.pl-login .fieldset { display: flex; flex-direction: column; gap: 16px; }
.pl-login .fieldset-link { font-size: .82rem; }
.pl-login .fieldset-link a { color: rgb(255 255 255 / .65); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .25); transition: color 180ms ease, text-decoration-color 180ms ease; }
.pl-login .fieldset-link a:hover { color: #fff; text-decoration-color: rgb(255 255 255 / .55); }

/* Submit CTA — solid white pill matching account-page action buttons. Overrides the
   stock Maestrooo button rendered with secondary:true. */
.pl-login .button,
.pl-login button[type="submit"] { width: 100%; padding: 14px 18px; border-radius: 10px; background: #fff !important; color: #0a0a0a !important; text-align: center; text-decoration: none; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; border: 0; cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; box-shadow: none !important; }
.pl-login .button:hover,
.pl-login button[type="submit"]:hover { background: rgb(255 255 255 / .9) !important; transform: translateY(-1px); }

/* Secondary links — register, back to login */
.pl-login .v-stack > div > a.link,
.pl-login .link.text-subdued { color: rgb(255 255 255 / .65); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .25); font-size: .88rem; }
.pl-login .v-stack > div > a.link:hover,
.pl-login .link.text-subdued:hover { color: #fff; text-decoration-color: rgb(255 255 255 / .55); }

/* Banner tone-down — neutral over hardcoded error red when message is informational
   (e.g. "we have sent an email to verify your account"). Detected via Shopify's
   banner--error class still rendering but visually softened to a neutral notice. */
/* Error banner — clean red-tinted notice, left-aligned, with a small red dot indicator.
   The stock banner renders an `.offset-icon` (a greyish circle that read odd) — hidden,
   replaced by a ::before dot on the banner itself. */
.pl-login .banner--error { display: flex; align-items: center; gap: 10px; background: rgb(255 90 90 / .1) !important; border: 1px solid rgb(255 90 90 / .28) !important; color: rgb(255 190 190) !important; border-radius: 10px; padding: 13px 16px; font-size: .9rem; line-height: 1.4; text-align: left; justify-content: flex-start !important; }
.pl-login .banner--error .offset-icon,
.pl-login .banner--error > svg { display: none !important; }
.pl-login .banner--error::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 110 110); box-shadow: 0 0 8px rgb(255 90 90 / .6); }
.pl-login .banner--success { display: flex; align-items: center; gap: 10px; background: rgb(80 200 120 / .1) !important; border: 1px solid rgb(80 200 120 / .25) !important; color: rgb(180 240 200) !important; border-radius: 10px; padding: 13px 16px; font-size: .9rem; text-align: left; justify-content: flex-start !important; }
.pl-login .banner--success .offset-icon { display: none !important; }

@media (max-width: 749px) {
  .pl-login { padding-block: var(--spacing-8) var(--spacing-12); }
  /* Logo on mobile — left-aligned (Nike pattern), comfortable size. */
  .pl-login__logo { justify-content: flex-start; margin-bottom: 28px; }
  .pl-login__logo img { width: 150px; }
  .pl-login__head { margin-bottom: 22px; gap: 6px; }
  .pl-login__eyebrow { font-size: .75rem; }
  .pl-login__title { font-size: 2.2rem; line-height: 1.05; }
  .pl-login__lede { font-size: .88rem; max-width: 320px; }
  .pl-login__card { padding: 22px 18px; }
}
/* End PUMPLAB_LOGIN_V1 */

/* PUMPLAB_FOOTER_PAY_V1 — inlined payment brand marks, coloured via currentColor from the
   footer's --color-foreground: light on the dark footer, dark on a light/cream footer
   (auto-inverts, no accent). Uniform height, width auto per wordmark. */
.pl-payicons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; color: rgb(var(--color-foreground, 255 255 255)); }
.pl-payicon { display: inline-flex; align-items: center; }
.pl-payicon__svg { height: 20px; width: auto; display: block; opacity: .82; }
/* Mastercard is the square-ish mark — a touch taller to match the wordmarks' visual weight. */
.pl-payicon--mastercard .pl-payicon__svg { height: 24px; }
/* Shop Pay is a wide bag+wordmark — trim its height so it doesn't dominate the row. */
.pl-payicon--shop .pl-payicon__svg { height: 17px; }
@media (max-width: 700px) { .pl-payicons { gap: 16px; } .pl-payicon__svg { height: 17px; } .pl-payicon--mastercard .pl-payicon__svg { height: 21px; } .pl-payicon--shop .pl-payicon__svg { height: 15px; } }
/* End PUMPLAB_FOOTER_PAY_V1 */

/* PUMPLAB_CART_BUBBLE_WHITE_V1 — cart count bubbles (header icon + drawer title) were the brand
   accent (button-primary var); accent is promo-only, never site UI. White with dark number,
   matching the notification count-pill. Scoped to <cart-count> so the base .count-bubble (empty
   state, text-with-bubble, etc.) is untouched. */
cart-count.count-bubble { background: #fff !important; color: #111 !important; }
/* End PUMPLAB_CART_BUBBLE_WHITE_V1 */

/* PUMPLAB_LOYALTY_NOTIF_V1 — notification surfaces (toast container + count-pill). */
#pl-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9000; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; max-width: 360px; }
@supports (bottom: env(safe-area-inset-bottom)) { #pl-toast-container { bottom: calc(24px + env(safe-area-inset-bottom)); } }
.pl-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 12px; background: #1E1E1E; color: #fff; text-decoration: none; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px); transition: opacity 220ms cubic-bezier(.22,1,.36,1), transform 220ms cubic-bezier(.22,1,.36,1); }
.pl-toast.is-in { opacity: 1; transform: translateY(0); }
.pl-toast.is-out { opacity: 0; transform: translateY(8px); }
.pl-toast__icon { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgb(255 255 255 / .08); font-size: 14px; }
.pl-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-toast__title { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.pl-toast__text { font-size: .82rem; line-height: 1.35; color: rgb(255 255 255 / .7); }
.pl-toast__close { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; background: transparent; border: 0; color: rgb(255 255 255 / .55); font-size: 18px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pl-toast__close:hover { color: #fff; } .pl-toast:hover { background: #242424; } }
@media (max-width: 700px) {
  /* PUMPLAB_LOYALTY_TOAST_MOBILE_V1 — bigger, higher-contrast toast on phones; centred + capped
     width, a bit higher off the bottom (Isac 2026-07-11). */
  #pl-toast-container { left: 50%; right: auto; transform: translateX(-50%); width: min(90vw, 360px); max-width: none; bottom: calc(24px + env(safe-area-inset-bottom)); gap: 10px; }
  .pl-toast { padding: 15px 15px 15px 13px; gap: 12px; border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
  .pl-toast__icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 15px; }
  .pl-toast__title { font-size: .95rem; }
  .pl-toast__text { font-size: .875rem; color: rgb(255 255 255 / .78); }
  .pl-toast__close { flex-basis: 24px; width: 24px; height: 24px; font-size: 19px; }
  .pl-toast__thumb { flex-basis: 48px; width: 48px; height: 48px; }
}

/* Count-pill on account-icon. Mirrors the cart-count's IN-BOUNDS placement (top:2px; right:0)
   so the .tap-area overflow:hidden doesn't clip it — the same reason the cart bubble isn't
   clipped. White-on-dark instead of the brand-accent the cart-bubble inherits. */
.header__icon-list > li > .tap-area .pl-notif-pill { position: absolute; z-index: 2; top: 2px; right: 0; left: auto; background: #fff; color: #111; width: auto; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: inline-grid; place-items: center; font-family: var(--text-font-family, sans-serif); font-variant-numeric: tabular-nums; line-height: 1; }
/* Beat the 3-class show rule above so a 0/empty count actually hides. */
.header__icon-list > li > .tap-area .pl-notif-pill.is-hidden { display: none; }
@media screen and (max-width: 699px) {
  .header__icon-list > li > .tap-area .pl-notif-pill { top: 6px; right: 3px; left: auto; }
}
.pl-notif-pill.is-hidden { display: none; }
/* End PUMPLAB_LOYALTY_NOTIF_V1 */

/* PUMPLAB_LOYALTY_TIER_OVERLAY_V2 — real roadmap cards swap, multiplier counts up, the
   förmåner grid staggers in. Reuses .pl-acct__road-card + .pl-acct__road-perks-grid material. */
.pl-tier-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; opacity: 0; transition: opacity 300ms cubic-bezier(.22,1,.36,1); pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; padding: 32px 16px; }
.pl-tier-overlay.is-active { opacity: 1; }
.pl-tier-overlay.is-leaving { opacity: 0; transition-duration: 340ms; }
.pl-tier-overlay__inner { position: relative; width: min(620px, 94vw); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }

/* Title + bonus sit ABOVE the card, hidden until the card transition finishes. */
.pl-tier-up__head { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: translateY(12px); transition: opacity .75s ease-out, transform .75s ease-out; }
.pl-tier-overlay.is-revealing .pl-tier-up__head { opacity: 1; transform: translateY(0); }
.pl-tier-overlay__title { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight, 800); text-transform: uppercase; font-size: 2.1rem; letter-spacing: -.01em; color: #fff; }
.pl-tier-up__bonus { font-weight: 800; font-size: 1.45rem; letter-spacing: -.01em; color: #fff; }

/* Card stage — old card alone in focus first; a light sweep wipes across as it cross-fades
   to the new card (opacity only, NO scale — the sweep is the transition's wow, not a pop). */
.pl-tier-up__stage { position: relative; width: 340px; display: grid; place-items: stretch; }
/* text-align:left so the card reads like the roadmap card (overlay inner is centered). */
.pl-tier-up__card { grid-area: 1 / 1; width: 340px; min-height: 244px; padding: 22px 22px; border-radius: 16px; text-align: left; }
/* Cross-fade timed to coincide with the sweep's bright band passing over (delay), so the
   tier visibly changes "as the light hits it". Opacity only — no scale. */
/* Force the card's glowing outline-ring sweep ON for both overlay cards (it's the hover
   effect from .pl-acct__road-card::before) + a little extra glow, so the intro reads as a
   rim-lit card emerging from the dark. */
.pl-tier-overlay .pl-tier-up__card::before { opacity: 1 !important; animation-play-state: running !important; filter: drop-shadow(0 0 9px rgb(255 255 255 / .55)) drop-shadow(0 0 2px rgb(255 255 255 / .7)); }
/* Not interactive during the animation — kill the roadmap card's hover lift. */
.pl-tier-overlay .pl-tier-up__card:hover { translate: none !important; }

/* INTRO — the first card (the tier you were on) materialises out of near-black: you see only
   its glowing rim at first ("oooh, what's that?"), held dark a beat, then brightness fades up.
   Filter delayed so the dark/rim-only phase lasts longer before it lifts. */
/* The card you were on materialises with a subtle scale-in (synced with the fade so it's actually
   visible), settling to 100% well before the swap even starts. */
.pl-tier-up__card--prev { z-index: 1; opacity: 0; transform: scale(.9); filter: brightness(.06); transition: opacity 1.3s ease, transform 1.5s cubic-bezier(.22, 1, .36, 1), filter 2.1s ease .35s; }
.pl-tier-overlay.is-active .pl-tier-up__card--prev { opacity: 1; transform: scale(1); filter: brightness(1); }
/* New card is fully opaque but masked to nothing — the wipe (--pl-wipe 0→1, JS-driven, eased)
   reveals it behind the passing light, over the still-solid old card (which never fades to
   nothing). A DIAGONAL gradient mask (matches the sweep's skew) with a soft fade band gives a
   feathered reveal edge instead of a hard straight line. */
.pl-tier-up__card--new  {
  z-index: 2; opacity: 1; box-shadow: 0 30px 70px rgba(0,0,0,.6);
  --pl-edge: calc(var(--pl-wipe, 0) * 150% - 40%);
  -webkit-mask-image: linear-gradient(106deg, #000 var(--pl-edge), rgba(0,0,0,0) calc(var(--pl-edge) + 13%));
          mask-image: linear-gradient(106deg, #000 var(--pl-edge), rgba(0,0,0,0) calc(var(--pl-edge) + 13%));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Single-tier case (no prev card, e.g. Ingen→Silver): no wipe — the new card just does the
   dark→bright intro, fully shown (no mask). */
.pl-tier-up__stage:not(:has(.pl-tier-up__card--prev)) .pl-tier-up__card--new { -webkit-mask-image: none; mask-image: none; opacity: 0; transform: scale(.9); filter: brightness(.06); transition: opacity 1.1s ease, transform 1.5s cubic-bezier(.22, 1, .36, 1), filter 1.5s ease .15s; }
.pl-tier-overlay.is-active .pl-tier-up__stage:not(:has(.pl-tier-up__card--prev)) .pl-tier-up__card--new { opacity: 1; transform: scale(1); filter: brightness(1); }

/* Light sweep clipped to the card (position:relative so the absolute ::before is contained).
   The band rides the wipe's leading edge — same --pl-wipe var — so it always sits over the
   boundary between old and newly-revealed, hiding the hard clip line. */
.pl-tier-up__sweep { position: relative; grid-area: 1 / 1; z-index: 3; pointer-events: none; border-radius: 16px; overflow: hidden; opacity: 0; transition: opacity .6s ease; }
.pl-tier-up__sweep::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 45%;
  /* Runs the whole way across: off-card left at wipe 0 → fully off-card right at wipe 1 (pushed
     far enough that the skewed bottom corner clears too, no frozen sliver). */
  left: calc(var(--pl-wipe, 0) * 178% - 58%);
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.pl-tier-overlay.is-swapping .pl-tier-up__sweep { opacity: 1; }
.pl-tier-overlay.is-landed .pl-tier-up__sweep { opacity: 0; }
/* Single-tier (Ingen→Silver): there's no wipe, so the wipe-sweep would just sit stuck at its
   end position. Hide it and give the card a one-time celebratory shine instead. */
.pl-tier-up__stage:not(:has(.pl-tier-up__card--prev)) .pl-tier-up__sweep { display: none; }
.pl-tier-up__stage:not(:has(.pl-tier-up__card--prev)) .pl-tier-up__card--new::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / .1) 46%, rgb(255 255 255 / .24) 50%, rgb(255 255 255 / .1) 54%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg); opacity: 0;
}
.pl-tier-overlay.is-landed .pl-tier-up__stage:not(:has(.pl-tier-up__card--prev)) .pl-tier-up__card--new::after {
  animation: pl_loyalty_black_shine 1800ms cubic-bezier(0.33, 0, 0.2, 1) .15s 1 both;
}

/* Förmåner reveal once .is-revealing is set. */
.pl-tier-up__perks-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .5); margin-top: 6px; opacity: 0; transition: opacity .5s ease-out .2s; }
.pl-tier-up__perks { width: 100%; }
/* Initial hidden state for the staggered perks. Scoped under .pl-tier-overlay (2 classes) so
   it beats the base `.pl-acct__road-perk.is-active { opacity:1 }` — otherwise the active perks
   stay visible the whole animation instead of staggering in. */
.pl-tier-overlay .pl-tier-up__perk { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,1,.36,1); transition-delay: calc(.35s + var(--pl-perk-i) * .1s); }
.pl-tier-overlay.is-revealing .pl-tier-up__perks-head { opacity: 1; }
/* Locked perks settle at .4, active perks at 1 (mirrors the roadmap dim/lit states). */
.pl-tier-overlay.is-revealing .pl-tier-up__perk { opacity: .4; transform: translateY(0); }
.pl-tier-overlay.is-revealing .pl-tier-up__perk.is-active { opacity: 1; }
/* Only the perks unlocked AT this tier pop ("just unlocked!"). They flash a WHITE outline (no
   green) and KEEP a subtle persistent outline afterwards, so the new perk stays unmistakable
   instead of flickering by. Already-owned perks just settle with no flourish. */
.pl-tier-overlay.is-revealing .pl-tier-up__perk--fresh { animation: pl-tier-perk-unlock 1.8s cubic-bezier(.22, 1, .36, 1) calc(.9s + var(--pl-perk-i) * .14s) forwards; }
@keyframes pl-tier-perk-unlock {
  0%   { transform: scale(.92); box-shadow: inset 0 0 0 0 rgb(255 255 255 / 0), 0 0 0 0 rgb(255 255 255 / 0); }
  30%  { transform: scale(1.06); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .65), 0 0 22px 2px rgb(255 255 255 / .22); }
  58%  { transform: scale(.995); box-shadow: inset 0 0 0 1.6px rgb(255 255 255 / .5), 0 0 10px 0 rgb(255 255 255 / .12); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4), 0 0 0 0 rgb(255 255 255 / 0); }
}
/* "Ny" badge on the just-unlocked perk — pops in just after the unlock flash so it's unmistakable. */
.pl-tier-up__perk--fresh { position: relative; }
.pl-tier-up__perk-new { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 16px; padding: 0 6px; box-sizing: border-box; border-radius: 5px; background: #fff; color: #111; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.pl-tier-up__perk-new--boost { padding: 0 4px; }
.pl-tier-up__perk-new--boost svg { width: 11px; height: 11px; }
.pl-tier-overlay.is-revealing .pl-tier-up__perk-new { opacity: 1; transform: scale(1); transition-delay: calc(1.15s + var(--pl-perk-i) * .14s); }

/* Two actions — primary "Till mitt konto" (white) + ghost "Uppfattat" (close). */
.pl-tier-up__actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .6s ease-out 1.9s, transform .6s ease-out 1.9s; }
.pl-tier-overlay.is-revealing .pl-tier-up__actions { opacity: 1; transform: translateY(0); }
/* Match the drop-hero "Köp nu / Läs mer" pair: solid-white primary + outlined secondary. */
.pl-tier-up__btn--primary { padding: 13px 28px; background: #fff; color: #101010; border: 2px solid #fff; border-radius: 9px; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.pl-tier-up__btn--ghost { padding: 13px 26px; background: transparent; color: #fff; border: 2px solid #fff; border-radius: 9px; font-weight: 700; font-size: .95rem; cursor: pointer; }
@media (hover:hover) and (pointer:fine) {
  .pl-tier-up__btn--primary:hover { background: #ebebeb; border-color: #ebebeb; }
  .pl-tier-up__btn--ghost:hover { background: #fff; color: #101010; }
}

/* Once landed, the wipe is complete — drop the reveal mask so the card's outer glows (the Black
   bloom, the rim ring) aren't clipped to the card box by the mask. Seamless: wipe is already at 1. */
.pl-tier-overlay.is-landed .pl-tier-up__card--new { -webkit-mask-image: none; mask-image: none; }

/* ===================== BLACK — apex tier reuses the loyalty-page "bloom" intro ===================== */
.pl-tier-overlay--black { background: radial-gradient(120% 95% at 50% 40%, rgba(18 19 24 / .5), rgba(0 0 0 / .9) 72%), rgba(0 0 0 / .85); }
/* Content above the bloom layer. */
.pl-tier-overlay--black .pl-tier-overlay__inner { position: relative; z-index: 1; }
/* The bloom = a soft blue-white glow behind the card. Pseudo on the FIXED overlay (clipped to
   the viewport, no scroll). It begins mid-transition (on is-swapping, while the wipe is still
   running) and then breathes on a slow autoloop the whole time the screen is up. */
.pl-tier-overlay--black::before {
  content: ""; position: absolute; left: 50%; top: 43%; width: 660px; height: 660px; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.82); opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(150 175 220 / .42), rgb(110 140 190 / .15) 42%, transparent 68%);
  transition: opacity 1.1s ease .9s; /* fade in mid-sweep, never before the light sweep starts */
}
/* Opacity fades in cleanly via the transition above; the breathing animates SCALE only so it
   never fights the fade-in (an opacity keyframe would snap it to mid-value the instant it starts). */
.pl-tier-overlay--black.is-swapping::before { opacity: 1; animation: pl-tier-black-breathe 4.2s ease-in-out 1.9s infinite alternate; }
@keyframes pl-tier-black-breathe {
  from { transform: translate(-50%, -50%) scale(.82); }
  to   { transform: translate(-50%, -50%) scale(1.08); }
}
/* High-energy 360 traveling outline for Black — speed up + brighten the card's border-light ring. */
.pl-tier-overlay--black .pl-tier-up__card--new::before {
  animation-duration: 2.2s !important;
  filter: drop-shadow(0 0 13px rgb(175 200 245 / .75)) drop-shadow(0 0 4px rgb(255 255 255 / .95)) !important;
}
/* Card keeps a static premium inset sheen (the dynamic glow is the bloom behind it). */
.pl-tier-overlay--black .pl-tier-up__card--new { box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 60px -22px rgb(95 125 170 / .3), inset 0 0 0 1px rgb(255 255 255 / .16); }
.pl-tier-overlay--black .pl-tier-up__card--new::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgb(255 255 255 / .12) 46%, rgb(255 255 255 / .28) 50%, rgb(255 255 255 / .12) 54%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg); opacity: 0;
}
.pl-tier-overlay--black.is-landed .pl-tier-up__card--new::after { animation: pl_loyalty_black_shine 2400ms cubic-bezier(0.33, 0, 0.2, 1) .3s 1 both; }
/* Brighter, wider reveal sweep + glowing texts for Black. */
.pl-tier-overlay--black .pl-tier-up__sweep::before { width: 72%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent); }
.pl-tier-overlay--black .pl-tier-up__bonus { text-shadow: 0 0 18px rgb(225 232 245 / .6); }
.pl-tier-overlay--black .pl-tier-overlay__title { text-shadow: 0 0 22px rgb(225 232 245 / .45); }
@media (prefers-reduced-motion: reduce) {
  .pl-tier-overlay--black.is-swapping::before { animation: none; }
  .pl-tier-overlay--black.is-landed .pl-tier-up__card--new::after { animation: none; }
}

@keyframes pl-tier-text-in { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  /* Tighten everything so the whole overlay (title → card → perks → note → buttons) fits the
     viewport and the buttons aren't pushed below the fold. */
  .pl-tier-overlay__inner { gap: 12px; width: 92vw; }
  .pl-tier-up__head { gap: 2px; }
  .pl-tier-up__stage { width: 272px; }
  .pl-tier-up__card { width: 272px; min-height: 198px; padding: 16px; }
  .pl-tier-overlay__title { font-size: 1.5rem; }
  .pl-tier-up__bonus { font-size: 1.18rem; }
  .pl-tier-up__perks-head { margin-top: 0; }
  /* 3 perks across × 2 rows (shorter than 2×3) + smaller cells. */
  .pl-tier-up__perks { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pl-tier-up__perk { padding: 10px 5px; gap: 5px; }
  .pl-tier-up__perk .pl-acct__road-perk-name { font-size: .72rem; }
  .pl-tier-up__perk .pl-acct__road-perk-status { font-size: .64rem; }
  .pl-tier-up__tier-note { font-size: .82rem; line-height: 1.42; max-width: 92vw; }
  .pl-tier-up__actions { margin-top: 2px; gap: 8px; }
  .pl-tier-up__btn--primary, .pl-tier-up__btn--ghost { padding: 11px 22px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-tier-up__card--prev, .pl-tier-up__card--new, .pl-tier-up__perk,
  .pl-tier-overlay__title, .pl-tier-up__bonus, .pl-tier-overlay__continue { transition: opacity .3s ease; transform: none !important; }
  .pl-tier-overlay.is-landed .pl-tier-up__card--new { animation: none; }
  .pl-tier-overlay.is-revealing .pl-tier-up__perk--fresh { animation: none; }
  .pl-tier-overlay--diamond.is-swapping::before { animation: none; }
}

/* Per-tier note above the buttons (Silver welcome / Black thank-you). */
.pl-tier-up__tier-note { max-width: 440px; margin: 2px auto 0; font-size: .9rem; line-height: 1.55; color: rgb(255 255 255 / .74); text-shadow: 0 0 16px rgb(225 232 245 / .25); opacity: 0; transform: translateY(8px); transition: opacity .7s ease-out 1.1s, transform .7s ease-out 1.1s; }
.pl-tier-overlay.is-revealing .pl-tier-up__tier-note { opacity: 1; transform: translateY(0); }

/* Diamond GLIMMER: a field of tiny 4-point star sparkles twinkle in/out across the facets
   (real glimmer, not a sweeping band) + a soft ring glow + a behind-card icy glow. */
/* Behind-card glow — starts mid-transition (is-swapping) like Gold/Black so the glow is
   continuous through the landing instead of popping in only once the card settles. */
.pl-tier-overlay--diamond .pl-tier-overlay__inner { position: relative; z-index: 1; }
/* Darker scrim so the icy glow reads behind the bright silvery card (without this the light glow
   washes out against the light card + a mid-dark scrim). */
.pl-tier-overlay--diamond { background: radial-gradient(120% 95% at 50% 40%, rgba(16 18 22 / .5), rgba(0 0 0 / .9) 72%), rgba(0 0 0 / .85); }
.pl-tier-overlay--diamond::before {
  content: ""; position: absolute; left: 50%; top: 43%; width: 540px; height: 540px; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.86); opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(196 220 250 / .4), rgb(150 185 235 / .13) 46%, transparent 68%);
  transition: opacity 1s ease .9s; /* fade in mid-sweep, never before the light sweep starts revealing */
}
.pl-tier-overlay--diamond.is-swapping::before { opacity: 1; animation: pl-tier-diamond-breathe 4.6s ease-in-out 1.9s infinite alternate; }
@keyframes pl-tier-diamond-breathe {
  from { transform: translate(-50%, -50%) scale(.82); }
  to   { transform: translate(-50%, -50%) scale(1.06); }
}
/* Ring glow also on is-swapping so it's continuous (not gated to is-landed). */
.pl-tier-overlay--diamond.is-swapping .pl-tier-up__card--new::before { filter: drop-shadow(0 0 12px rgb(214 228 245 / .55)) drop-shadow(0 0 3px rgb(255 255 255 / .8)) !important; }
/* Sits BEHIND the card content (text/avatar live at z-index 2) so sparkles only catch the
   background, never the text or profile picture. !important beats each card's `> * { z-index:2 }`. */
.pl-tier-up__glimmer { position: absolute !important; inset: 0; z-index: 1 !important; pointer-events: none; border-radius: inherit; overflow: hidden; }
.pl-tier-up__sparkle {
  position: absolute; left: var(--x); top: var(--y); width: var(--size, 8px); height: var(--size, 8px);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgb(225 240 255 / .95) 38%, transparent 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 var(--glow, 4px) rgb(205 228 255 / .9));
}
.pl-tier-up__sparkle--hero { background: radial-gradient(circle, #fff 0%, #fff 26%, rgb(220 238 255 / .95) 46%, transparent 74%); }
.pl-tier-up__glimmer.is-on .pl-tier-up__sparkle { animation: pl-tier-sparkle var(--dur, 1.8s) ease-in-out var(--delay, 0s) infinite; }
@keyframes pl-tier-sparkle {
  0%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  50%      { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
}

/* Gold: the card itself is brighter everywhere now (material). For the transition it gets a soft
   WARM glow behind the card that fades in smoothly mid-transition (on is-swapping) and lingers +
   gently breathes — no instant on/off flash. Plus a warm sheen sweep. Same mechanism as Black,
   warmer + smaller + gentler. */
.pl-tier-overlay--gold .pl-tier-overlay__inner { position: relative; z-index: 1; }
.pl-tier-overlay--gold::before {
  content: ""; position: absolute; left: 50%; top: 43%; width: 560px; height: 560px; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.82); opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(246 214 128 / .32), rgb(214 170 70 / .12) 44%, transparent 68%);
  transition: opacity 1.1s ease .9s; /* fade in mid-sweep, never before the light sweep starts */
}
.pl-tier-overlay--gold.is-swapping::before { opacity: 1; animation: pl-tier-gold-breathe 4.4s ease-in-out 1.9s infinite alternate; }
@keyframes pl-tier-gold-breathe {
  from { transform: translate(-50%, -50%) scale(.82); }
  to   { transform: translate(-50%, -50%) scale(1.04); }
}
.pl-tier-overlay--gold .pl-tier-up__card--new::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgb(255 238 196 / .14) 46%, rgb(255 244 214 / .34) 50%, rgb(255 238 196 / .14) 54%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg); opacity: 0;
}
.pl-tier-overlay--gold.is-landed .pl-tier-up__card--new::after { animation: pl_loyalty_black_shine 2200ms cubic-bezier(0.33, 0, 0.2, 1) .3s 1 both; }
.pl-tier-overlay--gold .pl-tier-up__bonus { text-shadow: 0 0 16px rgb(246 214 128 / .5); }
@media (prefers-reduced-motion: reduce) {
  .pl-tier-up__glimmer.is-on .pl-tier-up__sparkle { animation: none; }
  .pl-tier-overlay--gold.is-swapping::before { animation: none; }
  .pl-tier-overlay--gold.is-landed .pl-tier-up__card--new::after { animation: none; }
}
/* Mobile behind-card glow — placed AFTER the per-tier ::before defs above so it actually wins
   (the earlier mobile block lost to the later base top:43%). Pull up + shrink to sit behind the
   higher, top-aligned mobile card, not below it. */
@media (max-width: 700px) {
  .pl-tier-overlay--gold::before,
  .pl-tier-overlay--black::before,
  .pl-tier-overlay--diamond::before { top: 31%; width: 340px; height: 340px; }
}
/* End PUMPLAB_LOYALTY_TIER_OVERLAY_V2 */

/* PUMPLAB_LOYALTY_CONFETTI_V1 — one-shot celebration confetti, fired on the account page when a
   tier-upgrade overlay closes there. JS sets per-piece --pl-drift / --pl-spin + colour + timing. */
.pl-confetti-layer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; }
.pl-confetti { position: absolute; top: -24px; border-radius: 1px; opacity: 0; will-change: transform, opacity; animation-name: pl-confetti-fall; animation-timing-function: cubic-bezier(.35, .15, .5, 1); animation-fill-mode: forwards; }
@keyframes pl-confetti-fall {
  0%   { transform: translateY(-24px) translateX(0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(104vh) translateX(var(--pl-drift, 0)) rotate(var(--pl-spin, 720deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pl-confetti-layer { display: none; } }
/* End PUMPLAB_LOYALTY_CONFETTI_V1 */

/* PUMPLAB_LOYALTY_AKTIVITET_V1 — Aktivitet-tab list. */
.pl-acct__notif-empty { color: rgb(255 255 255 / .55); font-size: .92rem; margin: 0; }
.pl-acct__notif-list { display: flex; flex-direction: column; gap: 8px; }
.pl-acct__notif-item { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px 12px 10px; background: rgb(255 255 255 / .04); border-radius: 10px; color: inherit; text-decoration: none; transition: background-color 180ms ease, transform 130ms ease, filter 130ms ease; }
/* Press feedback — just a slight darken (no scale; the row already slides on read). */
.pl-acct__notif-item:active { filter: brightness(.88); }
@media (hover: hover) and (pointer: fine) { .pl-acct__notif-item:hover { background: rgb(255 255 255 / .08); } }
/* Unread = neutral lighter surface + a short centered white accent bar on the left (inset
   from the rounded corners so it never collides with the radius). Green read as "done", not
   "new"; brand UI stays white/neutral. */
.pl-acct__notif-item--unread { background: rgb(255 255 255 / .07); }
.pl-acct__notif-item--unread::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; border-radius: 0 3px 3px 0; background: #fff; }
.pl-acct__notif-item--unread:hover { background: rgb(255 255 255 / .1); }
.pl-acct__notif-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgb(255 255 255 / .06); font-size: 16px; }
/* PUMPLAB_LOYALTY_VESTING_V1 — "poäng tillgängliga" (vest) notif = green check (points unlocked). */
.pl-acct__notif-item[data-pl-notif-type="vest"] .pl-acct__notif-icon,
.pl-acct__notif-item[data-pl-notif-type="review"] .pl-acct__notif-icon,
.pl-acct__notif-item[data-pl-notif-type="trustpilot"] .pl-acct__notif-icon { background: rgb(108 220 142 / .16); color: rgb(108 220 142); font-weight: 800; }
.pl-toast__icon--vest { background: rgb(108 220 142 / .16); color: rgb(108 220 142); font-weight: 800; }
/* clawback (points reversed by a refund/cancel) = red minus, for transparency. */
.pl-acct__notif-item[data-pl-notif-type="clawback"] .pl-acct__notif-icon { background: rgb(255 107 107 / .15); color: #ff8a8a; font-weight: 800; }
.pl-toast__icon--clawback { background: rgb(255 107 107 / .15); color: #ff8a8a; font-weight: 800; }
/* PUMPLAB_LOYALTY_BROADCAST_V1 — admin campaign notifications carry a per-campaign accent
   colour (--pl-na, server-validated hex) tinting the icon chip like the vest/clawback chips. */
.pl-acct__notif-icon--accent, .pl-toast__icon--accent { background: color-mix(in srgb, var(--pl-na) 16%, transparent); color: var(--pl-na); font-weight: 800; }
/* End PUMPLAB_LOYALTY_BROADCAST_V1 */
/* The bare "+" glyph reads smaller than the other type glyphs — bump it slightly (earn + account bonus). */
.pl-acct__notif-item[data-pl-notif-type="earn"] .pl-acct__notif-icon,
.pl-acct__notif-item[data-pl-notif-type="account_bonus"] .pl-acct__notif-icon { font-size: 20px; font-weight: 700; }
.pl-toast__icon--plus { font-size: 18px; font-weight: 700; }
.pl-acct__notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.pl-acct__notif-title { font-weight: 700; font-size: .92rem; color: #fff; }
.pl-acct__notif-text { font-size: .82rem; color: rgb(255 255 255 / .65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-acct__notif-time { flex: 0 0 auto; font-size: .75rem; color: rgb(255 255 255 / .45); }
/* Replay CTA on tier-upgrade rows — rounded-corner box (matches the theme buttons); clicking
   the rest of the row just marks read. */
.pl-acct__notif-replay { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rounded-button, 8px); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .7); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 120ms ease; }
.pl-acct__notif-replay svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .pl-acct__notif-replay:hover { background: #fff; color: #111; } }
.pl-acct__notif-replay:active { transform: scale(.94); }
/* Accent tints the WHOLE row too (broadcasts), not just the icon chip — soft wash + a hair
   stronger when unread. Toast mirrors it. */
.pl-acct__notif-item--accent { background: color-mix(in srgb, var(--pl-na) 7%, rgb(255 255 255 / .02)); }
.pl-acct__notif-item--accent.pl-acct__notif-item--unread { background: color-mix(in srgb, var(--pl-na) 11%, rgb(255 255 255 / .03)); }
@media (hover: hover) and (pointer: fine) { .pl-acct__notif-item--accent:hover { background: color-mix(in srgb, var(--pl-na) 15%, rgb(255 255 255 / .04)); } }
.pl-toast--accent { background: color-mix(in srgb, var(--pl-na) 12%, #1b1b1b); }
/* Hero broadcasts — a campaign image renders as a full-width banner above the row content
   (feed), and as a square thumb replacing the icon chip (toast). */
.pl-acct__notif-item--hero { flex-wrap: wrap; }
/* Banner crop (2.6:1 cover) — Isac tried contain/no-crop and preferred this: hero images are
   expected in wide banner format; use imagestyle=icon for non-banner shots instead. */
.pl-acct__notif-img { width: 100%; order: -1; aspect-ratio: 2.6 / 1; object-fit: cover; border-radius: 8px; display: block; }
/* READ hero notifications collapse: the banner shrinks into the small icon slot and the
   emoji chip hides — the feed's history stays compact, only unread heroes take space. */
.pl-acct__notif-item--hero:not(.pl-acct__notif-item--unread) { flex-wrap: nowrap; }
.pl-acct__notif-item--hero:not(.pl-acct__notif-item--unread) .pl-acct__notif-img { order: 0; flex: 0 0 36px; width: 36px; height: 36px; aspect-ratio: auto; }
.pl-acct__notif-item--hero:not(.pl-acct__notif-item--unread) .pl-acct__notif-icon { display: none; }
.pl-toast__thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; }
/* imagestyle=icon — the campaign image sits in the small icon slot instead of a hero banner. */
.pl-acct__notif-icon-img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; }
/* PUMPLAB_LOYALTY_YEARBADGE_NOTIF_V1 — badge notifications show the badge art (year box / thumb) in
   the icon slot instead of a glyph. */
/* Year box breathes at its natural width (not squeezed into the 36px glyph slot) — the row text
   flexes into the space that's left. */
.pl-acct__notif-icon--yearbox, .pl-toast__icon--yearbox { flex: 0 0 auto; width: auto; background: none; padding: 0; overflow: visible; }
.pl-acct__notif-icon--yearbox .pl-badge-year { width: auto; max-width: none; height: 38px; padding: 0 11px; font-size: 14px; border-radius: 9px; }
.pl-toast__icon--yearbox .pl-badge-year { width: auto; max-width: none; height: 28px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
/* rank band NUMBER in the icon chip (10/50/100) — compact bold digits instead of an emoji. */
.pl-acct__notif-icon--num { font-size: .8rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pl-toast__icon--num { font-size: .72rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
/* Rank 1/2/3 = metallic number medals (gold/silver/bronze) instead of cheap emoji. */
.pl-acct__notif-icon--medal1, .pl-acct__notif-icon--medal2, .pl-acct__notif-icon--medal3 { font-size: .82rem; font-weight: 800; letter-spacing: -.02em; color: #1a1a1a; }
.pl-toast__icon--medal1, .pl-toast__icon--medal2, .pl-toast__icon--medal3 { font-size: .74rem; font-weight: 800; letter-spacing: -.02em; color: #1a1a1a; }
.pl-acct__notif-icon--medal1, .pl-toast__icon--medal1 { background: linear-gradient(160deg, #f4d270, #d9a92e); }
.pl-acct__notif-icon--medal2, .pl-toast__icon--medal2 { background: linear-gradient(160deg, #dfe3e8, #aab1bb); }
.pl-acct__notif-icon--medal3, .pl-toast__icon--medal3 { background: linear-gradient(160deg, #d99b6c, #b06a3c); }
/* Rank notifications get a go-to-leaderboard arrow, same chip language as the replay button. */
.pl-acct__notif-go { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--rounded-button, 8px); background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .7); transition: background-color 160ms ease, color 160ms ease; }
.pl-acct__notif-go svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .pl-acct__notif-item:hover .pl-acct__notif-go { background: #fff; color: #111; } }
.pl-acct__notif-markread { background: transparent; border: 0; color: rgb(255 255 255 / .55); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-acct__notif-markread:hover { color: #fff; } }
.pl-acct__notif-markread.is-hidden { display: none; }
/* "Lästa" divider between the unread group and the already-seen group. */
.pl-acct__notif-divider { display: flex; align-items: center; gap: 10px; margin: 4px 2px 0; color: rgb(255 255 255 / .4); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pl-acct__notif-divider::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .1); }