/* GENERATED by src/product/gen-assets.mjs — do not edit by hand. */
/* --- live head tokens (scoped) --- */
:where(.q-pdp){
    
    --container-max-width: 100%;
    --container-xxs-max-width: 27.5rem; 
    --container-xs-max-width: 42.5rem; 
    --container-sm-max-width: 61.25rem; 
    --container-md-max-width: 71.875rem; 
    --container-lg-max-width: 78.75rem; 
    --container-xl-max-width: 85rem; 
    --container-gutter: 1.25rem;

    --section-vertical-spacing: 2.5rem;
    --section-vertical-spacing-tight:2.5rem;

    --section-stack-gap:2.25rem;
    --section-stack-gap-tight:2.25rem;

    
    --form-gap: 1.25rem; 
    --fieldset-gap: 1rem; 
    --form-control-gap: 0.625rem; 
    --checkbox-control-gap: 0.75rem; 
    --input-padding-block: 0.65rem; 
    --input-padding-inline: 0.8rem; 
    --checkbox-size: 0.875rem; 

    
    --sticky-area-height: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px) + var(--header-is-sticky, 0) * var(--header-is-visible, 1) * var(--header-height, 0px));

    
    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;

    

    
    --heading-font-family: Poppins, sans-serif;
    --heading-font-weight: 700;
    --heading-font-style: normal;
    --heading-text-transform: uppercase;
    --heading-letter-spacing: 0.18em;
    --text-font-family: Poppins, sans-serif;
    --text-font-weight: 400;
    --text-font-style: normal;
    --text-letter-spacing: 0.0em;
    --button-font: var(--text-font-style) var(--text-font-weight) var(--text-sm) / 1.65 var(--text-font-family);
    --button-text-transform: uppercase;
    --button-letter-spacing: 0.18em;

    --text-heading-size-factor: 1;
    --text-h1: max(0.6875rem, clamp(1.375rem, 1.146341463414634rem + 0.975609756097561vw, 2rem) * var(--text-heading-size-factor));
    --text-h2: max(0.6875rem, clamp(1.25rem, 1.0670731707317074rem + 0.7804878048780488vw, 1.75rem) * var(--text-heading-size-factor));
    --text-h3: max(0.6875rem, clamp(1.125rem, 1.0335365853658536rem + 0.3902439024390244vw, 1.375rem) * var(--text-heading-size-factor));
    --text-h4: max(0.6875rem, clamp(1rem, 0.9542682926829268rem + 0.1951219512195122vw, 1.125rem) * var(--text-heading-size-factor));
    --text-h5: calc(0.875rem * var(--text-heading-size-factor));
    --text-h6: calc(0.75rem * var(--text-heading-size-factor));

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1.0rem;
    --text-xl: 1.125rem;

    
    --rounded-full: 9999px;
    --button-border-radius: 2.5rem;
    --input-border-radius: 0.0rem;

    
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
    --shadow: 0 5px 15px rgb(0 0 0 / 0.05);
    --shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);
    --shadow-block: px px px rgb(var(--text-primary) / 0.0);

    

    --checkmark-svg-url: url(https://qlean.co/cdn/shop/t/52/assets/checkmark.svg?v=77552481021870063511787640584);
    --cursor-zoom-in-svg-url: url(https://qlean.co/cdn/shop/t/52/assets/cursor-zoom-in.svg?v=53880737899771658811787640584);
  }
@media screen and (min-width: 700px){
:where(.q-pdp){
      
      --text-xs: 0.75rem;
      --text-sm: 0.8125rem;
      --text-base: 0.875rem;
      --text-lg: 1.0rem;
      --text-xl: 1.25rem;

      
      --container-gutter: 2rem;
    }
}
@media screen and (min-width: 1000px){
:where(.q-pdp){
      
      --container-gutter: 3rem;

      --section-vertical-spacing: 4rem;
      --section-vertical-spacing-tight: 4rem;

      --section-stack-gap:3rem;
      --section-stack-gap-tight:3rem;
    }
}
:where(.q-pdp){
    --page-overlay: 0 0 0 / 0.4;

    
    --page-background: ;

    
    --on-sale-text: 227 44 43;
    --on-sale-badge-background: 227 44 43;
    --on-sale-badge-text: 255 255 255;
    --sold-out-badge-background: 239 239 239;
    --sold-out-badge-text: 0 0 0 / 0.65;
    --custom-badge-background: 28 28 28;
    --custom-badge-text: 255 255 255;
    --star-color: 28 28 28;

    
    --success-background: 212 227 203;
    --success-text: 48 122 7;
    --warning-background: 253 241 224;
    --warning-text: 237 138 0;
    --error-background: 243 204 204;
    --error-text: 203 43 43;
  }
:where(.q-pdp) .color-scheme--scheme-1{
      --accent: 28 28 28;
      --text-color: 28 28 28;
      --background: 239 239 239 / 1.0;
      --background-without-opacity: 239 239 239;
      --background-gradient: ;--border-color: 207 207 207;
      --button-background: 28 28 28;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 28 28 28;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-609ecfcfee2f667ac6c12366fc6ece56) + .shopify-section:has(.section-spacing.color-scheme--bg-609ecfcfee2f667ac6c12366fc6ece56:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-2{
      --accent: 28 28 28;
      --text-color: 28 28 28;
      --background: 255 255 255 / 1.0;
      --background-without-opacity: 255 255 255;
      --background-gradient: ;--border-color: 221 221 221;
      --button-background: 28 28 28;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 28 28 28;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673) + .shopify-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-3{
      --accent: 255 255 255;
      --text-color: 255 255 255;
      --background: 28 28 28 / 1.0;
      --background-without-opacity: 28 28 28;
      --background-gradient: ;--border-color: 62 62 62;
      --button-background: 255 255 255;
      --button-text-color: 28 28 28;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 28 28 28;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-c1f8cb21047e4797e94d0969dc5d1e44) + .shopify-section:has(.section-spacing.color-scheme--bg-c1f8cb21047e4797e94d0969dc5d1e44:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-4{
      --accent: 255 255 255;
      --text-color: 255 255 255;
      --background: 0 0 0 / 0.0;
      --background-without-opacity: 0 0 0;
      --background-gradient: ;--border-color: 255 255 255;
      --button-background: 255 255 255;
      --button-text-color: 28 28 28;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 28 28 28;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-3671eee015764974ee0aef1536023e0f) + .shopify-section:has(.section-spacing.color-scheme--bg-3671eee015764974ee0aef1536023e0f:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-5{
      --accent: 204 82 98;
      --text-color: 131 20 34;
      --background: 253 240 237 / 1.0;
      --background-without-opacity: 253 240 237;
      --background-gradient: ;--border-color: 235 207 207;
      --button-background: 204 82 98;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 204 82 98;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-c5b200ccb93934732fd242d9d255f517) + .shopify-section:has(.section-spacing.color-scheme--bg-c5b200ccb93934732fd242d9d255f517:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-6{
      --accent: 224 120 80;
      --text-color: 212 76 24;
      --background: 255 227 207 / 1.0;
      --background-without-opacity: 255 227 207;
      --background-gradient: ;--border-color: 249 204 180;
      --button-background: 224 120 80;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 224 120 80;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-9ee55df7eb543ea1bbe65c2ab7f99dc2) + .shopify-section:has(.section-spacing.color-scheme--bg-9ee55df7eb543ea1bbe65c2ab7f99dc2:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-7{
      --accent: 41 84 115;
      --text-color: 41 84 115;
      --background: 220 235 242 / 1.0;
      --background-without-opacity: 220 235 242;
      --background-gradient: ;--border-color: 193 212 223;
      --button-background: 41 84 115;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 41 84 115;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-338b9fce66292d49f5041ba927d9ec12) + .shopify-section:has(.section-spacing.color-scheme--bg-338b9fce66292d49f5041ba927d9ec12:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-728aea80-6723-45a5-adee-18ab35e1ba56{
      --accent: 204 82 98;
      --text-color: 255 255 255;
      --background: 131 20 34 / 1.0;
      --background-without-opacity: 131 20 34;
      --background-gradient: ;--border-color: 150 55 67;
      --button-background: 204 82 98;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 204 82 98;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-e10b408b1774f887dfa7b812665d07c4) + .shopify-section:has(.section-spacing.color-scheme--bg-e10b408b1774f887dfa7b812665d07c4:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-ka-cream{
      --accent: 131 20 34;
      --text-color: 28 28 28;
      --background: 253 246 241 / 1.0;
      --background-without-opacity: 253 246 241;
      --background-gradient: ;--border-color: 219 213 209;
      --button-background: 131 20 34;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 131 20 34;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-15cc4a8fe7a01a32415f287f9b7578e7) + .shopify-section:has(.section-spacing.color-scheme--bg-15cc4a8fe7a01a32415f287f9b7578e7:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-ka-maroon{
      --accent: 255 255 255;
      --text-color: 255 255 255;
      --background: 131 20 34 / 1.0;
      --background-without-opacity: 131 20 34;
      --background-gradient: ;--border-color: 150 55 67;
      --button-background: 255 255 255;
      --button-text-color: 131 20 34;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 131 20 34;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-e10b408b1774f887dfa7b812665d07c4) + .shopify-section:has(.section-spacing.color-scheme--bg-e10b408b1774f887dfa7b812665d07c4:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-ka-white{
      --accent: 131 20 34;
      --text-color: 131 20 34;
      --background: 255 255 255 / 1.0;
      --background-without-opacity: 255 255 255;
      --background-gradient: ;--border-color: 236 220 222;
      --button-background: 131 20 34;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 131 20 34;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673) + .shopify-section:has(.section-spacing.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--scheme-ka-deep{
      --accent: 255 255 255;
      --text-color: 255 255 255;
      --background: 95 15 26 / 1.0;
      --background-without-opacity: 95 15 26;
      --background-gradient: ;--border-color: 119 51 60;
      --button-background: 255 255 255;
      --button-text-color: 131 20 34;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 131 20 34;
    }
:where(.q-pdp) .shopify-section:has(.section-spacing.color-scheme--bg-682d5bf22dbad70eaae12767f142bf9d) + .shopify-section:has(.section-spacing.color-scheme--bg-682d5bf22dbad70eaae12767f142bf9d:not(.bordered-section)) .section-spacing{
      padding-block-start: 0;
    }
:where(.q-pdp) .color-scheme--dialog{
      --accent: 28 28 28;
      --text-color: 28 28 28;
      --background: 255 255 255 / 1.0;
      --background-without-opacity: 255 255 255;
      --background-gradient: ;--border-color: 221 221 221;
      --button-background: 28 28 28;
      --button-text-color: 255 255 255;

      
      --circle-button-background: 255 255 255;
      --circle-button-text-color: 28 28 28;
    }

/* --- theme.css (purged) --- */
:where(.q-pdp) *,:where(.q-pdp) :before,:where(.q-pdp) :after{
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--border-color));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.q-pdp){
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: var(--sticky-area-height);
  interpolate-size: allow-keywords;
  line-height: 1.5;
}
:where(.q-pdp){
  background: rgb(var(--page-background));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.65 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
  position: relative;
}
:where(.q-pdp) hr{
  border-top-width: 1px;
  justify-self: stretch;
  height: 0;
}
:where(.q-pdp) a{
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}
:where(.q-pdp) b,:where(.q-pdp) strong{
  font-weight: bolder;
}
:where(.q-pdp) code,:where(.q-pdp) kbd,:where(.q-pdp) samp,:where(.q-pdp) pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: 1em;
}
:where(.q-pdp) table{
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:where(.q-pdp) button,:where(.q-pdp) input,:where(.q-pdp) optgroup,:where(.q-pdp) select,:where(.q-pdp) 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;
}
:where(.q-pdp) input[type="submit"]{
  cursor: pointer;
}
:where(.q-pdp) button,:where(.q-pdp) select{
  text-transform: none;
}
:where(.q-pdp) button,:where(.q-pdp) [type="button"],:where(.q-pdp) [type="reset"],:where(.q-pdp) [type="submit"]{
  -webkit-appearance: button;
  background-color: #0000;
  background-image: none;
}
:where(.q-pdp) button,:where(.q-pdp) label,:where(.q-pdp) summary,:where(.q-pdp) [role="button"],:where(.q-pdp) [type="checkbox"],:where(.q-pdp) [type="radio"]{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
:where(.q-pdp) :-moz-focusring{
  outline: auto;
}
:where(.q-pdp) :-moz-ui-invalid{
  box-shadow: none;
}
:where(.q-pdp) ::-webkit-inner-spin-button{
  height: auto;
}
:where(.q-pdp) ::-webkit-outer-spin-button{
  height: auto;
}
:where(.q-pdp) ::-webkit-date-and-time-value{
  text-align: start;
}
:where(.q-pdp) [type="date"]{
  min-height: 3rem;
}
:where(.q-pdp) [type="search"]{
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
:where(.q-pdp) ::-webkit-search-decoration{
  -webkit-appearance: none;
}
:where(.q-pdp) ::-webkit-file-upload-button{
  -webkit-appearance: button;
  font: inherit;
}
:where(.q-pdp) summary{
  list-style-type: none;
}
:where(.q-pdp) summary::-webkit-details-marker{
  display: none;
}
:where(.q-pdp) blockquote,:where(.q-pdp) dl,:where(.q-pdp) dd,:where(.q-pdp) h1,:where(.q-pdp) h2,:where(.q-pdp) h3,:where(.q-pdp) h4,:where(.q-pdp) h5,:where(.q-pdp) h6,:where(.q-pdp) hr,:where(.q-pdp) figure,:where(.q-pdp) p,:where(.q-pdp) pre{
  margin: 0;
}
:where(.q-pdp) fieldset{
  margin: 0;
  padding: 0;
}
:where(.q-pdp) legend{
  padding: 0;
}
:where(.q-pdp) ul,:where(.q-pdp) ol,:where(.q-pdp) menu{
  margin: 0;
  padding: 0;
}
:where(.q-pdp) textarea{
  resize: vertical;
  field-sizing: content;
  min-height: 4lh;
}
:where(.q-pdp) input::placeholder,:where(.q-pdp) textarea::placeholder{
  opacity: 1;
  color: rgb(var(--text-color) / .65);
}
:where(.q-pdp) :disabled{
  cursor: default !important;
}
:where(.q-pdp) img,:where(.q-pdp) svg,:where(.q-pdp) video,:where(.q-pdp) canvas,:where(.q-pdp) audio,:where(.q-pdp) iframe,:where(.q-pdp) embed,:where(.q-pdp) object{
  vertical-align: middle;
  display: block;
}
:where(.q-pdp) img{
  color: #0000;
  max-width: 100%;
  height: auto;
}
:where(.q-pdp) [role="img"] svg{
  display: initial;
}
:where(.q-pdp) picture source{
  display: contents;
}
:where(.q-pdp) video{
  max-width: 100%;
  height: auto;
}
:where(.q-pdp) :focus:not(:focus-visible){
  outline: none;
}
:where(.q-pdp) [hidden]{
  display: none !important;
}
:where(.q-pdp) height-observer{
  display: block;
}
:where(.q-pdp) .color-scheme{
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  border-color: rgb(var(--border-color));
}
:where(.q-pdp) .accordion{
  box-sizing: content-box;
  display: block;
}
:where(.q-pdp) .accordion{
  border-block-width: 1px;
}
:where(.q-pdp) .accordion :is(svg){
  transition: transform .2s;
}
:where(.q-pdp) .accordion + .accordion{
  border-block-start-width: 0;
}
:where(.q-pdp) .accordion__toggle{
  justify-content: space-between;
  align-items: center;
  column-gap: .625rem;
  padding-block: 1.25rem;
  display: flex;
}
:where(.q-pdp) .accordion__content{
  margin-block-start: -.25rem;
  padding-block-end: 1.25rem;
  padding-inline-end: 1.25rem;
}
:where(.q-pdp) .accordion-group > * + * > .accordion{
  border-block-start-width: 0;
}
:where(.q-pdp) .button{
  --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --hover-gradient: linear-gradient(transparent, transparent);
  --initial-background-position: var(--transform-origin-end);
  --hover-background-position: var(--transform-origin-start);
  -webkit-appearance: none;
  appearance: none;
  text-transform: var(--button-text-transform);
  font: var(--button-font);
  letter-spacing: var(--button-letter-spacing);
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  color: rgb(var(--button-text-color));
  border: 1px solid rgb(var(--button-outline-color, var(--button-background)));
  border-radius: var(--button-border-radius);
  background-color: #0000;
  background-image: var(--initial-gradient), var(--hover-gradient);
  background-size: 101% 101%, 0 101%;
  background-position: var(--initial-background-position);
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  column-gap: 1.125rem;
  padding: .65rem 1.75rem;
  transition: background-size .45s cubic-bezier(.785, .135, .15, .86), background-position .45s step-end, color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86);
  display: inline-flex;
  position: relative;
}
:where(.q-pdp) .button--outline{
  --initial-gradient: linear-gradient(transparent, transparent);
  --hover-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --initial-background-position: var(--transform-origin-start);
  --hover-background-position: var(--transform-origin-end);
  color: rgb(var(--button-background, var(--text-color)));
  border-color: rgb(var(--button-outline-color, var(--border-color)));
}
:where(.q-pdp) shopify-accelerated-checkout,:where(.q-pdp) shopify-accelerated-checkout-cart{
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: var(--button-border-radius);
  --shopify-accelerated-checkout-button-box-shadow: none;
}
@keyframes animateIconInline{
  0% {
    opacity: 1;
    transform: translateX(0%);
  }

  50% {
    opacity: 0;
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes animateIconBlock{
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

  50% {
    opacity: 0;
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
:where(.q-pdp) .content-over-media{
  --content-over-media-gap: 1.25rem;
  --content-over-media-calculated-row-gap: var(--content-over-media-row-gap, var(--content-over-media-gap));
  --content-over-media-calculated-column-gap: var(--content-over-media-column-gap, var(--content-over-media-gap));
  grid-template: [full-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [full-end] / [full-start] minmax(0, 1fr) [content-start] minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-column-gap, var(--content-over-media-gap, var(--container-gutter))) * 2)) [content-end] minmax(0, 1fr) [full-end];
  row-gap: var(--content-over-media-calculated-row-gap);
  column-gap: var(--content-over-media-calculated-column-gap);
  min-height: var(--content-over-media-height, auto);
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}
:where(.q-pdp) .content-over-media:before{
  content: "";
  background: var(--content-over-media-gradient-overlay, rgb(var(--content-over-media-overlay)));
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
:where(.q-pdp) .content-over-media > picture,:where(.q-pdp) .content-over-media > image-parallax picture{
  display: contents;
}
:where(.q-pdp) .content-over-media > :is(img, video, iframe, svg, video-media),:where(.q-pdp) .content-over-media > picture img,:where(.q-pdp) .content-over-media > image-parallax img{
  height: var(--content-over-media-height, auto);
  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: full-start / full-start / full-end / full-end;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
}
:where(.q-pdp) .content-over-media > :not(img, video, iframe, svg, video-media, picture, image-parallax){
  max-width: var(--content-over-media-content-max-width, 48rem);
  z-index: 1;
  text-shadow: 0 1px rgb(var(--content-over-media-text-shadow) / 50%);
  grid-area: content-start / content-start / content-end / content-end;
  position: relative;
}
:where(.q-pdp) .content-over-media:has( > .prose):not(:has( > .prose .button:last-child)){
  row-gap: calc(var(--content-over-media-calculated-row-gap)  - .5rem);
}
@supports (row-gap: 1lh){
:where(.q-pdp) .content-over-media:has( > .prose):not(:has( > .prose .button:last-child)){
    row-gap: calc(var(--content-over-media-calculated-row-gap)  - .5lh);
  }
}
:where(.q-pdp) .content-over-media > video-media:not([autoplay]) ~ :not(img, video, iframe, svg, video-media, picture, image-parallax){
  pointer-events: none;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}
:where(.q-pdp) .content-over-media > video-media:not([autoplay])[loaded] ~ :not(img, video, iframe, svg, video-media, picture, image-parallax){
  opacity: 0;
  visibility: hidden;
}
:where(.q-pdp) .shopify-section:first-child [allow-transparent-header] > .content-over-media > :not(img, video, iframe, svg, video-media, picture, image-parallax){
  padding-block-start: var(--header-height, 0px);
}
:where(.q-pdp) .content-over-media--md{
  --content-over-media-height: clamp(25rem, 100vw, 36rem);
}
@media screen and (min-width: 700px){
:where(.q-pdp) .content-over-media{
    --content-over-media-gap: 2rem;
  }
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .content-over-media{
    --content-over-media-gap: 3rem;
  }
}
:where(.q-pdp) .page-dots{
  --dot-size: .375rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  display: flex;
}
:where(.q-pdp) .page-dots > *{
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--rounded-full);
  place-content: center;
  display: grid;
}
:where(.q-pdp) .page-dots > *:after{
  content: "";
  border-radius: inherit;
  opacity: .4;
  background: currentColor;
  transition: opacity .25s, background .25s;
  position: absolute;
  inset: 0;
}
:where(.q-pdp) .page-dots > *[aria-current="true"]:after{
  opacity: 1;
}
:where(.q-pdp) :where(x-drawer, x-modal, x-popover):not(:defined){
  display: none;
}
:where(.q-pdp) .drawer--center-body::part(body){
  align-self: center;
}
:where(.q-pdp) .form-control{
  gap: var(--form-control-gap);
  display: grid;
  position: relative;
}
:where(.q-pdp) .form-control > label{
  justify-self: start;
}
:where(.q-pdp) .select{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: var(--input-padding-block) var(--input-padding-inline);
  border-radius: var(--input-border-radius);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  text-align: start;
  border-width: 1px;
  transition: border-color .1s ease-in-out;
}
:where(.q-pdp) .select{
  box-shadow: 0 1px 3px rgb(var(--text-color) / .08);
  padding-inline-end: calc(var(--input-padding-inline) * 2 + 10px);
}
:where(.q-pdp) .select:required:invalid{
  color: rgb(var(--input-text-color, var(--text-color)) / .6);
}
:where(.q-pdp) .select ~ svg,:where(.q-pdp) .select > svg{
  transition: transform .2s;
  position: absolute;
  inset-block-start: calc(50% - 3.5px);
  inset-inline-end: calc(var(--input-padding-inline)  + 1px);
}
:where(.q-pdp) .select[aria-expanded="true"] > svg{
  transform: rotateZ(180deg);
}
:where(.q-pdp) .form-control:has(.select):before{
  content: "";
  width: calc(var(--input-padding-inline) * 2 + 35px);
  background-image: linear-gradient(to var(--transform-origin-start), rgb(var(--background)) calc(var(--input-padding-inline)  + 20px), rgb(var(--background-without-opacity) / 0));
  pointer-events: none;
  height: calc(100% - 2px);
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
}
:where(.q-pdp) .form-control:has(.select):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{
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}
:where(.q-pdp) .form-control:has(.select):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{
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}
:where(.q-pdp) .floating-label{
  z-index: 1;
  background: rgb(var(--background));
  color: rgb(var(--input-text-color, var(--text-color)) / .6);
  opacity: 0;
  pointer-events: none;
  padding: 0 .25rem;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  inset-block-start: calc(-1 * var(--input-padding-block)  + 1px);
  inset-inline-start: calc(var(--input-padding-inline)  - .25rem + 1px);
  transform: translateY(3px);
}
:where(.q-pdp) :-webkit-autofill ~ .floating-label{
  color: #000;
}
:where(.q-pdp) .shopify-section:not(:first-child) .bordered-section{
  border-block-start-width: 1px;
}
:where(.q-pdp) .shopify-section:not(:has(.section-spacing)) + .shopify-section{
  border-block-start-width: 0;
}
:where(.q-pdp) .container{
  --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-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);
}
:where(.q-pdp) .container--md{
  --container-max-width: var(--container-md-max-width);
}
:where(.q-pdp) .container--lg{
  --container-max-width: var(--container-lg-max-width);
}
:where(.q-pdp) .section-spacing{
  padding-block-start: calc(var(--section-vertical-spacing-override, var(--section-vertical-spacing))  + var(--section-vertical-spacing-block-start-compensation, 0px));
  padding-block-end: var(--section-vertical-spacing-override, var(--section-vertical-spacing));
}
:where(.q-pdp) .shopify-section:has(.section-spacing){
  scroll-padding-block-start: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px)  + var(--header-is-sticky, 0) * var(--header-height, 0px));
}
:where(.q-pdp) .section-spacing--tight{
  --section-vertical-spacing: var(--section-vertical-spacing-tight);
  --section-stack-gap: var(--section-stack-gap-tight);
}
:where(.q-pdp) .shopify-section:empty{
  display: none;
}
:where(.q-pdp) .v-stack{
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
}
:where(.q-pdp) .h-stack{
  align-items: center;
  display: flex;
}
:where(.q-pdp) .bleed,:where(.q-pdp) .full-bleed{
  margin-inline-start: calc(-1 * var(--distance-to-bleed));
  margin-inline-end: calc(-1 * var(--distance-to-bleed));
}
:where(.q-pdp) .bleed{
  scroll-padding-inline: var(--distance-to-bleed);
  padding-inline-start: var(--distance-to-bleed);
  padding-inline-end: var(--distance-to-bleed);
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .md\:unbleed{
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}
:where(.q-pdp) video-media,:where(.q-pdp) model-media{
  border-radius: inherit;
  aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
  width: 100%;
  display: block;
  position: relative;
  container: media / inline-size;
}
@supports not (aspect-ratio: 1){
:where(.q-pdp) :is(video-media, model-media):before{
    content: "";
    padding-block-end: calc(100% / (var(--aspect-ratio, var(--default-aspect-ratio))));
    display: block;
  }
:where(.q-pdp) :is(video-media, model-media) > *{
    height: 100%;
    top: 0;
    left: 0;
    position: absolute !important;
  }
}
@container media (width >= 32rem){
:where(.q-pdp) :is(video-media, model-media)::part(play-button){
    width: 4rem;
    height: 4rem;
  }
}
:where(.q-pdp) video-media{
  --default-aspect-ratio: 16 / 9;
}
:where(.q-pdp) video-media[host]{
  align-items: center;
  display: grid;
}
:where(.q-pdp) video-media[show-play-button]:not([loaded]),:where(.q-pdp) video-media:not([autoplay]){
  cursor: pointer;
}
:where(.q-pdp) video-media > :is(video, iframe, img){
  border-radius: inherit;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease-in-out;
}
:where(.q-pdp) video-media > video[controls]{
  pointer-events: auto;
}
:where(.q-pdp) video-media > :-webkit-any(video:not(:-webkit-full-screen), img){
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}
:where(.q-pdp) video-media > :is(video:not(:fullscreen), img){
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}
:where(.q-pdp) video-media > :is(iframe, img){
  position: absolute;
  inset: 0;
}
:where(.q-pdp) video-media:not([loaded]) > :is(video, iframe),:where(.q-pdp) video-media[loaded] > img,:where(.q-pdp) video-media[loaded]::part(play-button){
  opacity: 0;
  pointer-events: none;
}
:where(.q-pdp) video-media[suspended] ~ *{
  pointer-events: none;
}
:where(.q-pdp) video-media::part(play-button){
  z-index: 1;
  will-change: scale;
  transition: scale .2s ease-in-out, opacity .2s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
:where(.q-pdp) video-media:hover::part(play-button){
  scale: 1.1;
}
:where(.q-pdp) model-media{
  --default-aspect-ratio: 1;
}
:where(.q-pdp) model-media model-viewer{
  vertical-align: top;
  width: 100%;
  height: 100%;
}
:where(.q-pdp) .prose{
  overflow-wrap: anywhere;
}
:where(.q-pdp) .prose :first-child,:where(.q-pdp) .prose .sr-only:first-child + *{
  margin-block-start: 0 !important;
}
:where(.q-pdp) .prose :last-child{
  margin-block-end: 0 !important;
}
:where(.q-pdp) .prose :where(:not(meta, span) + *){
  margin-block-start: 1rem;
}
:where(.q-pdp) .prose :is(p img:not([style*="float"]):only-child, div img:not([style*="float"]):only-child, figure, video, object, blockquote, table){
  margin-block: 1.6rem;
}
:where(.q-pdp) .prose :is(ol, ul) :is(ol, ul){
  margin-block-start: 0 !important;
}
:where(.q-pdp) .prose :is(ol, ul){
  row-gap: .4em;
  display: grid;
}
:where(.q-pdp) .prose br{
  margin-block: 0 !important;
}
:where(.q-pdp) .prose figcaption{
  font-style: italic;
  font-size: var(--text-sm);
  color: rgb(var(--text-color) / .65);
  margin-block-start: .5em;
}
:where(.q-pdp) .prose blockquote{
  border-inline-start-width: 3px;
  padding: .375rem 0 .375rem 1rem;
  font-size: 1.15rem;
  line-height: 1.75;
}
:where(.q-pdp) .link-faded{
  color: rgb(var(--text-color) / .65);
  transition: color .2s ease-in-out;
}
@media screen and (pointer: fine){
:where(.q-pdp) .link-faded:hover{
    color: rgb(var(--text-color));
  }
}
:where(.q-pdp) table{
  --table-cell-padding-block: .75rem;
  --table-cell-padding-inline: .5rem;
  --table-foot-cell-padding-block: .75rem;
  --table-foot-cell-padding-inline: .5rem;
  width: 100%;
}
:where(.q-pdp) table caption{
  text-align: inherit;
  margin-block-end: .5rem;
}
:where(.q-pdp) th{
  text-align: start;
}
:where(.q-pdp) :where(td, th):not(:empty){
  border-block-width: 1px;
}
:where(.q-pdp) :where(th):not(:empty){
  border-block-start-width: 0;
}
:where(.q-pdp) td:not(:empty) + td{
  border-inline-start-width: 1px;
}
:where(.q-pdp) th,:where(.q-pdp) td{
  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
}
:where(.q-pdp) :is(th, td):last-child{
  padding-inline-end: 0;
}
:where(.q-pdp) th{
  opacity: .6;
  line-height: 1.7;
  font-size: var(--text-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);
  padding-block: 0 .625rem;
}
:where(.q-pdp) tfoot td{
  padding: var(--table-foot-cell-padding-block) var(--table-foot-cell-padding-inline);
}
:where(.q-pdp) tr[onclick]{
  cursor: pointer;
  transition: background .2s;
}
:where(.q-pdp) tr[onclick]:hover{
  background: rgb(var(--text-color) / .05);
}
@media screen and (min-width: 700px){
:where(.q-pdp) table{
    --table-cell-padding-block: 1rem;
    --table-cell-padding-inline: .75rem;
    --table-foot-cell-padding-block: 1rem;
    --table-foot-cell-padding-inline: .75rem;
  }
}
:where(.q-pdp) .icon{
  vertical-align: middle;
  height: auto;
  transition: transform .2s;
  display: block;
}
:where(.q-pdp) .group[aria-expanded="true"] .icon.group-expanded\:rotate{
  transform: rotateZ(180deg);
}
:where(.q-pdp) .price-list{
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  display: flex;
}
:where(.q-pdp) .feature-badge{
  font-size: var(--text-xs);
  align-items: center;
  column-gap: .5rem;
  padding: .375rem .5rem;
  display: inline-flex;
}
:where(.q-pdp) .feature-badge :is(svg, img){
  flex-shrink: 0;
}
:where(.q-pdp) .feature-badge-list{
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}
:where(.q-pdp) .rating-badge{
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;
  line-height: normal;
  display: flex;
}
:where(.q-pdp) .rating-badge__stars{
  column-gap: .125rem;
  display: flex;
  position: relative;
  top: -.5px;
}
@media (pointer: fine){
:where(.q-pdp) .is-scrollable[allow-drag]{
    cursor: grab;
  }
:where(.q-pdp) .is-scrollable[allow-drag]:active{
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}
:where(.q-pdp) [data-tooltip]{
  --tooltip-text-color: var(--text-color);
  --tooltip-background: var(--background);
  position: relative;
}
@media screen and (pointer: fine){
:where(.q-pdp) [data-tooltip]:after{
    content: attr(data-tooltip);
    inset-block-end: calc(100% + var(--tooltip-offset, .5rem));
    border-radius: min(1.5rem, var(--button-border-radius));
    background: rgb(var(--tooltip-text-color));
    width: max-content;
    max-width: 15rem;
    color: rgb(var(--tooltip-background));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    justify-self: center;
    padding: .125rem .5rem;
    font-size: .6875rem;
    transition: opacity .1s ease-in-out, visibility .1s ease-in-out, scale .1s ease-in-out;
    position: absolute;
    left: 50%;
    translate: -50%;
    scale: .9;
  }
:where(.q-pdp) [data-tooltip]:hover:after{
    visibility: visible;
    opacity: 1;
    scale: 1;
  }
}
:where(.q-pdp) .animated-plus{
  --animated-plus-size: .625rem;
  width: var(--animated-plus-size);
  height: var(--animated-plus-size);
  display: block;
  position: relative;
}
:where(.q-pdp) .animated-plus:before,:where(.q-pdp) .animated-plus:after{
  content: "";
  background-color: currentColor;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-90deg);
}
:where(.q-pdp) .animated-plus:before{
  width: var(--animated-plus-size);
  opacity: 1;
  height: 1px;
}
:where(.q-pdp) .animated-plus:after{
  width: 1px;
  height: var(--animated-plus-size);
}
:where(.q-pdp) .group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before{
  opacity: 0;
}
:where(.q-pdp) .group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before,:where(.q-pdp) .group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:after{
  transform: translate(-50%, -50%)rotate(90deg);
}
@media (pointer: fine){
:where(.q-pdp) .is-scrollable[allow-drag]{
    cursor: grab;
  }
:where(.q-pdp) .is-scrollable[allow-drag]:active{
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}
@keyframes quantitySelectorSpinner{
  0% {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
    transform: rotate(0);
  }

  50% {
    animation-timing-function: cubic-bezier(.4, 0, .6, 1);
    transform: rotate(360deg);
  }

  100% {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
    transform: rotate(720deg);
  }
}
@starting-style{
  .quantity-selector__input-wrapper[aria-busy="true"] .quantity-selector__spinner {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes animateCircularProgress{
  from {
    stroke-dashoffset: var(--stroke-dasharray);
  }

  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: no-preference){
:where(.q-pdp) image-parallax img{
    transform: scale(1.3)translateY(-11.5385%);
  }
}
:where(.q-pdp) product-rerender{
  display: contents;
}
@keyframes spin{
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
:where(.q-pdp) .shopify-section--main-product .section-spacing{
  padding-block-start: 0;
}
:where(.q-pdp) .product{
  grid: var(--product-grid, none);
  align-items: start;
  gap: var(--product-gap, 1.875rem);
  display: grid;
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .shopify-section--main-product .section-spacing{
    padding-block-start: var(--container-gutter);
  }
:where(.q-pdp) .product{
    --product-gap: 3.5rem;
  }
}
@media screen and (min-width: 1150px){
:where(.q-pdp) .product{
    --product-gap: 5rem;
  }
}
:where(.q-pdp) .product-gallery{
  --product-gallery-gap: 1.5rem;
  --product-gallery-thumbnail-list-gap: 1rem .5rem;
  --product-gallery-thumbnail-size: 3.5rem;
  flex-direction: var(--product-gallery-flex-direction, column);
  align-items: start;
  gap: var(--product-gallery-gap) var(--product-gap, 0px);
  grid-area: product-gallery;
  display: flex;
  position: relative;
}
:where(.q-pdp) .product-gallery__zoom-button--hidden{
  opacity: 0;
  visibility: hidden;
}
:where(.q-pdp) .product-gallery__image-list{
  row-gap: var(--product-gallery-gap);
  grid-auto-rows: max-content;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  display: grid;
}
:where(.q-pdp) .product-gallery__carousel{
  grid: var(--product-gallery-carousel-grid, auto / auto-flow 100%);
  align-items: start;
  gap: var(--product-gallery-carousel-gap, 1.5rem min(1.5rem, var(--container-gutter)));
  scroll-snap-type: var(--product-gallery-carousel-scroll-snap-type, x mandatory);
  display: grid;
  position: relative;
}
:where(.q-pdp) .product-gallery[allow-zoom] .product-gallery__media{
  cursor: var(--cursor-zoom-in-svg-url) 18 18, zoom-in;
}
:where(.q-pdp) .product-gallery__media > *{
  width: 100%;
}
:where(.q-pdp) .product-gallery__thumbnail-list{
  flex-shrink: 0;
  max-width: 100%;
  position: relative;
}
:where(.q-pdp) .product-gallery__thumbnail-scroller{
  grid-auto-columns: var(--product-gallery-thumbnail-size);
  grid-auto-flow: var(--product-gallery-thumbnail-list-grid-auto-flow, column);
  align-content: start;
  align-items: start;
  gap: var(--product-gallery-thumbnail-list-gap);
  max-height: var(--product-gallery-thumbnail-list-max-height, none);
  scroll-snap-type: both mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  grid-template-columns: none;
  display: grid;
  position: relative;
  overflow: auto;
}
:where(.q-pdp) .product-gallery__thumbnail-scroller::-webkit-scrollbar{
  display: none;
}
:where(.q-pdp) .product-gallery__thumbnail{
  border: 1px solid #0000;
  padding: 1px;
  transition: border-color .1s;
  position: relative;
}
:where(.q-pdp) .product-gallery__thumbnail[aria-current="true"]{
  border-color: currentColor;
}
:where(.q-pdp) [data-shopify-xr-hidden]{
  display: none;
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .product-gallery__thumbnail-list{
    position: sticky;
    inset-block-start: calc(var(--sticky-area-height)  + 20px);
  }
:where(.q-pdp) .product-gallery__media{
    scroll-margin-block-start: 1.25rem;
  }
}
:where(.q-pdp) .product-info{
  --product-info-gap: 1rem;
  z-index: 2;
  grid-area: product-info;
}
:where(.q-pdp) .product-info__block-list > :not(:nth-child(1 of :not(:empty))){
  margin-block-start: var(--product-info-gap);
}
:where(.q-pdp) .product-info__block-list > :not(:last-child){
  margin-block-end: var(--product-info-gap);
}
:where(.q-pdp) .product-info__block-item:empty{
  display: none;
}
:where(.q-pdp) .product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]){
  --product-info-gap: .5rem;
}
:where(.q-pdp) .product-info__block-group:has(.product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"])){
  --product-info-gap: .5rem;
}
:where(.q-pdp) .product-info__block-item:is([data-block-type="variant-picker"], [data-block-type="product-variations"], [data-block-type="separator"], [data-block-type="description"], [data-block-type="text"], [data-block-type="liquid"], [data-block-type="share-buttons"]){
  --product-info-gap: 1.5rem;
}
:where(.q-pdp) .product-info__block-group:has(.product-info__block-item:is([data-block-type="variant-picker"], [data-block-type="product-variations"], [data-block-type="separator"], [data-block-type="description"], [data-block-type="text"], [data-block-type="liquid"], [data-block-type="share-buttons"])){
  --product-info-gap: 1.5rem;
}
:where(.q-pdp) .product-info__block-item:is([data-block-type="inventory"], [data-block-type="buy-buttons"], [data-block-type="pickup-availability"], [data-block-type="more-information"], [data-block-type="offers"]){
  --product-info-gap: 2rem;
}
:where(.q-pdp) .product-info__block-group:has(.product-info__block-item:is([data-block-type="inventory"], [data-block-type="buy-buttons"], [data-block-type="pickup-availability"], [data-block-type="more-information"], [data-block-type="offers"])){
  --product-info-gap: 2rem;
}
:where(.q-pdp) .product-info__block-item[data-block-type="complementary-products"]{
  --product-info-gap: 3rem;
}
:where(.q-pdp) .product-info__block-group:has(.product-info__block-item[data-block-type="complementary-products"]){
  --product-info-gap: 3rem;
}
@media screen and (max-width: 699px){
:where(.q-pdp) .product-info--center :is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]){
    text-align: center;
  }
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .product-info{
    position: sticky;
    inset-block-start: calc(var(--sticky-area-height)  + 20px);
  }
}
:where(.q-pdp) .buy-buttons{
  row-gap: 1rem;
  display: grid;
}
:where(.q-pdp) .product-sticky-bar{
  width: 100%;
  padding: var(--container-gutter);
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  transition: opacity .2s, visibility .2s, inset-block .15s ease-in-out;
  display: block;
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
}
:where(.q-pdp) .product-sticky-bar.is-visible{
  opacity: 1;
  visibility: visible;
}
:where(.q-pdp) .product-sticky-bar__info img{
  width: 3.75rem;
}
@media screen and (min-width: 700px){
:where(.q-pdp) .product-sticky-bar{
    inset-block: var(--sticky-area-height) auto;
    background: rgb(var(--background));
    border-block-end-width: 1px;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    padding-block: 1.125rem;
    display: grid;
  }
}
:where(.q-pdp) .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;
}
:where(.q-pdp) :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;
}
:where(.q-pdp) .tap-area{
  position: relative;
}
:where(.q-pdp) .tap-area:before{
  content: "";
  position: absolute;
  inset: -.5rem;
}
@keyframes ping{
  from {
    transform: scale(1);
  }

  to {
    transform: scale(.8);
  }
}
@media (prefers-reduced-motion: no-preference){
:where(.q-pdp) [reveal-on-scroll="true"]{
    opacity: 0;
  }
}
@media (scripting: none){
:where(.q-pdp) [reveal-on-scroll="true"]{
    opacity: 1;
  }
}
:where(.q-pdp) .text-subdued{
  color: rgb(var(--text-color) / .65);
}
:where(.q-pdp) .text-on-sale{
  color: rgb(var(--on-sale-text));
}
:where(.q-pdp) .lock{
  overflow: hidden;
}
:where(.q-pdp) .scroll-area{
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  overflow: auto hidden;
}
:where(.q-pdp) .scroll-area::-webkit-scrollbar{
  display: none;
}
:where(.q-pdp) .snap-center{
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
:where(.q-pdp) .hidden{
  display: none;
}
:where(.q-pdp) .contents{
  display: contents;
}
@media screen and (min-width: 1000px){
:where(.q-pdp) .md\:hidden{
    display: none;
  }
:where(.q-pdp) .md\:block{
    display: block;
  }
}
@media screen and (max-width: 699px){
:where(.q-pdp) .sm-max\:hidden{
    display: none;
  }
}
:where(.q-pdp) .align-self-center{
  align-self: center;
}
:where(.q-pdp) .w-full{
  width: 100%;
}
:where(.q-pdp) .gap-4{
  gap: 1rem;
}
:where(.q-pdp) .gap-6{
  gap: 1.5rem;
}
:where(.q-pdp) .object-cover{
  object-fit: cover;
  object-position: center;
}
:where(.q-pdp) .object-contain{
  object-fit: contain;
  object-position: center;
}
:where(.q-pdp) .text-xxs{
  font-size: .6875rem;
}
:where(.q-pdp) .text-xs{
  font-size: var(--text-xs);
}
:where(.q-pdp) .h2,:where(.q-pdp) .h3,:where(.q-pdp) .h6,:where(.q-pdp) .prose :where(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;
}
:where(.q-pdp) :where(.prose h1){
  font-size: var(--text-h1);
  line-height: 1.5;
}
:where(.q-pdp) .h2,:where(.q-pdp) :where(.prose h2){
  font-size: var(--text-h2);
  line-height: 1.5;
}
:where(.q-pdp) .h3,:where(.q-pdp) :where(.prose h3){
  font-size: var(--text-h3);
  line-height: 1.6;
}
:where(.q-pdp) :where(.prose h4){
  font-size: var(--text-h4);
  line-height: 1.6;
}
:where(.q-pdp) :where(.prose h5){
  font-size: var(--text-h5);
  line-height: 1.7;
}
:where(.q-pdp) .h6,:where(.q-pdp) :where(.prose h6){
  font-size: var(--text-h6);
  line-height: 1.7;
}
:where(.q-pdp) .prose blockquote{
  line-height: 1.75;
}
@media screen and (min-width: 1150px){
:where(.q-pdp) :where(.prose h1){
    line-height: 1.3;
  }
:where(.q-pdp) .h2,:where(.q-pdp) :where(.prose h2){
    line-height: 1.4;
  }
:where(.q-pdp) .h3,:where(.q-pdp) :where(.prose h3){
    line-height: 1.5;
  }
}
:where(.q-pdp) ol{
  margin-inline-start: 2ch;
}
:where(.q-pdp) ul{
  margin-inline-start: 1em;
}
:where(.q-pdp) .line-through{
  text-decoration: line-through;
}

/* --- mf-blocks.css (purged) --- */
:where(.q-pdp) .mf-vp{ display: flex; flex-direction: column; gap: var(--mfvp-row-gap, 16px); width: 100%; }
:where(.q-pdp) .mf-vp__group{ border: 0; padding: 0; margin: 0; min-width: 0; }
:where(.q-pdp) .mf-vp__label{ display: block; font-size: 0.85rem; font-weight: 500; margin: 0 0 8px; color: var(--mfvp-text, inherit); padding: 0; }
:where(.q-pdp) .mf-vp__pills{ display: flex; flex-wrap: wrap; gap: var(--mfvp-gap, 8px); }
:where(.q-pdp) .mf-vp__radio{ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
:where(.q-pdp) .mf-vp__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mfvp-bg, #ffffff);
  color: var(--mfvp-text, inherit);
  border: 1px solid var(--mfvp-border, #cbcbcb);
  border-radius: var(--mfvp-radius, 50px);
  padding: var(--mfvp-padding-y, 16px) var(--mfvp-padding-x, 20px);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
:where(.q-pdp) .mf-vp__pill:hover{ border-color: var(--mfvp-border-selected, #2a221c); }
:where(.q-pdp) .mf-vp__radio:checked + .mf-vp__pill{
  border-color: var(--mfvp-border-selected, #2a221c);
  border-width: 2px;
  padding: calc(var(--mfvp-padding-y, 16px) - 1px) calc(var(--mfvp-padding-x, 20px) - 1px);
  color: var(--mfvp-text-selected, #2a221c);
  font-weight: 600;
}
:where(.q-pdp) .mf-vp__radio:focus-visible + .mf-vp__pill{
  outline: 2px solid var(--mfvp-border-selected, #2a221c);
  outline-offset: 2px;
}
:where(.q-pdp) .mf-block{ box-sizing: border-box; }
:where(.q-pdp) .mf-block *,:where(.q-pdp) .mf-block *::before,:where(.q-pdp) .mf-block *::after{ box-sizing: inherit; }
:where(.q-pdp) .mf-scent-note-pills{
  padding: var(--mfsp-pt, 16px) var(--mfsp-container-pad-x, 0px) var(--mfsp-pb, 16px);
  width: 100%;
}
:where(.q-pdp) .mf-scent-note-pills__inner{
  max-width: var(--mfsp-max-width, 800px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: var(--mfsp-align, flex-start);
  text-align: var(--mfsp-text-align, left);
}
:where(.q-pdp) .mf-scent-note-pills__row{
  display: flex;
  flex-wrap: var(--mfsp-wrap, wrap);
  gap: var(--mfsp-gap, 8px);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: var(--mfsp-row-justify, flex-start);
  width: 100%;
}
:where(.q-pdp) .mf-scent-note-pills__pill{
  white-space: nowrap;
  padding: var(--mfsp-pad-y, 8px) var(--mfsp-pad-x, 18px);
  border-radius: var(--mfsp-radius, 50px);
  border: var(--mfsp-border-w, 1px) solid var(--mfsp-border-color, rgb(var(--text-color)));
  background: var(--mfsp-bg, transparent);
  color: var(--mfsp-text-color, rgb(var(--text-color)));
  font-weight: var(--mfsp-weight, 500);
  font-size: var(--mfsp-size, 0.875rem);
  letter-spacing: var(--mfsp-letter-spacing, 0);
  text-transform: var(--mfsp-text-transform, lowercase);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
:where(.q-pdp) .mf-scent-note-pills__pill--size-md{ font-size: 0.875rem; }
:where(.q-pdp) .mf-scent-note-pills__pill--size-lg{ font-size: 1rem; }
:where(.q-pdp) .mf-scent-note-pills__pill--shape-pill{ border-radius: 50px; }
:where(.q-pdp) .mf-scent-note-pills__pill--style-filled{ background: var(--mfsp-bg, rgb(var(--button-background))); color: var(--mfsp-text-color, rgb(var(--button-text-color))); border-color: transparent; }
:where(.q-pdp) .mf-tagline-marquee{
  width: 100%;
  overflow: hidden;
  padding: var(--mftm-pt, 24px) 0 var(--mftm-pb, 24px);
  background: var(--mftm-bg, transparent);
  border-top: var(--mftm-border-top-w, 0) solid var(--mftm-border-color, currentColor);
  border-bottom: var(--mftm-border-bot-w, 0) solid var(--mftm-border-color, currentColor);
}
:where(.q-pdp) .mf-tagline-marquee__track{
  display: flex;
  gap: var(--mftm-item-gap, 32px);
  width: max-content;
  animation: mf-marquee-scroll var(--mftm-speed, 30s) linear infinite;
  animation-direction: var(--mftm-direction, normal);
  will-change: transform;
}
:where(.q-pdp) .mf-tagline-marquee__item{
  display: inline-flex;
  align-items: center;
  gap: var(--mftm-item-gap, 32px);
  font-family: var(--mftm-font, var(--heading-font-family, inherit));
  font-size: var(--mftm-size, 3rem);
  font-weight: var(--mftm-weight, 700);
  font-style: var(--mftm-style, normal);
  letter-spacing: var(--mftm-letter-spacing, 0);
  text-transform: var(--mftm-text-transform, lowercase);
  color: var(--mftm-text-color, var(--text-color, inherit));
  line-height: 1;
  white-space: nowrap;
}
:where(.q-pdp) .mf-tagline-marquee__sep{ color: var(--mftm-sep-color, currentColor); opacity: 0.6; }
:where(.q-pdp) .mf-tagline-marquee--pause:hover .mf-tagline-marquee__track{ animation-play-state: paused; }
:where(.q-pdp) .mf-tagline-marquee a{ color: inherit; text-decoration: none; }
@keyframes mf-marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 749px){
:where(.q-pdp) .mf-tagline-marquee__item{ font-size: var(--mftm-size-mobile, 2rem); }
}
@media (prefers-reduced-motion: reduce){
:where(.q-pdp) .mf-tagline-marquee__track{ animation: none; transform: none; }
}
:where(.q-pdp) .mf-icon-badge{
  display: inline-flex;
  flex-direction: var(--mfib-direction, row);
  align-items: center;
  justify-content: center;
  gap: var(--mfib-gap, 6px);
  padding: var(--mfib-pad-y, 8px) var(--mfib-pad-x, 12px);
  border-radius: var(--mfib-radius, 50px);
  border: var(--mfib-border-w, 0) solid var(--mfib-border-color, currentColor);
  background: var(--mfib-bg, color-mix(in srgb, var(--text-color, #111) 6%, transparent));
  color: var(--mfib-text-color, var(--text-color, inherit));
  font-weight: var(--mfib-weight, 500);
  text-transform: var(--mfib-text-transform, none);
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
  vertical-align: middle;
}
:where(.q-pdp) .mf-icon-badge--size-md{ font-size: 0.875rem; }
:where(.q-pdp) .mf-icon-badge--shape-pill{ border-radius: 50px; }
:where(.q-pdp) .mf-icon-badge--style-soft{ background: var(--mfib-bg, color-mix(in srgb, var(--accent, #d4727a) 12%, transparent)); }
:where(.q-pdp) .mf-icon-badge__icon{ display: inline-flex; align-items: center; justify-content: center; color: var(--mfib-icon-color, currentColor); }
:where(.q-pdp) .mf-icon-badge__icon svg{ width: var(--mfib-icon-size, 18px); height: var(--mfib-icon-size, 18px); fill: currentColor; }
:where(.q-pdp) .mf-icon-badge__icon img{ width: var(--mfib-icon-size, 18px); height: var(--mfib-icon-size, 18px); object-fit: contain; }
:where(.q-pdp) .mf-icon-badge__label{ line-height: 1.2; }
:where(.q-pdp) .mf-icon-badge:hover{
  background: var(--mfib-hover-bg, var(--mfib-bg));
  color: var(--mfib-hover-text, var(--mfib-text-color, inherit));
  transform: scale(var(--mfib-hover-scale, 1));
}
@keyframes mf-expandable-reveal{
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
:where(.q-pdp) .mf-hero-tile{
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--mfigh-aspect, 1 / 1);
  background: color-mix(in srgb, var(--text-color, #111) 4%, transparent);
  text-decoration: none;
  color: inherit;
}
:where(.q-pdp) .mf-hero-tile__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
:where(.q-pdp) .mf-image-grid-hero{
  position: relative;
  width: 100%;
}
:where(.q-pdp) .mf-image-grid-hero__grid{
  display: grid;
  grid-template-columns: repeat(var(--mfigh-cols-desktop, 4), minmax(0, 1fr));
  gap: var(--mfigh-gap, 4px);
}
@media (max-width: 749px){
:where(.q-pdp) .mf-image-grid-hero__grid{
    grid-template-columns: repeat(var(--mfigh-cols-mobile, 2), minmax(0, 1fr));
  }
}
:where(.q-pdp) .mf-lifestyle-tile{
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--mflr-aspect, 4 / 5);
  background: color-mix(in srgb, var(--text-color, #111) 4%, transparent);
  text-decoration: none;
  color: inherit;
}
:where(.q-pdp) .mf-lifestyle-tile__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
:where(.q-pdp) .mf-lifestyle-row__grid{
  display: grid;
  grid-template-columns: repeat(var(--mflr-cols-desktop, 4), minmax(0, 1fr));
  gap: var(--mflr-gap, 4px);
}
@media (max-width: 749px){
:where(.q-pdp) .mf-lifestyle-row__grid{
    grid-template-columns: repeat(var(--mflr-cols-mobile, 1), minmax(0, 1fr));
  }
}
:where(.q-pdp) .mf-editorial-grid{
  display: grid;
  grid-template-columns: 1.4fr 2.3fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--mfeg-gap, 0);
  aspect-ratio: var(--mfeg-aspect, 16 / 9);
  width: 100%;
}
:where(.q-pdp) .mf-editorial-grid__tile{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
:where(.q-pdp) .mf-editorial-grid__tile--1{ grid-column: 1; grid-row: 1 / 3; }
:where(.q-pdp) .mf-editorial-grid__tile--2{ grid-column: 2; grid-row: 1 / 3; }
:where(.q-pdp) .mf-editorial-grid__tile--3{ grid-column: 3; grid-row: 1; }
:where(.q-pdp) .mf-editorial-grid__tile--4{ grid-column: 4; grid-row: 1; }
:where(.q-pdp) .mf-editorial-grid__tile--5{ grid-column: 3; grid-row: 2; }
:where(.q-pdp) .mf-editorial-grid__tile--6{ grid-column: 4; grid-row: 2; }
:where(.q-pdp) .mf-editorial-grid__tile img,:where(.q-pdp) .mf-editorial-grid__tile picture,:where(.q-pdp) .mf-editorial-grid__tile picture img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
@media (max-width: 749px){
:where(.q-pdp) .mf-editorial-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    aspect-ratio: auto;
  }
:where(.q-pdp) .mf-editorial-grid__tile--1,:where(.q-pdp) .mf-editorial-grid__tile--2{
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }
:where(.q-pdp) .mf-editorial-grid__tile--3{ grid-column: 1; grid-row: auto; aspect-ratio: 1 / 1; }
:where(.q-pdp) .mf-editorial-grid__tile--4{ grid-column: 2; grid-row: auto; aspect-ratio: 1 / 1; }
:where(.q-pdp) .mf-editorial-grid__tile--5{ grid-column: 1; grid-row: auto; aspect-ratio: 1 / 1; }
:where(.q-pdp) .mf-editorial-grid__tile--6{ grid-column: 2; grid-row: auto; aspect-ratio: 1 / 1; }
}
:where(.q-pdp) .mf-scent-stack{
  position: relative;
  width: 100%;
  min-height: var(--mfss-min-height, 700px);
  overflow: hidden;
  isolation: isolate;
}
:where(.q-pdp) .mf-scent-stack__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
:where(.q-pdp) .mf-scent-stack__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--mfss-overlay-alpha, 0.15));
  z-index: 1;
  pointer-events: none;
}
:where(.q-pdp) .mf-scent-stack__inner{
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  padding: clamp(32px, 5vw, 64px);
  box-sizing: border-box;
}
:where(.q-pdp) .mf-scent-stack__text-col{
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: var(--mfss-text-width, 40%);
  color: var(--mfss-text-color, #ffffff);
}
:where(.q-pdp) .mf-scent-stack--text-center-right .mf-scent-stack__inner{ align-items: center; justify-content: flex-end; }
:where(.q-pdp) .mf-scent-stack__heading{
  font-family: var(--heading-font-family, inherit);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--mfss-heading-color, inherit);
  letter-spacing: -1px;
}
:where(.q-pdp) .mf-scent-stack__desc{
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: inherit;
  opacity: 0.85;
}
:where(.q-pdp) .mf-scent-stack__desc p{ margin: 0 0 12px; color: inherit; }
:where(.q-pdp) .mf-scent-stack__desc p:last-child{ margin: 0; }
:where(.q-pdp) .mf-scent-stack__notes-label{
  margin: 8px 0 0;
  font-family: var(--heading-font-family, inherit);
  font-size: 13px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  color: inherit;
}
:where(.q-pdp) .mf-scent-stack__tier{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: inherit;
}
:where(.q-pdp) .mf-scent-stack__tier-label{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.6;
}
:where(.q-pdp) .mf-scent-stack__pills{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
:where(.q-pdp) .mf-scent-stack__pill{
  display: inline-flex;
  align-items: center;
  background: var(--mfss-pill-color, #df6b78);
  color: var(--mfss-pill-text, #ffffff);
  padding: 8px 16px;
  border-radius: var(--mfss-pill-radius, 50px);
  font-size: 14px;
  font-weight: 500;
  text-transform: lowercase;
  line-height: 1.1;
  white-space: nowrap;
}
:where(.q-pdp) .mf-scent-stack__pills--lg .mf-scent-stack__pill{ padding: 10px 20px; font-size: 16px; }
@media (max-width: 749px){
:where(.q-pdp) .mf-scent-stack{ min-height: 520px; }
:where(.q-pdp) .mf-scent-stack[class*="mf-scent-stack--text-"] .mf-scent-stack__inner{
    align-items: flex-end;
    justify-content: flex-start;
    padding: 28px 20px;
  }
:where(.q-pdp) .mf-scent-stack[class*="mf-scent-stack--text-"] .mf-scent-stack__text-col{
    width: 100%;
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
    gap: 14px;
  }
:where(.q-pdp) .mf-scent-stack__heading{
    font-size: 1.75rem;
    letter-spacing: -0.5px;
  }
:where(.q-pdp) .mf-scent-stack__desc{ font-size: 0.9rem; line-height: 1.5; }
:where(.q-pdp) .mf-scent-stack__notes-label{ font-size: 1rem; margin-top: 4px; }
:where(.q-pdp) .mf-scent-stack__tier-label{ font-size: 0.75rem; }
:where(.q-pdp) .mf-scent-stack__pills{ gap: 6px; }
:where(.q-pdp) .mf-scent-stack__pill{ font-size: 0.8rem; padding: 6px 12px; line-height: 1.15; }
:where(.q-pdp) .mf-scent-stack__pills--lg .mf-scent-stack__pill{ font-size: 0.9rem; padding: 8px 16px; }
:where(.q-pdp) .mf-scent-stack__bg{ object-position: 40% center; }
}
@media (max-width: 480px){
:where(.q-pdp) .mf-scent-stack{ min-height: 480px; }
:where(.q-pdp) .mf-scent-stack[class*="mf-scent-stack--text-"] .mf-scent-stack__inner{ padding: 24px 16px; }
:where(.q-pdp) .mf-scent-stack__heading{ font-size: 1.5rem; }
}
:where(.q-pdp) .mf-scent-note-pills .mf-scent-note-pills__row .mf-scent-note-pills__pill{
  padding-left: var(--mfsp-pad-x, 18px);
    padding-right: var(--mfsp-pad-x, 18px);
      padding-inline-start: var(--mfsp-pad-x, 18px);
        padding-inline-end: var(--mfsp-pad-x, 18px);
          text-align: center;
            justify-content: center;
            }

/* --- mf-scent-stack-scroll.css --- */
/* MF - Scent Stack Scroll
   Desktop (>=750px): pinned side-by-side — square 1:1 video on the
     left, text column on the right, both visible together. Tier text
     fades in as the user scrolls past phase thresholds.
   Mobile (<=749px): heading + description in normal flow at the top
     of the section, then a pinned area with the 1:1 video, then the
     note pills below. Scroll-scrub + tier reveals same as desktop.
   ---------------------------------------------------------- */

.mfsss {
  --mfsss-text-width: 40%;
  --mfsss-overlay-alpha: 0;
  --mfsss-pill-color: #df6b78;
  --mfsss-pill-text: #ffffff;
  --mfsss-pill-radius: 50px;
  --mfsss-cta-bg: #df6b78;
  --mfsss-cta-text: #ffffff;
  --mfsss-pin-vh: 150;
  display: block;
  color: inherit; /* defer to the section's color scheme */
}

/* Mobile-intro is hidden on desktop (only displayed inside the mobile media query) */
.mfsss__mobile-intro { display: none; }

/* =====================================================
   COMMON — wrap / pin
   ===================================================== */

.mfsss__wrap {
  position: relative;
  height: calc((var(--mfsss-pin-vh) * 1vh) + 100vh);
}

.mfsss__pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* -----------------------------------------------------------------
   Once the forward-only animation completes for the first time, the
   JS adds `.is-completed` and the section releases its tall scroll
   budget + sticky behavior — so the next time the user scrolls past
   it, the block behaves like a normal flowing section instead of
   re-engaging the scroll-pin.
   ----------------------------------------------------------------- */
.mfsss.is-completed .mfsss__wrap {
  height: 100vh;
}
.mfsss.is-completed .mfsss__pinned {
  position: relative;
  top: auto;
}

/* =====================================================
   DESKTOP / TABLET (>= 750px) — side-by-side
   Left: 1:1 video. Right: text column. Both vertically centered.
   ===================================================== */

@media (min-width: 750px) {
  .mfsss__pinned {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(24px, 4vw, 56px);
    box-sizing: border-box;
  }

  .mfsss__video {
    position: relative;
    inset: auto;
    /* Video is the smaller of 48% container width and (viewport height
       minus padding) so it never overflows on short viewports. */
    width: min(48%, calc(100vh - 120px));
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    flex: 0 0 auto;
    display: block;
    z-index: 0;
  }
  .mfsss__video--placeholder {
    background: #f3e6e0;
    display: grid;
    place-items: center;
  }

  /* Overlay no longer needed — text is in a sibling column */
  .mfsss__overlay { display: none; }

  .mfsss__inner {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    max-width: 540px;
    height: auto;
    padding: 0;
    display: block;
  }

  /* Neutralize the old 9-grid text-position presets — they only made
     sense over a full-bleed video and are no-ops in side-by-side. */
  [class*="mfsss--text-"] .mfsss__inner {
    align-items: stretch;
    justify-content: flex-start;
  }

  .mfsss__text-col {
    width: 100%;
    max-width: none;
  }
  /* Drop the dark backdrop — text now sits on the section background */
  .mfsss--has-backdrop .mfsss__text-col {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
  }
}

/* =====================================================
   Shared typography (overridden by mobile below)
   ===================================================== */

.mfsss__heading {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.mfsss__desc {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  margin: 0 0 24px;
  opacity: 0.85;
}
.mfsss__notes-label {
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0 0 12px;
}

.mfsss__tier {
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mfsss__tier.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mfsss__tier-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  opacity: 0.6;
  margin: 0 0 6px;
}

.mfsss__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mfsss__pill {
  background: var(--mfsss-pill-color);
  color: var(--mfsss-pill-text);
  border-radius: var(--mfsss-pill-radius);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}
.mfsss__pills--sm .mfsss__pill { padding: 6px 12px; font-size: 13px; }
.mfsss__pills--lg .mfsss__pill { padding: 10px 20px; font-size: 16px; }

.mfsss__cta {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: var(--mfsss-pill-radius);
  background: var(--mfsss-cta-bg);
  color: var(--mfsss-cta-text);
  text-decoration: none;
  font-size: 15px;
  transition: opacity 0.2s ease;
}
.mfsss__cta:hover { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .mfsss__tier { opacity: 1; transform: none; transition: none; }
}

/* =====================================================
   MOBILE (<= 749px)
   Heading + description scroll past normally above the pinned area.
   Pinned area: 1:1 video (max ~45vh tall to leave room) then notes below.
   Scroll locks at the start of the pinned section and releases when done.
   ===================================================== */

@media (max-width: 749px) {
  /* Mobile-intro now sits at the top of the pinned area as its first
     flex child, so the heading stays visible during the entire
     scroll-scrub. */
  .mfsss__mobile-intro {
    display: block;
    flex: 0 0 auto;
    padding: 18px 20px 8px;
  }
  .mfsss__mobile-intro .mfsss__heading {
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.1;
    margin: 0 0 8px;
  }
  .mfsss__mobile-intro .mfsss__desc {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    opacity: 0.8;
  }
  .mfsss__mobile-intro .mfsss__desc p {
    margin: 0;
  }
  /* The duplicated heading/desc inside .mfsss__text-col is hidden on mobile */
  .mfsss__inner .mfsss__heading,
  .mfsss__inner .mfsss__desc {
    display: none;
  }

  .mfsss__pinned {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
  }
  .mfsss__video {
    position: relative;
    inset: auto;
    /* Constrain so heading + description + video + notes all fit on
       one phone screen during the pin. 38vh keeps room for ~136px of
       intro + ~200px of notes/CTA. */
    width: min(100%, 38vh);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 4px auto 0;
    display: block;
    flex: 0 0 auto;
    z-index: 0;
  }
  .mfsss__overlay { display: none; }

  .mfsss__inner {
    position: relative;
    z-index: 2;
    height: auto;
    flex: 1 1 auto;
    padding: 14px 20px 18px;
    display: block;
  }
  .mfsss__text-col {
    width: 100%;
    max-width: none;
  }
  .mfsss--has-backdrop .mfsss__text-col {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
  }

  .mfsss__notes-label { font-size: 12px; margin: 0 0 10px; }
  .mfsss__tier        { margin-bottom: 10px; transition: opacity 0.45s ease, transform 0.45s ease; }
  .mfsss__tier-label  { font-size: 11px; margin: 0 0 5px; }
  .mfsss__pills       { gap: 6px; }
  .mfsss__pill        { padding: 5px 12px; font-size: 12px; }
  .mfsss__pills--sm .mfsss__pill { padding: 4px 10px; font-size: 11px; }
  .mfsss__pills--lg .mfsss__pill { padding: 6px 14px; font-size: 13px; }

  .mfsss__cta {
    margin-top: 14px;
    padding: 9px 16px;
    font-size: 13px;
  }

  /* Autoplay-blocked affordance */
  .mfsss--needs-tap .mfsss__video { cursor: pointer; }
  .mfsss--needs-tap .mfsss__pinned::after {
    content: '▶';
    position: absolute;
    /* Center on the video — intro takes the top ~136px, then video starts.
       Video center is intro_height + 38vh / 2. */
    top: calc(136px + (38vh / 2) - 22px);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 22px;
    pointer-events: none;
    z-index: 3;
  }
}

/* --- qn section stylesheets --- */
/* qn-compare-card */

  /* ---------------------------------------------------------------------
     QN - Compare Card. All selectors are prefixed .qn-cc; every tunable
     value arrives as an inline custom property set on the section root, so
     nothing here needs Liquid (this block is not Liquid-rendered).
     --------------------------------------------------------------------- */
  /* Custom elements default to display:inline, which silently kills
     max-width, margin-inline and block padding. Pin them on the element
     itself so the rule survives any later class rename. */
  qn-cc-card,
  qn-cc-video {
    display: block;
  }

  .qn-cc {
    display: block;
    padding-block-start: var(--qn-cc-pad-top, 64px);
    padding-block-end: var(--qn-cc-pad-bottom, 64px);
    /* Glyph knocked out of a filled tick/cross disc. Never currentColor. */
    --qn-cc-glyph: var(--qn-cc-card-bg, rgb(var(--background-without-opacity)));
  }

  /* "Full width" option: the theme gutter, not a hand-rolled max-width. */
  .qn-cc__bleed {
    margin-inline: var(--container-gutter, 24px);
  }

  .qn-cc__layout {
    display: grid;
    gap: var(--qn-cc-col-gap, 40px);
    align-items: center;
  }

  .qn-cc__main {
    order: 1;
    min-width: 0;
  }

  .qn-cc__media {
    order: 2;
    min-width: 0;
  }

  .qn-cc__layout--media-first-mobile .qn-cc__media {
    order: 0;
  }

  @media screen and (min-width: 1000px) {
    .qn-cc__layout--with-media {
      grid-template-columns: var(--qn-cc-media-w, 45%) minmax(0, 1fr);
    }

    .qn-cc__layout--with-media .qn-cc__media {
      order: 1;
    }

    .qn-cc__layout--with-media .qn-cc__main {
      order: 2;
    }

    .qn-cc__layout--media-right {
      grid-template-columns: minmax(0, 1fr) var(--qn-cc-media-w, 45%);
    }

    .qn-cc__layout--media-right .qn-cc__media {
      order: 2;
    }

    .qn-cc__layout--media-right .qn-cc__main {
      order: 1;
    }
  }

  /* ------------------------------ Media ------------------------------ */
  .qn-cc__media-inner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--qn-cc-media-radius, 20px);
    aspect-ratio: var(--qn-cc-ratio, 3 / 4);
    background-color: rgb(var(--text-color) / 0.06);
  }

  .qn-cc__media--natural .qn-cc__media-inner {
    aspect-ratio: auto;
  }

  /* Stacked layout: a portrait ratio at full width would run off the
     screen, so cap the height and let object-fit crop. The explicit width
     stops the aspect ratio transferring the clamp back into the width. */
  @media screen and (max-width: 999px) {
    .qn-cc__media-inner {
      width: 100%;
      max-height: min(70vh, 620px);
    }
  }

  .qn-cc__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .qn-cc__media--natural .qn-cc__img {
    height: auto;
  }

  .qn-cc__img--desktop {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .qn-cc__img--mobile {
      display: none;
    }

    .qn-cc__img--desktop {
      display: block;
    }
  }

  .qn-cc__play {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-start: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background-color: rgb(var(--background-without-opacity) / 0.92);
    color: rgb(var(--text-color));
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  }

  .qn-cc__play-icon {
    width: 22px;
    height: 22px;
  }

  .qn-cc__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ------------------------------ Header ----------------------------- */
  .qn-cc__header {
    margin-block-end: 24px;
  }

  .qn-cc__main--center {
    text-align: center;
  }

  .qn-cc__eyebrow {
    margin: 0 0 10px;
    font-family: var(--text-font-family, inherit);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qn-cc-eyebrow, rgb(var(--text-color) / 0.6));
  }

  .qn-cc__heading {
    margin: 0;
    font-family: var(--heading-font-family, inherit);
    /* The merchant's size is the desktop ceiling; small screens scale down so
       the headline never crowds the gutter. The floor is min()'d against that
       ceiling: a bare 26px floor would override the two smallest steps of the
       24-72px range and make them render identically. */
    font-size: clamp(
      min(26px, var(--qn-cc-heading-size, 44px)),
      7.5vw,
      var(--qn-cc-heading-size, 44px)
    );
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--qn-cc-heading, rgb(var(--text-color)));
    text-wrap: balance;
  }

  .qn-cc__heading--case-none {
    text-transform: none;
  }

  .qn-cc__heading--case-uppercase {
    text-transform: uppercase;
  }

  .qn-cc__heading--case-lowercase {
    text-transform: lowercase;
  }

  .qn-cc__subheading {
    margin-block-start: 14px;
    font-family: var(--text-font-family, inherit);
    font-size: 15px;
    line-height: 1.55;
    color: var(--qn-cc-text, rgb(var(--text-color) / 0.72));
  }

  .qn-cc__subheading > :first-child {
    margin-block-start: 0;
  }

  .qn-cc__subheading > :last-child {
    margin-block-end: 0;
  }

  /* ------------------------------- Card ------------------------------ */
  .qn-cc__card {
    display: block;
    padding: var(--qn-cc-card-pad, 28px);
    border: 1px solid var(--qn-cc-card-border, rgb(var(--border-color)));
    border-radius: var(--qn-cc-card-radius, 24px);
    background-color: var(--qn-cc-card-bg, rgb(var(--background-without-opacity)));
    text-align: start;
  }

  .qn-cc__table {
    display: block;
  }

  .qn-cc__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, var(--qn-cc-col-w, 96px));
    align-items: stretch;
  }

  @media screen and (max-width: 749px) {
    /* Give the row text as much width as possible on phones: cap the card
       padding and the comparison columns without touching the settings. */
    .qn-cc__card {
      padding: min(var(--qn-cc-card-pad, 28px), 20px);
    }

    .qn-cc__row {
      grid-template-columns: minmax(0, 1fr) repeat(2, min(70px, var(--qn-cc-col-w, 96px)));
    }
  }

  .qn-cc__cell {
    display: flex;
    align-items: center;
    padding-block: var(--qn-cc-row-gap, 12px);
    min-width: 0;
  }

  .qn-cc__cell--label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-inline-end: 14px;
  }

  .qn-cc__cell--mark {
    justify-content: center;
    padding-inline: 8px;
    text-align: center;
  }

  /* Highlight column: a low-alpha tint, continuous down the column because
     the padding lives on the cells, not on the row. */
  .qn-cc__cell--hl {
    background-color: var(--qn-cc-hl-bg, rgb(var(--text-color) / 0.05));
  }

  .qn-cc__row--head .qn-cc__cell--hl {
    border-start-start-radius: 14px;
    border-start-end-radius: 14px;
  }

  .qn-cc__row--last .qn-cc__cell--hl {
    border-end-start-radius: 14px;
    border-end-end-radius: 14px;
  }

  /* Dividers follow the card border override so a custom card border does not
     leave scheme-colored lines inside a recolored card. The divider override
     exists for the banner layout, where the card border is ruby but the row
     rules are the soft pdp-rule tone. */
  .qn-cc__table--dividers .qn-cc__row + .qn-cc__row > .qn-cc__cell {
    border-block-start: 1px solid var(--qn-cc-divider, var(--qn-cc-card-border, rgb(var(--border-color))));
  }

  /* The head row is nth-of-type(1), so data rows are 2, 3, 4 ... — `even`
     stripes the FIRST data row, `odd` would start on the second. */
  .qn-cc__table--stripes .qn-cc__row:not(.qn-cc__row--head):nth-of-type(even) > .qn-cc__cell:not(.qn-cc__cell--hl) {
    background-color: rgb(var(--text-color) / 0.025);
  }

  /* Column headings align at the top so "QLEAN" and "THE JUG" sit on the
     same line even when one caption wraps to two lines. */
  .qn-cc__row--head .qn-cc__cell {
    padding-block-start: 0;
    padding-block-end: calc(var(--qn-cc-row-gap, 12px) + 2px);
    align-items: flex-start;
  }

  .qn-cc__row--head .qn-cc__cell--label {
    justify-content: flex-start;
  }

  .qn-cc__colhead {
    display: block;
    font-family: var(--text-font-family, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--qn-cc-text, rgb(var(--text-color)));
  }

  .qn-cc__colcap {
    display: block;
    margin-block-start: 4px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.6;
  }

  .qn-cc__label {
    font-family: var(--text-font-family, inherit);
    font-size: 15px;
    line-height: 1.4;
    color: var(--qn-cc-text, rgb(var(--text-color)));
  }

  .qn-cc__label--strong {
    font-weight: 600;
  }

  .qn-cc__note {
    display: block;
    margin-block-start: 4px;
    font-family: var(--text-font-family, inherit);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--qn-cc-text, rgb(var(--text-color)));
    opacity: 0.62;
  }

  .qn-cc__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .qn-cc__icon {
    display: block;
    width: var(--qn-cc-icon, 22px);
    height: var(--qn-cc-icon, 22px);
    flex: none;
  }

  .qn-cc__icon--tick {
    color: var(--qn-cc-tick, rgb(var(--accent)));
  }

  .qn-cc__icon--cross {
    color: var(--qn-cc-cross, rgb(var(--text-color) / 0.32));
  }

  .qn-cc__celltext {
    font-family: var(--text-font-family, inherit);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--qn-cc-text, rgb(var(--text-color)));
  }

  .qn-cc__dash {
    font-size: 15px;
    color: var(--qn-cc-text, rgb(var(--text-color)));
    opacity: 0.35;
  }

  .qn-cc__footnote {
    margin-block-start: 16px;
    font-family: var(--text-font-family, inherit);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--qn-cc-text, rgb(var(--text-color)));
    opacity: 0.6;
  }

  .qn-cc__footnote > :first-child {
    margin-block-start: 0;
  }

  .qn-cc__footnote > :last-child {
    margin-block-end: 0;
  }

  .qn-cc__cta {
    margin-block-start: 24px;
  }

  .qn-cc__apps {
    margin-block-start: 20px;
  }

  .qn-cc__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* -------------------- Banner layout (Paper board S1) --------------- */
  .qn-cc__card--banner {
    padding: 0;
    overflow: hidden;
    border-width: 1.5px;
  }

  .qn-cc__banner {
    display: grid;
    gap: 20px;
    align-items: center;
    padding: 24px;
    background: var(--qn-cc-banner-bg, rgb(var(--text-color) / 0.06));
  }

  @media screen and (min-width: 750px) {
    .qn-cc__banner {
      grid-template-columns: minmax(0, 1fr) var(--qn-cc-media-w, 47%);
      padding: 28px 48px;
    }
  }

  .qn-cc__banner .qn-cc__header {
    margin-block-end: 0;
  }

  .qn-cc__banner .qn-cc__heading {
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .qn-cc__banner-media {
    display: grid;
    gap: 12px;
    justify-items: center;
    min-width: 0;
  }

  .qn-cc__banner-media .qn-cc__media-inner,
  .qn-cc__banner-media qn-cc-video.qn-cc__media-inner {
    width: 100%;
    aspect-ratio: 520 / 236;
    border-radius: var(--qn-cc-media-radius, 10px);
  }

  .qn-cc__vs {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .qn-cc__pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding-inline: 16px;
    border-radius: 999px;
    background: var(--qn-cc-card-bg, rgb(var(--background-without-opacity)));
    font-family: var(--text-font-family, inherit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qn-cc-heading, rgb(var(--text-color)));
  }

  .qn-cc__pill--b {
    color: var(--qn-cc-text, rgb(var(--text-color) / 0.6));
  }

  .qn-cc__vs-word {
    font-family: var(--text-font-family, inherit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--qn-cc-heading, rgb(var(--text-color)));
  }

  .qn-cc__card--banner .qn-cc__table {
    padding: 0 20px;
  }

  @media screen and (min-width: 750px) {
    .qn-cc__card--banner .qn-cc__table {
      padding: 0 24px 0 48px;
    }
  }

  /* The banner keeps the column labels as pills, so the table's own head row
     is visually hidden but stays in the accessibility tree. */
  .qn-cc__row--head-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ------------------------------ Motion ----------------------------- */
  /* Rows are only hidden once JS has armed the card, so a JS-less render
     still shows every row. Transform + opacity only. */
  .qn-cc[data-motion] .qn-cc__card--armed .qn-cc__row {
    transition:
      opacity 0.5s ease,
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--qn-cc-i, 0) * 55ms);
    will-change: opacity, transform;
  }

  .qn-cc[data-motion='subtle'] .qn-cc__card--armed .qn-cc__row {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  .qn-cc[data-motion='full'] .qn-cc__card--armed .qn-cc__row {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  .qn-cc[data-motion] .qn-cc__card--armed.qn-cc__card--in .qn-cc__row {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .qn-cc[data-motion='full'] .qn-cc__card {
    transition: transform 0.3s ease;
  }

  .qn-cc[data-motion='full'] .qn-cc__card:hover {
    transform: translate3d(0, -3px, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .qn-cc[data-motion] .qn-cc__card--armed .qn-cc__row,
    .qn-cc[data-motion] .qn-cc__card--armed.qn-cc__card--in .qn-cc__row {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }

    .qn-cc[data-motion='full'] .qn-cc__card,
    .qn-cc[data-motion='full'] .qn-cc__card:hover {
      transition: none;
      transform: none;
    }
  }

/* qn-faq-split */

  /* ---------------------------------------------------------------------
     QN - FAQ Split. Every selector is prefixed .qn-fq and every tunable
     value arrives as an inline custom property set on the section root, so
     nothing here needs Liquid (this block is not Liquid-rendered). Each
     var() carries a fallback so the section still lays out if the inline
     style attribute is ever stripped by an app or an editor re-render.
     --------------------------------------------------------------------- */
  .qn-fq {
    display: block;
    padding-block-start: var(--qn-fq-pad-top, 64px);
    padding-block-end: var(--qn-fq-pad-bottom, 64px);

    /* Defaults derive from the section color scheme. Inline styles from the
       override_<name> checkboxes replace individual values. */
    --qn-fq-eyebrow: rgb(var(--text-color) / 0.6);
    --qn-fq-heading: rgb(var(--text-color));
    --qn-fq-body: rgb(var(--text-color) / 0.75);
    --qn-fq-question: rgb(var(--text-color));
    --qn-fq-answer: rgb(var(--text-color) / 0.78);
    --qn-fq-divider: rgb(var(--text-color) / 0.14);
    /* Resolved from the scheme, never currentColor: the plus/minus bars are
       painted with `background`, and currentColor there is a trap. */
    --qn-fq-icon: rgb(var(--text-color) / 0.55);
    --qn-fq-card-bg: rgb(var(--text-color) / 0.04);
  }

  /* "Full width" option: the theme gutter, not a hand-rolled max-width. */
  .qn-fq__bleed {
    margin-inline: var(--container-gutter, 24px);
  }

  .qn-fq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--qn-fq-row-gap, 32px) var(--qn-fq-col-gap, 48px);
    align-items: start;
  }

  @media screen and (min-width: 1000px) {
    /* --qn-fq-cols is one track when there is no intro copy, two otherwise,
       already swapped for a right-hand text column. */
    .qn-fq__grid {
      grid-template-columns: var(--qn-fq-cols, minmax(0, 40fr) minmax(0, 60fr));
    }

    .qn-fq__grid[data-order='text-right'] > .qn-fq__intro {
      order: 2;
    }

    .qn-fq__grid[data-sticky='true'] > .qn-fq__intro {
      position: sticky;
      top: calc(var(--qn-fq-sticky-offset, 24px) + var(--header-is-sticky, 0) * var(--header-height, 0px));
      align-self: start;
    }
  }

  .qn-fq__intro[data-align='center'] {
    text-align: center;
  }

  .qn-fq__eyebrow {
    margin: 0 0 0.75em;
    font-size: var(--qn-fq-eyebrow-size, 12px);
    letter-spacing: var(--qn-fq-eyebrow-tracking, 1.5px);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--qn-fq-eyebrow);
  }

  .qn-fq__heading {
    margin: 0;
    font-size: var(--qn-fq-heading-size-mobile, 26px);
    line-height: 1.12;
    color: var(--qn-fq-heading);
    text-wrap: balance;
  }

  @media screen and (min-width: 1000px) {
    .qn-fq__heading {
      font-size: var(--qn-fq-heading-size, 34px);
    }
  }

  .qn-fq__body {
    margin-block-start: 1em;
    font-size: var(--qn-fq-body-size, 16px);
    line-height: 1.6;
    color: var(--qn-fq-body);
    /* Reading measure only — the section width itself comes from the theme
       container classes. Merchant-controlled via the "Body measure" range. */
    max-width: var(--qn-fq-body-measure, 46ch);
  }

  .qn-fq__intro[data-align='center'] .qn-fq__body {
    margin-inline: auto;
  }

  .qn-fq__cta {
    margin-block-start: 1.75em;
  }

  /* ---------- question list ---------- */

  /* A custom element is display:inline by default, which would silently kill
     the grid gap and the card layout below. */
  qn-fq-list.qn-fq__list {
    display: block;
  }

  .qn-fq__list[data-row-style='cards'] {
    display: grid;
    gap: var(--qn-fq-card-gap, 8px);
  }

  .qn-fq__list[data-row-style='lines'] .qn-fq__row {
    border-block-end: var(--qn-fq-divider-width, 1px) solid var(--qn-fq-divider);
  }

  .qn-fq__list[data-row-style='lines'] .qn-fq__row:first-of-type {
    border-block-start: var(--qn-fq-divider-width, 1px) solid var(--qn-fq-divider);
  }

  .qn-fq__list[data-row-style='cards'] .qn-fq__row {
    background: var(--qn-fq-card-bg);
    border-radius: var(--qn-fq-card-radius, 12px);
    padding-inline: var(--qn-fq-card-padding, 20px);
  }

  .qn-fq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: var(--qn-fq-row-padding, 16px);
    cursor: pointer;
    list-style: none;
    color: var(--qn-fq-question);
  }

  .qn-fq__summary::-webkit-details-marker {
    display: none;
  }

  .qn-fq__summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .qn-fq__question {
    font-size: var(--qn-fq-question-size, 17px);
    line-height: 1.35;
    font-weight: 500;
    text-wrap: pretty;
  }

  .qn-fq__icon {
    flex: none;
    width: var(--qn-fq-icon-size, 14px);
    height: var(--qn-fq-icon-size, 14px);
    color: var(--qn-fq-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .qn-fq__icon--chevron svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .qn-fq__row[open] .qn-fq__icon--chevron {
    transform: rotate(180deg);
  }

  .qn-fq__icon--plus::before,
  .qn-fq__icon--plus::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: calc(50% - 0.5px);
    height: 1.5px;
    background: var(--qn-fq-icon);
    border-radius: 2px;
  }

  .qn-fq__icon--plus::after {
    transform: rotate(90deg);
  }

  .qn-fq__row[open] .qn-fq__icon--plus::after {
    transform: rotate(90deg) scaleX(0);
  }

  .qn-fq__answer {
    padding-block-end: var(--qn-fq-row-padding, 16px);
    color: var(--qn-fq-answer);
    font-size: var(--qn-fq-answer-size, 15px);
    line-height: 1.65;
  }

  .qn-fq__answer-link {
    display: inline-block;
    margin-block-start: 0.75em;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .qn-fq__app-block:not(:empty) {
    margin-block-start: 1.5rem;
  }

  /* ---------- prose ---------- */

  .qn-fq__prose > :first-child {
    margin-block-start: 0;
  }

  .qn-fq__prose > :last-child {
    margin-block-end: 0;
  }

  .qn-fq__prose p {
    margin-block: 0 0.75em;
  }

  .qn-fq__prose ul,
  .qn-fq__prose ol {
    margin-block: 0.5em 0.75em;
    padding-inline-start: 1.25em;
  }

  .qn-fq__prose li {
    margin-block: 0.25em;
  }

  .qn-fq__prose strong {
    font-weight: 600;
  }

  .qn-fq__prose em {
    font-style: italic;
  }

  .qn-fq__prose a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---------- motion (compositor-only) ---------- */

  .qn-fq[data-motion='subtle'] .qn-fq__icon,
  .qn-fq[data-motion='subtle'] .qn-fq__icon--plus::after,
  .qn-fq[data-motion='full'] .qn-fq__icon,
  .qn-fq[data-motion='full'] .qn-fq__icon--plus::after {
    transition: transform 0.25s ease;
  }

  .qn-fq[data-motion='full'] .qn-fq__row[open] .qn-fq__answer-inner {
    animation: qn-fq-reveal 0.28s ease both;
  }

  @keyframes qn-fq-reveal {
    from {
      opacity: 0;
      transform: translate3d(0, -6px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  /* The motion rules above are attribute-qualified, so this override has to
     match their specificity AND carry !important — a plain `.qn-fq .qn-fq__icon`
     reset loses on specificity and reduced motion is silently ignored. */
  @media (prefers-reduced-motion: reduce) {
    .qn-fq[data-motion] .qn-fq__icon,
    .qn-fq[data-motion] .qn-fq__icon--plus::after,
    .qn-fq[data-motion] .qn-fq__row[open] .qn-fq__answer-inner {
      transition: none !important;
      animation: none !important;
    }
  }

/* qn-how-to-use */

  /* ---------------------------------------------------------------------
     QN - How To Use — every rule is scoped to the qn-ht prefix.
     Dynamic values arrive as CSS custom properties from the Liquid above.
     --------------------------------------------------------------------- */
  qn-ht-steps {
    display: block;
  }

  .qn-ht.bordered-section {
    border-block-start-style: solid;
  }

  .qn-ht__container--full {
    margin-inline: var(--container-gutter, 24px);
  }

  /* --- Header ---------------------------------------------------------- */
  .qn-ht__header {
    margin-block-end: var(--qn-ht-header-gap, 40px);
  }

  .qn-ht[data-align='center'] .qn-ht__header {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }

  .qn-ht[data-align='left'] .qn-ht__header {
    text-align: left;
  }

  .qn-ht__eyebrow {
    margin: 0 0 12px;
    color: var(--qn-ht-eyebrow-color, rgb(var(--text-color) / 0.6));
    font-family: var(--text-font-family, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
  }

  .qn-ht[data-eyebrow-caps='true'] .qn-ht__eyebrow {
    text-transform: uppercase;
  }

  .qn-ht__heading {
    margin: 0;
    color: var(--qn-ht-heading-color, rgb(var(--text-color)));
    font-family: var(--heading-font-family, inherit);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: none;
  }

  .qn-ht[data-heading-size='sm'] .qn-ht__heading {
    font-size: clamp(20px, 2vw, 26px);
  }

  .qn-ht[data-heading-size='md'] .qn-ht__heading {
    font-size: clamp(24px, 2.4vw, 32px);
  }

  .qn-ht[data-heading-size='lg'] .qn-ht__heading {
    font-size: clamp(28px, 3.2vw, 42px);
  }

  .qn-ht[data-heading-size='xl'] .qn-ht__heading {
    font-size: clamp(32px, 4.2vw, 56px);
  }

  .qn-ht__subheading {
    max-width: 34em;
    margin: 14px 0 0;
    color: var(--qn-ht-subheading-color, rgb(var(--text-color) / 0.72));
    font-family: var(--text-font-family, inherit);
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.5;
  }

  .qn-ht[data-align='center'] .qn-ht__subheading {
    margin-inline: auto;
  }

  /* --- Grid ----------------------------------------------------------- */
  .qn-ht__grid {
    display: grid;
    grid-template-columns: repeat(var(--qn-ht-cols, 3), minmax(0, 1fr));
    gap: var(--qn-ht-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 999px) {
    .qn-ht__grid {
      grid-template-columns: repeat(var(--qn-ht-cols-md, 2), minmax(0, 1fr));
    }
  }

  @media (max-width: 749px) {
    .qn-ht[data-mobile='1'] .qn-ht__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .qn-ht[data-mobile='2'] .qn-ht__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qn-ht[data-mobile='swipe'] .qn-ht__grid {
      grid-auto-columns: 76%;
      grid-auto-flow: column;
      grid-template-columns: none;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding-block-end: 4px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .qn-ht[data-mobile='swipe'] .qn-ht__grid::-webkit-scrollbar {
      display: none;
    }

    .qn-ht[data-mobile='swipe'] .qn-ht__step {
      scroll-snap-align: start;
    }
  }

  .qn-ht__step {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .qn-ht__step--app {
    display: block;
  }

  /* --- Media ---------------------------------------------------------- */
  .qn-ht__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--qn-ht-ratio, 4 / 5);
    border-radius: var(--qn-ht-radius, 16px);
    background-color: var(--qn-ht-media-bg, rgb(var(--text-color) / 0.06));
  }

  .qn-ht[data-ratio='natural'] .qn-ht__frame {
    aspect-ratio: auto;
  }

  .qn-ht[data-shadow='true'] .qn-ht__frame {
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.12);
  }

  .qn-ht__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .qn-ht__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .qn-ht[data-ratio='natural'] .qn-ht__img {
    height: auto;
  }

  .qn-ht__img--placeholder {
    display: grid;
    place-items: center;
  }

  .qn-ht[data-ratio='natural'] .qn-ht__img--placeholder {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .qn-ht__placeholder-svg {
    width: 100%;
    height: 100%;
    opacity: 0.45;
    object-fit: cover;
  }

  /* --- Number badge --------------------------------------------------- */
  .qn-ht__badge {
    display: inline-flex;
    box-sizing: border-box;
    min-width: var(--qn-ht-badge-size, 44px);
    height: var(--qn-ht-badge-size, 44px);
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--qn-ht-badge-size, 44px) * 0.2);
    font-family: var(--heading-font-family, inherit);
    font-size: calc(var(--qn-ht-badge-size, 44px) * 0.42);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .qn-ht[data-badge-shape='circle'] .qn-ht__badge {
    border-radius: 999px;
  }

  .qn-ht[data-badge-shape='rounded'] .qn-ht__badge {
    border-radius: calc(var(--qn-ht-badge-size, 44px) * 0.26);
  }

  .qn-ht[data-badge-shape='square'] .qn-ht__badge {
    border-radius: 0;
  }

  /* Badge colours are always an explicit pair — never currentColor behind
     inheriting text, which would make the number disappear. */
  .qn-ht[data-badge-style='solid'] .qn-ht__badge {
    border: 0;
    background-color: var(--qn-ht-badge-bg, rgb(var(--text-color)));
    color: var(--qn-ht-badge-text, rgb(var(--background-without-opacity)));
  }

  .qn-ht[data-badge-style='soft'] .qn-ht__badge {
    border: 0;
    background-color: var(--qn-ht-badge-bg, rgb(var(--text-color) / 0.12));
    color: var(--qn-ht-badge-text, rgb(var(--text-color)));
  }

  .qn-ht[data-badge-style='outline'] .qn-ht__badge {
    border: 1.5px solid var(--qn-ht-badge-bg, rgb(var(--text-color)));
    background-color: transparent;
    color: var(--qn-ht-badge-text, rgb(var(--text-color)));
  }

  .qn-ht[data-badge-style='numeral'] .qn-ht__badge {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--qn-ht-badge-text, var(--qn-ht-badge-bg, rgb(var(--text-color))));
    font-size: var(--qn-ht-badge-size, 44px);
  }

  .qn-ht__badge--on-image {
    position: absolute;
    z-index: 1;
  }

  .qn-ht[data-badge-pos='image-top-left'] .qn-ht__badge--on-image {
    inset-block-start: var(--qn-ht-badge-offset, 16px);
    inset-inline-start: var(--qn-ht-badge-offset, 16px);
  }

  .qn-ht[data-badge-pos='image-top-right'] .qn-ht__badge--on-image {
    inset-block-start: var(--qn-ht-badge-offset, 16px);
    inset-inline-end: var(--qn-ht-badge-offset, 16px);
  }

  .qn-ht[data-badge-pos='image-bottom-left'] .qn-ht__badge--on-image {
    inset-block-end: var(--qn-ht-badge-offset, 16px);
    inset-inline-start: var(--qn-ht-badge-offset, 16px);
  }

  .qn-ht[data-badge-pos='image-bottom-right'] .qn-ht__badge--on-image {
    inset-block-end: var(--qn-ht-badge-offset, 16px);
    inset-inline-end: var(--qn-ht-badge-offset, 16px);
  }

  .qn-ht[data-badge-shadow='true'] .qn-ht__badge--on-image {
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
  }

  .qn-ht[data-badge-shadow='true'][data-badge-style='numeral'] .qn-ht__badge--on-image {
    box-shadow: none;
    text-shadow: 0 2px 10px rgb(0 0 0 / 0.45);
  }

  /* --- Caption -------------------------------------------------------- */
  .qn-ht__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block-start: var(--qn-ht-caption-gap, 16px);
  }

  .qn-ht[data-badge-pos='inline-caption'] .qn-ht__body {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .qn-ht[data-caption-align='left'] .qn-ht__body {
    align-items: flex-start;
    text-align: left;
  }

  .qn-ht[data-caption-align='center'] .qn-ht__body {
    align-items: center;
    text-align: center;
  }

  .qn-ht[data-badge-pos='inline-caption'][data-caption-align='center'] .qn-ht__body {
    align-items: center;
    justify-content: center;
  }

  .qn-ht__caption {
    margin: 0;
    color: var(--qn-ht-caption-color, rgb(var(--text-color) / 0.8));
    font-family: var(--text-font-family, inherit);
    font-size: var(--qn-ht-caption-size, 16px);
    line-height: 1.45;
  }

  .qn-ht[data-caption-weight='regular'] .qn-ht__caption {
    font-weight: 400;
  }

  .qn-ht[data-caption-weight='medium'] .qn-ht__caption {
    font-weight: 500;
  }

  .qn-ht[data-caption-weight='bold'] .qn-ht__caption {
    font-weight: 700;
  }

  .qn-ht__empty {
    padding: 32px;
    border: 1px dashed rgb(var(--text-color) / 0.25);
    border-radius: 12px;
    color: rgb(var(--text-color) / 0.65);
    font-size: 14px;
    text-align: center;
  }

  /* --- Motion (compositor-only: opacity + transform) ------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .qn-ht[data-motion='subtle'] .qn-ht__step,
    .qn-ht[data-motion='full'] .qn-ht__step {
      transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
      transition-delay: var(--qn-ht-delay, 0ms);
    }

    .qn-ht[data-motion='subtle'] .qn-ht__step[data-reveal='pending'] {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      will-change: opacity, transform;
    }

    .qn-ht[data-motion='full'] .qn-ht__step[data-reveal='pending'] {
      opacity: 0;
      transform: translate3d(0, 32px, 0) scale(0.97);
      will-change: opacity, transform;
    }

    .qn-ht[data-motion='subtle'] .qn-ht__step[data-reveal='in'],
    .qn-ht[data-motion='full'] .qn-ht__step[data-reveal='in'] {
      opacity: 1;
      transform: none;
    }

    .qn-ht[data-hover-zoom='true'] .qn-ht__img {
      transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .qn-ht[data-hover-zoom='true'] .qn-ht__step:hover .qn-ht__img {
      transform: scale(1.045);
    }
  }

  /* Never leave content hidden when scripting is unavailable. These selectors
     must MATCH the specificity of the reduced-motion hiding rules above
     (.qn-ht[data-motion] .qn-ht__step[data-reveal] = 4 compound parts). A
     bare .qn-ht__step[data-reveal='pending'] loses on specificity and the
     section renders permanently blank for no-JS visitors and crawlers. */
  @media (scripting: none) {
    .qn-ht[data-motion='subtle'] .qn-ht__step[data-reveal='pending'],
    .qn-ht[data-motion='full'] .qn-ht__step[data-reveal='pending'] {
      opacity: 1;
      transform: none;
    }
  }

/* qn-routine-cards */

  /* ---------------------------------------------------------------------
     QN - Routine Cards — every rule is scoped to the qn-rc prefix.
     Dynamic values arrive as CSS custom properties from the Liquid above.
     --------------------------------------------------------------------- */
  .qn-rc.bordered-section {
    border-block-start-style: solid;
  }

  .qn-rc__container--full {
    margin-inline: var(--container-gutter, 24px);
  }

  /* --- Header ---------------------------------------------------------- */
  .qn-rc__header {
    margin-block-end: var(--qn-rc-header-gap, 40px);
  }

  .qn-rc[data-align='center'] .qn-rc__header {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }

  .qn-rc[data-align='left'] .qn-rc__header {
    text-align: left;
  }

  .qn-rc__heading {
    margin: 0;
    color: var(--qn-rc-heading-color, rgb(var(--text-color)));
    font-family: var(--heading-font-family, inherit);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: none;
  }

  .qn-rc[data-heading-size='sm'] .qn-rc__heading {
    font-size: clamp(20px, 2vw, 26px);
  }

  .qn-rc[data-heading-size='md'] .qn-rc__heading {
    font-size: clamp(24px, 2.4vw, 32px);
  }

  .qn-rc[data-heading-size='lg'] .qn-rc__heading {
    font-size: clamp(28px, 3.2vw, 42px);
  }

  .qn-rc[data-heading-size='xl'] .qn-rc__heading {
    font-size: clamp(32px, 4.2vw, 56px);
  }

  .qn-rc__subheading {
    max-width: 34em;
    margin: 14px 0 0;
    color: var(--qn-rc-subheading-color, rgb(var(--text-color) / 0.72));
    font-family: var(--text-font-family, inherit);
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.5;
  }

  .qn-rc[data-align='center'] .qn-rc__subheading {
    margin-inline: auto;
  }

  /* --- Grid ----------------------------------------------------------- */
  .qn-rc__grid {
    display: grid;
    grid-template-columns: repeat(var(--qn-rc-cols, 3), minmax(0, 1fr));
    gap: var(--qn-rc-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 999px) {
    .qn-rc__grid {
      grid-template-columns: repeat(var(--qn-rc-cols-md, 2), minmax(0, 1fr));
    }
  }

  @media (max-width: 749px) {
    .qn-rc[data-mobile='1'] .qn-rc__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .qn-rc[data-mobile='2'] .qn-rc__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qn-rc[data-mobile='swipe'] .qn-rc__grid {
      grid-auto-columns: 74%;
      grid-auto-flow: column;
      grid-template-columns: none;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      padding-block-end: 4px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .qn-rc[data-mobile='swipe'] .qn-rc__grid::-webkit-scrollbar {
      display: none;
    }

    .qn-rc[data-mobile='swipe'] .qn-rc__card {
      scroll-snap-align: start;
    }

    /* overflow-x on the swipe row makes the browser compute overflow-y to auto
       as well, which clips an upward hover lift (and can flash a vertical
       scrollbar). No lift inside a swipeable row. */
    .qn-rc[data-mobile='swipe'][data-motion='subtle'] .qn-rc__card:hover {
      transform: none;
    }
  }

  /* --- Card ----------------------------------------------------------- */
  .qn-rc__card {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    flex-direction: column;
    padding: var(--qn-rc-card-padding, 16px);
    border-radius: var(--qn-rc-card-radius, 20px);
    /* Border driven entirely by the width setting, so 0 = no stroke. */
    border-style: solid;
    border-width: var(--qn-rc-card-border-width, 0px);
    border-color: var(--qn-rc-card-border, rgb(var(--text-color) / 0.14));
    background-color: var(--qn-rc-card-bg, transparent);
  }

  .qn-rc__card--app {
    display: block;
    padding: 0;
    border-width: 0;
    background: none;
  }

  .qn-rc[data-card-align='center'] .qn-rc__card {
    text-align: center;
  }

  /* --- Media panel (the tint) ----------------------------------------- */
  .qn-rc__media {
    display: grid;
    box-sizing: border-box;
    aspect-ratio: var(--qn-rc-ratio, 1 / 1);
    padding: var(--qn-rc-media-padding, 20px);
    border-radius: var(--qn-rc-media-radius, 16px);
    background-color: var(--qn-rc-tint, rgb(var(--text-color) / 0.05));
    place-items: center;
    overflow: hidden;
  }

  .qn-rc[data-ratio='natural'] .qn-rc__media {
    aspect-ratio: auto;
  }

  .qn-rc__img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .qn-rc[data-fit='contain'] .qn-rc__img {
    object-fit: contain;
  }

  .qn-rc[data-fit='cover'] .qn-rc__img {
    object-fit: cover;
  }

  .qn-rc[data-ratio='natural'] .qn-rc__img {
    height: auto;
  }

  .qn-rc__img--placeholder {
    display: grid;
    place-items: center;
  }

  .qn-rc[data-ratio='natural'] .qn-rc__img--placeholder {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .qn-rc__placeholder-svg {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    object-fit: contain;
  }

  .qn-rc__card[data-unavailable='true'] .qn-rc__media {
    opacity: 0.5;
  }

  /* --- Body ----------------------------------------------------------- */
  .qn-rc__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    padding-block-start: var(--qn-rc-body-gap, 16px);
  }

  .qn-rc__title {
    color: var(--qn-rc-title-color, rgb(var(--text-color)));
    font-family: var(--heading-font-family, inherit);
    font-size: var(--qn-rc-title-size, 18px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-decoration: none;
  }

  .qn-rc__title:hover {
    text-decoration: underline;
  }

  .qn-rc__desc {
    margin: 0;
    color: var(--qn-rc-desc-color, rgb(var(--text-color) / 0.7));
    font-family: var(--text-font-family, inherit);
    font-size: var(--qn-rc-desc-size, 14px);
    line-height: 1.45;
  }

  /* --- Price + button row --------------------------------------------- */
  .qn-rc__foot {
    display: flex;
    margin-block-start: auto;
    padding-block-start: 14px;
    gap: 12px;
  }

  .qn-rc[data-foot='row'] .qn-rc__foot {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .qn-rc[data-foot='stack'] .qn-rc__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .qn-rc[data-foot='stack'][data-card-align='center'] .qn-rc__foot {
    align-items: center;
  }

  .qn-rc__price {
    display: flex;
    margin: 0;
    align-items: baseline;
    gap: 8px;
    color: var(--qn-rc-price-color, rgb(var(--text-color)));
    font-family: var(--text-font-family, inherit);
    font-size: var(--qn-rc-price-size, 16px);
    font-weight: 600;
    line-height: 1.2;
  }

  .qn-rc__price-compare {
    color: var(--qn-rc-compare-color, rgb(var(--text-color) / 0.5));
    font-size: 0.86em;
    font-weight: 400;
  }

  .qn-rc__form-wrapper {
    display: contents;
  }

  .qn-rc__add {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: var(--qn-rc-button-padding-y, 14px) var(--qn-rc-button-padding-x, 22px);
    border: 0;
    border-radius: var(--qn-rc-button-radius, 40px);
    /* Explicit pair — never currentColor behind inheriting text. */
    background-color: var(--qn-rc-button-bg, rgb(var(--button-background)));
    color: var(--qn-rc-button-text, rgb(var(--button-text-color)));
    font-family: var(--text-font-family, inherit);
    font-size: var(--qn-rc-button-size, 13px);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }

  .qn-rc[data-button-caps='true'] .qn-rc__add {
    text-transform: uppercase;
  }

  .qn-rc[data-foot='stack'] .qn-rc__add {
    width: 100%;
  }

  .qn-rc[data-foot='stack'] .qn-rc__form-wrapper {
    display: block;
    width: 100%;
  }

  .qn-rc__add[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .qn-rc__add:focus-visible {
    outline: 2px solid var(--qn-rc-button-bg, rgb(var(--button-background)));
    outline-offset: 2px;
  }

  /* --- Editor-only states --------------------------------------------- */
  .qn-rc__card--empty {
    display: grid;
    min-height: 160px;
    border-width: 1px;
    border-style: dashed;
    border-color: rgb(var(--text-color) / 0.25);
    place-items: center;
  }

  .qn-rc__empty-text {
    margin: 0;
    color: rgb(var(--text-color) / 0.65);
    font-size: 14px;
    text-align: center;
  }

  .qn-rc__empty-text--section {
    padding: 32px;
    border: 1px dashed rgb(var(--text-color) / 0.25);
    border-radius: 12px;
  }

  /* --- Motion (compositor-only: transform / opacity) ------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .qn-rc[data-motion='subtle'] .qn-rc__card,
    .qn-rc[data-motion='subtle'] .qn-rc__img,
    .qn-rc__add {
      transition:
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.25s ease;
    }

    .qn-rc[data-motion='subtle'] .qn-rc__card:hover {
      transform: translate3d(0, -4px, 0);
    }

    .qn-rc[data-motion='subtle'] .qn-rc__card:hover .qn-rc__img {
      transform: scale(1.035);
    }

    .qn-rc[data-motion='subtle'] .qn-rc__card--app:hover,
    .qn-rc[data-motion='subtle'] .qn-rc__card--empty:hover {
      transform: none;
    }

    .qn-rc__add:hover {
      opacity: 0.86;
    }
  }

/* qn-video-wall */

  /* ------------------------------------------------------------------ QN - Video Wall */
  qn-video-wall {
    display: block; /* a custom element is inline by default, which kills block padding + widths */
  }

  .qn-vw__pad {
    padding-block-start: var(--qn-vw-pad-top, 64px);
    padding-block-end: var(--qn-vw-pad-bottom, 64px);
  }

  .qn-vw__container-full {
    --distance-to-bleed: var(--container-gutter, 24px);
    margin-inline: var(--container-gutter, 24px);
  }

  /* display:contents keeps the theme's own .section-header as the direct grid child of
     .section-stack, so its justify-self-* alignment class still works (a plain wrapper div
     would become the grid item and the header would stop centring like native sections). */
  .qn-vw__head {
    display: contents;
    color: var(--qn-vw-heading-color, inherit);
  }

  .qn-vw__rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--qn-vw-gap, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .qn-vw__tile {
    position: relative;
    margin: 0;
  }

  .qn-vw__media {
    position: relative;
    aspect-ratio: var(--qn-vw-ratio, 9 / 16);
    border-radius: var(--qn-vw-radius, 16px);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--qn-vw-tile-bg, rgb(var(--text-color, 0 0 0) / 0.08));
    cursor: default;
  }

  /* only a tile that actually has a video advertises itself as clickable */
  .qn-vw__tile[data-has-media] .qn-vw__media {
    cursor: pointer;
  }

  .qn-vw__picture,
  .qn-vw__poster,
  .qn-vw__video,
  .qn-vw__embed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  .qn-vw__poster--placeholder {
    background-color: var(--qn-vw-tile-bg, rgb(var(--text-color, 0 0 0) / 0.08));
    fill: rgb(var(--text-color, 0 0 0) / 0.25);
  }

  .qn-vw__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000;
    opacity: calc(var(--qn-vw-scrim, 15) / 100);
    pointer-events: none;
  }

  .qn-vw__stage {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .qn-vw__stage:empty {
    display: none;
  }

  .qn-vw__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: var(--qn-vw-badge, 60px);
    height: var(--qn-vw-badge, 60px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    background-color: var(--qn-vw-badge-bg, rgb(var(--background, 255 255 255)));
    color: var(--qn-vw-badge-icon, rgb(var(--text-color, 0 0 0)));
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.22);
  }

  .qn-vw__play svg {
    width: 40%;
    height: 40%;
    display: block;
    fill: currentColor;
    /* nudge the optical centre of the triangle */
    margin-inline-start: 6%;
  }

  /* visibility (not just opacity) so the hidden badge also leaves the tab order */
  .qn-vw__tile[data-playing] .qn-vw__play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .qn-vw__caption {
    margin-block-start: 0.75rem;
    display: grid;
    gap: 0.2rem;
    color: var(--qn-vw-caption-color, inherit);
  }

  .qn-vw__handle {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .qn-vw__handle--link {
    text-decoration: none;
  }

  .qn-vw__handle--link:hover {
    text-decoration: underline;
  }

  .qn-vw__text {
    font-size: 0.8125rem;
    line-height: 1.4;
    opacity: 0.75;
  }

  .qn-vw__app:empty {
    display: none;
  }

  /* ---------- desktop: "clips per row" rows, featured tile wider ----------
     The track width is derived from the exposed column count so the setting actually
     drives layout; anything past that count wraps onto the next row instead of being
     squeezed into a single row. Tiles keep flex-grow so a short final row still fills. */
  @media screen and (min-width: 1000px) {
    .qn-vw__rail {
      flex-wrap: wrap;
      overflow: visible;
      /* a short last row is centred rather than stretched */
      justify-content: center;
      --qn-vw-track: calc((100% - (var(--qn-vw-cols, 5) - 1) * var(--qn-vw-gap, 16px)) / var(--qn-vw-cols, 5));
    }

    /* longhands, not the flex shorthand: a shorthand carrying a var() is invalid at
       computed-value time as a whole if the var ever fails, which would reset grow too.
       max-width is the important one: without it a single clip left over on the last row
       grows to the full rail width, and at 9:16 that is a ~2400px tall tile. No clip may
       ever be wider than the featured clip. */
    .qn-vw__tile {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: var(--qn-vw-track);
      max-width: calc(var(--qn-vw-track) * var(--qn-vw-feature, 125) / 100);
      min-width: 0;
    }

    .qn-vw__tile--featured {
      flex-basis: calc(var(--qn-vw-track) * var(--qn-vw-feature, 125) / 100);
    }
  }

  /* ---------- tablet + mobile: scroll-snap rail ---------- */
  @media screen and (max-width: 999px) {
    .qn-vw__rail--swipe {
      align-items: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      margin-inline: calc(-1 * var(--distance-to-bleed, var(--container-gutter, 24px)));
      padding-inline: var(--distance-to-bleed, var(--container-gutter, 24px));
      scroll-padding-inline: var(--distance-to-bleed, var(--container-gutter, 24px));
    }

    .qn-vw__rail--swipe::-webkit-scrollbar {
      display: none;
    }

    .qn-vw__rail--swipe .qn-vw__tile {
      flex: 0 0 var(--qn-vw-card-tablet, 35%);
      scroll-snap-align: center;
    }

    .qn-vw__rail--swipe .qn-vw__tile--featured {
      flex-basis: calc(var(--qn-vw-card-tablet, 35%) * var(--qn-vw-feature, 125) / 100);
    }

    /* swipe off: wrap into a grid instead */
    .qn-vw__rail--static {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
    }
  }

  @media screen and (max-width: 699px) {
    .qn-vw__rail--swipe .qn-vw__tile {
      flex-basis: var(--qn-vw-card-mobile, 70%);
    }

    .qn-vw__rail--swipe .qn-vw__tile--featured {
      flex-basis: calc(var(--qn-vw-card-mobile, 70%) * var(--qn-vw-feature, 125) / 100);
    }

    .qn-vw__rail--static {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qn-vw__rail--static .qn-vw__tile--featured {
      grid-column: 1 / -1;
    }
  }

  /* ---------- motion (compositor-only: transform + opacity) ---------- */
  .qn-vw--motion-subtle .qn-vw__play,
  .qn-vw--motion-full .qn-vw__play {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .qn-vw--motion-subtle .qn-vw__poster,
  .qn-vw--motion-full .qn-vw__poster {
    transition: transform 0.6s ease;
  }

  .qn-vw--motion-subtle .qn-vw__media:hover .qn-vw__poster,
  .qn-vw--motion-full .qn-vw__media:hover .qn-vw__poster {
    transform: scale(1.04);
  }

  .qn-vw--motion-subtle .qn-vw__media:hover .qn-vw__play,
  .qn-vw--motion-full .qn-vw__media:hover .qn-vw__play,
  .qn-vw--motion-subtle .qn-vw__play:focus-visible,
  .qn-vw--motion-full .qn-vw__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.08);
  }

  /* reveal-on-scroll only once JS is present, so a no-JS visitor never gets blank tiles */
  .qn-vw--motion-full.qn-vw--js .qn-vw__tile {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--qn-vw-i, 0) * 60ms);
  }

  .qn-vw--motion-full.qn-vw--js .qn-vw__tile.is-in {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .qn-vw__play,
    .qn-vw__poster {
      transition: none !important;
    }

    .qn-vw--motion-subtle .qn-vw__media:hover .qn-vw__poster,
    .qn-vw--motion-full .qn-vw__media:hover .qn-vw__poster {
      transform: none;
    }

    /* keep the centring translate, drop only the scale — "transform: none" here would
       knock the badge out of the middle of the tile */
    .qn-vw--motion-subtle .qn-vw__media:hover .qn-vw__play,
    .qn-vw--motion-full .qn-vw__media:hover .qn-vw__play,
    .qn-vw--motion-subtle .qn-vw__play:focus-visible,
    .qn-vw--motion-full .qn-vw__play:focus-visible {
      transform: translate(-50%, -50%);
    }

    .qn-vw--motion-full.qn-vw--js .qn-vw__tile {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .qn-vw__rail--swipe {
      scroll-behavior: auto;
    }
  }

/* --- q-rc + page chrome --- */
/* Hand-written product-page chrome: static Recharge widget (q-rc), its learn-more modal,
   sticky-bar/safe-sticky behavior hooks. Appended to assets/product.css by gen-assets.mjs. */

.q-pdp .q-rc { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; --rc-brand: rgb(var(--accent)); }
.q-pdp .q-rc__option { border: 1px solid rgb(var(--accent) / 0.35); background: rgb(var(--accent) / 0.04); border-radius: 20px; padding: 20px 22px; cursor: pointer; }
.q-pdp .q-rc__option.is-selected { border-color: var(--rc-brand); box-shadow: 0 0 0 1px var(--rc-brand) inset; }
.q-pdp .q-rc__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.q-pdp .q-rc__radio { width: 18px; height: 18px; accent-color: var(--rc-brand); margin: 0; flex: none; }
.q-pdp .q-rc__label { font-weight: 500; font-size: 16px; color: var(--rc-brand); }
.q-pdp .q-rc__badge { background: #CC5262; color: #FFFFFF; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 60px; white-space: nowrap; }
.q-pdp .q-rc__prices { margin-left: auto; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.q-pdp .q-rc__price { font-weight: 600; font-size: 16px; color: var(--rc-brand); }
.q-pdp .q-rc__compare { opacity: 0.6; font-size: 13px; }
.q-pdp .q-rc__save { font-size: 12px; font-weight: 600; margin: 6px 0 0 28px; color: var(--rc-brand); text-transform: lowercase; }
.q-pdp .q-rc__benefits { margin: 8px 0 0 28px; font-size: 13px; opacity: 0.85; }
.q-pdp .q-rc__benefits ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.q-pdp .q-rc__freq { margin: 12px 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.q-pdp .q-rc__freq-label { font-size: 13px; font-weight: 600; }
.q-pdp .q-rc__plans { display: flex; gap: 8px; flex-wrap: wrap; }
.q-pdp .q-rc__plans--list { flex-direction: column; align-items: flex-start; }
.q-pdp .q-rc__plan { cursor: pointer; }
.q-pdp .q-rc__plan input { position: absolute; opacity: 0; pointer-events: none; }
.q-pdp .q-rc__plan span { display: inline-block; border: 1px solid rgb(var(--accent) / 0.4); border-radius: 60px; padding: 10px 20px; font-size: 14px; line-height: 1; color: var(--rc-brand); transition: background 0.15s ease, color 0.15s ease; }
.q-pdp .q-rc__plan input:checked + span { background: var(--rc-brand); color: #fff; border-color: var(--rc-brand); }
.q-pdp .q-rc__plan input:focus-visible + span { outline: 2px solid var(--rc-brand); outline-offset: 2px; }
/* Collapsed state: benefits + frequency only on the selected subscription card. */
.q-pdp .q-rc__option--sub:not(.is-selected) .q-rc__benefits,
.q-pdp .q-rc__option--sub:not(.is-selected) .q-rc__freq,
.q-pdp .q-rc__option--sub:not(.is-selected) .q-rc__save { display: none; }
.q-pdp .q-rc__learn { background: none; border: none; padding: 0; align-self: flex-start; font-size: 13px; text-decoration: underline; color: var(--rc-brand); cursor: pointer; font-family: inherit; }

/* Learn-more modal (selectors inside the dialog come from the live Recharge config,
   rewritten from rc-learn-more-modal to .q-rc__modal; these are the vars that CSS uses). */
.q-rc__modal { --rc-widget-brand-color: rgb(var(--accent)); --rc-widget-brand-contrast-color: #fff; --rc-widget-brand-color-80: rgb(var(--accent) / 0.8); --rc-widget-button-radius: 60px; --rc-widget-card-radius: 16px; border: none; border-radius: 20px; padding: 28px 24px 24px; max-width: 560px; width: calc(100vw - 32px); color: inherit; }
.q-rc__modal::backdrop { background: rgb(0 0 0 / 0.45); }
.q-rc__modal svg { color: var(--rc-widget-brand-color); }
.q-rc__modal .learn-more-footer button { min-width: min(335px, 100%); }

/* Sticky add-to-cart bar: hidden until product.js toggles .is-visible. */
.q-pdp product-sticky-bar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px max(16px, 4vw); background: rgb(var(--background, 255 255 255)); box-shadow: 0 -4px 18px rgb(0 0 0 / 0.08); transform: translateY(110%); transition: transform 0.25s ease; }
.q-pdp product-sticky-bar.is-visible { transform: translateY(0); }
.q-pdp product-sticky-bar img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.q-pdp product-sticky-bar .buy-buttons .button { white-space: nowrap; }

/* Sticky product-info column (top is driven by product.js's safe-sticky port). */
.q-pdp safe-sticky { display: block; position: sticky; top: 16px; }
@media (max-width: 999px) { .q-pdp safe-sticky { position: static; } }

/* No zoom overlay on the static site (Prestige's zoom dialog JS isn't ported). */
.q-pdp .product-gallery__zoom-button { display: none; }

/* site.css styles the shared `.container` (width:100%, max-width:var(--page), side padding);
   inside the harvested Prestige markup the theme's own `.container` (margin-inline only) must win. */
.q-pdp .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

/* Gallery carousel baseline in case the purged theme rules miss the element selectors. */
.q-pdp scroll-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.q-pdp scroll-carousel::-webkit-scrollbar { display: none; }
.q-pdp .product-gallery__media { flex: none; width: 100%; scroll-snap-align: center; }
.q-pdp .product-gallery__media[hidden], .q-pdp .product-gallery__thumbnail[hidden] { display: none; }