/** Shopify CDN: Minification failed

Line 22584:0 All "@import" rules must come first

**/
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
*, :before, :after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box !important;
}

html {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  font-family: sans-serif;
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

:active {
  outline: none;
}

a {
  color: inherit;
  background-color: #0000;
  text-decoration: none;
}

a:active, a:hover {
  outline: 0;
}

b, strong {
  font-weight: bold;
}

small {
  font-size: 80%;
}

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

p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
  margin-bottom: 0;
}

img {
  vertical-align: top;
  border-style: none;
  max-width: 100%;
  height: auto;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 16px;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button, input[type="submit"] {
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  -moz-appearance: none;
  border-radius: 0;
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button {
  height: auto;
}

input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input::placeholder, textarea::placeholder {
  color: inherit;
}

.is-tabbing input[type="radio"]:focus + label {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 6px 10px 12px;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

.flickity-enabled {
  position: relative;
  overflow: visible !important;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.flickity-slider {
  will-change: transform;
  width: 100%;
  height: 100%;
  position: absolute;
}

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

.flickity-page-dots {
  text-align: center;
  width: 100%;
  padding: 0;
  line-height: 0;
  list-style: none;
  position: absolute;
  bottom: 0;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  background: rgba(var(--text-color-rgb), .8);
  cursor: pointer;
  will-change: transform;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  transition: background .2s ease-in-out, transform .2s ease-in-out;
  display: inline-block;
  position: relative;
  transform: scale(1);
}

.flickity-page-dots .dot:before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
}

.flickity-page-dots .dot.is-selected {
  background: var(--heading-color);
  transform: scale(1.35);
}

.flickity-prev-next-button {
  visibility: visible;
  background: var(--flickity-arrow-color);
  opacity: 0;
  z-index: 1;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  transition: all .2s ease-in-out;
  display: inline-flex;
  position: absolute;
  top: calc(50% - 25px);
  transform: scale(.7);
}

.flickity-prev-next-button:hover {
  background: var(--accent-color);
}

.flickity-prev-next-button svg {
  fill: var(--secondary-background);
  vertical-align: middle;
  width: 15px;
  height: 15px;
  position: relative;
}

.flickity-prev-next-button[disabled] {
  opacity: 0;
  visibility: hidden;
}

.flickity-prev-next-button.previous {
  left: -25px;
}

.flickity-prev-next-button.previous svg {
  left: 1px;
}

.flickity-prev-next-button.next {
  right: -25px;
}

.flickity-prev-next-button.next svg {
  left: -1px;
}

.flickity-enabled:hover .flickity-prev-next-button:not([disabled]) {
  opacity: 1;
  transform: scale(1);
}

.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
  opacity: 0 !important;
  transition: opacity 0.8s ease, visibility 0.8s ease !important;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
  visibility: visible;
  opacity: 1 !important;
}

.modal[aria-hidden="true"] .flickity-slider > * {
  pointer-events: none !important;
}

.product-gallery__carousel.is-fade .flickity-slider > * {
  transition: opacity 0.8s ease !important;
}

@keyframes drift-fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

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

@keyframes drift-fadeZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.5);
  }
}

@keyframes drift-loader-rotate {
  0% {
    transform: translate(-50%, -50%)rotate(0);
  }

  50% {
    transform: translate(-50%, -50%)rotate(-180deg);
  }

  100% {
    transform: translate(-50%, -50%)rotate(-360deg);
  }
}

@keyframes drift-loader-before {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2)translateX(6px);
  }

  25% {
    transform: scale(1.3)translateX(8px);
  }

  40% {
    transform: scale(1.2)translateX(6px);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: scale(.8)translateX(6px);
  }

  75% {
    transform: scale(.7)translateX(8px);
  }

  90% {
    transform: scale(.8)translateX(6px);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes drift-loader-after {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2)translateX(-6px);
  }

  25% {
    transform: scale(1.3)translateX(-8px);
  }

  40% {
    transform: scale(1.2)translateX(-6px);
  }

  50% {
    transform: scale(1);
  }

  60% {
    transform: scale(.8)translateX(-6px);
  }

  75% {
    transform: scale(.7)translateX(-8px);
  }

  90% {
    transform: scale(.8)translateX(-6px);
  }

  100% {
    transform: scale(1);
  }
}

.drift-zoom-pane {
  background: var(--secondary-background);
  z-index: 2;
  border: 1px solid var(--accent-color);
  box-shadow: 0 1px 2px rgba(#000, .2);
  border-radius: 3px;
  width: 100%;
  max-width: 520px;
  height: 520px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
}

.drift-zoom-pane.drift-opening {
  animation: .18s ease-out drift-fadeZoomIn;
}

.drift-zoom-pane.drift-closing {
  animation: .21s ease-in drift-fadeZoomOut;
}

.drift-zoom-pane.drift-inline {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  box-shadow: 0 6px 18px #0000004d;
}

.drift-loading .drift-zoom-pane-loader {
  width: 66px;
  height: 20px;
  animation: 1.8s linear infinite drift-loader-rotate;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.drift-zoom-pane-loader:before, .drift-zoom-pane-loader:after {
  content: "";
  background: rgba(var(--text-color-rgb), .4);
  border-radius: 10px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  display: block;
  position: absolute;
  top: 50%;
}

.drift-zoom-pane-loader:before {
  animation: 1.8s linear infinite drift-loader-before;
  left: 0;
}

.drift-zoom-pane-loader:after {
  animation: 1.8s linear -900ms infinite drift-loader-after;
  right: 0;
}

.drift-bounding-box {
  background-color: rgba(var(--accent-color-rgb), .05);
  border: 1px solid var(--accent-color);
  border-radius: 3px;
}

@media screen and (min-width: 641px) {
  .drift-zoom-pane.drift-inline {
    width: 240px;
    height: 240px;
  }
}

.pswp {
  touch-action: none;
  z-index: 1500;
  -webkit-backface-visibility: hidden;
  outline: none;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.pswp img {
  max-width: none;
}

.pswp--animate_opacity {
  opacity: .001;
  will-change: opacity;
  transition: opacity .333s cubic-bezier(.4, 0, .22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}

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

.pswp--dragging .pswp__img {
  cursor: grabbing;
}

.pswp__bg {
  background: var(--secondary-background);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

.pswp__scroll-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.pswp__container, .pswp__zoom-wrap {
  touch-action: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pswp__container, .pswp__img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  transform-origin: 0 0;
  width: 100%;
  transition: transform .333s cubic-bezier(.4, 0, .22, 1);
  position: absolute;
}

.pswp__bg {
  will-change: opacity;
  transition: opacity .333s cubic-bezier(.4, 0, .22, 1);
}

.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}

.pswp__container, .pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.pswp__img {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.pswp__ui {
  z-index: 1550;
  height: 100%;
  position: relative;
}

.pswp__button {
  border: 1px solid var(--border-color);
  background: var(--secondary-background);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.pswp__button--close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.pswp__button--close svg {
  width: 12px;
  height: 12px;
}

.pswp__prev-next {
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  display: flex;
  position: absolute;
  top: calc(50% - 18px);
  left: 0;
}

.pswp__prev-next svg {
  width: 9px;
  height: 13px;
  position: relative;
}

.pswp__button--arrow--left svg {
  left: -1px;
}

.pswp__button--arrow--right svg {
  right: -1px;
}

.pswp__pagination {
  background: var(--secondary-background);
  border: 1px solid var(--border-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  border-radius: 10px;
  padding: 1px 13px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

html {
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: var(--text-font-style);
  font-size: calc(var(--base-text-font-size)  - 1px);
  color: var(--text-color);
  background: var(--background);
  line-height: 1.87;
}

@media screen and (min-width: 641px) {
  html {
    font-size: var(--base-text-font-size);
  }
}

.heading {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  color: var(--heading-color);
}

.h1, .rte h1 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 24px));
  margin-bottom: 20px;
  line-height: 1.45;
}

.h2, .rte h2 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 22px));
  margin-bottom: 20px;
  line-height: 1.55;
}

.h3, .rte h3 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 20px));
  margin-bottom: 14px;
  line-height: 1.6;
}

.h4, .rte h4 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  line-height: 1.75;
}

.h5, .rte h4 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  text-transform: uppercase;
  line-height: 1.85;
}

.h6, .rte h5 {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  text-transform: uppercase;
  line-height: 1.85;
}

@media screen and (min-width: 641px) {
  .h1, .rte h1 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 28px));
    line-height: 1.43;
  }

  .h2, .rte h2 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 25px));
    line-height: 1.5;
  }

  .h3, .rte h3 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 21px));
    line-height: 1.5;
  }

  .h4, .rte h4 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
    line-height: 1.7;
  }

  .h5, .rte h5 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
    line-height: 1.75;
  }

  .h6, .rte h6 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
    line-height: 1.7;
  }
}

.text--strong, .highlight {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
}

.text--pull {
  margin-top: -.435em;
}

.text--small {
  font-size: .9em;
}

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

.link:hover, .link:focus {
  color: var(--accent-color);
}

.link--secondary:hover, .link--secondary:focus {
  color: var(--heading-color);
}

.link--strong {
  font-weight: var(--heading-font-weight);
}

.link--accented {
  color: var(--accent-color);
}

.link--accented:hover, .link--underline {
  text-decoration: underline;
}

@keyframes spinnerRotation {
  0% {
    transform: rotate(0);
  }

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

.icon {
  fill: currentColor;
  vertical-align: middle;
  pointer-events: none;
  background: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  overflow: visible;
}

.icon--search-loader {
  animation: .7s linear infinite spinnerRotation;
}

@media (-moz-touch-enabled: 1), (hover: none) {
  .touch-area {
    background: none;
    position: relative;
  }

  .touch-area:before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    transform: translateZ(0);
  }
}

.table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

.table, .rte table {
  text-align: left;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  width: 100%;
}

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

.table th {
  font-weight: normal;
}

.table th, .table td {
  padding: 16px 20px;
}

.table th:first-child, .table td:first-child {
  padding-left: 20px;
}

.table th:last-child, .table td:last-child {
  padding-right: 20px;
}

.table tbody tr {
  border-top: 1px solid var(--border-color);
}

.table .table__cell--right {
  text-align: right;
}

.table .table__cell--center {
  text-align: center;
}

.table--loose tbody td {
  padding-top: 26px;
  padding-bottom: 26px;
}

.table--tight tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.rte table th, .rte table td {
  padding: 3px 6px;
}

.rte tbody tr {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 640px) {
  .card .table {
    margin-left: 20px;
  }

  .card .table th:first-child, .card .table td:first-child {
    padding-left: 0;
  }
}

@media screen and (min-width: 641px) {
  .table th, .table td {
    padding: 15px 30px;
  }

  .table th:first-child, .table td:first-child {
    padding-left: 30px;
  }

  .table--tight th, .table--tight td {
    padding: 12px 15px;
  }

  .table--tight th:first-child, .table--tight td:first-child {
    padding-left: 15px;
  }

  .table th:last-child, .table td:last-child {
    padding-right: 15px;
  }
}

@media screen and (min-width: 1000px) {
  .table-wrapper {
    white-space: normal;
    overflow: visible;
  }
}

html {
  overflow-x: hidden;
}

body:not(.is-tabbing) [tabindex]:focus, body:not(.is-tabbing) label:focus, body:not(.is-tabbing) button:focus, body:not(.is-tabbing) input:focus, body:not(.is-tabbing) select:focus, body:not(.is-tabbing) textarea:focus {
  outline: none;
}

.is-locked {
  overflow-y: hidden;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
}

.container {
  padding: 0 var(--mobile-container-gutter);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

.container--medium {
  max-width: 1150px;
}

.container--narrow {
  max-width: 800px;
}

.container--extra-narrow {
  max-width: 630px;
}

.container--giga-narrow {
  max-width: 520px;
}

.anchor {
  visibility: hidden;
  display: block;
  position: relative;
  top: -75px;
}

@supports (--css: variables) {
  .anchor {
    top: calc(-1 * var(--header-height));
  }
}

.js .no-js {
  display: none !important;
}

.js .js\:hidden, .no-js .no-js\:hidden {
  display: none;
}

@media screen and (max-width: 640px) {
  .container--flush {
    padding: 0;
  }

  .container--unflush {
    padding: 0 var(--mobile-container-gutter);
  }

  /* Cart wrapper uses `.container--flush` to let the table run wide on
     desktop, but on mobile the flush container clips the line-item
     card borders against the viewport edge. Restore the mobile gutter
     only for the cart's flush container. */
  .cart-wrapper .container--flush {
    padding: 0 var(--mobile-container-gutter);
  }
}

@media screen and (min-width: 641px) {
  .container {
    padding: 0 var(--desktop-container-gutter);
  }
}

.aspect-ratio {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.aspect-ratio img, .aspect-ratio video, .aspect-ratio svg {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.aspect-ratio--square {
  padding-bottom: 100% !important;
}

.aspect-ratio--short {
  padding-bottom: 75% !important;
}

.aspect-ratio--tall {
  padding-bottom: 150% !important;
}

.aspect-ratio--square img, .aspect-ratio--short img, .aspect-ratio--tall img {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@supports (object-fit: contain) {
  .aspect-ratio--square img, .aspect-ratio--short img, .aspect-ratio--tall img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

.placeholder-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.placeholder-svg {
  fill: var(--text-color);
  background-color: rgba(var(--text-color-rgb), .1);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.placeholder-svg--inverted {
  fill: var(--background);
  background-color: var(--text-color);
  fill-opacity: .5;
}

.image-background {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.grid {
  flex-wrap: wrap;
  margin: 0 0 -18px -18px;
  padding: 0;
  font-size: 0;
  list-style: none;
  display: flex;
}

.grid__cell {
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  margin: 0;
  padding: 0 0 18px 18px;
  font-size: 1rem;
  display: inline-block;
}

.grid__cell--top {
  align-self: flex-start;
}

.grid__cell--middle {
  align-self: center;
}

.grid__cell--bottom {
  align-self: flex-end;
}

@media screen and (min-width: 641px) {
  .grid {
    margin: 0 0 -30px -30px;
  }

  .grid__cell {
    padding: 0 0 30px 30px;
  }
}

.\31 \/1 {
  width: 100%;
}

.\31 \/2 {
  width: 50%;
}

.\31 \/3 {
  width: 33.3333%;
}

.\31 \/4 {
  width: 25%;
}

.\31 \/5 {
  width: 20%;
}

.\31 \/6 {
  width: 16.6667%;
}

@media screen and (max-width: 640px) {
  .hidden-phone {
    display: none !important;
  }

  .\31 \/1--phone {
    width: 100%;
  }

  .\31 \/2--phone {
    width: 50%;
  }

  .\31 \/3--phone {
    width: 33.3333%;
  }

  .\31 \/4--phone {
    width: 25%;
  }

  .\31 \/5--phone {
    width: 20%;
  }

  .\31 \/6--phone {
    width: 16.6667%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .hidden-tablet {
    display: none !important;
  }

  .\31 \/1--tablet {
    width: 100%;
  }

  .\31 \/2--tablet {
    width: 50%;
  }

  .\31 \/3--tablet {
    width: 33.3333%;
  }

  .\31 \/4--tablet {
    width: 25%;
  }

  .\31 \/5--tablet {
    width: 20%;
  }

  .\31 \/6--tablet {
    width: 16.6667%;
  }
}

@media screen and (min-width: 641px) {
  .hidden-tablet-and-up {
    display: none !important;
  }

  .\31 \/1--tablet-and-up {
    width: 100%;
  }

  .\31 \/2--tablet-and-up {
    width: 50%;
  }

  .\31 \/3--tablet-and-up {
    width: 33.3333%;
  }

  .\31 \/4--tablet-and-up {
    width: 25%;
  }

  .\31 \/5--tablet-and-up {
    width: 20%;
  }

  .\31 \/6--tablet-and-up {
    width: 16.6667%;
  }
}

@media screen and (max-width: 999px) {
  .hidden-pocket {
    display: none !important;
  }

  .\31 \/1--pocket {
    width: 100%;
  }

  .\31 \/2--pocket {
    width: 50%;
  }

  .\31 \/3--pocket {
    width: 33.3333%;
  }

  .\31 \/4--pocket {
    width: 25%;
  }

  .\31 \/5--pocket {
    width: 20%;
  }

  .\31 \/6--pocket {
    width: 16.6667%;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1279px) {
  .hidden-lap {
    display: none !important;
  }

  .\31 \/1--lap {
    width: 100%;
  }

  .\39 \/12--lap {
    width: 75%;
  }

  .\32 \/3--lap {
    width: 66.6667%;
  }

  .\31 \/2--lap {
    width: 50%;
  }

  .\31 \/3--lap {
    width: 33.3333%;
  }

  .\31 \/4--lap {
    width: 25%;
  }

  .\31 \/5--lap {
    width: 20%;
  }

  .\31 \/6--lap {
    width: 16.6667%;
  }
}

@media screen and (min-width: 1000px) {
  .hidden-lap-and-up {
    display: none !important;
  }

  .\31 \/1--lap-and-up {
    width: 100%;
  }

  .\39 \/12--lap-and-up {
    width: 75%;
  }

  .\32 \/3--lap-and-up {
    width: 66.6667%;
  }

  .\31 \/2--lap-and-up {
    width: 50%;
  }

  .\31 \/3--lap-and-up {
    width: 33.3333%;
  }

  .\31 \/4--lap-and-up {
    width: 25%;
  }

  .\31 \/5--lap-and-up {
    width: 20%;
  }

  .\31 \/6--lap-and-up {
    width: 16.6667%;
  }
}

@media screen and (min-width: 1280px) {
  .hidden-desk {
    display: none !important;
  }

  .\31 \/1--desk {
    width: 100%;
  }

  .\39 \/12--desk {
    width: 75%;
  }

  .\32 \/3--desk {
    width: 66.6667%;
  }

  .\31 \/2--desk {
    width: 50%;
  }

  .\31 \/3--desk {
    width: 33.3333%;
  }

  .\31 \/4--desk {
    width: 25%;
  }

  .\31 \/5--desk {
    width: 20%;
  }

  .\31 \/6--desk {
    width: 16.6667%;
  }
}

@media screen and (min-width: 1440px) {
  .hidden-wide {
    display: none !important;
  }

  .\31 \/1--wide {
    width: 100%;
  }

  .\39 \/12--wide {
    width: 75%;
  }

  .\32 \/3--wide {
    width: 66.6667%;
  }

  .\31 \/2--wide {
    width: 50%;
  }

  .\31 \/3--wide {
    width: 33.3333%;
  }

  .\31 \/4--wide {
    width: 25%;
  }

  .\31 \/5--wide {
    width: 20%;
  }

  .\31 \/6--wide {
    width: 16.6667%;
  }
}

.block-list {
  flex-flow: column;
  margin: 0 -7px -20px;
  display: flex;
}

.block-list--no-flush.block-list--no-flush {
  margin-bottom: 0;
}

.block-list__item {
  display: flex;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .block-list__item {
    display: block;
  }
}

.block-list__item > :first-child {
  flex: 1 0;
  margin: 0 7px 20px;
}

@media screen and (max-width: 999px) {
  .scroller .block-list {
    white-space: nowrap;
    flex-flow: row;
  }

  .scroller .block-list:before {
    content: "";
    flex: 0 0 var(--mobile-container-gutter);
  }

  .scroller .block-list:after {
    content: "";
    flex: 0 0 calc(var(--mobile-container-gutter)  - 7px);
  }

  .scroller .block-list__item {
    white-space: normal;
    scroll-snap-align: center;
    flex: none;
  }
}

@media screen and (max-width: 640px) {
  .scroller .block-list__item {
    width: 81%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .scroller .block-list__item {
    width: 56%;
  }

  .scroller .block-list:before {
    flex: 0 0 var(--desktop-container-gutter);
  }

  .scroller .block-list:after {
    flex: 0 0 calc(var(--desktop-container-gutter)  - 15px);
  }
}

@media screen and (min-width: 641px) {
  .block-list {
    flex-flow: wrap;
    margin: 0 -15px -30px;
  }

  .block-list__item > :first-child {
    margin: 0 15px 30px;
  }
}

@media screen and (min-width: 1000px) {
  .block-list {
    white-space: normal;
  }

  .block-list:before, .block-list:after {
    display: none;
  }

  .block-list__item--grow {
    flex-grow: 1;
  }
}

.block-list--loose {
  margin-bottom: -45px;
}

.block-list--loose .block-list__item > :first-child {
  margin-bottom: 45px;
}

@media screen and (min-width: 641px) {
  .block-list--loose {
    margin-bottom: -60px;
  }

  .block-list--loose .block-list__item > :first-child {
    margin-bottom: 60px;
  }
}

.article-item__image-container {
  border-radius: 3px;
  margin-bottom: 15px;
  display: block;
  overflow: hidden;
}

.article-item__image-container--placeholder {
  height: 200px;
}

.article-item__image {
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center";
  transition: opacity .2s ease-in-out, transform .95s cubic-bezier(.25, .46, .45, .94);
  transform: scale(1.01);
}

@media screen and (any-hover: hover) {
  .features--animate-zoom .article-item:hover .article-item__image {
    transform: scale(1.07);
  }

  .article-item:hover .article-item__title {
    color: var(--accent-color);
  }
}

.article-item__meta {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
}

.article-item__meta-item:not(:last-child):after {
  content: "";
  background: rgba(var(--text-color-rgb), .4);
  vertical-align: middle;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  margin: -1px 10px 0;
  display: inline-block;
}

.article-item__title {
  margin-bottom: 4px;
}

.article-item__excerpt {
  margin-top: 12px;
}

@media screen and (max-width: 999px) {
  .article-item:not(:last-child) {
    padding-bottom: 20px;
  }

  .scroller .article-item:not(:last-child) {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 641px) {
  .article-item__meta {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  }
}

@media screen and (min-width: 1000px) {
  .blog-container--without-sidebar .article-item--featured .aspect-ratio {
    padding-bottom: 40% !important;
  }
}

@media screen and (min-width: 1280px) {
  .article-item__meta-item + .article-item__meta-item:before {
    margin: 0 14px;
  }
}

.article__image-wrapper {
  width: calc(100% + (var(--mobile-container-gutter) * 2));
  left: calc(-1 * var(--mobile-container-gutter));
  z-index: 1;
  margin-top: 4px;
  position: relative;
}

.article__toolbar, .article__toolbar-item {
  align-items: center;
  display: flex;
}

.article__toolbar {
  justify-content: space-between;
}

.article__toolbar-item .icon--bi-comment {
  width: 24px;
  height: 23px;
  margin-right: 15px;
}

.article__share-label {
  margin-right: 20px;
}

.article__comments-count {
  color: var(--heading-color);
}

.article__inner {
  max-width: 680px;
  margin: 40px auto 60px;
}

.article__content {
  margin-bottom: 2.8em;
}

.article__aside {
  margin-bottom: 50px;
}

.article__aside-item {
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.article__aside-item + .article__aside-item {
  margin-top: 20px;
}

.article__navigation {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
  display: flex;
}

.article__navigation svg {
  vertical-align: -1px;
  width: 8px;
  height: 12px;
}

.article__navigation--align-right {
  justify-content: flex-end;
}

.article__navigation-item--prev svg {
  margin-right: 12px;
}

.article__navigation-item--next svg {
  margin-left: 12px;
}

.article__comment-list {
  margin-top: 50px;
}

.article__comment-list-heading {
  margin-bottom: 30px;
}

.article-comment {
  align-items: flex-start;
  margin-bottom: 32px;
  display: flex;
}

.article-comment:first-child {
  margin-top: 30px;
}

.article-comment:last-child {
  margin-bottom: 0;
}

.article-comment__gravatar {
  border-radius: 100%;
  max-width: 50px;
  margin: 5px 22px 0 0;
}

.article-comment__author {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin-bottom: 0;
}

.article-comment__date {
  font-style: italic;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin-bottom: 12px;
  display: block;
}

.article__comment-form {
  margin-top: 50px;
}

.article__comment-list + .article__comment-form {
  margin-top: 70px;
}

.article__comment-form-title {
  margin-bottom: 12px;
}

.article__moderated-note {
  font-style: italic;
}

.article__comment-form-wrapper {
  margin-top: 32px;
}

@media screen and (min-width: 641px) {
  .article__image-wrapper {
    border-radius: 3px 3px 0 0;
    width: 100%;
    margin: 0 0 -1px;
    position: relative;
    left: 0;
    overflow: hidden;
  }

  .article__image-wrapper + .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .article__inner {
    margin-top: 60px;
  }

  .article__content {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  }

  .article-comment {
    margin-bottom: 42px;
  }

  .article-comment__author {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
    margin-bottom: 2px;
  }

  .article-comment__date {
    margin-bottom: 12px;
  }
}

.blog-post {
  max-width: 980px;
}

.blog-post-list-wrapper {
  flex-grow: 1;
}

.blog-sidebar__item {
  margin-bottom: 45px;
}

.blog-sidebar__item--products, .blog-sidebar__item--newsletter {
  margin-bottom: 50px;
}

.blog-sidebar__item:first-child:not(.blog-sidebar__item--newsletter) {
  margin-top: -.435em;
}

.blog-sidebar__block-title {
  margin-bottom: 20px;
}

@media screen and (min-width: 1000px) {
  .blog-container {
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  .blog-post {
    flex-grow: 1;
  }

  .blog-sidebar {
    flex: none;
    width: 300px;
    margin-left: 60px;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .blog-sidebar {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .blog-sidebar {
    width: 350px;
    margin-left: 70px;
  }
}

.blog-sidebar__item--newsletter {
  text-align: center;
  border-radius: 3px;
  padding: 30px 20px;
}

.blog-sidebar__item--newsletter .heading {
  color: inherit;
}

@media screen and (max-width: 640px) {
  .blog-sidebar__item--newsletter {
    margin-left: calc(-1 * var(--mobile-container-gutter));
    margin-right: calc(-1 * var(--mobile-container-gutter));
    border-radius: 0;
  }
}

.blog-sidebar__post-list {
  list-style: none;
}

.blog-sidebar__post-item {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  align-items: flex-start;
  display: flex;
}

.features--animate-zoom .blog-sidebar__post-item:hover .blog-sidebar__post-image {
  transform: scale(1.1);
}

.blog-sidebar__post-item:hover .blog-sidebar__post-title {
  color: var(--accent-color);
}

.blog-sidebar__post-item + .blog-sidebar__post-item {
  margin-top: 30px;
}

.blog-sidebar__post-image-wrapper {
  flex-shrink: 0;
  width: 100px;
  margin-right: 20px;
  display: block;
  position: relative;
}

.blog-sidebar__post-image, .blog-sidebar__post-placeholder {
  min-height: 80px;
  transition: transform .65s cubic-bezier(.25, .46, .45, .94);
}

.blog-sidebar__post-image-overflow {
  border-radius: 3px;
  overflow: hidden;
}

.blog-sidebar__post-title {
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  line-height: 1.55;
  display: -webkit-box;
  position: relative;
  overflow: hidden;
}

.blog-sidebar__post-meta {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: 4px;
}

.blog-sidebar__post-meta-item:not(:last-child):after {
  content: "";
  background: rgba(var(--text-color-rgb), .4);
  vertical-align: middle;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  margin: 0 10px;
  display: inline-block;
}

.blog-sidebar__post-list--ranked {
  counter-reset: post-ranking 0;
}

.blog-sidebar__post-list--ranked .blog-sidebar__post-image-wrapper:before {
  content: counter(post-ranking);
  border: 2px solid var(--background);
  text-align: center;
  background: var(--accent-color);
  color: var(--secondary-background);
  line-height: 28px;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  counter-increment: post-ranking;
  z-index: 1;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  position: absolute;
  top: calc(50% - 16px);
  left: -16px;
}

.blog-sidebar__item--products .product-item {
  width: 100%;
}

.blog-sidebar__item--products .product-item__image-wrapper {
  width: 75px !important;
}

.blog-sidebar__item--products .product-item__price-list > .price {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
}

@media screen and (max-width: 640px) {
  .blog-sidebar__item--products .product-list--horizontal {
    border: 1px solid var(--border-color);
    border-radius: 3px;
  }
}

.blog-sidebar__linklist {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  list-style: none;
}

.blog-sidebar__link-item {
  border-bottom: 1px solid var(--form-border-color);
  padding: 14px 0;
  line-height: 1.5;
}

.blog-sidebar__link-item:first-child {
  padding-top: 5px;
}

.blog-sidebar__link-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-sidebar__link-item > a {
  display: block;
}

.button {
  text-align: center;
  line-height: 48px;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 30px;
  transition: background .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out;
  display: inline-block;
  position: relative;
}

.button[disabled] {
  cursor: not-allowed;
}

.button--extra-small {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  padding: 0 15px;
  line-height: 34px;
}

.button--small {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  line-height: 42px;
}

.button--large {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  line-height: 55px;
}

.button--extra-large {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
  line-height: 60px;
}

.button--primary {
  background: var(--m2-grad-btn);
  color: var(--primary-button-text-color);
  border-radius: 6px;
  overflow: hidden;
}

.button--primary:hover {
  box-shadow: var(--m2-shadow-btn);
}

.button--secondary {
  background: var(--secondary-button-background);
  color: var(--secondary-button-text-color);
}

.button--secondary:hover {
  background: rgba(var(--secondary-button-background-rgb), .8);
}

.button--ternary {
  color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--border-color) inset;
}

.button--ternary:hover {
  background: rgba(var(--border-color-rgb), .5);
  color: var(--text-color);
}

.button--transparent {
  color: var(--text-color);
  box-shadow: 0 0 0 1px var(--border-color) inset;
}

.button--transparent:hover {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  box-shadow: 0 0 0 1px var(--primary-button-background) inset;
}

.button--disabled {
  background: var(--product-sold-out-color);
  box-shadow: 0 0 0 1px var(--product-sold-out-color) inset;
  color: var(--secondary-background);
}

.button--full {
  width: 100%;
}

.button--min-width {
  min-width: 200px;
}

.button--floating {
  transition: box-shadow .2s ease-in-out;
}

.button--floating:hover {
  box-shadow: 0 2px 2px 2px #0000000f;
}

.button-wrapper {
  text-align: center;
}

.button-stack {
  flex-direction: column;
  display: flex;
}

.button-stack > .button + .button {
  margin-top: 10px;
}

.button-group {
  flex-flow: wrap;
  margin: -5px;
  display: flex;
}

.button-group > * {
  margin: 5px;
}

.button-group--fit > * {
  flex: 1 0 0;
  padding-left: 15px;
  padding-right: 15px;
}

.button-group--loose {
  margin: -10px;
}

.button-group--loose > * {
  margin: 10px;
}

.card {
  background: var(--secondary-background);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 18px;
  position: relative;
}

.card__header {
  padding: 20px 20px 0;
  position: relative;
}

.card__header--flex {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.card__title {
  margin-bottom: 0;
}

.card__subtitle {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin-bottom: 14px;
}

.card__subtitle:first-child {
  margin-top: -.435em;
}

.card__title--small {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 20px));
  margin-top: -2px;
  margin-bottom: 10px;
}

.card__section, .card__collapsible-button {
  padding: 20px;
  position: relative;
}

.card__collapsible-button {
  text-align: left;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.card__collapsible-button .plus-button {
  color: var(--heading-color);
  margin-left: 10px;
}

.card__section + .card__section:before {
  content: "";
  width: calc(100% - var(--mobile-container-gutter));
  background: var(--border-color);
  height: 1px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.card__section--no-padding {
  padding: 0 !important;
}

.card__collapsible {
  height: 0;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

.card__collapsible-content {
  padding: 0 20px 20px;
}

.card__separator {
  width: calc(100% + var(--mobile-container-gutter));
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 20px 0;
}

.card__navigation {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  justify-content: space-between;
  margin-top: -3px;
  margin-bottom: 12px;
  display: flex;
}

.card__navigation-breadcrumb svg {
  vertical-align: -1px;
  width: 8px;
  height: 12px;
  margin-right: 12px;
}

.card__linklist {
  list-style: none;
}

.card__linklist-item {
  text-align: left;
  padding: 2px 0;
  display: block;
}

@media screen and (max-width: 640px) {
  .card {
    border-radius: 0;
  }

  .card__section--flex .button {
    width: 100%;
    margin-top: 20px;
  }
}

@media screen and (max-width: 999px) {
  .card--collapsed {
    box-shadow: 0 -1px var(--secondary-background);
    border-top: none !important;
    margin-top: -18px !important;
  }

  .card--collapsed .card__header, .card--collapsed .card__section {
    padding-top: 0;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .card--collapsed {
    border-radius: 0 0 3px 3px;
    margin-top: -30px !important;
  }
}

@media screen and (min-width: 641px) {
  .card {
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-bottom: 30px;
  }

  .card__header {
    padding: 30px 30px 0;
  }

  .card__section, .card__collapsible-button {
    padding: 30px;
  }

  .card__section + .card__section:before {
    width: 100%;
  }

  .card__section--flex {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .card__subtitle {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  }

  .card__collapsible-content {
    padding: 0 30px 30px;
  }

  .card__separator {
    width: 100%;
    margin: 24px 0;
  }

  .card__header--tight {
    padding-top: 20px;
  }

  .card__section--tight {
    padding: 20px 25px;
  }

  .card__section--tight .card__separator {
    margin: 20px 0;
  }

  .card__navigation {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 1000px) {
  .card--sticky {
    margin-bottom: 0;
    position: sticky;
    top: 0;
  }

  @supports (--css: variables) {
    .card--sticky {
      top: calc((var(--header-height)  + 30px) * var(--header-is-sticky, 0));
    }
  }
}

.card__section .rte .button:last-child {
  margin-bottom: 15px;
}

.mini-cart {
  background: var(--secondary-background);
  color: var(--text-color);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  will-change: transform;
  width: 100vw;
  height: 100vh;
  max-height: 75vh;
  transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s ease-in-out, max-height 0s linear .25s;
  position: absolute;
  top: 100%;
  left: 0;
  transform: scale(.9);
}

.mini-cart[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity .4s cubic-bezier(0, 1, .4, 1), transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
  transform: scale(1);
}

.mini-cart .icon--nav-triangle-borderless {
  z-index: 2;
  filter: drop-shadow(0 -2px 2px #0000001f);
  width: 18px;
  height: 8px;
  position: absolute;
  bottom: 100%;
  right: 6px;
}

.mini-cart__alert-wrapper {
  padding-top: 20px;
}

.mini-cart .alert {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  flex-shrink: 0;
  margin-bottom: 0;
}

.mini-cart__content:not(.mini-cart__content--empty) > * {
  padding-left: 20px;
  padding-right: 20px;
}

.mini-cart__content--empty {
  padding: 20px 25px 25px;
}

.mini-cart__empty-state {
  text-align: center;
  padding: 70px 0 60px;
}

.mini-cart__empty-state svg {
  margin-bottom: 10px;
}

.mini-cart__line-item-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  overflow: auto;
}

.mini-cart__line-item {
  align-items: flex-start;
  padding: 20px 0;
  display: flex;
}

.mini-cart__line-item + .mini-cart__line-item {
  border-top: 1px solid var(--border-color);
}

.mini-cart__image-wrapper {
  width: 80px;
  min-width: 80px;
  margin-right: 20px;
}

.mini-cart__product-info {
  margin-bottom: 12px;
}

.mini-cart__product-vendor, .mini-cart__property-list, .mini-cart__plan-allocation {
  line-height: 1.55;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin-bottom: 7px;
  display: block;
}

.mini-cart__product-vendor {
  text-transform: uppercase;
}

.mini-cart__product-title {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin-bottom: 4px;
  line-height: 1.5;
  display: block;
}

.mini-cart__property-list {
  margin: 6px 0;
  line-height: 1.5;
  list-style: none;
}

.mini-cart__price-list > .price {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  font-weight: var(--text-font-bolder-weight);
}

.mini-cart__price-info {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: -2px;
}

.mini-cart__discount-list {
  margin-top: 2px;
  list-style: none;
}

.mini-cart__discount {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  background: rgba(var(--product-on-sale-accent-rgb), .08);
  color: var(--product-on-sale-accent);
  border-radius: 2px;
  padding: 0 11px;
  display: inline-block;
}

.mini-cart__discount svg {
  vertical-align: text-bottom;
  margin-right: 6px;
}

.mini-cart__discount + .mini-cart__discount {
  margin-top: 5px;
}

.mini-cart__quantity-remove {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-left: 10px;
  line-height: 1;
  display: inline-block;
}

.mini-cart__recap {
  border-top: 1px solid var(--border-color);
  padding: 15px 20px 20px;
}

.mini-cart__recap-price-line {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mini-cart__recap-price-line--highlight {
  color: var(--product-on-sale-accent);
}

.mini-cart__recap-price-line + .mini-cart__recap-price-line {
  margin-top: 4px;
}

.mini-cart__amount-saved {
  color: var(--product-on-sale-accent);
  font-weight: var(--text-font-bolder-weight);
}

.mini-cart__button-container {
  margin-top: 16px;
}

@media screen and (max-width: 640px) {
  .mini-cart .icon--nav-triangle-borderless {
    right: 24px;
  }

  .mini-cart__content {
    flex-direction: column;
    display: flex;
  }

  .mini-cart__inner, .mini-cart__content--empty {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
  }

  @supports (padding: max(0px)) {
    .mini-cart__recap, .mini-cart__content--empty {
      padding-bottom: max(25px, env(safe-area-inset-bottom, 0px)  + 25px);
    }
  }
}

@media screen and (min-width: 641px) {
  .mini-cart {
    border-radius: 3px;
    width: 470px;
    height: auto;
    max-height: none;
    top: calc(100% + 14px);
    left: auto;
    right: 0;
    box-shadow: 0 1px 5px 2px #0000001a;
  }

  .mini-cart__content > * {
    padding-left: 25px;
    padding-right: 25px;
  }

  .mini-cart__content--empty {
    padding-bottom: 25px;
  }

  .mini-cart__line-item-list {
    max-height: 300px;
  }

  .mini-cart__item-wrapper {
    flex-grow: 1;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }

  .mini-cart__quantity-remove {
    width: max-content;
    margin: 10px auto 0;
    display: block;
  }

  .mini-cart__product-info {
    margin: 0 20px 0 0;
  }

  .mini-cart__recap {
    padding: 15px 25px 25px;
  }
}

@media screen and (min-height: 700px) and (min-width: 641px) {
  .mini-cart__line-item-list {
    max-height: 330px;
  }
}

@media screen and (min-width: 1280px) {
  .mini-cart .icon--nav-triangle-borderless {
    right: 58px;
  }
}

.cart-recap__secure-payment-list {
  max-width: 300px;
  margin: -4px auto !important;
}

@media screen and (max-width: 999px) {
  .cart-wrapper {
    min-height: 0 !important;
  }
}

@media screen and (min-width: 1000px) {
  .cart-wrapper {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .cart-wrapper__inner {
    position: relative;
  }

  .cart-wrapper__inner-inner {
    width: calc(100% - 380px);
  }

  .cart-recap {
    right: var(--desktop-container-gutter);
    width: 350px;
    height: 100%;
    position: absolute;
    top: 0;
  }

  .cart-recap__scroller {
    position: sticky;
    top: 0;
  }

  @supports (--css: variables) {
    .cart-recap__scroller {
      top: calc(var(--header-height)  + 30px);
    }
  }
}

@media screen and (min-width: 1280px) {
  .cart-wrapper__inner-inner {
    width: calc(100% - 430px);
  }

  .cart-recap {
    width: 400px;
  }
}

.gift-wrap {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  padding: 20px 10px 20px 20px;
}

.gift-wrap__left {
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.gift-wrap__icon svg {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-right: 25px;
  display: block;
}

.gift-wrap__text > span:first-child {
  margin-right: 10px;
}

@media screen and (min-width: 641px) {
  .gift-wrap {
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 30px;
    display: flex;
  }

  .gift-wrap__left {
    margin-bottom: 0;
  }
}

.estimate-shipping {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
}

.estimate-shipping__toggle {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  align-items: center;
  width: 100%;
  padding: 20px;
  display: flex;
}

.estimate-shipping__icon svg {
  width: 24px;
  height: 24px;
  margin-right: 25px;
  display: block;
}

.estimate-shipping__arrow {
  margin-left: auto;
}

.estimate-shipping__arrow svg {
  width: 12px;
  height: 8px;
  transition: transform .2s ease-in-out;
}

.estimate-shipping__toggle[aria-expanded="true"] .estimate-shipping__arrow svg {
  transform: rotateZ(180deg);
}

.estimate-shipping__collapsible .shipping-estimator {
  padding: 0 20px 20px;
}

@media screen and (min-width: 641px) {
  .estimate-shipping__toggle {
    padding: 20px 30px;
  }

  .estimate-shipping__collapsible .shipping-estimator {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.cart-recap__price-line {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  font-weight: var(--text-font-bolder-weight);
  color: var(--heading-color);
  justify-content: space-between;
  margin-bottom: 4px;
  display: flex;
}

.cart-recap__price-line + .cart-recap__price-line {
  margin-top: 4px;
}

.cart-recap__price-line--highlight {
  color: var(--product-on-sale-accent);
}

.cart-recap__amount-saved {
  color: var(--product-on-sale-accent);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
}

.cart-recap__note {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-top: 14px;
}

.cart-recap__note-inner {
  padding-bottom: 20px;
}

.cart-recap__note-button {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  display: flex;
}

.cart-recap__note-button svg {
  width: 12px;
  height: 8px;
  transition: transform .2s ease-in-out;
}

.cart-recap__note-button[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.cart-recap__note-edit {
  color: var(--accent-color);
  opacity: 0;
  margin-right: 14px;
  transition: opacity .2s ease-in-out;
}

.cart-recap__note-edit.is-visible {
  opacity: 1;
}

.cart-recap__notices {
  margin: 24px 0;
}

.cart-recap__secure-payment-title {
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  margin-bottom: 10px;
}

.cart-recap__secure-payment-title svg {
  vertical-align: text-top;
  margin-right: 8px;
}

@media screen and (min-width: 641px) {
  .cart-recap__price-line {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
  }

  .cart-recap__amount-saved {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  }

  .cart-recap__note {
    margin-top: 20px;
  }
}

.collection__image-wrapper {
  z-index: 1;
  height: 180px;
  margin-bottom: -1px;
  position: relative;
  overflow: hidden;
}

.collection__image-wrapper--small {
  height: 140px;
}

.collection__image-wrapper--large {
  height: 230px;
}

.collection__image-wrapper--preserve-ratio {
  height: auto !important;
}

.collection__image-wrapper + .card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.collection__image {
  background-position: center;
  background-size: cover;
  height: 100%;
}

.collection__title {
  margin-bottom: 5px;
}

.collection__meta {
  margin-bottom: 12px;
}

.collection__description {
  margin-top: 20px;
}

.collection__brand-logo-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 3px;
  width: 70px;
  height: 70px;
  margin-right: 20px;
  padding: 10px;
}

.collection__brand-logo-image {
  place-content: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.collection__products-count {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-bottom: 18px;
}

.collection__toolbar {
  padding: 0 var(--mobile-container-gutter);
  box-shadow: 0 1px var(--border-color), 0 -1px var(--border-color);
  background: var(--secondary-background);
  z-index: 3;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  display: flex;
  position: relative;
}

.collection__toolbar-item {
  align-items: center;
  height: 48px;
  display: flex;
}

.collection__toolbar-item--filter svg {
  width: 19px;
  height: 20px;
  margin-right: 12px;
}

.collection__layout-label {
  margin-right: 20px;
}

.collection__layout-button {
  opacity: .7;
  transition: all .2s ease-in-out;
}

.collection__layout-button:last-child {
  margin-left: 15px;
}

.collection__layout-button:hover {
  opacity: 1;
}

.collection__layout-button.is-selected {
  opacity: 1;
  color: var(--heading-color);
}

.collection__layout-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.collection__header .expandable-content--expandable {
  margin-bottom: -22px;
}

.collection__header--brand .collection__meta {
  align-items: center;
  display: flex;
}

.collection__header--brand .collection__description {
  margin-top: 0;
}

@media screen and (max-width: 999px) {
  .collection__toolbar {
    top: calc(var(--header-height) * var(--header-is-sticky, 0));
    position: sticky;
  }
}

@media screen and (min-width: 641px) {
  .collection__image-wrapper {
    border-radius: 3px 3px 0 0;
    height: 230px;
  }

  .collection__image-wrapper--small {
    height: 200px;
  }

  .collection__image-wrapper--large {
    height: 310px;
  }

  .collection__brand-logo-wrapper {
    width: 90px;
    height: 90px;
    margin-right: 30px;
  }

  .collection__products-count {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  }

  .collection__toolbar {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
    padding: 0 30px;
  }

  .collection__toolbar--bordered {
    box-shadow: 0 1px var(--border-color), 0 -1px var(--border-color);
    margin-top: 30px;
  }

  .card__header--tight + .collection__toolbar--bordered {
    margin-top: 25px;
  }

  .collection__toolbar-item {
    height: 58px;
  }

  .collection__toolbar-item .value-picker-button {
    margin-left: 4px;
  }
}

@media screen and (max-width: 640px) {
  .collection__toolbar-item--count + .collection__toolbar-item--layout {
    margin-left: auto;
  }
}

@media screen and (min-width: 1000px) {
  .collection__toolbar:not(.collection__toolbar--bordered) {
    box-shadow: 0 1px var(--border-color);
    margin-top: -12px;
  }

  .collection__brand-logo-wrapper {
    flex: none;
    width: 110px;
    height: 110px;
  }

  .collection__header--brand {
    align-items: flex-start;
    display: flex;
  }

  .collection__header--brand .collection__meta {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .collection__title {
    margin-bottom: 12px;
  }

  .collection__description {
    margin-top: 10px;
  }

  .collection__showing-count, .collection__toolbar-item--sort {
    margin-right: 45px;
  }

  .collection__toolbar-item--sort {
    margin-left: auto;
  }

  .collection__header--brand .collection__meta {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1440px) {
  .collection__showing-count, .collection__toolbar-item--sort {
    margin-right: 80px;
  }
}

.collection__filter-group-list--ordered {
  flex-direction: column;
  display: flex;
}

.collection__filter-group {
  border-bottom: 1px solid var(--border-color);
  padding: 13px 20px 14px;
}

.collection__filter-group-name {
  text-align: left;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.collection__filter-group-name svg {
  width: 12px;
  height: 8px;
  margin-left: 10px;
  transition: transform .25s ease-in-out;
}

.collection__filter-group-name[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.js .collection__filter-collapsible {
  visibility: hidden;
  height: 0;
  transition: all .2s ease-in-out;
  overflow: hidden;
}

.collection__filter-collapsible[aria-hidden="false"] {
  visibility: visible;
}

.collection__filter-item-active {
  color: var(--accent-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 250px;
  margin-top: -5px;
  display: block;
  overflow: hidden;
}

.collection__filter-linklist {
  padding: 4px 0 8px;
  list-style: none;
}

.collection__filter-link {
  text-align: left;
  width: 100%;
  padding: 3px 0 4px;
  display: block;
}

.collection__filter-link svg {
  width: 12px;
  height: 8px;
  margin-left: 8px;
  transition: transform .25s ease-in-out;
}

.collection__filter-link[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.collection__filter-link.is-active {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.collection__filter-linklist .collection__filter-linklist {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  padding: 0 0 0 10px;
}

.collection__filter-color-list {
  padding: 7px 0 5px 6px;
}

.collection__filter-visual-filter-list {
  padding: 8px 0;
}

.collection__filter-checkbox-list {
  list-style: none;
}

.collection__filter-collapsible .collection__filter-checkbox-list {
  padding: 8px 0 7px 10px;
}

.collection__filter-checkbox {
  align-items: center;
  padding: 2px 0 3px;
  display: flex;
}

.collection__filter-checkbox .checkbox {
  margin-right: 0;
}

.collection__filter-checkbox label {
  padding-left: 14px;
  line-height: 1.5;
}

.collection__filter-icon--active {
  position: relative;
}

.collection__filter-icon--active:after {
  content: "";
  background: var(--accent-color);
  border-radius: 100%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 3px;
  left: 13px;
}

.collection__active-filters {
  margin: -5px 0 16px;
}

.collection__active-filters:empty {
  display: none;
}

.collection__active-filter-item {
  line-height: 1.5;
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
  cursor: pointer;
  align-items: center;
  padding: 4px 0;
  display: flex;
}

.collection__active-filter-cross {
  background: var(--accent-color);
  color: var(--secondary-background);
  box-shadow: 0 1px rgba(var(--border-color-rgb), .4);
  border-radius: 3px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  display: inline-block;
  position: relative;
}

.collection__active-filter-cross svg {
  stroke-width: 2px;
  stroke: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 6px;
  left: 6px;
}

.collection__clear-filter {
  margin: 13px 0 9px;
}

.collection__filter-group label + .switch-checkbox {
  margin-left: auto;
}

@media screen and (min-width: 1000px) {
  .collection__filter-group {
    border-bottom: 0;
    padding: 6px 0;
  }

  .collection__filter-group-name {
    justify-content: flex-start;
  }

  .collection__filter-linklist {
    padding: 0 0 9px;
  }

  .collection__filter-linklist .collection__filter-linklist {
    padding-left: 15px;
  }

  .collection__filter-link {
    padding: 2px 0;
  }

  .collection__filter-color-list {
    padding: 12px 0 10px;
  }

  .collection__filter-collapsible .collection__filter-checkbox-list {
    padding-bottom: 12px;
  }

  .collection__filter-group:last-child .collection__filter-checkbox-list {
    padding-bottom: 0;
  }

  .collection__filter-checkbox {
    padding: 0;
  }

  .collection__filter-checkbox .checkbox-wrapper {
    margin: 8px 0;
  }
}

@media screen and (min-width: 1280px) {
  .collection__sidebar {
    flex-basis: 290px;
  }
}

.collection__mobile-filters-recap {
  background: var(--background);
  border-bottom: 1px solid var(--border-color);
}

.collection__mobile-active-filters {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin: -5px;
}

.collection__mobile-active-filter-item {
  background: var(--accent-color);
  box-shadow: 0 1px rgba(var(--accent-color-rgb), .15);
  color: var(--secondary-background);
  font-weight: var(--text-font-bolder-weight);
  border-radius: 3px;
  padding: 4px 12px;
}

.collection__mobile-active-filter-item, .collection__mobile-active-clear {
  margin: 5px;
}

.collection__mobile-active-filter-cross {
  margin-right: 7px;
}

.collection__mobile-active-filter-cross svg {
  stroke: currentColor;
  stroke-width: 3px;
  width: 7px;
  height: 7px;
}

.collection__mobile-active-clear {
  margin-left: 15px;
  position: relative;
}

.collection__mobile-active-clear:after {
  content: "";
  background: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 3px;
  left: 0;
}

.collection__mobile-active-filters-results {
  margin-top: 25px;
  margin-bottom: -5px;
  display: block;
}

.collection-drawer {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.collection-drawer__header {
  border-bottom: 1px solid var(--border-color);
  z-index: 1;
  flex: 1 0 auto;
  justify-content: space-between;
  align-items: center;
  max-height: 64px;
  padding: 15px 15px 15px 25px;
  display: flex;
}

.collection-drawer__header > div {
  align-items: center;
  display: flex;
}

.collection-drawer__close {
  color: var(--heading-color);
  margin-right: 16px;
}

.collection-drawer__close svg {
  width: 19px;
  height: 19px;
  margin-top: -1px;
  display: block;
}

.collection-drawer__title {
  margin-bottom: 0;
}

.collection-drawer__inner {
  -webkit-overflow-scrolling: touch;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  flex: auto;
  overflow: auto;
}

.collection-drawer__section-title {
  text-transform: uppercase;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  font-weight: var(--text-font-bolder-weight);
  background: var(--background);
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 4px 15px;
}

.collection-drawer__footer {
  box-shadow: 0 -2px 2px rgba(var(--border-color-rgb), .65);
  padding: 15px;
}

.collection-drawer__footer .button {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
}

@supports (padding: max(0px)) {
  .collection-drawer__footer {
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0px)  + 15px);
  }
}

.product-list {
  border: none;
  background: transparent;
  z-index: 1;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  position: relative;
  overflow: visible;
  gap: 12px;
}

.product-list .flickity-viewport {
  border-radius: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.product-list--scrollable {
  flex-wrap: nowrap;
}

.product-list--collection:before {
  display: none;
}

.product-item--vertical, .product-item--vertical .product-item__info {
  flex-direction: column;
  display: flex;
}

.product-item--vertical .product-item__info {
  flex: 1 0 auto;
  justify-content: space-between;
}

.product-list__column {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .product-list--scrollable:before, .product-list--scrollable:after {
    content: "";
    flex: 0 0 var(--mobile-container-gutter);
  }

  .product-list--scrollable .product-item {
    width: 62%;
  }

  .product-list--collage {
    border-width: 1px 0;
  }

  .product-list--collection .product-item--vertical {
    width: 50%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .product-list--scrollable:before, .product-list--scrollable:after {
    content: "";
    flex: 0 0 var(--desktop-container-gutter);
  }

  .product-list--scrollable .product-item {
    width: 36%;
  }
}

@media screen and (min-width: 641px) {
  .product-list {
    background: var(--secondary-background);
    border: none;
    border-radius: 3px;
  }

  .product-list--collage:before {
    content: none;
  }

  .product-list__column {
    flex-flow: column;
    flex: 0 0 20%;
    display: flex;
  }

  .product-list__column > .product-item {
    flex: 1 0 auto;
  }

  .product-list__column--highlight .product-item__title {
    font-size: 1rem;
  }

  @supports (display: grid) {
    .product-list--collage {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      display: grid;
    }

    .product-list__column {
      grid-auto-rows: 1fr;
      display: grid;
    }

    .product-list__column--shrink {
      grid-template-rows: minmax(50%, min-content);
    }
  }
}

@media screen and (max-width: 999px) {
  .product-list--scrollable {
    background: none;
    border: none;
    overflow: visible;
  }

  .product-list--scrollable .product-item {
    border: 1px solid var(--border-color);
  }

  .product-list--scrollable .product-item + .product-item {
    border-left: none;
  }

  .product-list--scrollable .product-item:first-child {
    border-radius: 3px 0 0 3px;
  }

  .product-list--scrollable .product-item:last-child {
    border-radius: 0 3px 3px 0;
  }

  .product-list--collection {
    border: none;
  }
}

@media screen and (min-width: 1000px) {
  .product-list:before {
    content: "";
    border: 1px solid var(--border-color);
    z-index: 1;
    pointer-events: none;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .product-list--scrollable:after {
    content: "flickity";
    display: none;
  }

  .product-list--scrollable .product-item {
    min-height: 100%;
  }

  .product-list--stackable {
    flex-wrap: wrap;
  }

  .product-list__column {
    flex-basis: 25%;
  }
}

@media screen and (min-width: 1440px) {
  @supports (display: grid) {
    .product-list--collage {
      grid-template-columns: repeat(2, 1fr 1.05fr);
    }
  }
}

.featured-collection {
  background-position: left -15px bottom 0;
  background-repeat: no-repeat;
  background-size: 500px;
  padding-top: 25px;
}

.featured-collection__header {
  padding: 0 var(--mobile-container-gutter) 40px var(--mobile-container-gutter);
}

.featured-collection__title {
  color: inherit;
  margin-bottom: 8px;
}

.featured-collection__cta {
  margin-top: 8px;
}

.featured-collection__image-wrapper {
  margin-top: 25px;
}

.featured-collection .product-list {
  border-radius: 0;
  margin-bottom: 20px;
  background: transparent;
  border: none;
}

.featured-collection .product-item {
  border: 1px solid var(--m2-border);
  border-radius: 10px;
}

.featured-collection .product-item:after {
  display: none;
}

.featured-collection .product-item:last-child {
  border: 1px solid var(--m2-border);
}

@media screen and (max-width: 640px) {
  .featured-collection, .featured-collection__header {
    background-image: none !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .featured-collection {
    margin: 0 calc(-1 * var(--desktop-container-gutter));
    background-image: none !important;
  }

  .featured-collection__header {
    padding-left: var(--desktop-container-gutter);
    padding-right: var(--desktop-container-gutter);
    background-position: right -15px bottom 0;
    background-repeat: no-repeat;
    background-size: 430px;
  }

  .featured-collection__image-wrapper {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .featured-collection .product-list {
    margin-bottom: var(--desktop-container-gutter);
  }
}

@media screen and (min-width: 1000px) {
  .featured-collection {
    table-layout: fixed;
    border-radius: 3px;
    width: 100%;
    padding: 6px 6px 6px 0;
    display: table;
  }

  .featured-collection__header, .featured-collection__content {
    vertical-align: top;
    display: table-cell;
  }

  .featured-collection__header {
    width: 455px;
    padding: 20px 30px;
    background-image: none !important;
  }

  .featured-collection .product-list {
    margin-bottom: 0;
  }

  .featured-collection .product-list:before {
    display: none;
  }

  .featured-collection .flickity-viewport:after {
    content: none;
  }
}

.collection-item {
  vertical-align: top;
  white-space: normal;
  width: 36vw;
  margin: 0 14px;
  display: inline-block;
}

.collection-item:first-child {
  margin-left: var(--mobile-container-gutter);
}

.collection-item:last-child {
  margin-right: var(--mobile-container-gutter);
}

.collection-item__image-wrapper {
  margin-bottom: 15px;
  overflow: hidden;
}

.collection-item__image-wrapper--rounded {
  z-index: 0;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}

.collection-item__image-wrapper img {
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center;";
  transition: opacity .2s ease-in-out, transform .95s cubic-bezier(.25, .46, .45, .94);
  transform: scale(1.01);
}

.collection-item__title {
  text-align: center;
  line-height: 1.4;
  transition: color .2s ease-in-out;
  display: block;
}

.collection-item__title svg {
  display: none;
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .collection-item {
    width: 190px;
  }

  .collection-item:first-child {
    margin-left: var(--desktop-container-gutter);
  }

  .collection-item:last-child {
    margin-right: var(--desktop-container-gutter);
  }
}

@media screen and (min-width: 641px) {
  .collection-item__title {
    transition: transform .35s cubic-bezier(.645, .045, .355, 1);
    transform: translateX(14px);
  }

  .collection-item__title svg {
    vertical-align: -2px;
    opacity: 0;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
    display: inline-block;
    position: relative;
    right: -5px;
  }
}

@media screen and (min-width: 1000px) {
  .collection-list {
    white-space: nowrap;
    margin: 30px -14px 0;
    overflow: hidden;
  }

  .collection-list:after {
    content: "flickity";
    display: none;
  }

  .collection-item {
    width: 20%;
    padding: 0 14px;
    margin: 0 !important;
  }

  .collection-list .flickity-prev-next-button {
    top: calc(50% - 37px - .5em);
  }

  .collection-list .flickity-prev-next-button.previous {
    left: -10px;
  }

  .collection-list .flickity-prev-next-button.next {
    right: -10px;
  }
}

@media screen and (min-width: 1280px) {
  .collection-item {
    width: 16.6667%;
  }
}

@media screen and (any-hover: hover) {
  .collection-item:hover .collection-item__title {
    color: var(--accent-color);
  }

  .features--animate-zoom .collection-item:hover img {
    transform: scale(1.07);
  }

  .collection-item:hover .collection-item__title {
    transform: translateX(0);
  }

  .collection-item:hover .collection-item__title svg {
    opacity: 1;
    right: 0;
  }
}

.collection-list__section {
  margin-bottom: 40px;
}

@media screen and (min-width: 641px) {
  .collection-list__section {
    margin-bottom: 60px;
  }
}

.collection-block-item {
  border-radius: 3px;
  display: block;
  position: relative;
  overflow: hidden;
}

.collection-block-item--overlay:before {
  content: "";
  z-index: 1;
  background: #0003;
  width: 100%;
  height: 100%;
  position: absolute;
}

.collection-block-item__image {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 8s linear, opacity .3s ease-in-out !important;
}

.collection-block-item__title {
  text-align: center;
  color: #fff;
  z-index: 1;
  text-shadow: 1px 2px 4px #0003;
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (any-hover: hover) {
  .features--animate-zoom .collection-block-item:hover .collection-block-item__image {
    transform: scale(1.4);
  }
}

.custom-content--centered {
  text-align: center;
}

.custom-content--right {
  text-align: right;
}

.custom-content--product .product-item:after {
  box-shadow: 1px 0 var(--border-color), -1px 0 var(--border-color), 0 1px var(--border-color), 0 -1px var(--border-color);
}

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

.form__field {
  border: 1px solid var(--form-border-color);
  color: var(--heading-color);
  background: var(--input-background);
  -webkit-appearance: none;
  resize: none;
  box-shadow: 0 1px rgba(var(--border-color-rgb), .25) inset;
  border-radius: 2px;
  width: 100%;
  height: 48px;
  padding: 12px;
  font-size: max(1rem, 16px);
  line-height: normal;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
  display: block;
}

.form__field::placeholder {
  color: var(--text-color);
}

.form__field:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  color: var(--heading-color);
  outline: none;
}

.form__field--small {
  height: 44px;
}

.form__field--large {
  height: 60px;
  padding: 20px 18px;
}

.form__field--textarea {
  line-height: inherit;
  height: auto;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.form__field--borderless {
  border: none;
}

.form__field--borderless:focus {
  box-shadow: none;
}

.form__field[aria-invalid]:not(.is-filled) {
  background: var(--error-background);
  color: var(--error-color);
  border-color: var(--error-color);
}

.form__field[aria-invalid]:not(.is-filled) + .form__floating-label {
  color: var(--error-color);
}

.form__label {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  margin-bottom: 6px;
  display: block;
}

.form__label--light {
  color: var(--text-color);
}

.form__submit {
  margin-top: 20px;
  display: block;
}

.form__submit--tight {
  margin-top: 12px;
}

.form__spam-disclaimer {
  margin-top: 10px;
  display: block;
}

@media screen and (min-width: 641px) {
  .form__submit--centered {
    margin-left: auto;
    margin-right: auto;
  }
}

.form__input-wrapper {
  width: 100%;
  margin-bottom: 12px;
  position: relative;
}

.form__floating-label {
  color: var(--text-color);
  transform-origin: 0 0;
  pointer-events: none;
  font-size: 1rem;
  line-height: 48px;
  transition: transform .2s ease-in-out;
  position: absolute;
  top: 0;
  left: 13px;
  transform: scale(1);
}

.form__field:focus + .form__floating-label, .form__field.is-filled + .form__floating-label, .select-wrapper.is-filled + .form__floating-label {
  transform: translateY(-6px)scale(.8);
}

.form__input-wrapper--labelled .form__field {
  padding-top: 20px;
  padding-bottom: 3px;
}

.form__field--large + .form__floating-label {
  line-height: 60px;
  left: 18px;
}

.form__input-wrapper--labelled .form__field--large {
  padding-top: 20px;
  padding-bottom: 3px;
}

.form__input-row {
  flex-direction: column;
  display: flex;
}

.form__input-row .form__submit {
  margin-top: 0;
}

@media screen and (min-width: 641px) {
  .form__input-row {
    flex-direction: row;
    align-items: flex-end;
    margin: 0 -6px;
  }

  .form__input-row:not(:last-child) {
    margin-bottom: 12px;
  }

  .form__input-row > .form__input-wrapper {
    margin-bottom: 0;
  }

  .form__input-row > * {
    margin-left: 6px;
    margin-right: 6px;
  }

  .form__input-row > .form__submit {
    flex: 1 0 auto;
    margin-top: 0;
  }
}

.form__connected-item {
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.form__connected-item .form__input-wrapper {
  margin-bottom: 0;
}

.form__connected-item .form__field {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form__connected-item .form__field:focus {
  box-shadow: 0 0 0 1px var(--accent-color) inset;
}

.form__connected-item .form__connection {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 14px;
  padding-right: 14px;
}

.form__connected-item .form__connection svg {
  width: 23px;
  height: 23px;
}

.form--main {
  text-align: center;
  max-width: 350px;
  margin: 60px auto;
}

.form__header, .form__legend {
  margin-bottom: 30px;
}

.form__title {
  margin-bottom: 15px;
}

.form__secondary-action {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: 32px;
}

.form__secondary-action > * {
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {
  .form--main {
    margin-top: 110px;
    margin-bottom: 150px;
  }
}

select::-ms-expand {
  display: none;
}

.select-wrapper {
  color: currentColor;
  line-height: inherit;
  vertical-align: middle;
  position: relative;
}

.select-wrapper svg {
  pointer-events: none;
  vertical-align: baseline;
  fill: currentColor;
  position: absolute;
}

.select-wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
  display: inline-block;
}

.select-wrapper select:focus::-ms-value {
  color: var(--text-color);
  background: none;
}

.select-wrapper option {
  color: #000;
  background: #fff;
}

.select-wrapper--transparent select {
  font-size: inherit;
  background: none;
  border: none;
  padding-right: 22px;
}

.select-wrapper--transparent svg {
  width: 12px;
  height: 8px;
  top: calc(50% - 4px);
  right: 4px;
}

.select-wrapper--primary {
  background: var(--secondary-background);
  position: relative;
}

.select-wrapper--primary select {
  border: 1px solid var(--form-border-color);
  box-shadow: 0 -1px 1px rgba(var(--border-color-rgb), .3) inset;
  background: none;
  border-radius: 2px;
  width: 100%;
  height: 48px;
  padding: 0 36px 0 12px;
  font-size: max(1rem, 16px);
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.select-wrapper--primary select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  outline: none;
}

.select-wrapper--primary select:valid {
  color: var(--heading-color);
}

.select-wrapper--primary svg {
  opacity: .7;
  width: 12px;
  height: 14px;
  top: calc(50% - 7px);
  right: 16px;
}

.select-wrapper--primary.select-wrapper--small select {
  height: 44px;
  padding-bottom: 1px;
  padding-left: 12px;
}

.form__input-wrapper--labelled .select-wrapper--primary.is-filled select {
  padding-top: 16px;
}

.select-button {
  background: var(--secondary-background);
  color: currentColor;
  line-height: inherit;
  vertical-align: middle;
  border: 1px solid var(--form-border-color);
  box-shadow: 0 -1px 1px rgba(var(--border-color-rgb), .3) inset;
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 48px;
  padding: 0 36px 0 12px;
  font-size: 1rem;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  position: relative;
}

.select-button:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  outline: none;
}

.select-button svg {
  pointer-events: none;
  opacity: .7;
  vertical-align: baseline;
  fill: currentColor;
  width: 12px;
  height: 14px;
  position: absolute;
  top: calc(50% - 7px);
  right: 16px;
}

.select-button--mini {
  height: 32px;
  padding: 0 44px 0 10px;
  font-size: .85rem;
}

.select-button--mini svg {
  right: 11px;
}

select option {
  background: var(--background);
  color: var(--text-color);
}

.checkbox-wrapper {
  vertical-align: middle;
  margin: 8px 0;
  display: inline-block;
  position: relative;
}

.checkbox-wrapper svg {
  color: var(--secondary-background);
  width: 12px;
  height: 12px;
  transition: transform .2s ease-in-out;
  position: absolute;
  top: calc(50% - 6px);
  left: 2px;
  transform: scale(0);
}

.checkbox-wrapper ~ label {
  vertical-align: middle;
  cursor: pointer;
}

.checkbox {
  border: 1px solid var(--form-border-color);
  background: var(--secondary-background);
  box-shadow: 0 1px rgba(var(--border-color-rgb), .4);
  -webkit-appearance: none;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background .2s ease-in-out;
  display: block;
}

.checkbox:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  outline: none;
}

.checkbox:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}

.checkbox:checked + svg {
  transform: scale(1);
}

.checkbox.is-selected ~ label {
  color: var(--accent-color);
  font-weight: var(--text-font-bolder-weight);
}

.checkbox, .checkbox ~ label {
  vertical-align: middle;
  cursor: pointer;
}

@media screen and (min-width: 1000px) {
  .checkbox-wrapper {
    margin: 12px 0;
  }
}

.input-prefix {
  border: 1px solid var(--border-color);
  box-shadow: 0 1px rgba(var(--border-color-rgb), .25) inset;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  font-size: 14px;
  display: flex;
}

.input-prefix__field {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
  text-align: end;
  border: none;
  width: 100%;
  min-width: 0;
  padding: 0;
}

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

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

.input-prefix__field:not(:placeholder-shown) {
  color: var(--heading-color);
}

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

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

.range::-webkit-slider-thumb {
  background: var(--heading-color);
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--secondary-background);
  border: none;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  position: relative;
}

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

.range::-moz-range-thumb {
  background: var(--heading-color);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--secondary-background);
  border: none;
  border-radius: 100%;
  width: 10px;
  height: 10px;
}

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

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

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

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

@media screen and not (any-hover: hover) {
  .range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -8px;
  }

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

.range-group {
  background: linear-gradient(to right, var(--border-color) var(--range-min), var(--heading-color) var(--range-min), var(--heading-color) var(--range-max), var(--border-color) var(--range-max));
  border-radius: 4px;
  height: 4px;
}

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

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

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

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

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

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

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

.switch-checkbox {
  background: var(--secondary-background);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  width: 44px;
  height: 22px;
  transition: background .1s ease-in;
  position: relative;
}

.switch-checkbox:before {
  content: "";
  background: var(--text-color);
  border-radius: 100%;
  width: 14px;
  height: 14px;
  transition: background .1s ease-in, transform .1s ease-in;
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 1px #0003;
}

.switch-checkbox:checked {
  background: var(--heading-color);
}

.switch-checkbox:checked:before {
  background: var(--secondary-background);
  transform: translateX(calc(100% + 8px));
}

.gift-card__inner {
  padding: 30px 0;
}

.gift-card__main {
  text-align: center;
  max-width: 635px;
  padding-top: 85px;
  position: relative;
}

.gift-card__image {
  border-radius: 100%;
  width: 170px;
  height: 170px;
  margin: 0 auto -75px;
  position: relative;
  top: -105px;
  overflow: hidden;
  box-shadow: 0 2px 8px #0003;
}

.gift-card__title {
  margin-bottom: 0;
}

.gift-card__amount {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 22px));
  margin-bottom: 18px;
}

.gift-card__alert {
  margin-top: 20px;
}

.gift-card__code-container {
  max-width: 255px;
  margin: 0 auto 28px;
}

.gift-card__code {
  border: 1px solid var(--border-color);
  text-transform: uppercase;
  text-align: center;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 15px;
  padding: 6px 15px;
  display: inline-flex;
}

.gift-card__expires-on {
  color: var(--product-in-stock-color);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  display: block;
}

.gift-card__expires-on:before {
  content: "";
  vertical-align: baseline;
  background: currentColor;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  margin-right: .7em;
  display: inline-block;
}

.gift-card__share {
  padding-top: 15px;
  padding-bottom: 20px;
}

.gift-card__wallet {
  text-align: center;
  margin-bottom: 30px;
  display: block;
}

.gift-card__qr img {
  margin: 0 auto;
}

.gift-card__shop {
  min-width: 300px;
  margin-top: 15px;
}

@media screen and (max-width: 640px) {
  .gift-card__print {
    width: 100%;
  }

  .gift-card__qr img {
    max-width: 120px;
  }
}

@media screen and (min-width: 641px) {
  .template-gift-card .header {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .gift-card__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 70px 0 90px;
    display: flex;
  }

  .gift-card__main {
    flex: 1 0 auto;
  }

  .gift-card__aside {
    flex: 0 0 255px;
    margin-top: 85px;
    margin-left: 30px;
  }

  .gift-card__image {
    width: 210px;
    height: 210px;
    margin-bottom: -80px;
    top: -135px;
  }

  .gift-card__amount {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 24px));
  }

  .gift-card__code-container {
    justify-content: center;
    max-width: none;
    display: flex;
  }

  .gift-card__code {
    max-width: 250px;
    margin-bottom: 0;
    margin-right: 15px;
  }

  .gift-card__print {
    flex-basis: 150px;
  }
}

@media print {
  .gift-card__aside {
    display: none;
  }
}

.footer {
  border-top: var(--footer-border);
  background-color: var(--footer-background-color);
  color: var(--footer-body-text-color);
  padding: 10px 0 30px;
}

.footer a:hover {
  color: var(--footer-accent-color);
}

.footer__block-list {
  flex-flow: column wrap;
  display: flex;
}

.footer__title {
  text-align: left;
  color: var(--footer-heading-text-color);
  width: 100%;
  margin-bottom: .85em;
  display: block;
  position: relative;
}

.footer__title[disabled] {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.footer__linklist {
  margin-top: -8px;
  margin-bottom: -5px;
  line-height: 1.4;
}

.footer__link-item {
  padding: 5px 0;
  display: block;
}

.footer__newsletter-form {
  margin-top: 20px;
}

.footer__aside {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  flex-direction: column;
  margin-top: 10px;
  display: flex;
}

.footer__aside-item {
  margin-top: 34px;
}

.footer__aside-item--localization, .footer__aside-item--copyright {
  margin-top: 45px;
}

.footer__aside-title {
  margin-bottom: .8em;
}

.footer__follow-on-shop {
  margin-top: .8em;
}

.footer__localization-form {
  color: var(--text-color);
  display: flex;
}

.footer__localization-form .select-button {
  width: auto;
}

.footer__localization-form-item:not(:last-child) {
  margin-right: 10px;
}

.footer .button--primary {
  background-color: var(--footer-accent-color);
}

.footer .button--primary:hover {
  background-color: rgba(var(--footer-accent-color-rgb), .8);
}

.footer .select-button {
  background: var(--footer-background-color);
  color: var(--footer-body-text-color);
  border-color: rgba(var(--footer-body-text-color-rgb), .5);
}

@media screen and (max-width: 640px) {
  .footer__block-item {
    margin-right: calc(-1 * var(--mobile-container-gutter));
    padding-right: var(--mobile-container-gutter);
    border-bottom: 1px solid var(--border-color);
  }

  .footer__block-item--newsletter {
    border-bottom: none;
    order: 1;
  }

  .footer__title {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 19px 0;
    display: flex;
  }

  .footer__collapsible {
    height: 0;
    transition: all .3s ease-in-out;
    overflow: hidden;
  }

  .footer__collapsible-content {
    padding: 0 20px 25px 0;
  }

  .footer__block-item .rte {
    margin-top: -.425em;
  }
}

@media screen and (min-width: 641px) {
  .footer {
    border-top: none;
    padding: 0;
  }

  .footer__wrapper {
    border-top: var(--footer-border);
    padding: 50px 0;
  }

  .footer__block-list {
    flex-direction: row;
    margin: -20px -35px;
  }

  .footer__block-item {
    flex: 0 0 50%;
    padding: 20px 35px;
  }

  .footer__block-item--newsletter {
    max-width: 350px;
  }

  .footer__block-item .plus-button {
    display: none;
  }

  .footer__localization-form {
    margin-bottom: 20px;
  }

  .footer__linklist {
    margin-top: -2px;
    margin-bottom: 0;
  }

  .footer__aside {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
    flex-flow: wrap;
    justify-content: space-between;
    margin-top: 60px;
  }

  .footer__aside-item {
    margin-top: 0;
  }

  .footer__aside-item--localization, .footer__aside-item--copyright {
    width: 100%;
  }

  .footer__aside-item--copyright:not(:only-child) {
    margin-top: 34px;
  }
}

@media screen and (min-width: 1000px) {
  .footer__block-item {
    flex: 1 0 auto;
  }

  .footer__block-item--text {
    flex-basis: 300px;
  }

  .footer__block-item--newsletter {
    flex-basis: 350px;
  }

  .footer__block-item--links {
    max-width: 300px;
  }

  .footer__aside {
    align-items: flex-start;
  }

  .footer__aside-item--copyright {
    text-align: left;
    align-self: flex-end;
    margin-bottom: -8px;
    margin-top: 0 !important;
  }

  .footer__aside-item--localization, .footer__aside-item--copyright {
    width: auto;
  }
}

#shopify-section-header:after {
  content: "";
  clear: both;
  display: table;
}

.header {
  background: var(--header-background);
  color: var(--header-text-color);
  padding: 13px 0;
  transition: margin-bottom .25s ease-in-out;
  position: relative;
}

.header__inner {
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.header__inner--centered {
  justify-content: center;
}

.header__logo-link {
  display: block;
}

.header__logo {
  vertical-align: middle;
  margin-bottom: 0;
  display: inline-block;
}

.header__logo-image {
  vertical-align: middle;
  max-height: 130px;
  display: block;
}

.header__mobile-nav {
  margin-right: 20px;
  display: inline-block;
}

.header__desktop-nav {
  margin-right: 22px;
  position: relative;
}

.header__mobile-nav-toggle {
  top: -1px;
}

.header__desktop-nav-toggle {
  border: 1px solid var(--header-border-color);
  font-weight: var(--text-font-bolder-weight);
  border-radius: 3px;
  height: 44px;
  padding: 0 15px;
}

.header__desktop-nav-toggle > span {
  align-items: center;
  display: flex;
}

.header__desktop-nav-text {
  position: relative;
  top: 1px;
}

.header__search-bar-wrapper {
  flex: 1 0 auto;
}

.header .icon--account, .header .icon--hamburger, .header .icon--hamburger-mobile, .header .icon--search, .header .icon--cart, .header .icon--close {
  display: block;
}

.header .icon--account {
  width: 20px;
  height: 22px;
}

.header .icon--hamburger {
  width: 20px;
  height: 14px;
}

.header .icon--hamburger-mobile {
  width: 20px;
  height: 16px;
}

.header .icon--cart {
  width: 27px;
  height: 24px;
}

.header .icon--search {
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

.header .icon--close {
  width: 19px;
  height: 19px;
}

@media screen and (max-width: 640px) {
  .header {
    align-items: center;
    min-height: 64px;
    display: flex;
  }

  .header > .container {
    width: 100%;
  }

  .header--search-expanded {
    margin-bottom: 59px;
  }
}

@media screen and (min-width: 641px) {
  .header {
    padding: 20px 0;
  }

  .header__inner {
    flex-wrap: nowrap;
  }

  .header__logo {
    margin-right: 35px;
  }
}

@media screen and (min-width: 1000px) {
  .icon--hamburger {
    margin-right: 15px;
  }
}

@media screen and (min-width: 1280px) {
  .header__logo {
    margin-right: 40px;
  }

  .header__desktop-nav {
    margin-right: 30px;
  }

  .header__desktop-nav-toggle {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  }
}

.header__action-list {
  align-items: center;
  margin-left: auto;
  display: flex;
}

.header__action-item {
  padding: 0 9px;
}

.header__action-item:last-child {
  padding-right: 4px;
}

.header__action-item-link {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  display: block;
}

.header__action-item-link--small {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  font-weight: normal;
}

.header__action-item-title {
  color: var(--header-light-text-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin-bottom: -6px;
  font-weight: normal;
  display: block;
}

.header__action-item--currency, .header__action-item--locale {
  margin-right: 25px;
  padding: 0 24px;
}

.header__currency-selector {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
}

.header__action-item .icon--arrow-bottom {
  width: 12px;
  height: 8px;
  margin-left: 4px;
}

.header__action-item .icon--lock-2 {
  width: 12px;
  height: 15px;
}

.header__action-item .icon--lock-2 + span {
  margin-left: 14px;
}

.header__cart-icon {
  margin-left: -2px;
}

.header__cart-count {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  font-weight: var(--text-font-bolder-weight);
  text-align: center;
  background: var(--header-accent-color);
  color: var(--secondary-background);
  will-change: transform;
  z-index: 1;
  border-radius: 1.75em;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding: 4px;
  transition: transform .35s ease-in-out;
  display: inline-flex;
  position: absolute;
  top: -7px;
  right: -14px;
  transform: scale(1.01);
}

.header__cart-toggle[aria-expanded="true"] .header__cart-count, .header__cart-toggle:hover .header__cart-count {
  transform: scale(1.2);
}

@media screen and (max-width: 640px) {
  .header__cart-icon .icon-state__secondary.icon-state__secondary {
    left: 8px;
  }

  .header__action-item .icon--lock-2 {
    display: block;
  }

  .header__search-bar-wrapper {
    visibility: hidden;
    background: var(--header-background);
    z-index: -1;
    width: 100%;
    padding: 0 20px;
    transition: visibility .25s ease-in-out, margin-bottom .25s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .header__search-bar-wrapper.is-visible {
    visibility: visible;
    margin-bottom: -59px;
  }

  .header__search-bar-wrapper.is-fixed {
    z-index: 10;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }
}

@media screen and (min-width: 641px) {
  .header__action-list {
    padding-left: 28px;
  }

  .header__action-item, .header__action-item-content {
    position: relative;
  }

  .header__action-item-content {
    max-width: max-content;
  }

  .header__action-item .icon--lock-2 {
    vertical-align: text-top;
  }
}

@media screen and (min-width: 1000px) {
  .header__action-list {
    padding-left: 5px;
  }

  .header__action-item:not(:last-child):after {
    content: "";
    background: var(--header-border-color);
    width: 1px;
    height: 34px;
    position: absolute;
    top: calc(50% - 17px);
    right: 0;
  }

  .header__action-item--currency {
    margin-right: 20px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1279px) {
  .header__action-item:not(.header__action-item--currency):not(.header__action-item--locale):after {
    display: none;
  }

  .header__action-item--currency + .header__action-item--locale {
    padding-left: 9px;
  }

  .header__action-item.hidden-tablet-and-up:first-child + .header__action-item {
    padding-left: 35px;
  }
}

@media screen and (min-width: 1280px) {
  .header__action-item {
    padding: 0 35px;
  }

  .header__action-item:last-child {
    padding-right: 0;
  }

  .header__action-item--currency, .header__action-item--locale {
    margin-right: 0;
  }

  .header__cart-icon {
    margin-right: 22px;
    display: inline-block;
    top: -1px;
  }
}

.search-bar {
  z-index: 1;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  min-width: 100%;
  padding-bottom: 15px;
  position: relative;
}

.search-bar__top {
  background: var(--secondary-background);
  color: var(--text-color);
  z-index: 1;
  border-radius: 3px;
  align-items: center;
  height: 44px;
  display: flex;
  position: relative;
}

.search-bar__input-wrapper {
  flex: 1 0 auto;
  height: 100%;
  position: relative;
}

.search-bar__input {
  color: var(--heading-color);
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 15px 1px;
  line-height: normal;
}

.search-bar__input::placeholder {
  color: var(--text-color);
  opacity: 1;
}

.search-bar__input::-ms-clear {
  display: none;
}

.search-bar__input:focus {
  outline: none;
}

.search-bar__input-clear {
  opacity: .5;
  display: none;
  position: absolute;
  top: calc(50% - 9px);
  right: 15px;
}

.search-bar__input-clear svg {
  width: 17px;
  height: 17px;
  display: block;
}

.search-bar__input.is-filled + .search-bar__input-clear {
  display: block;
}

.search-bar__filter {
  border-left: 1px solid var(--header-border-color);
  display: none;
}

.search-bar__filter-label {
  height: 44px;
  padding: 0 30px 0 25px;
  line-height: 43px;
  display: block;
}

.search-bar__filter-label svg {
  width: 12px;
  height: 8px;
  margin-left: 11px;
}

.search-bar__submit {
  color: var(--secondary-background);
  background: var(--header-accent-color);
  border-radius: 0 3px 3px 0;
  flex: none;
  width: 50px;
  height: 100%;
}

.search-bar__submit svg {
  position: relative;
}

.search-bar__submit .icon--search {
  width: 21px;
  height: 21px;
}

.search-bar__submit .icon--search-loader {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  display: none;
}

.search-bar__inner {
  color: var(--text-color);
  background: none;
  width: 100vw;
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  overflow: hidden;
}

.search-bar__results, .search-bar__menu-wrapper {
  background: var(--secondary-background);
  width: 100%;
  display: none;
  position: relative;
  top: 0;
  left: 0;
  box-shadow: 0 1px 5px 2px #0000001a;
}

.search-bar__results[aria-hidden="false"], .search-bar__menu-wrapper[aria-hidden="false"], .search-bar.is-expanded .search-bar__inner {
  display: block;
}

.search-bar__empty-state {
  text-align: center;
  padding: 50px 0;
}

.search-bar__result-products ~ .search-bar__empty-state {
  display: none;
}

.search-bar__menu-title {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  margin-bottom: 4px;
}

.search-bar__menu-wrapper {
  overscroll-behavior: none;
  height: 100%;
  padding: 18px 0 12px;
  overflow: auto;
}

.search-bar__menu-title, .search-bar__menu-link {
  padding-left: 20px;
  padding-right: 20px;
}

.search-bar__menu-link {
  padding-top: 6px;
  padding-bottom: 6px;
  transition: color .15s ease-in-out, background .15s ease-in-out;
  display: block;
}

.search-bar__menu-link:hover, .search-bar__menu-link:focus {
  background: var(--accent-background);
  color: var(--accent-color);
  outline: none;
}

.search-bar__results .skeleton-container {
  display: none;
}

.search-bar__results {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  overscroll-behavior: none;
  height: 100%;
  overflow: auto;
}

.search-bar__result-category {
  text-transform: uppercase;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  font-weight: var(--text-font-bolder-weight);
  background: var(--background);
  box-shadow: 0 1px var(--border-color), 0 -1px var(--border-color);
  margin: 0;
  padding: 4px 20px;
}

.search-bar__result-item {
  align-items: center;
  padding: 15px 20px;
  transition: background .2s ease-in-out;
  display: flex;
}

.search-bar__result-item:not(.search-bar__result-item--skeleton):hover, .search-bar__result-item:not(.search-bar__result-item--skeleton):focus {
  background: var(--accent-background);
  outline: none;
}

.search-bar__result-item--skeleton {
  max-width: 300px;
}

.search-bar__image-container {
  flex: none;
  width: 60px;
  margin-right: 20px;
}

.search-bar__image-container img {
  color: #0000;
}

.search-bar__item-info {
  flex: 1 0 0;
}

.search-bar__item-title {
  margin-bottom: 0;
  line-height: 1.4;
}

.search-bar__item-price {
  color: var(--accent-color);
}

.search-bar__result-link {
  padding: 5px 20px;
  transition: color .2s ease-in-out, background .2s ease-in-out;
  display: block;
}

.search-bar__result-link:hover, .search-bar__result-link:focus {
  color: var(--accent-color);
  background: var(--accent-background);
  outline: none;
}

.search-bar__view-all {
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
  width: 100%;
  padding: 10px;
  transition: background .2s ease-in-out;
  display: block;
}

.search-bar__view-all:hover, .search-bar__view-all:focus {
  background: var(--accent-background);
  outline: none;
}

.search-bar__view-all svg {
  width: 6px;
  height: 10px;
  margin-left: 12px;
}

.search-bar__view-all path {
  stroke-width: 2.5px;
}

.search-bar.is-loading .search-bar__results-inner, .search-bar.is-loading .search-bar__submit .icon--search {
  display: none;
}

.search-bar.is-loading .skeleton-container, .search-bar.is-loading .search-bar__submit .icon--search-loader {
  display: block;
}

@media screen and (max-width: 640px) {
  .search-bar {
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }

  .search-bar__inner {
    height: calc(100vh - 26px);
    max-height: 0;
    top: 100%;
  }

  .search-bar__top-wrapper {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .search-bar__top {
    flex-grow: 1;
  }

  .search-bar__close-button {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
    opacity: 0;
    width: 0;
    height: 0;
    transition: width .25s ease-in-out, opacity .25s ease-in-out;
    overflow: hidden;
  }

  .search-bar__close-text {
    padding-left: 22px;
  }

  .header__search-bar-wrapper.is-visible .search-bar {
    opacity: 1;
    transition-delay: .15s;
  }

  .header__search-bar-wrapper.is-fixed .search-bar {
    padding: 9px 0;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__inner {
    visibility: visible;
    max-height: none;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__inner-animation {
    transition: none;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__close-button {
    opacity: 1;
    white-space: nowrap;
    height: auto;
  }

  @supports (padding: max(0px)) {
    .search-bar__view-all {
      padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)  + 10px);
    }
  }
}

@media screen and (min-width: 641px) {
  .search-bar {
    min-width: 0;
    margin-top: 0;
    padding-bottom: 0;
  }

  .search-bar__inner {
    width: calc(100% - 40px);
    top: 100%;
    left: -5px;
  }

  @supports (--css: variables) {
    .search-bar__inner {
      height: calc(100vh - var(--header-height)  - 40px);
    }
  }

  .search-bar__submit .icon--search {
    top: 1px;
  }

  .search-bar__result-category {
    padding-left: 15px;
  }

  .search-bar__results {
    height: auto;
    max-height: 310px;
  }

  @supports (--css: variables) {
    .search-bar__results {
      max-height: calc(100vh - var(--header-height)  - 40px);
    }
  }

  .search-bar__menu-wrapper {
    height: auto;
    max-height: 310px;
  }

  .search-bar__results, .search-bar__menu-wrapper {
    border-radius: 0 0 3px 3px;
    width: calc(100% - 10px);
    left: 5px;
  }

  .search-bar__menu-title, .search-bar__menu-link {
    padding-left: 25px;
    padding-right: 25px;
  }

  .search-bar.is-expanded .search-bar__top {
    border-bottom-left-radius: 0;
  }
}

@media screen and (min-width: 1280px) {
  .search-bar__filter {
    height: 100%;
    display: block;
    position: relative;
  }

  .search-bar__filter select {
    opacity: 0;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.map {
  background: var(--secondary-background);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 20px;
}

.map__store-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.map__store-name {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 0;
  display: flex;
}

.map__store-name svg {
  width: 12px;
  height: 8px;
}

.map__icon-container {
  transition: transform .2s ease-in-out;
  transform: rotateZ(0);
}

.map__store-name[aria-expanded="true"] .map__icon-container {
  transform: rotateZ(180deg);
}

.map__store-collapsible {
  height: 0;
  transition: height .25s ease-in-out;
  display: block;
  overflow: hidden;
}

.map__store-inner {
  margin-top: -.425em;
}

.map__store-address {
  margin-bottom: 15px;
}

.map__store-address > p {
  margin-bottom: 0 !important;
}

.map__store-hours {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-bottom: 22px;
}

.map__direction-link, .map__map-container {
  margin-bottom: 30px;
}

.map__map-container {
  background-position: center;
  background-size: cover;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.map__gmap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 641px) {
  .map__map-container {
    height: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .map {
    height: 405px;
    padding: 0;
    display: flex;
  }

  .map__store-list {
    border-right: 1px solid var(--border-color);
    width: 50%;
    max-width: 580px;
  }

  .map__map-container {
    flex: 1 0 auto;
    height: 100%;
    margin: 0;
  }

  .map__store-list {
    padding: 0 40px 0 30px;
    overflow: auto;
  }

  .map__store-name {
    padding: 20px 0;
  }

  .map__store-address {
    margin-bottom: 22px;
  }
}

.plyr.plyr--full-ui.plyr--video {
  color: var(--text-color);
  background-color: #0000;
}

.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
  background-color: #0000;
}

.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster {
  background-color: #000;
}

:is(.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster), .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
  background-color: #000;
}

:is(.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster), .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper, .plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video .plyr__controls, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
  background-color: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb), .05);
}

.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover {
  color: rgba(var(--text-color-rgb) .55);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-ms-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--text-color-rgb) .6));
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-moz-range-track {
  background-color: rgba(var(--text-color-rgb) .6);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]::-ms-fill-upper {
  background-color: rgba(var(--text-color-rgb) .6);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 4px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 4px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 4px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
  background-color: var(--text-color);
  color: var(--secondary-background);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip:before {
  border-top-color: var(--text-color);
}

.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
  background-image: linear-gradient(-45deg, rgba(var(--text-color-rgb) .6) 25%, transparent 25%, transparent 50%, rgba(var(--text-color-rgb) .6) 50%, rgba(var(--text-color-rgb) .6) 75%, transparent 75%, transparent);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"] {
  color: var(--secondary-background);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-ms-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--secondary-background-rgb), .6) var(--value, 0));
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-moz-range-track {
  background-color: rgba(var(--secondary-background-rgb), .6);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]::-ms-fill-upper {
  background-color: rgba(var(--secondary-background-rgb), .6);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 4px rgba(var(--secondary-background-rgb), .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 4px rgba(var(--secondary-background-rgb), .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 4px rgba(var(--secondary-background-rgb), .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), .25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), .25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb) .05);
}

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

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

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

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

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  background: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb) .05);
}

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

.video-wrapper {
  cursor: pointer;
  position: relative;
}

.video-wrapper:after {
  content: "";
  padding-bottom: 56.25%;
  display: block;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-wrapper iframe:not([src]) {
  pointer-events: none;
}

.video-wrapper--native:after {
  display: none;
}

.video-wrapper--native .plyr, .video-wrapper--native video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-wrapper--native .plyr__video-wrapper, .video-wrapper--native video {
  height: 100%;
}

.video-wrapper__image-wrapper {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.video-wrapper__image-wrapper, .video-wrapper__image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-wrapper__image {
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center";
}

.icon--play {
  filter: drop-shadow(0 2px 2px #0006);
}

.video-wrapper .icon--play {
  opacity: 1;
  width: 80px;
  height: 80px;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

@media screen and (any-hover: hover) {
  .video-wrapper:hover .icon--play {
    transform: scale(1.15);
  }
}

.video-item {
  max-width: 855px;
  margin: 20px auto;
}

.video-item--stretch {
  max-width: none;
}

.video-item[aria-hidden="true"] {
  display: none;
}

.video-item .video-wrapper iframe {
  visibility: hidden;
  width: 0;
  height: 0;
}

.video-item.is-playing .video-wrapper__image-wrapper {
  visibility: hidden;
  opacity: 0;
}

.video-item.is-playing iframe {
  visibility: visible;
  width: 100%;
  height: 100%;
}

.model-wrapper {
  padding-bottom: 100%;
  position: relative;
}

.model-wrapper .shopify-model-viewer-ui, .model-wrapper model-viewer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mosaic {
  margin: 0 -10px -20px;
}

.mosaic__item {
  padding: 0 10px 20px;
}

.mosaic__item > :first-child {
  min-height: 240px;
}

.mosaic--large .mosaic__item > :first-child {
  min-height: 280px;
}

@media screen and (max-width: 999px) {
  .mosaic--two-columns .mosaic__column:first-child .mosaic__item > :first-child, .mosaic--three-columns .mosaic__column:nth-child(2) .mosaic__item > :first-child {
    min-height: 340px;
  }
}

@media screen and (min-width: 641px) {
  .mosaic {
    margin: 0 -15px -30px;
  }

  .mosaic__item {
    padding: 0 15px 30px;
  }
}

@media screen and (min-width: 1000px) {
  .mosaic {
    display: flex;
  }

  .mosaic__column {
    flex-direction: column;
    flex: 1 0;
    display: flex;
  }

  .mosaic__item {
    flex-direction: column;
    flex: 1 0 auto;
    display: flex;
  }

  .mosaic__item > :first-child {
    flex: 1 0 auto;
    height: 100%;
    min-height: 260px;
  }

  .mosaic--small .mosaic__item > :first-child {
    min-height: 225px;
  }

  .mosaic--large .mosaic__item > :first-child {
    min-height: 300px;
  }

  .mosaic--two-columns .mosaic__column:first-child, .mosaic--three-columns .mosaic__column:nth-child(2) {
    flex-grow: 1.38;
  }
}

.nav-dropdown {
  background: var(--secondary-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  border-radius: 0 0 3px 3px;
  padding: 16px 0;
  list-style: none;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: absolute;
  top: 100%;
}

.nav-dropdown:not(.nav-dropdown--floating) {
  left: -15px;
}

.nav-dropdown--floating {
  border: none;
  border-radius: 3px;
  margin-top: 7px;
}

.nav-dropdown--floating:before {
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 5px 5px -2px #0000001a, 5px 0 5px -2px #0000001a, 0 -5px 5px -2px #0000001a;
}

.nav-dropdown--glued:not(.nav-dropdown--inverse) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.nav-dropdown--glued.nav-dropdown--inverse {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.nav-dropdown--fixed {
  min-height: 420px;
}

.nav-dropdown--restrict {
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 40px);
  overscroll-behavior: contain;
  overflow: auto;
}

@supports (--css: variables) {
  .nav-bar .nav-dropdown .nav-dropdown {
    max-height: calc(100vh - var(--distance-to-top, 0px)  - 40px);
    overscroll-behavior: contain;
    overflow: auto;
  }
}

.nav-dropdown[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.nav-dropdown .icon--nav-triangle-borderless {
  z-index: 1;
  width: 20px;
  height: 9px;
  position: absolute;
  bottom: 100%;
  left: 16px;
}

.nav-dropdown .icon--nav-triangle-left {
  z-index: 1;
  width: 9px;
  height: 20px;
  position: absolute;
  top: 23px;
  right: 100%;
}

.nav-dropdown__item:not(.has-mega-menu) {
  position: relative;
}

.nav-dropdown__link {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 2px 60px 2px 20px;
  display: flex;
}

.nav-dropdown__link svg {
  width: 8px;
  height: 12px;
  margin: 0 -40px 0 65px;
  position: relative;
  top: 1px;
}

.nav-dropdown__link[aria-expanded="true"] {
  color: var(--accent-color);
}

.nav-dropdown .nav-dropdown {
  border-radius: 0 3px 3px 0;
  min-width: 0;
  margin-top: 0;
  top: -17px;
  left: 100%;
}

.nav-dropdown--inverse .nav-dropdown {
  border-radius: 3px 0 0 3px;
  left: auto;
  right: 100%;
}

.nav-dropdown--inverse .nav-dropdown .icon--nav-triangle-left {
  left: 100%;
  right: auto;
  transform: rotateZ(180deg);
}

.nav-dropdown .nav-dropdown--floating {
  border-left: 1px solid var(--border-color);
  top: -16px;
}

.mega-menu {
  background: var(--secondary-background);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  visibility: hidden;
  opacity: 0;
  border-radius: 0 0 3px 3px;
  width: 100vw;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: absolute;
  top: 100%;
  left: 0;
}

.mega-menu--floating {
  max-width: 0;
}

.mega-menu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.mega-menu__inner {
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  max-height: 100%;
  padding: 25px 0 0;
  display: flex;
  overflow: auto;
}

.mega-menu__inner--center {
  justify-content: center;
}

.mega-menu__promo {
  white-space: normal;
  text-align: center;
  flex: 0 230px;
  width: 230px;
  min-width: 200px;
  margin: 0 0 30px 50px;
  display: block;
}

.mega-menu__promo + .mega-menu__promo {
  margin-left: 20px;
}

.mega-menu__column-list {
  flex-wrap: wrap;
  flex: auto;
  min-width: 0;
  margin: 0 -40px;
  display: flex;
}

@supports (display: grid) {
  .mega-menu__column-list {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    display: grid;
  }
}

.mega-menu__column {
  flex: 0 auto;
  margin: 0 30px 30px;
  display: block;
}

.mega-menu:not(.mega-menu--floating) .mega-menu__column:first-child {
  margin-left: 0 !important;
}

.mega-menu:not(.mega-menu--floating) .mega-menu__column:last-child {
  margin-right: 0 !important;
}

.mega-menu__title {
  margin-bottom: 10px;
  display: block;
}

.mega-menu__linklist {
  list-style: none;
}

.mega-menu__link {
  padding: 5px 0 6px;
  line-height: 1.4;
  display: block;
}

.mega-menu__image-wrapper {
  border-radius: 3px;
  margin: 5px 0 22px;
  overflow: hidden;
}

.mega-menu__promo .aspect-ratio {
  transition: transform .6s ease-in-out;
  transform: scale(1.01);
}

.features--animate-zoom .mega-menu__promo:hover .aspect-ratio {
  transform: scale(1.06);
}

.mega-menu__promo:hover .mega-menu__image-heading {
  color: var(--accent-color);
}

.mega-menu__image-heading {
  margin-bottom: 7px;
  transition: color .2s ease-in-out;
  display: block;
}

.mega-menu__image-text {
  line-height: 1.5;
}

.nav-bar .mega-menu {
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 40px);
  overscroll-behavior: contain;
  overflow: auto;
}

@media screen and (min-width: 1280px) {
  .mega-menu__column {
    margin-left: 40px;
    margin-right: 40px;
  }

  .mega-menu__inner--large .mega-menu__column {
    margin-left: 50px;
    margin-right: 50px;
  }

  .mega-menu__promo {
    flex-basis: 290px;
    width: 290px;
  }
}

@media screen and (min-width: 1440px) {
  .mega-menu__inner--center .mega-menu__column {
    margin-left: 45px;
    margin-right: 45px;
  }

  .mega-menu__inner--large .mega-menu__column {
    margin-left: 60px;
    margin-right: 60px;
  }

  .mega-menu__promo {
    min-width: 240px;
  }
}

.mega-menu--floating {
  border: none;
  border-left: 1px solid var(--border-color);
  border-radius: 0 3px 3px 0;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 100%;
}

.mega-menu--floating:before {
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 5px 5px -2px #0000001a, 5px 0 5px -2px #0000001a, 0 -5px 5px -2px #0000001a;
}

.mega-menu--floating .mega-menu__inner {
  margin: 0;
  padding-left: 25px;
  padding-right: 30px;
}

.mega-menu--floating .mega-menu__title {
  margin-bottom: 5px;
}

.mega-menu--floating .mega-menu__column {
  white-space: normal;
  flex: 0 0 170px;
  margin-left: 30px;
  margin-right: 30px;
  display: block;
}

.mega-menu--floating .mega-menu__column-list {
  margin: 0 -30px;
}

.nav-bar {
  display: none;
}

@media screen and (min-width: 1000px) {
  .nav-bar {
    border-bottom: 1px solid var(--border-color);
    background: var(--secondary-background);
    width: 100%;
    display: block;
    position: relative;
    left: 0;
    text-align: center;
  }

  .nav-bar:after {
    content: "";
    background: linear-gradient(to right, rgba(var(--secondary-background-rgb), .1), rgba(var(--secondary-background-rgb), .6) 35%, var(--secondary-background));
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .nav-bar__item {
    margin-right: 35px;
    padding: 17px 0;
    display: inline-block;
    position: relative;
  }

  .nav-bar__item--static {
    position: static;
  }

  .nav-bar__item > .nav-dropdown {
    min-width: calc(100% + 20px);
  }

  .nav-bar__link {
    cursor: pointer;
    display: block;
  }

  .nav-bar__link .icon--arrow-bottom {
    width: 12px;
    height: 8px;
    margin-left: 10px;
  }

  .nav-bar__link .icon--nav-triangle {
    opacity: 0;
    z-index: 2;
    width: 20px;
    height: 9px;
    margin-left: -16px;
    transition: all .2s ease-in-out;
    position: absolute;
    bottom: -1px;
  }

  .nav-bar__link[aria-expanded="true"] {
    color: var(--accent-color);
  }

  .nav-bar__link[aria-expanded="true"] .icon--nav-triangle {
    opacity: 1;
  }
}

.mobile-menu {
  visibility: hidden;
  z-index: 1;
  opacity: 0;
  color: var(--text-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  will-change: transform;
  width: 100vw;
  height: 100vh;
  max-height: 0;
  transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s ease-in-out, max-height 0s linear .25s;
  position: absolute;
  top: 100%;
  left: 0;
  transform: scale(.9);
}

.mobile-menu .icon--arrow-right, .mobile-menu .icon--arrow-left {
  width: 8px;
  height: 12px;
}

.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s cubic-bezier(0, 1, .4, 1), transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
  transform: scale(1);
}

.mobile-menu__inner {
  max-width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.mobile-menu .icon--nav-triangle-borderless {
  z-index: 1;
  width: 18px;
  height: 8px;
  position: absolute;
  bottom: 100%;
  left: 20px;
}

.mobile-menu__panel {
  background: var(--secondary-background);
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), visibility .5s cubic-bezier(.23, 1, .32, 1);
  position: relative;
  overflow: hidden auto;
}

.mobile-menu__panel.is-nested {
  visibility: hidden;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
}

.mobile-menu__section {
  padding: 16px 20px;
}

.mobile-menu__section--loose {
  padding-top: 18px;
  padding-bottom: 18px;
}

.mobile-menu__section:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.mobile-menu__section.is-sticky {
  background: var(--secondary-background);
  z-index: 1;
  position: sticky;
  top: 0;
}

.mobile-menu__nav {
  list-style: none;
}

.mobile-menu__nav-link {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 0 7px;
  display: flex;
}

.mobile-menu__back-button {
  text-align: left;
  width: 100%;
  display: block;
}

.mobile-menu__back-button svg {
  vertical-align: -1px;
  margin-right: 8px;
}

.mobile-menu__nav-list {
  margin-top: 2px;
}

.mobile-menu__nav-list-toggle {
  text-align: left;
  width: 100%;
  padding: 4px 0;
}

.mobile-menu__nav-list-toggle svg {
  width: 12px;
  height: 8px;
  margin-left: 12px;
  transition: transform .3s ease-in-out;
}

.mobile-menu__nav-list-toggle[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.mobile-menu__nav-list-item {
  margin-bottom: 22px;
}

.mobile-menu__nav-collapsible {
  height: 0;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

.mobile-menu__nav-collapsible-content {
  margin-top: 4px;
}

.mobile-menu__promo {
  text-align: center;
  padding: 20px 0 25px;
  display: block;
}

.mobile-menu__image-wrapper {
  border-radius: 3px;
  margin-bottom: 22px;
  overflow: hidden;
}

.mobile-menu__image-heading {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
  margin-bottom: 0;
  display: block;
}

.mobile-menu__image-text {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
}

.mobile-menu__promo-list {
  flex-flow: row;
  margin-left: -10px;
  margin-right: -10px;
  display: flex;
}

.mobile-menu__promo-list .mobile-menu__promo-item {
  white-space: normal;
  scroll-snap-align: center;
  flex: none;
  width: 81%;
}

.mobile-menu__promo-list .mobile-menu__promo {
  margin-left: 10px;
  margin-right: 10px;
}

.scroller .mobile-menu__promo-list:before {
  content: "";
  flex: 0 0 20px;
}

.scroller .mobile-menu__promo-list:after {
  content: "";
  flex: 0 0 13px;
}

@supports (padding: max(0px)) {
  .mobile-menu__section:last-child {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)  + 16px);
  }
}

@media screen and (min-width: 641px) {
  .mobile-menu .icon--nav-triangle-borderless {
    left: 40px;
  }
}

.mobile-menu[aria-hidden="false"] .mobile-menu__panel.is-open {
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu__help-wrapper {
  align-items: center;
  display: flex;
}

.mobile-menu__help-wrapper .icon--bi-phone {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

.mobile-menu__help-wrapper .icon--bi-email {
  width: 22px;
  height: 22px;
  margin-right: 18px;
}

.mobile-menu__help-wrapper + .mobile-menu__help-wrapper {
  margin-top: 18px;
}

.line-item__product-info-wrapper {
  align-items: flex-start;
  display: flex;
}

.line-item__image-wrapper {
  width: 60px;
  min-width: 60px;
  margin-right: 20px;
}

.line-item__meta {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
}

.line-item__vendor, .line-item__plan-allocation, .line-item__property-list {
  line-height: 1.55;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin-bottom: 7px;
  display: block;
}

.line-item__vendor {
  text-transform: uppercase;
}

.line-item__title {
  margin-bottom: 4px;
  line-height: 1.5;
  display: block;
}

.line-item__property-list {
  margin: 6px 0;
  line-height: 1.5;
  list-style: none;
}

.line-item__price {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
  display: inline-block;
}

.line-item__price--compare {
  color: var(--text-color);
}

.line-item__price--highlight {
  color: var(--product-on-sale-accent);
}

.line-item__price--compare {
  margin-left: 20px;
  position: relative;
}

.line-item__price--compare:before {
  content: "";
  background: rgba(var(--text-color-rgb), .7);
  width: calc(100% + 10px);
  height: 1px;
  position: absolute;
  top: 50%;
  left: -5px;
}

.line-item__price-info {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: -2px;
}

.line-item__discount-list {
  margin-top: 2px;
  list-style: none;
}

.line-item__discount {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  background: rgba(var(--product-on-sale-accent-rgb), .08);
  color: var(--product-on-sale-accent);
  border-radius: 2px;
  padding: 0 11px;
  display: inline-block;
}

.line-item__discount svg {
  vertical-align: text-bottom;
  margin-right: 6px;
}

.line-item__quantity-remove {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-left: 10px;
  line-height: 1;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .line-item-table, .line-item-table tbody {
    width: auto;
    display: block;
  }

  .line-item--stack {
    white-space: normal;
    display: block;
  }

  .line-item--stack:first-child {
    border-top: none !important;
  }

  .line-item--stack .line-item__image-wrapper {
    width: 80px;
    min-width: 80px;
  }

  .line-item--stack .line-item__product-info {
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
  }

  .line-item--stack .line-item__title {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  }

  .line-item--stack .line-item__price {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  }

  .line-item--stack .line-item__quantity {
    margin-top: 12px;
  }
}

@media screen and (min-width: 641px) {
  .line-item__product-info-wrapper {
    align-items: center;
  }

  .line-item__title {
    white-space: normal;
  }

  .line-item__image-wrapper {
    width: 90px;
    min-width: 90px;
  }

  .line-item__quantity-remove {
    width: max-content;
    margin: 10px auto 0;
    display: block;
  }
}

.fulfillment-item {
  border-top: none !important;
}

.fulfillment-item td {
  padding-top: 0 !important;
}

.order-foot {
  border-top: 1px solid var(--border-color);
}

.order-foot__item {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 16px 0;
  display: flex;
}

.order-foot__item + .order-foot__item {
  border-top: 1px solid var(--border-color);
}

.order-foot__item--highlight, .order-foot__item--strong {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  font-weight: var(--text-font-bolder-weight);
}

.order-foot__item--highlight {
  color: var(--product-on-sale-accent);
}

.order-foot__item--strong {
  color: var(--heading-color);
}

@media screen and (max-width: 640px) {
  .card .order-foot {
    margin-left: 20px;
  }
}

@media screen and (min-width: 641px) {
  .order-foot__inner {
    max-width: 470px;
    margin-left: auto;
  }

  .order-foot__item {
    padding-left: 20px;
    padding-right: 30px;
  }
}

.order-summary__alert {
  margin: 21px 0 5px;
}

@media screen and (min-width: 641px) {
  .order-summary__alert {
    margin: 24px 0 12px;
  }
}

.address-list, .address-list__item + .address-list__item {
  border-top: 1px solid var(--border-color);
}

.address-list__item {
  padding: 24px 20px;
}

.address-list__action-list {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: 14px;
}

.address-list__action-list > :last-child {
  margin-left: 18px;
}

@media screen and (max-width: 640px) {
  .address-list, .address-list__item + .address-list__item {
    border-top: none;
    display: block;
    position: relative;
  }

  .address-list:before, .address-list__item + .address-list__item:before {
    content: "";
    background: var(--border-color);
    width: calc(100% - 20px);
    height: 1px;
    position: absolute;
    top: 0;
    left: 20px;
  }
}

@media screen and (min-width: 641px) {
  .template-addresses .card__section--tight {
    padding-right: 20px;
  }

  .address-list {
    flex-wrap: wrap;
    display: flex;
  }

  .address-list__item {
    box-shadow: 0 1px var(--border-color), 1px 0 var(--border-color);
    flex-direction: column;
    flex: 0 0 50%;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    border-top: none !important;
  }
}

@media screen and (min-width: 1280px) {
  .address-list__item {
    flex-basis: 33.3333%;
  }
}

.page__header {
  justify-content: space-between;
  align-items: flex-end;
  margin: 28px 0;
  display: flex;
}

.page__header--stack {
  flex-direction: column;
  align-items: flex-start;
}

.page__header--centered {
  text-align: center;
  justify-content: center;
}

.page__header--stack.page__header--centered {
  align-items: center;
}

.page__header--image {
  text-shadow: 1px 2px 4px #0003;
  background-position: center;
  background-size: cover;
  border-radius: 3px;
  justify-content: center;
  min-height: 250px;
  padding: 25px;
  position: relative;
  overflow: hidden;
}

.page__header--image.page__header--overlay:before {
  content: "";
  background: linear-gradient(#0000, #0000004d);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.shopify-section:first-child .page__header--image {
  border-radius: 0;
  margin-top: 0 !important;
}

.page__header-image {
  object-position: center;
  object-fit: cover;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page__header-image--placeholder {
  fill: #696969;
  background: #a9a9a9;
}

.page__header-content {
  z-index: 1;
}

.page__title {
  margin-bottom: 0;
}

.page__sub-header {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin: 10px 0;
  display: none;
}

.page__description {
  margin: 10px 0 0;
}

.page__button-action {
  margin-top: 20px;
}

.page__tag-list {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin: 12px -20px -10px;
  list-style: none;
}

.page__tag-item {
  margin: 0 20px 10px;
  display: inline-block;
  position: relative;
}

.page__tag-item.is-selected {
  color: var(--accent-color);
}

.page__tag-item.is-selected:after {
  content: "";
  background: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.page__meta {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin-top: 8px;
}

.page__meta-item:not(:last-child):after {
  content: "";
  background: rgba(var(--text-color-rgb), .4);
  vertical-align: middle;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  margin: 0 10px;
  display: inline-block;
}

.page__navigation-item svg {
  width: 6px;
  height: 9px;
}

.page__navigation-item svg path {
  stroke-width: 1.5px;
}

.page__navigation-item--prev svg {
  margin-right: 9px;
}

.page__navigation-item--next svg {
  margin-left: 9px;
}

.page__navigation-item--prev + .page__navigation-item--next:before {
  content: "";
  background: var(--text-color);
  vertical-align: -2px;
  width: 1px;
  height: 12px;
  margin: 0 15px;
  display: inline-block;
}

.page__content {
  margin-bottom: 40px;
}

@media screen and (min-width: 641px) {
  .page__header {
    margin: 35px 0;
  }

  .page__header--image {
    min-height: 430px;
  }

  .page__sub-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .page__sub-header + .page__header {
    margin-top: 20px;
  }

  .page__meta {
    margin-top: 10px;
    font-size: 1rem;
  }

  .page__meta-item:not(:last-child):after {
    margin: 0 16px;
  }

  .page__content {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
    margin-bottom: 90px;
  }
}

@media screen and (min-width: 1000px) {
  .page__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page__header--centered {
    align-items: center;
  }
}

.popover {
  background: var(--secondary-background);
  color: var(--text-color);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  will-change: transform;
  width: 100vw;
  transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s ease-in-out;
  position: absolute;
  top: 100%;
  left: 0;
  transform: scale(.9);
}

.popover .icon--nav-triangle-borderless {
  right: 67px;
}

.popover--large {
  text-align: center;
}

.popover[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity .4s cubic-bezier(0, 1, .4, 1), transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
  transform: scale(1.001);
}

.popover__inner {
  padding: 15px 20px 20px;
}

.popover__inner--no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.popover .icon--nav-triangle-borderless {
  z-index: 2;
  filter: drop-shadow(0 -2px 2px #0000001f);
  width: 18px;
  height: 8px;
  position: absolute;
  bottom: 100%;
}

.popover__header {
  padding: 12px 0 30px;
}

.popover__title {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 20px));
  margin-bottom: 4px;
}

.popover__legend {
  margin-bottom: 16px;
}

.popover__secondary-action {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: 16px;
}

.popover__secondary-action > p {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .popover__panel-list, .popover__panel {
    height: 100% !important;
  }

  .popover__inner {
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
    overflow: auto;
  }
}

@media screen and (min-width: 641px) {
  .popover {
    border-radius: 3px;
    width: auto;
    min-width: 160px;
    top: calc(100% + 15px);
    left: auto;
    right: -2px;
    box-shadow: 0 1px 5px 2px #0000001a;
  }

  .popover .icon--nav-triangle-borderless {
    right: 27px;
  }

  .popover--large {
    min-width: 320px;
  }

  .popover__inner {
    padding: 15px 25px;
  }

  .popover__inner--restrict {
    max-height: 340px;
    overflow: auto;
  }

  .popover__header {
    padding-bottom: 15px;
  }

  .popover__title {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .popover {
    top: calc(100% + 4px);
  }
}

.popover__linklist {
  white-space: nowrap;
  list-style: none;
}

.popover__link-item {
  cursor: pointer;
  width: 100%;
  padding: 2px 25px;
  transition: color .15s ease-in-out, background .15s ease-in-out;
  display: block;
}

.popover__link-item:hover {
  background: var(--accent-background);
  color: var(--accent-color);
}

.popover__panel-list {
  transition: height .2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.popover__panel {
  visibility: hidden;
  width: 100%;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), visibility .5s cubic-bezier(.23, 1, .32, 1);
}

.popover__panel--default {
  transform: translateX(-100%);
}

.popover__panel--sliding {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
}

.popover[aria-hidden="false"] .popover__panel.is-selected {
  visibility: visible;
}

.popover__panel.is-selected {
  transform: translateX(0);
}

.popover--password .icon--nav-triangle-borderless {
  right: 21px;
}

.popover--currency, .popover--locale {
  min-width: 0;
}

@media screen and (min-width: 641px) {
  .popover--password .popover__inner {
    padding-bottom: 25px;
  }

  .popover--password .icon--nav-triangle-borderless {
    right: calc(50% - 13px);
  }

  .popover--currency {
    top: calc(100% + 3px);
    right: -27px;
  }

  .popover--currency .icon--nav-triangle-borderless {
    right: 23px;
  }

  .popover--locale {
    top: calc(100% + 3px);
    right: -26px;
  }

  .popover--locale .icon--nav-triangle-borderless {
    right: 23px;
  }

  .popover--logged {
    right: -47px;
  }

  .popover--logged .icon--nav-triangle-borderless {
    right: 50px;
  }

  .popover--unlogged {
    right: -5px;
  }

  .popover--unlogged .icon--nav-triangle-borderless {
    right: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .popover--password {
    top: calc(100% + 15px);
    right: -2px;
  }

  .popover--logged {
    right: -32px;
  }

  .popover--logged .icon--nav-triangle-borderless {
    right: 29px;
  }

  .popover--unlogged {
    right: 0;
    transform: scale(.9)translateX(calc(50% - 7px));
  }

  .popover--unlogged .icon--nav-triangle-borderless {
    left: calc(50% - 8px);
  }

  .popover--unlogged[aria-hidden="false"] {
    transform: scale(1)translateX(calc(50% - 7px));
  }
}

.product-gallery {
  margin-bottom: 12px;
  position: relative;
}

.product-gallery__carousel-wrapper {
  margin-bottom: 25px;
  position: relative;
}

.product-gallery__carousel .flickity-viewport {
  transition: height .2s ease-in-out;
}

.product-gallery__carousel:not(.flickity-enabled) .product-gallery__carousel-item:not(.is-selected) {
  display: none;
}

.product-gallery .flickity-slider {
  will-change: unset;
}

.product-gallery__carousel-item {
  width: 100%;
  padding: 0 20px;
}

.product-gallery__carousel-item--hidden, .product-gallery__carousel-item[aria-hidden="true"] .plyr__control {
  visibility: hidden;
}

.product-gallery__carousel-item.is-filtered {
  display: none;
}

.product-gallery__size-limiter {
  margin: 0 auto;
}

.product-gallery__view-in-space {
  background: rgba(var(--text-color-rgb), .08);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.product-gallery__view-in-space[data-shopify-xr-hidden] {
  visibility: hidden;
}

@media screen and (min-width: 1000px) {
  .product-gallery__view-in-space[data-shopify-xr-hidden] {
    display: none;
  }
}

.product-gallery__view-in-space svg {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: -1px 8px 0 0;
}

.product-gallery__zoom-notice {
  display: none;
}

.product-gallery__zoom-notice svg {
  vertical-align: baseline;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

.product-gallery__carousel--zoomable ~ .product-gallery__zoom-notice {
  text-align: center;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  width: 100%;
  margin: 12px 0 6px;
  display: block;
}

@media screen and (max-width: 640px) {
  .product-gallery__carousel {
    margin-left: calc(-1 * var(--mobile-container-gutter));
    margin-right: calc(-1 * var(--mobile-container-gutter));
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__carousel {
    margin: -4px;
  }

  .product-gallery__carousel-item {
    padding: 4px;
  }

  .product-gallery--with-thumbnails {
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .product-gallery--with-thumbnails .product-gallery__carousel-wrapper {
    flex: 1 0 auto;
    margin: 10px 5px 0 42px;
  }
}

@media screen and (min-width: 1000px) and (any-hover: hover) {
  .product-gallery__carousel--zoomable ~ .product-gallery__zoom-notice {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
    margin-top: 26px;
  }

  .product-gallery__zoom-notice svg {
    margin-right: 14px;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery {
    margin-bottom: 0;
  }
}

@media screen and (hover: none) {
  .product-gallery__zoom-notice {
    display: none !important;
  }
}

.product-gallery__thumbnail {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 3px;
  width: 60px;
  margin: 0 4px;
  padding: 2px;
  transition: border .2s ease-in-out;
  display: block;
  position: relative;
}

.product-gallery__thumbnail.is-nav-selected {
  border-color: var(--accent-color);
}

.product-gallery__thumbnail.is-filtered {
  display: none;
}

.product-gallery__thumbnail-badge {
  z-index: 1;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 3px;
}

@media screen and (max-width: 999px) {
  .product-gallery__thumbnail-list:after, .product-gallery__thumbnail-list:before {
    content: "";
    vertical-align: middle;
    width: calc(var(--mobile-container-gutter)  - 4px);
    display: inline-block;
  }

  .product-gallery__thumbnail {
    vertical-align: top;
    display: inline-block;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .product-gallery .scroller {
    margin: 0 -15px;
  }
}

@media screen and (min-width: 641px) {
  .product-gallery__thumbnail {
    width: 72px;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__thumbnail-list {
    z-index: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: contain;
    width: 96px;
    max-height: 450px;
    margin: -2px 0 -2px -3px;
    position: relative;
    overflow: auto;
  }

  .product-gallery__thumbnail-list::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .product-gallery__thumbnail {
    margin: 8px 4px;
  }
}

.product-meta {
  margin: -11px 0 5px;
  position: relative;
}

.product-meta__title {
  margin-bottom: 14px;
  text-align: center;
}

.modal .product-meta__title {
  margin-right: 45px;
}

.product-meta__label-list {
  margin-bottom: 17px;
  font-size: 0;
}

.product-meta__label-list .product-label + .product-label {
  margin-left: 5px;
}

.product-meta__reference {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-bottom: 3px;
}

.product-meta__reviews-badge {
  display: block;
}

.product-meta__vendor {
  text-transform: uppercase;
}

.product-meta__vendor + .product-meta__sku:before {
  content: "";
  background: var(--border-color);
  vertical-align: middle;
  width: 1px;
  height: 13px;
  margin: 0 14px;
  display: inline-block;
  position: relative;
  top: -1px;
}

.product-meta__share-buttons {
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  display: flex;
  position: relative;
}

.product-meta__share-buttons .social-media__item svg {
  opacity: .35;
}

.card__separator + .product-meta__share-buttons {
  margin-top: 0;
}

.product-meta__button, .product-meta__description, .product-meta__text {
  margin-bottom: 25px;
}

.product-meta__reviews-badge .rating__caption {
  margin-left: 12px;
}

.product-form__payment-container + .product-meta__description, .product-form__payment-container + .product-meta__text {
  margin-top: 25px;
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {
  .product-meta__share-buttons {
    margin-top: 0;
  }

  .product-meta__label-list + .product-meta__share-buttons {
    margin-top: 22px;
  }

  .product-meta__reference, .product-meta__reviews-badge {
    margin-bottom: -2px;
  }

  .product-meta__reviews-badge {
    width: -moz-fit-content;
    width: fit-content;
    margin-top: -4px;
  }

  .product-meta__reference ~ .product-meta__share-buttons, .product-meta__reviews-badge ~ .product-meta__share-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .product-meta__reference + .product-meta__reviews-badge {
    margin-top: 5px;
  }

  .product-meta__reviews-badge .rating__caption {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  }
}

.product-form__variants {
  margin-bottom: 24px;
}

.product-form__option {
  margin-bottom: 23px;
}

.no-js .product-form__option:not(.no-js) {
  display: none;
}

.product-form__option-name {
  margin-bottom: 2px;
  display: block;
}

.product-form__selected-value {
  color: var(--text-color);
  padding-left: 2px;
  align-items: center;
}

.product-form__info-list {
  border-spacing: 0 22px;
  width: 100%;
  margin: -22px 0 6px;
  display: table;
}

.product-form__info-item {
  display: table-row;
}

.product-form__info-title {
  vertical-align: baseline;
  white-space: nowrap;
  padding-right: 12px;
  display: table-cell;
}

.product-form__info-item--quantity > * {
  vertical-align: middle;
  padding-top: 6px;
}

.product-form__info-content {
  width: 100%;
  display: table-cell;
}

.product-form__price-info {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  margin-top: 5px;
}

.product-form__price-info + .product-form__price-info {
  margin-top: 0;
}

.product-form__quantity-with-rules {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  display: flex;
}

shopify-payment-terms {
  margin-top: 8px;
  display: block;
}

.product-form .select-wrapper {
  vertical-align: middle;
  display: inline-block;
}

.product-form__quantity {
  vertical-align: middle;
  width: 65px;
  display: inline-block;
}

.product-form__inventory.inventory:before {
  margin-right: 14px;
}

.product-form__payment-container {
  flex-direction: column;
  display: flex;
}

.product-form__status-message {
  height: 0;
  margin-top: 18px;
  transition: height .25s ease-in-out;
  overflow: hidden;
}

.product-form .price--compare {
  top: -2px;
}

@media screen and (max-width: 640px) {
  .product-form__payment-container .shopify-payment-button {
    margin-top: 16px;
  }
}

@media screen and (min-width: 641px) {
  .product-form {
    margin-top: -8px;
  }

  .product-form__option-name {
    margin-bottom: 7px;
  }

  .product-form__variants {
    margin-bottom: 26px;
  }

  .product-form__payment-container {
    flex-flow: wrap;
    align-items: flex-start;
    margin: -9px;
  }

  .product-form__payment-container > * {
    flex: none;
    width: calc(50% - 18px);
    margin: 9px;
  }
}

.shopify-payment-button__button--unbranded {
  text-align: center;
  cursor: pointer;
  transition: background .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out;
  display: inline-block;
  position: relative;
  background: var(--secondary-button-background) !important;
  color: var(--secondary-button-text-color) !important;
  line-height: 48px !important;
  font-weight: var(--text-font-bolder-weight) !important;
  font-size: var(--base-text-font-size) !important;
  border-radius: 2px !important;
  padding: 0 30px !important;
}

.shopify-payment-button__button--unbranded:hover {
  background: rgba(var(--secondary-button-background-rgb), .8) !important;
}

shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 48px;
  --shopify-accelerated-checkout-button-border-radius: 2px;
  --shopify-accelerated-checkout-button-box-shadow: none;
}

.product-block-list__item:empty {
  display: none;
}

.product-block-list__item--trust .icon--lock {
  color: var(--heading-color);
  width: 18px;
  height: 24px;
}

.product-block-list__item--shipping .shipping-estimator {
  margin-top: -.435em;
  margin-bottom: 10px;
}

.product-block-list__item--shipping .shipping-estimator__results {
  margin-top: 26px;
  margin-bottom: -10px;
}

.product__refund-policy-link {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.product__refund-policy-link svg {
  width: 8px;
  height: 12px;
}

@media screen and (max-width: 640px) {
  .product-block-list__item:first-child .card {
    border-top: none;
  }
}

@media screen and (max-width: 999px) {
  .product-block-list__wrapper {
    min-height: 0 !important;
  }

  .product-block-list__item--info > .card {
    top: 0 !important;
  }
}

@media screen and (min-width: 1000px) {
  .product-block-list {
    position: relative;
  }

  .product-block-list__wrapper {
    width: calc(50% - 15px);
    margin-left: 0;
  }

  .product-block-list__item--info {
    width: calc(50% - 15px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 1280px) {
  .product-block-list--medium .product-block-list__wrapper {
    width: calc(55% - 15px);
  }

  .product-block-list--medium .product-block-list__item--info {
    width: calc(45% - 15px);
  }

  .product-block-list--large .product-block-list__wrapper {
    width: calc(60% - 15px);
  }

  .product-block-list--large .product-block-list__item--info {
    width: calc(40% - 15px);
  }
}

.product-info__block-item:empty {
  display: none !important;
}

.product-info__block-item--volume-pricing {
  margin-block-start: 1rem;
}

.product-info__block-item--volume-pricing .table {
  margin-inline-start: 0;
}

.modal .featured-product .card {
  border: none;
}

.modal .featured-product .card:first-child {
  border-right: 1px solid var(--border-color);
}

@media screen and (min-width: 1000px) {
  .featured-product {
    table-layout: fixed;
    width: 100%;
    display: table;
  }

  .featured-product > * {
    vertical-align: top;
    width: 50%;
    display: table-cell;
  }

  .featured-product > :first-child {
    border-radius: 3px 0 0 3px;
  }

  .featured-product > :last-child {
    border-left: none;
    border-radius: 0 3px 3px 0;
  }
}

.product-label {
  color: #fff;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  vertical-align: top;
  border-radius: 3px;
  width: max-content;
  padding: 4px 10px;
  line-height: 1;
  display: inline-block;
}

.product-label--on-sale {
  background: var(--product-on-sale-accent);
  color: var(--product-on-sale-color);
}

.product-label--custom1 {
  background: var(--product-custom-label-1-background);
  color: var(--product-custom-label-1-color);
}

.product-label--custom2 {
  background: var(--product-custom-label-2-background);
  color: var(--product-custom-label-2-color);
}

.price-list {
  align-items: baseline;
  line-height: 1;
  display: inline-flex;
}

.price {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 24px));
  color: var(--accent-color);
}

.price--highlight {
  color: var(--product-on-sale-accent);
  margin-right: .7em;
}

.price--compare {
  color: var(--text-color);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  text-decoration: line-through;
  -webkit-text-decoration-color: rgba(var(--text-color-rgb), .7);
  text-decoration-color: rgba(var(--text-color-rgb), .7);
  position: relative;
}

.inventory {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  padding-left: 1.4em;
  line-height: 1.2;
  display: block;
  position: relative;
}

.inventory:before {
  content: "";
  background: currentColor;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  display: inline-block;
  position: absolute;
  top: .45em;
  left: 0;
}

.inventory--high {
  color: var(--product-in-stock-color);
}

.inventory--low {
  color: var(--product-low-stock-color);
}

.inventory-bar {
  background: var(--border-color);
  border-radius: 3px;
  width: 100%;
  height: 4px;
  margin: 16px 0 10px;
  display: block;
  position: relative;
  overflow: hidden;
}

.inventory-bar--hidden {
  display: none;
}

.inventory-bar__progress {
  width: 0;
  height: 100%;
  transition: width 1.15s ease-in-out;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.inventory--high + .inventory-bar > .inventory-bar__progress {
  background: var(--product-in-stock-color);
}

.inventory--low + .inventory-bar > .inventory-bar__progress {
  background: var(--product-low-stock-color);
}

@media screen and (min-width: 641px) {
  .inventory {
    font-size: 1rem;
  }

  .inventory-bar {
    margin-top: 23px;
  }
}

.color-swatch-list {
  margin: -2px -6px 0;
  padding-left: 4px;
}

.color-swatch {
  vertical-align: middle;
  margin: 6px;
  display: inline-block;
  position: relative;
}

.color-swatch__radio {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.color-swatch__item {
  cursor: pointer;
  background-size: cover;
  width: 18px;
  height: 18px;
  display: block;
  position: relative;
}

.color-swatch__item svg {
  display: none;
}

.color-swatch__item-link {
  background-color: var(--secondary-background);
  box-shadow: 0 0 0 1px var(--form-border-color) inset;
  border-radius: 10px;
  width: auto;
  height: 18px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
  line-height: 18px;
  display: none;
  position: relative;
}

.color-swatch__button {
  vertical-align: middle;
}

.color-swatch__button--labelled {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.color-swatch__label {
  vertical-align: middle;
  margin-left: 14px;
  display: inline-block;
}

.color-swatch__radio:checked + .color-swatch__item:after, .color-swatch__button.is-selected .color-swatch__item:after, .color-swatch__item.is-selected:after {
  content: "";
  border: 2px solid var(--accent-color);
  border-radius: 3px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  position: absolute;
  top: -4px;
  left: -4px;
}

.color-swatch__button.is-selected .color-swatch__label {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.color-swatch--white .color-swatch__item {
  box-shadow: 0 0 0 1px var(--form-border-color) inset;
}

.color-swatch--view-more ~ .color-swatch, .color-swatch--view-more .color-swatch__item {
  display: none;
}

.color-swatch--view-more .color-swatch__item-link {
  display: block;
}

.color-swatch-list--large {
  margin: -4px -8px 0;
}

.color-swatch-list--large .color-swatch {
  margin: 8px;
}

.color-swatch-list--large .color-swatch__item {
  width: 36px;
  height: 36px;
}

.color-swatch-list--stack {
  margin: -3px -7px 0;
}

.color-swatch-list--stack .color-swatch__item {
  width: 16px;
  height: 16px;
}

.color-swatch-list--stack .color-swatch {
  margin: 7px;
  display: block;
}

.color-swatch--disabled .color-swatch__item:before {
  content: "";
  background: rgba(var(--secondary-background-rgb), .5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.color-swatch--disabled svg {
  z-index: 1;
  color: #4a4a4a;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
}

.block-swatch-list {
  margin: -3px -4px 0;
  padding-left: 2px;
}

.block-swatch {
  margin: 4px;
  display: inline-block;
}

.block-swatch__radio {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.block-swatch__item {
  text-align: center;
  border: 1px solid var(--form-border-color);
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(var(--border-color-rgb), .25);
  border-radius: 3px;
  padding: 6px 16px 7px;
  display: block;
}

.block-swatch__radio:checked + .block-swatch__item, .block-swatch__item.is-selected {
  box-shadow: 0 0 0 1px var(--accent-color);
  border-color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), .06);
  color: var(--accent-color);
}

.block-swatch--disabled .block-swatch__item-text {
  opacity: .5;
  position: relative;
}

.block-swatch--disabled .block-swatch__item-text:after {
  content: "";
  background: currentColor;
  width: calc(100% + 6px);
  height: 1px;
  position: absolute;
  top: calc(50% + 1px);
  left: -3px;
}

.variant-swatch-list {
  margin: -5px -5px -2px -4px;
}

.variant-swatch {
  vertical-align: middle;
  margin: 5px;
  display: inline-block;
}

.variant-swatch__radio {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.variant-swatch__item {
  cursor: pointer;
  border: 2px solid #0000;
  width: 64px;
  padding: 2px;
  display: block;
  position: relative;
  overflow: hidden;
}

.variant-swatch__item svg {
  display: none;
}

.variant-swatch__radio:checked + .variant-swatch__item, .variant-swatch__item.is-selected {
  border-color: var(--accent-color);
  border-radius: 3px;
}

.variant-swatch--disabled img {
  opacity: .5;
}

.variant-swatch--disabled svg {
  z-index: 1;
  color: #4a4a4a;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
}

.visual-filter-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.visual-filter {
  position: relative;
}

.visual-filter__radio {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.visual-filter__item {
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--form-border-color);
  box-shadow: 0 1px 1px rgba(var(--border-color-rgb), .25);
  border-radius: 3px;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  padding: 12px 12px 8px;
  font-size: .9em;
  line-height: 1.4;
  display: flex;
  position: relative;
}

.visual-filter__item img {
  width: 32px;
}

.visual-filter__radio:checked + .visual-filter__item, .visual-filter.is-selected {
  box-shadow: 0 0 0 1px var(--accent-color);
  border-color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), .06);
  color: var(--accent-color);
}

.product-item {
  background: var(--m2-card-bg);
  white-space: normal;
  flex-shrink: 0;
  min-width: 0;
  padding: 12px;
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--m2-border);
  box-shadow: var(--m2-shadow-elevated);
  overflow: hidden;
}

.product-item:after {
  content: "";
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.product-item__image-wrapper {
  margin-bottom: 0;
  display: block;
  background: #fff;
  border-radius: 9px 9px 0 0;
  border-bottom: none;
  position: relative;
}

.product-item__image-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: var(--m2-border);
}

.product-item__image-wrapper .placeholder-svg {
  height: auto;
}

.product-item__secondary-image {
  display: none;
}

.product-item__label-list {
  z-index: 2;
  font-size: 0;
  position: absolute;
  top: 11px;
  left: -1px;
}

.product-item__label-list > .product-label {
  border-radius: 0 3px 3px 0;
  margin-bottom: 5px;
  display: block;
}

.product-item__info {
  min-width: 0;
}

.product-item__price-list:first-child {
  margin-bottom: 10px;
}

.product-item__price-list {
  margin-top: -5px;
  margin-bottom: -5px;
}

.product-item__price-list .price {
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.product-item__vendor {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.product-item__vendor, .product-item__title {
  line-height: 1.55;
  display: block;
}

.product-item__title {
  margin-bottom: 12px;
}

.product-item__title + .product-item__vendor {
  margin-top: -4px;
  margin-bottom: 12px;
}

.product-item__swatch-list {
  white-space: nowrap;
  margin: -2px 0 12px;
  overflow: hidden;
}

.product-item__price-info {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-top: 10px;
  line-height: 1;
}

.product-item .price {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
}

.product-item .price--compare {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
}

.product-item__reviews-badge {
  margin-top: 8px;
  display: block;
}

.product-item__inventory {
  margin-top: 10px;
}

.product-item__inventory:before {
  top: .3em;
}

.product-item__inventory {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
}

@media screen and (any-hover: hover) {
  .product-item__image-wrapper--with-secondary .product-item__primary-image, .product-item__image-wrapper--with-secondary .product-item__secondary-image {
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  }

  .product-item__image-wrapper--with-secondary .product-item__secondary-image {
    object-fit: contain;
    object-position: center;
    visibility: hidden;
    opacity: 0;
    display: block;
  }

  .product-item__image-wrapper--with-secondary:hover .product-item__primary-image {
    opacity: 0;
    visibility: hidden;
  }

  .product-item__image-wrapper--with-secondary:hover .product-item__secondary-image {
    visibility: visible;
    opacity: 1;
  }
}

@media screen and (min-width: 641px) {
  .product-item__title {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  }

  .product-item--vertical .price:not(.price--compare), .product-item--list .price:not(.price--compare) {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 20px));
  }
}

@media screen and (min-width: 1000px) {
  .product-item__label-list {
    left: 0;
  }
}

.product-item--vertical .product-item__action-list, .product-item--horizontal .product-item__action-list {
  margin: 20px 0 5px;
}

.product-item--vertical .product-item__action-button, .product-item--horizontal .product-item__action-button {
  padding-left: 10px;
  padding-right: 10px;
}

.product-item--vertical .product-item__action-list--list-view-only, .product-item--vertical .product-item__action-button--list-view-only, .product-item--horizontal .product-item__action-list--list-view-only, .product-item--horizontal .product-item__action-button--list-view-only {
  display: none;
}

.product-item--vertical .product-item__action-button--list-view-only + .product-item__action-button, .product-item--horizontal .product-item__action-button--list-view-only + .product-item__action-button {
  margin-top: 0;
}

@media screen and (min-width: 1000px) {
  .product-item--vertical .product-item__action-list {
    margin: 15px -5px -5px;
  }

  .product-item--vertical .product-item__action-button {
    flex: 1 0 auto;
    margin: 5px !important;
  }
}

.product-item--horizontal, .product-item--list {
  display: flex;
}

.product-item--horizontal .product-item__info, .product-item--list .product-item__info {
  flex: 1 0 0;
  padding: 4px 0;
}

.product-item--horizontal .product-item__image-wrapper, .product-item--list .product-item__image-wrapper {
  flex: none;
  width: 120px;
  margin: 0 20px 0 0;
}

.product-item--horizontal .product-item__action-list, .product-item--list .product-item__action-list {
  align-self: center;
}

.product-item--horizontal .spr-starrating.spr-starrating {
  height: 11px;
}

.product-item--horizontal .spr-starrating .spr-icon.spr-icon {
  width: 11px;
  height: 11px;
}

@media screen and (max-width: 640px) {
  .product-item--horizontal, .product-item--list {
    width: 100% !important;
  }

  .product-list--collection .product-item__label-list, .product-list--stackable .product-item__label-list {
    left: 0;
  }

  .product-list--collection .rating__star, .product-list--stackable .rating__star {
    width: 11px;
    height: 11px;
  }
}

@media screen and (min-width: 641px) {
  .product-item--horizontal .product-item__image-wrapper {
    width: 110px;
    margin-right: 20px;
  }

  .product-item--horizontal .product-item__info {
    flex: 1 0 0;
  }
}

@media screen and (max-width: 640px) {
  .product-item__action-list {
    margin-top: 20px;
  }
}

@media screen and (min-width: 641px) {
  .product-item--list {
    align-items: center;
    padding-right: 25px;
    width: 100% !important;
  }

  .product-item--list .product-item__title {
    font-size: 1rem;
  }

  .product-item--list .product-item__image-wrapper {
    width: 180px;
    margin-right: 30px;
  }

  .product-item--list .product-item__info {
    flex: 1 0 0;
    justify-content: space-between;
    margin: 15px 0;
    display: flex;
  }

  .product-item--list .product-item__action-list {
    min-width: 180px;
    margin-left: 30px;
    display: flex;
  }
}

.product-item--compact .product-item__info {
  padding-top: 0;
}

.product-item--compact .product-item__price-list:first-child {
  margin-bottom: 8px;
}

.product-item--compact .product-item__reviews-badge {
  margin: 15px 0;
}

.complementary-product-list {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  grid-auto-columns: min(74vw, 400px);
  grid-auto-flow: column;
  align-items: start;
  column-gap: 40px;
  margin-inline-start: -20px;
  margin-inline-end: -20px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
  scroll-padding-inline: 20px;
  display: grid;
  overflow: auto;
}

.complementary-product-list:after {
  content: "";
}

.complementary-product-list::-webkit-scrollbar {
  display: none;
}

.product-item--complementary {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-wrap: wrap;
  padding: 0;
}

.product-item--complementary:after {
  display: none;
}

.product-item--complementary .product-item__image-wrapper {
  width: 80px;
}

.product-item--complementary > .product-item__action-list {
  width: 100%;
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {
  .complementary-product-list {
    border: 1px solid var(--border-color);
    grid: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    scroll-padding-inline: 0;
  }

  .complementary-product-list::-webkit-scrollbar {
    display: none;
  }

  .complementary-product-list:after {
    content: "flickity";
    display: none;
  }

  .product-item--complementary {
    width: 50%;
    padding: 20px;
  }
}

.promo-block {
  border-radius: 3px;
  min-height: 240px;
  padding: 20px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.promo-block--small {
  min-height: 220px;
}

.promo-block--large {
  min-height: 260px;
}

.promo-block--top-left, .promo-block--top-center, .promo-block--top-right {
  align-items: flex-start;
}

.promo-block--middle-left, .promo-block--middle-center, .promo-block--middle-right {
  align-items: center;
}

.promo-block--bottom-left, .promo-block--bottom-center, .promo-block--bottom-right {
  align-items: flex-end;
}

.promo-block--top-right, .promo-block--middle-right, .promo-block--bottom-right {
  text-align: right;
  justify-content: flex-end;
}

.promo-block--top-center, .promo-block--middle-center, .promo-block--bottom-center {
  text-align: center;
  justify-content: center;
}

.promo-block--top-left, .promo-block--middle-left, .promo-block--bottom-left {
  text-align: left;
  justify-content: flex-start;
}

.promo-block__image-clip, .promo-block__image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.promo-block__image-clip {
  overflow: hidden;
}

.promo-block__image-wrapper {
  background-position: right calc(100% + 15px);
  background-repeat: no-repeat;
  background-size: auto 185px;
  transition: opacity .2s ease-in-out, background-position .35s ease-in-out;
}

.promo-block__image-wrapper--cover {
  transition: opacity .2s ease-in-out, transform 1.2s ease-in-out;
  transform: scale(1.01);
  background-position: center !important;
  background-size: cover !important;
}

.promo-block__inner {
  z-index: 1;
  position: relative;
}

.promo-block__content {
  margin-bottom: 1em;
}

.promo-block__heading {
  color: inherit;
  margin-bottom: 3px;
}

.promo-block__cta {
  margin-top: 3px;
}

.promo-block--small .promo-block__image-wrapper {
  background-size: auto 155px;
}

.promo-block--overlay:before {
  content: "";
  z-index: 1;
  background: linear-gradient(to top, #0000 15%, #00000080);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (any-hover: hover) {
  .promo-block__image-wrapper {
    background-position: right calc(100% + 35px);
  }

  .promo-block:hover .promo-block__image-wrapper {
    background-position: right calc(100% + 15px);
  }

  .features--animate-zoom .promo-block:hover .promo-block__image-wrapper--cover {
    transform: scale(1.07);
  }
}

@media screen and (min-width: 641px) {
  .promo-block {
    min-height: 270px;
    padding: 26px 30px;
  }

  .promo-block--small {
    min-height: 240px;
  }

  .promo-block--large {
    min-height: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .promo-block {
    min-height: 310px;
  }

  .promo-block--small {
    min-height: 280px;
  }

  .promo-block--large {
    min-height: 360px;
  }

  .promo-block__image-wrapper {
    background-size: auto 260px;
  }

  .promo-block--small .promo-block__image-wrapper {
    background-size: auto 220px;
  }

  .promo-block__heading {
    margin-bottom: 8px;
  }

  .promo-block__cta {
    margin-top: 8px;
  }
}

.rte {
  word-break: break-word;
}

.rte:after {
  content: "";
  clear: both;
  display: block;
}

.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  color: var(--heading-color);
  margin: 1em 0;
}

.rte h1:first-child, .rte h2:first-child, .rte h3:first-child, .rte h4:first-child, .rte h5:first-child, .rte h6:first-child {
  margin-top: 0;
}

.rte h1 {
  margin: 1.4em 0 .7em;
}

.rte h2 {
  margin: 1.55em 0 .6em;
}

.rte h3 {
  margin: 1.8em 0 .8em;
}

.rte h4 {
  margin: 1.9em 0 .6em;
}

.rte h5 {
  margin: 2.2em 0 .7em;
}

.rte h6 {
  margin: 2.5em 0 .6em;
}

.rte p:not(:last-child), .rte ul:not(:last-child), .rte ol:not(:last-child) {
  margin-bottom: .7em;
}

.rte a:not(.button) {
  color: var(--link-color);
  -webkit-text-decoration: var(--text-link-decoration);
  text-decoration: var(--text-link-decoration);
  text-underline-position: under;
  transition: color .2s ease-in-out;
}

.rte a:not(.button):hover {
  color: var(--link-color-hover);
}

.rte p + .button {
  margin-top: 1em;
}

.rte ul, .rte ol {
  margin-left: 18px;
}

.rte ul li, .rte ol li {
  position: relative;
}

.rte ul li:not(:last-child), .rte ol li:not(:last-child) {
  margin-bottom: 5px;
}

.rte ul {
  list-style: none;
}

.rte ul li:before {
  content: "";
  background: rgba(var(--text-color-rgb), .4);
  border-radius: 100%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: .8em;
  left: -18px;
}

.rte ol {
  list-style-position: outside;
}

.rte img {
  margin: 1em 0;
}

.rte .video-wrapper {
  margin: 2.7em 0;
}

.rte blockquote {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  border-left: 5px solid rgba(var(--text-color-rgb), .4);
  margin: 3em 0 3em 10px;
  padding-left: 20px;
}

.rte table {
  margin-top: 2em;
}

@media screen and (min-width: 641px) {
  .rte blockquote {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
    padding-left: 30px;
  }

  .rte .video-wrapper {
    margin: 3em 0;
  }
}

.section {
  margin: 50px 0;
}

.section--tight {
  margin: 30px 0;
}

.section--isolated {
  padding: 50px 0;
  margin: 0 !important;
}

.section--isolated.section--tight {
  padding: 40px 0;
}

.section--text-centered {
  text-align: center;
}

.section__header {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 15px;
  display: flex;
  overflow: hidden;
}

.section__title {
  margin-bottom: 0;
}

.section__action-link {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
  flex-shrink: 0;
  margin-left: 20px;
}

.section__action-link svg {
  display: none;
}

.section__header-stack {
  flex-direction: column;
  display: flex;
}

.section--isolated .heading {
  color: inherit;
}

@media screen and (max-width: 640px) {
  .section__header-stack > .section__title + * {
    margin-top: 10px;
  }
}

@media screen and (min-width: 641px) {
  .section {
    margin: 60px 0;
  }

  .section--tight {
    margin: 40px 0;
  }

  .section--isolated {
    padding: 60px 0;
  }

  .section__header {
    margin-bottom: 20px;
    overflow: visible;
  }

  .section__header--tight {
    margin-bottom: 14px;
  }

  .section__header-stack {
    flex-direction: row;
    align-items: center;
  }

  .section__action-link {
    transition: transform .35s cubic-bezier(.645, .045, .355, 1);
    transform: translateX(26px);
  }

  .section__action-link svg {
    vertical-align: -2px;
    opacity: 0;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
    display: inline-block;
    position: relative;
    right: -5px;
  }

  .section__header-stack > .section__title {
    margin: 0 16px 0 0;
  }
}

@media screen and (any-hover: hover) {
  .section__action-link:hover {
    transform: translateX(0);
  }

  .section__action-link:hover svg {
    opacity: 1;
    right: 0;
  }
}

.slideshow {
  height: 400px;
  overflow: hidden;
}

.slideshow--small {
  height: 350px;
}

.slideshow--large {
  height: 450px;
}

.slideshow__slide {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.slideshow__slide-inner {
  text-align: center;
  background-position: center;
  background-size: cover;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow:not(.flickity-enabled) .slideshow__slide:not(.is-selected) {
  display: none;
}

.slideshow__placeholder {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow__image {
  width: 100%;
}

.slideshow__image-placeholder {
  fill: #696969;
  background: #a9a9a9;
  height: 100%;
}

.slideshow__title {
  color: inherit;
  margin-bottom: 7px;
}

.slideshow__content-wrapper {
  z-index: 1;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 25px;
  position: relative;
}

.slideshow__content {
  max-width: 650px;
  margin: 0 auto 22px;
}

.slideshow .flickity-page-dots {
  bottom: 30px;
}

.slideshow .flickity-page-dots .dot {
  background: #fff;
  border: 3px solid #fff;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  transition: background .25s ease-in-out;
  transform: none !important;
}

.slideshow .flickity-page-dots .dot:before {
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

.slideshow .flickity-page-dots .dot.is-selected {
  background: none;
}

.slideshow__slide--overlay:before {
  display: none;
}

.slideshow--preserve-ratio {
  height: auto !important;
}

.slideshow--preserve-ratio .slideshow__slide {
  height: auto;
}

.slideshow--preserve-ratio .slideshow__slide-inner {
  width: auto;
  height: auto;
  display: block;
  position: relative;
}

.slideshow--preserve-ratio .slideshow__content-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 641px) {
  .slideshow:not(.slideshow--edge2edge) {
    margin: var(--desktop-container-gutter) 0;
  }

  .slideshow:not(.slideshow--edge2edge) .flickity-viewport {
    border-radius: 3px;
  }

  .slideshow__image-placeholder {
    width: 100%;
    height: auto;
  }

  /* Vertical position */
  .slideshow__slide-inner--v-near-top {
    justify-content: flex-start;
  }
  .slideshow__slide-inner--v-near-top .slideshow__content-wrapper {
    padding-top: 20px;
    padding-bottom: 0;
  }
  .slideshow__slide-inner--v-top {
    justify-content: flex-start;
  }
  .slideshow__slide-inner--v-top .slideshow__content-wrapper {
    padding-top: 75px;
    padding-bottom: 25px;
  }
  .slideshow__slide-inner--v-bottom {
    justify-content: flex-end;
  }
  .slideshow__slide-inner--v-bottom .slideshow__content-wrapper {
    padding-top: 25px;
    padding-bottom: 75px;
  }
  .slideshow__slide-inner--v-near-bottom {
    justify-content: flex-end;
  }
  .slideshow__slide-inner--v-near-bottom .slideshow__content-wrapper {
    padding-top: 0;
    padding-bottom: 20px;
  }

  /* Horizontal position - override container centering */
  .slideshow__slide-inner--h-far-left .slideshow__content-wrapper .container,
  .slideshow__slide-inner--h-left .slideshow__content-wrapper .container,
  .slideshow__slide-inner--h-right .slideshow__content-wrapper .container,
  .slideshow__slide-inner--h-far-right .slideshow__content-wrapper .container {
    max-width: none;
    margin: 0;
    padding: 0 15px;
  }

  .slideshow__slide-inner--h-far-left .slideshow__content-wrapper {
    padding-right: 60%;
    padding-left: 2%;
  }
  .slideshow__slide-inner--h-left .slideshow__content-wrapper {
    padding-right: 45%;
    padding-left: 10%;
  }
  .slideshow__slide-inner--h-center .slideshow__content-wrapper {
    /* default centering via container margin: 0 auto */
  }
  .slideshow__slide-inner--h-right .slideshow__content-wrapper {
    padding-left: 45%;
    padding-right: 10%;
  }
  .slideshow__slide-inner--h-far-right .slideshow__content-wrapper {
    padding-left: 60%;
    padding-right: 2%;
  }

  /* Text alignment */
  .slideshow__slide-inner--align-left {
    text-align: left;
  }
  .slideshow__slide-inner--align-left .slideshow__content {
    margin-left: 0;
  }
  .slideshow__slide-inner--align-center {
    text-align: center;
  }
  .slideshow__slide-inner--align-right {
    text-align: right;
  }
  .slideshow__slide-inner--align-right .slideshow__content {
    margin-right: 0;
  }

  /* Preserve-ratio vertical overrides */
  .slideshow--preserve-ratio .slideshow__slide-inner--v-near-top .slideshow__content-wrapper {
    top: 0;
    transform: translateX(-50%);
  }
  .slideshow--preserve-ratio .slideshow__slide-inner--v-top .slideshow__content-wrapper {
    top: 0;
    transform: translateX(-50%);
  }
  .slideshow--preserve-ratio .slideshow__slide-inner--v-middle .slideshow__content-wrapper {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .slideshow--preserve-ratio .slideshow__slide-inner--v-bottom .slideshow__content-wrapper {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
  .slideshow--preserve-ratio .slideshow__slide-inner--v-near-bottom .slideshow__content-wrapper {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1000px) {
  .slideshow {
    height: 430px;
  }

  .slideshow--small {
    height: 380px;
  }

  .slideshow--large {
    height: 520px;
  }
}

.store-availability-container {
  margin-top: 26px;
}

.store-availability-information {
  align-items: baseline;
  display: flex;
}

.icon--store-availability-in-stock, .icon--store-availability-out-of-stock {
  width: 18px;
  height: 14px;
  position: relative;
}

.store-availability-information .icon--store-availability-in-stock {
  top: 2px;
}

.store-availability-information .icon--store-availability-out-of-stock {
  top: 3px;
}

.store-availability-information-container {
  margin-left: 10px;
}

.store-availability-information__title, .store-availability-list__location {
  margin-bottom: -2px;
}

.store-availability-information__stock {
  margin-bottom: 4px;
}

.store-availability-information__stock, .store-availability-list__item-info {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
}

.store-availability-list__item + .store-availability-list__item {
  border-top: 1px solid var(--border-color);
  margin-top: 22px;
  padding-top: 20px;
}

.store-availability-list__stock {
  margin-bottom: 2px;
}

.store-availability-list__stock svg {
  margin-right: 3px;
}

.store-availability-list__contact {
  line-height: 1.45;
}

.store-availability-list__stock .icon--store-availability-in-stock {
  top: -1px;
}

.store-availability-list__contact p {
  margin-bottom: 0;
}

.team {
  text-align: center;
  margin-top: 45px;
  margin-bottom: 62px;
}

.team__block-list {
  margin-bottom: 45px;
}

.team__block-item {
  margin-bottom: 20px;
}

@media screen and (min-width: 641px) {
  .team {
    margin-top: 62px;
    margin-bottom: 80px;
  }

  .team__block-list {
    flex-wrap: wrap;
    justify-content: center;
    margin: -15px -15px 47px;
    display: flex;
  }

  .team__block-item {
    flex: none;
    width: calc(50% - 30px);
    margin: 15px;
  }
}

@media screen and (min-width: 1000px) {
  .team__block-item {
    width: calc(33.3333% - 30px);
  }
}

@media screen and (min-width: 1280px) {
  .team__block-item {
    width: calc(25% - 30px);
  }
}

.team__section-title {
  margin-bottom: 25px;
}

@media screen and (min-width: 641px) {
  .team__section-title {
    margin-bottom: 40px;
  }
}

.team__member {
  border: 1px solid var(--border-color);
  background: var(--secondary-background);
  border-radius: 3px;
  padding: 30px 20px 20px;
}

.team__member-pic {
  border: 1px solid var(--border-color);
  background: var(--background);
  width: 144px;
  margin-bottom: 20px;
  padding: 8px;
}

.team__member-pic--rounded {
  border-radius: 50%;
}

.team__member-title, .team__member-subheading {
  margin-bottom: 0;
  line-height: 1.4;
}

.team__member-title {
  margin-bottom: 6px;
}

.team__member-link {
  margin-top: 6px;
  display: inline-block;
}

.team__promotion {
  border-radius: 3px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  display: flex;
}

.team__promotion .heading {
  color: inherit;
  margin-bottom: 8px;
}

.team__promotion .button {
  min-width: 105px;
  margin-top: 22px;
}

.text-with-icons__item {
  width: 100%;
  line-height: 1.6;
}

.text-with-icons__title {
  margin-bottom: 4px;
}

.text-with-icons__icon-wrapper {
  margin-bottom: 15px;
}

.text-with-icons__icon-wrapper svg {
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

.text-with-icons__icon-wrapper img {
  max-width: 30px;
}

.text-with-icons__content > p {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .text-with-icons {
    text-align: center;
    padding-bottom: 28px;
  }

  .text-with-icons:after {
    content: "flickity";
    display: none;
  }

  .text-with-icons--stacked {
    padding-bottom: 0;
  }

  .text-with-icons--stacked .text-with-icons__item:not(:last-child) {
    margin-bottom: 34px;
  }

  .text-with-icons--stacked:after {
    content: "";
  }
}

@media screen and (min-width: 641px) {
  .text-with-icons {
    flex-wrap: wrap;
    margin: 0 -40px -45px;
    display: flex;
  }

  .page__header + .text-with-icons {
    margin-top: -5px;
  }

  .text-with-icons__item {
    flex-basis: calc(50% - 90px);
    margin: 0 40px 45px;
    display: flex;
  }

  .text-with-icons__icon-wrapper {
    margin: .5em 18px 0 0;
  }
}

@media screen and (min-width: 1000px) {
  .text-with-icons {
    justify-content: center;
    padding: 0 100px;
  }

  .text-with-icons__item {
    flex-basis: calc(50% - 140px);
    display: flex;
  }
}

@media screen and (min-width: 1280px) {
  .text-with-icons {
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: 0 -35px;
    padding: 0;
  }

  .text-with-icons__item {
    flex-basis: calc(25% - 70px);
    margin: 0 35px;
  }
}

.text-with-icons--boxed {
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding-bottom: 0;
  display: block;
}

.text-with-icons--boxed .text-with-icons__item {
  text-align: center;
  padding: 28px 35px;
  display: block;
}

.text-with-icons--boxed .text-with-icons__item:not(:first-child) {
  border-top: 1px solid var(--border-color);
}

.text-with-icons--boxed .text-with-icons__icon-wrapper {
  margin: 0 0 1em;
}

@media screen and (min-width: 641px) {
  .text-with-icons--boxed {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .text-with-icons--boxed .text-with-icons__item {
    flex: 1 0 0;
    margin: 0;
  }

  .text-with-icons--boxed .text-with-icons__item:not(:first-child) {
    border-top: none;
    border-left: 1px solid var(--border-color);
  }
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

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

.skip-to-content:focus {
  clip: auto;
  color: var(--text-color);
  background-color: var(--secondary-background);
  opacity: 1;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px;
  transition: none;
}

.list--unstyled {
  list-style: none;
}

.collapsible {
  height: 0;
  transition: height .2s ease-in-out;
  overflow: hidden;
}

.social-media__item-list {
  flex-wrap: wrap;
  margin: -5px;
  display: flex;
}

.social-media__item {
  margin: 5px;
  display: inline-block;
}

.social-media__item > a {
  display: block;
}

.social-media__item svg {
  opacity: .4;
  will-change: opacity;
  width: 28px;
  height: 28px;
  transition: color .25s ease-in-out, opacity .25s ease-in-out;
}

.social-media__item-list--stack {
  margin: -10px 0;
  display: block;
}

.social-media__item-list--stack .social-media__item {
  margin: 0;
  padding: 7px 0;
  display: block;
}

.social-media__item-list--stack svg {
  vertical-align: top;
  margin-right: 12px;
}

@media screen and (any-hover: hover) {
  .social-media__item:hover svg {
    opacity: 1;
  }

  .social-media__item--facebook:hover svg {
    color: #3b5998;
  }

  .social-media__item--twitter:hover svg {
    color: #1da1f2;
  }

  .social-media__item--pinterest:hover svg {
    color: #bd081c;
  }

  .social-media__item--instagram:hover svg {
    color: #d83776;
  }

  .social-media__item--youtube:hover svg {
    color: red;
  }

  .social-media__item--tiktok:hover svg {
    color: #fd355a;
  }

  .social-media__item--vimeo:hover svg {
    color: #1ab7ea;
  }

  .social-media__item--linkedin:hover svg {
    color: #0077b5;
  }

  .social-media__item--snapchat:hover svg {
    color: #f5dc30;
  }

  .social-media__item--tumblr:hover svg {
    color: #35465c;
  }

  .social-media__item--fancy:hover svg {
    color: #494e58;
  }

  .social-media__item--rss:hover svg {
    color: #f26522;
  }
}

/* ──────────────────────────────────────────────────────────────────
   FREE SHIPPING PROGRESS
   Message + progress bar for the cart page and cart drawer. Markup is
   in snippets/free-shipping-progress.liquid. All colors/typography come
   from the theme's CSS custom properties (--accent-color, --text-color,
   --background, etc.) which already swap under [data-theme="light"], so
   dark/light theming is automatic — no per-mode rules needed here.
   ────────────────────────────────────────────────────────────────── */
.free-shipping-progress {
  display: block;
  margin: 0 0 20px;
  text-align: center;
}
.free-shipping-progress__message {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-color);
}
.free-shipping-progress__amount {
  font-weight: var(--text-font-bolder-weight, 700);
  color: var(--accent-color);
  white-space: nowrap;
}
.free-shipping-progress.is-qualified .free-shipping-progress__message {
  color: var(--accent-color);
  font-weight: var(--text-font-bolder-weight, 700);
}
.free-shipping-progress__track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  /* Faint tint of the text color so the empty track reads as a subtle
     groove in both light and dark modes. */
  background: rgba(var(--text-color-rgb), 0.12);
}
.free-shipping-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-color);
  /* Animate the fill as the cart total changes between re-renders. */
  transition: width 0.4s ease;
}
.free-shipping-progress--drawer {
  margin-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .free-shipping-progress__fill { transition: none; }
}

.alert {
  white-space: normal;
  word-break: break-all;
  word-break: break-word;
  background: var(--background);
  color: var(--heading-color);
  text-align: left;
  border-radius: 2px;
  margin-bottom: 20px;
  padding: 12px 20px;
  font-size: 1rem;
  display: block;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert--block {
  display: block;
}

.alert--center {
  text-align: center;
}

.alert--tight {
  padding: 6px 14px;
}

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

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

.alert__ribbon {
  align-self: center;
  margin-left: 5px;
  margin-right: 25px;
}

.alert__ribbon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.alert__error-list {
  list-style: none;
}

.alert a {
  text-decoration: underline;
  transition: color .2s ease-in-out;
}

.pagination {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
  border-top: 1px solid var(--border-color);
  padding: 40px 0;
}

.pagination__inner {
  position: relative;
}

.pagination__prev, .pagination__next {
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
}

.pagination__prev svg, .pagination__next svg {
  width: 8px;
  height: 12px;
  position: relative;
}

.pagination__prev {
  left: 0;
}

.pagination__prev svg {
  margin-right: 14px;
}

.pagination__next {
  right: 0;
}

.pagination__next svg {
  margin-left: 14px;
}

.pagination__nav, .pagination__page-count {
  text-align: center;
  display: block;
}

.pagination__nav {
  display: none;
}

.pagination__nav-item {
  margin: 0 2px;
  padding: 8px 11px;
  line-height: 1;
  display: inline-block;
}

.pagination__nav-item.is-active {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  border-radius: 3px;
}

.card .pagination {
  padding: 20px;
}

@media screen and (min-width: 641px) {
  .pagination__nav {
    display: block;
  }

  .pagination__page-count {
    display: none;
  }

  .card .pagination {
    padding: 20px 30px;
  }
}

@media screen and (max-width: 999px) {
  .scroller {
    margin: 0 calc(-1 * var(--mobile-container-gutter));
    overflow: hidden;
  }

  .scroller--flush {
    margin: 0 !important;
  }

  .scroller__inner {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
    margin-bottom: -20px;
    padding-bottom: 20px;
    overflow: auto hidden;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .scroller {
    margin: 0 calc(-1 * var(--desktop-container-gutter));
  }

  .scroller__inner {
    scroll-padding-left: var(--desktop-container-gutter);
  }

  .scroller--mobile-only {
    margin: 0;
    overflow: visible;
  }

  .scroller--mobile-only > .scroller__inner {
    margin-bottom: 0;
    padding-bottom: 0;
    overflow: visible;
  }
}

@keyframes skeletonShimmerAnimation {
  0% {
    opacity: .45;
  }

  100% {
    opacity: .9;
  }
}

.skeleton-container {
  will-change: opacity;
  animation: 1s linear infinite alternate skeletonShimmerAnimation;
}

.skeleton-text {
  background: var(--border-color);
  width: 100%;
  height: 10px;
}

.skeleton-image {
  background: var(--border-color);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.skeleton-paragraph .skeleton-text {
  margin-bottom: 8px;
}

.skeleton-paragraph .skeleton-text:last-child {
  width: 38%;
  margin-bottom: 0;
}

.plus-button {
  width: 10px;
  height: 10px;
  display: block;
  position: relative;
  top: calc(50% - 5px);
  right: 0;
}

.plus-button:before, .plus-button:after {
  content: "";
  background-color: currentColor;
  transition: transform .35s ease-in-out, opacity .35s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-90deg);
}

.plus-button:before {
  opacity: 1;
  width: 10px;
  height: 2px;
}

.plus-button:after {
  width: 2px;
  height: 10px;
}

[aria-expanded="true"] .plus-button:before, [aria-expanded="true"] .plus-button:after {
  transform: translate(-50%, -50%)rotate(90deg);
}

[aria-expanded="true"] .plus-button:before {
  opacity: 0;
}

@media screen and (min-width: 641px) {
  .plus-button--large {
    width: 14px;
    height: 14px;
  }

  .plus-button--large:before {
    width: 14px;
  }

  .plus-button--large:after {
    height: 14px;
  }
}

.shopify-challenge__container {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.shopify-challenge__button.shopify-challenge__button {
  border-color: var(--primary-button-background);
  text-align: center;
  line-height: normal;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  border-radius: 2px;
  min-height: 48px;
  padding: 9px 30px;
  transition: background .25s ease-in-out, color .25s ease-in-out, border .25s ease-in-out;
  display: inline-block;
  position: relative;
}

.shopify-challenge__button.shopify-challenge__button:hover {
  background: rgba(var(--primary-button-background-rgb), .8);
}

@media screen and (min-width: 641px) {
  .shopify-challenge__container {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

.shopify-policy__container {
  max-width: 800px;
}

.shopify-policy__title {
  margin: 30px 0;
}

.shopify-policy__title h1 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 24px));
  color: var(--heading-color);
  margin-bottom: 0;
  line-height: 1.45;
}

@media screen and (min-width: 641px) {
  .shopify-policy__title {
    margin: 30px 0;
  }

  .shopify-policy__title h1 {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 28px));
    line-height: 1.45;
  }
}

.announcement-bar {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  border-bottom: 1px solid var(--header-border-color);
  display: block;
  position: relative;
}

.announcement-bar__content {
  margin-bottom: 0;
  padding: 4px 0;
  display: block;
}

.announcement-bar__content--center {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .announcement-bar__inner {
    text-align: center;
  }
}

@media screen and (min-width: 641px) {
  .announcement-bar {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
    text-align: left;
  }

  .announcement-bar__inner {
    align-items: center;
    display: flex;
  }

  .announcement-bar__content {
    margin-right: auto;
    padding: 7px 0;
  }

  .announcement-bar__content--center {
    padding-left: var(--announcement-bar-button-width, 0px);
    margin-left: auto;
  }

  .announcement-bar__button {
    background: var(--header-accent-color);
    color: var(--secondary-background);
    box-shadow: 0 1px var(--header-accent-color);
    padding: 7px 18px 7px 15px;
  }

  .announcement-bar__button svg {
    vertical-align: text-bottom;
    width: 20px;
    height: 17px;
    margin-right: 12px;
    display: inline-block;
  }

  .announcement-bar__close-container {
    position: relative;
  }

  .announcement-bar__close {
    color: var(--heading-color);
    transition: color .2s ease-in-out;
    position: absolute;
    top: 25px;
    right: 0;
  }

  .announcement-bar__close:hover {
    color: var(--accent-color);
  }

  .announcement-bar__close svg {
    width: 19px;
    height: 19px;
  }

  .announcement-bar__newsletter {
    visibility: hidden;
    text-align: center;
    height: 0;
    transition: height .5s cubic-bezier(.77, 0, .175, 1), visibility .5s cubic-bezier(.77, 0, .175, 1);
    overflow: hidden;
  }

  .announcement-bar__newsletter[aria-hidden="false"] {
    visibility: visible;
  }

  .announcement-bar__newsletter-inner {
    margin: 50px 0;
  }
}

.offer-item {
  background: var(--secondary-background);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 20px;
}

.offer-item__image-wrapper {
  min-width: 70px;
  max-width: 70px;
  margin-bottom: 14px;
}

.offer-item__title {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 17px));
  margin-bottom: 6px;
}

.offer-item__content {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 14px));
}

@media screen and (min-width: 641px) {
  .offer-item {
    padding: 28px 30px;
  }

  .offer-item__image-wrapper {
    min-width: 110px;
    max-width: 110px;
  }
}

@media screen and (min-width: 1280px) {
  .offer-item--inline {
    align-items: center;
    display: flex;
  }

  .offer-item--inline .offer-item__image-wrapper {
    margin: 0 30px 0 0;
  }
}

.image-with-text {
  flex-direction: column;
  display: flex;
}

.image-with-text__image-container {
  margin-bottom: 25px;
}

@media screen and (max-width: 999px) {
  .image-with-text__image-container {
    order: -1;
    width: 100% !important;
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .image-with-text__image-container {
    min-width: 30%;
    max-width: 50%;
  }

  .image-with-text__image-container, .image-with-text__text-container {
    width: 50%;
    margin: 0;
  }

  .image-with-text__text-container:last-child {
    padding-left: 60px;
  }

  .image-with-text__text-container:first-child {
    text-align: right;
    padding-right: 60px;
  }

  .image-with-text__text-container:first-child .image-with-text__text-aligner {
    text-align: left;
    display: inline-block;
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text__image-container {
    min-width: 0;
    max-width: none;
  }
}

@media screen and (min-width: 1280px) {
  .image-with-text__text-container:last-child {
    padding-left: 75px;
  }

  .image-with-text__text-container:first-child {
    padding-right: 75px;
  }
}

.newsletter {
  margin-top: 30px;
}

.newsletter__form {
  padding-bottom: 10px;
}

.newsletter__text {
  margin-top: 16px;
}

.newsletter--compact .newsletter__form {
  padding-bottom: 0;
}

.newsletter--compact .newsletter__text {
  margin-top: 16px;
}

.quick-links {
  text-align: center;
  background: var(--secondary-background);
  border: 1px solid var(--border-color);
  font-size: calc(var(--default-text-font-size)  + 1px);
  border-radius: 3px;
  flex-wrap: wrap;
  list-style: none;
  display: flex;
}

.quick-links__link {
  box-shadow: 1px 0 var(--border-color), 0 1px var(--border-color);
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-transform: none;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 20px 10px;
  transition: color .2s ease-in-out;
  display: flex;
}

.quick-links__link:hover {
  color: var(--accent-color);
}

.quick-links__link--grow {
  flex-grow: 1;
}

.quick-links__image-container {
  flex: auto;
  margin: 0 auto;
  font-size: 0;
  display: block;
}

.quick-links__image-ie-fix {
  margin: 0 auto;
  transition: transform .3s ease-in-out;
}

@media screen and (any-hover: hover) {
  .features--animate-zoom .quick-links__link:hover .quick-links__image-ie-fix {
    transform: scale(1.05);
  }
}

@media screen and (min-width: 641px) {
  .quick-links__link {
    width: 33.3333%;
    padding: 24px;
  }
}

@media screen and (min-width: 1000px) {
  .quick-links__link {
    width: 16.6667%;
  }
}

.breadcrumb__list {
  align-items: center;
  list-style: none;
  display: flex;
}

.breadcrumb__list svg {
  vertical-align: inherit;
  width: 6px;
  height: 8px;
  margin: 0 7px;
}

.loading-bar {
  opacity: 0;
  background: var(--accent-color);
  transform-origin: 0;
  z-index: 50;
  pointer-events: none;
  width: 100%;
  height: 3px;
  transition: transform .25s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

.loading-bar.is-visible {
  opacity: 1;
}

.empty-state {
  text-align: center;
  margin: 100px 0;
}

.empty-state--extra-tight {
  margin: 30px 0;
}

.empty-state--tight {
  margin: 40px 0;
}

.empty-state__heading {
  margin-bottom: 15px;
}

.empty-state__text {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  margin-bottom: 32px;
}

.empty-state__quick-form {
  max-width: 410px;
  margin: 40px auto 25px;
}

.empty-state__button-container {
  margin-top: 16px;
}

.empty-state__button {
  min-width: 230px;
}

.empty-state__icon {
  margin-bottom: 6px;
  display: inline-block;
  position: relative;
}

.empty-state__icon .icon--package {
  width: 46px;
  height: 46px;
}

.empty-state__icon .icon--address {
  width: 46px;
  height: 45px;
}

.empty-state__icon-description {
  margin-bottom: 30px;
}

.empty-state__count {
  line-height: 20px;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  font-weight: var(--text-font-bolder-weight);
  text-align: center;
  background: var(--accent-color);
  color: var(--header-text-color);
  border-radius: 100%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  right: -9px;
}

@media screen and (min-width: 641px) {
  .empty-state {
    margin: 170px 0;
  }

  .empty-state--extra-tight {
    margin: 40px 0;
  }

  .empty-state--tight {
    margin: 105px 0;
  }
}

.payment-list {
  flex-wrap: wrap;
  margin: -4px;
  display: flex;
}

.payment-list__item {
  width: 38px;
  height: 24px;
  margin: 4px;
}

.payment-list__notice {
  margin-top: 18px;
}

.payment-list--centered {
  justify-content: center;
}

.layout {
  margin-bottom: 70px;
}

.layout .layout {
  margin-top: 18px;
  margin-bottom: 0;
}

.layout__section {
  margin-bottom: 18px;
}

.layout .card:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 999px) {
  .layout--reverse {
    flex-direction: column-reverse;
    display: flex;
  }
}

@media screen and (min-width: 641px) {
  .layout {
    margin-bottom: 100px;
  }

  .layout .layout {
    margin-top: 30px;
  }
}

@media screen and (min-width: 1000px) {
  .layout {
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
  }

  .layout--pad {
    padding-top: 25px;
  }

  .layout__section {
    flex: 1 0 0;
    margin: 0 15px;
  }

  .layout__section:only-child {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .layout__section--secondary {
    flex: none;
    width: 260px;
  }

  .layout__section--large-secondary {
    flex: none;
    width: 320px;
  }
}

@media screen and (min-width: 1280px) {
  .layout__section--secondary {
    width: 288px;
  }

  .layout__section--large-secondary {
    width: 365px;
  }
}

.modal {
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out, overlay 1s allow-discrete;
  background: none;
  border: none;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
}

.modal:before {
  content: "";
  pointer-events: none;
  background: #00000059;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.modal[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal[aria-hidden="false"] .modal__dialog {
  transition: transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
  transform: scale(1);
}

.modal__dialog {
  background: var(--secondary-background);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  transition: transform .25s ease-in-out, visibility .25s ease-in-out;
  position: absolute;
  overflow: auto;
  transform: scale(.9);
  box-shadow: 0 1px 2px #0000004d;
}

.modal__loader {
  text-align: center;
  padding: 60px 0;
  display: none;
}

.modal__loader .icon--search-loader {
  color: var(--accent-color);
  width: 35px;
  height: 35px;
}

.modal__header {
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-background);
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
}

.modal__header, .modal__content {
  padding: 20px;
}

.modal__header + .modal__content {
  padding-top: 30px;
}

.modal__title {
  text-align: center;
  margin-bottom: 0;
}

.modal__description {
  text-align: center;
  margin-bottom: 30px;
  display: block;
}

.modal__close {
  color: var(--heading-color);
  z-index: 1;
}

.modal__close svg {
  width: 20px;
  height: 20px;
  display: block;
}

.modal .card {
  background: none;
}

.modal.is-loading .modal__loader {
  display: block;
}

.modal.is-loading .modal__inner {
  display: none;
}

@media screen and (max-width: 640px) {
  .modal__content--ios-push {
    padding-bottom: 45px;
  }
}

@media screen and (min-width: 641px) {
  .modal {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .modal__dialog {
    border-radius: 3px;
    width: 580px;
    height: auto;
    max-height: calc(100% - 80px);
  }

  .modal__dialog--stretch {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .modal__header, .modal__content {
    padding: 30px;
  }

  .modal__header:not(.modal__header--bordered) {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
    position: relative;
  }

  .modal__header--bordered {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .modal__close {
    position: absolute;
    top: 28px;
    right: 28px;
  }

  .modal__description {
    margin-top: -18px;
  }
}

.icon-state {
  vertical-align: middle;
  position: relative;
}

.icon-state .icon-state__primary, .icon-state .icon-state__secondary {
  transition: opacity .35s ease-in-out, transform .35s ease-in-out;
  display: block;
}

.icon-state .icon-state__secondary {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%)scale(.3);
}

.icon-state[aria-expanded="true"] .icon-state__primary {
  opacity: 0;
  transform: scale(.3);
}

.icon-state[aria-expanded="true"] .icon-state__secondary {
  opacity: 1;
  transform: translateY(-50%)scale(1);
}

@media (-moz-touch-enabled: 0), (hover: hover) {
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:before {
    content: attr(data-tooltip);
    white-space: nowrap;
    background: var(--accent-color);
    color: var(--secondary-background);
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    border-radius: 3px;
    padding: 2px 11px;
    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 1px #0001;
  }

  [data-tooltip]:after {
    content: "";
    border-style: solid;
    border-width: 6px;
    border-color: transparent transparent var(--accent-color) var(--accent-color);
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    width: 0;
    height: 0;
    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
    position: absolute;
    bottom: calc(100% - 2px);
    left: calc(50% - 7px);
    transform: rotate(-45deg);
    box-shadow: -1px 1px 1px #0000001a;
  }

  [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
  }

  [data-tooltip-position="bottom-left"]:before {
    top: calc(100% + 4px);
    bottom: auto;
    left: auto;
    right: -6px;
    transform: none;
  }

  [data-tooltip-position="bottom-left"]:after {
    top: calc(100% - 1px);
    left: calc(50% - 6px);
    transform: rotate(135deg);
  }
}

.quantity-selector {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 1px rgba(var(--border-color-rgb), .2);
  vertical-align: middle;
  border-radius: 3px;
  align-items: center;
  height: 38px;
  display: inline-flex;
}

.quantity-selector svg:hover {
  opacity: 1;
}

.quantity-selector .icon--minus {
  width: 10px;
  height: 2px;
}

.quantity-selector .icon--plus {
  width: 10px;
  height: 10px;
}

.quantity-selector__button {
  color: rgba(var(--text-color-rgb), .6);
  touch-action: manipulation;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  transition: color .2s ease-in-out;
  display: flex;
}

.quantity-selector__button:not([disabled]):hover {
  color: var(--heading-color);
}

.quantity-selector__value {
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  background: none;
  border: none;
  width: 32px;
  min-width: 32px;
  padding: 0 5px;
}

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

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

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

.quantity-selector--product {
  height: 44px;
}

.quantity-selector--product .quantity-selector__button {
  padding: 0 16px;
}

.quantity-selector--product .quantity-selector__value {
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  box-shadow: 0 1px rgba(var(--border-color-rgb), .4) inset;
  color: var(--heading-color);
  width: 64px;
  min-width: 64px;
  height: 100%;
}

.shipping-estimator__results {
  margin: 24px 0 2px;
  font-size: 1rem;
}

.shipping-estimator__results p {
  margin-bottom: 6px;
}

.shipping-estimator__results ul {
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
}

.cookie-bar {
  visibility: hidden;
  opacity: 0;
  z-index: 3;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 11px));
  width: 100%;
  transition: transform .35s ease-in-out, opacity .35s ease-in-out, visibility .35s ease-in-out;
  position: fixed;
  bottom: 20px;
  left: 0;
  transform: translateY(100%);
}

.cookie-bar[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.cookie-bar__inner {
  z-index: 4;
  background: var(--secondary-background);
  color: var(--text-color);
  border-radius: 3px;
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
  box-shadow: 0 1px 4px 1px #0000001a;
}

.cookie-bar__text {
  line-height: 1.45;
}

.cookie-bar__button {
  line-height: 30px;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 12px));
  margin-top: 12px;
  padding: 0 16px;
}

.cookie-bar__choice-container {
  margin-top: 5px;
}

@supports (padding: max(0px)) {
  .cookie-bar {
    bottom: max(25px, env(safe-area-inset-bottom, 0px)  + 25px);
  }
}

@media screen and (min-width: 641px) {
  .cookie-bar {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
    bottom: 25px;
  }

  .cookie-bar__inner {
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 20px 25px;
    display: flex;
  }

  .cookie-bar__text {
    line-height: 1.25;
  }

  .cookie-bar__button {
    line-height: 36px;
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
    margin-top: 0;
    padding: 0 18px;
  }

  .cookie-bar__choice-container {
    min-width: -moz-fit-content;
    min-width: fit-content;
    margin-top: 5px;
    margin-left: 25px;
  }
}

.contact {
  margin-bottom: 40px;
}

.contact__store-info {
  margin-top: 50px;
}

.contact__store-heading, .contact__store-image {
  margin-bottom: 30px;
}

@media screen and (min-width: 641px) {
  .contact {
    margin-bottom: 90px;
  }
}

@media screen and (min-width: 1000px) {
  .contact__store-info {
    margin-top: 0;
    margin-left: 25px;
  }
}

.password {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px 0;
  display: flex;
}

@supports (--css: variables) {
  .password {
    height: calc(100vh - var(--header-height, 0px));
  }
}

.password__content {
  text-align: center;
  flex: 1 0 auto;
  align-items: center;
  display: flex;
}

.password__footer {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  text-align: center;
}

.password__footer-social {
  justify-content: center;
  margin-top: 15px;
  display: flex;
}

.password__social-text {
  margin-right: 20px;
}

.password__powered-by a {
  vertical-align: bottom;
  margin-left: 4px;
  display: inline-block;
}

.password__powered-by svg {
  width: 98px;
  height: 28px;
}

.password__admin-link {
  margin-left: 18px;
  display: block;
}

@media screen and (min-width: 1000px) {
  .template-password .header {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .password {
    padding: 40px 0;
  }

  .password__footer {
    text-align: left;
  }

  .password__footer--with-social {
    justify-content: space-between;
    width: 100%;
    display: flex;
  }

  .password__admin-link {
    display: inline-block;
  }

  .password__footer-social {
    margin-top: 0;
  }
}

.faq {
  margin: 40px 0 70px;
}

.faq__title {
  text-align: center;
  margin-bottom: 20px;
}

.faq__item {
  background: var(--secondary-background);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 20px;
}

.faq__item + .faq__item {
  border-top: none;
}

.faq__question {
  text-align: left;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq__question .plus-button {
  margin-left: 40px;
}

.faq__answer-wrapper {
  height: 0;
  transition: height .2s ease-in-out;
  overflow: hidden;
}

.faq__answer {
  margin: 10px 30px 0 0;
}

.faq__group {
  margin-bottom: 30px;
}

.faq__group-title {
  text-align: center;
}

.faq__contact-info {
  margin-top: 50px;
}

@media screen and (min-width: 641px) {
  .faq {
    margin: 70px 0 115px;
  }

  .faq__title {
    margin-bottom: 25px;
    margin-left: 0;
  }

  .faq__item {
    border: 1px solid var(--border-color);
    border-radius: 3px 3px 0 0;
    padding: 20px 30px;
  }

  .faq__item + .faq__item {
    border-radius: 0;
  }

  .faq__item:last-child {
    border-radius: 0 0 3px 3px;
  }
}

@media screen and (min-width: 1000px) {
  .faq__group {
    margin-bottom: 0;
  }

  .faq__group + .faq__group {
    margin-top: 50px;
  }
}

.modal--newsletter {
  height: auto;
  top: auto;
  bottom: 0;
}

.modal--newsletter .modal__dialog {
  height: auto;
  padding: 48px 20px 20px;
  position: relative;
}

.popup-newsletter__title {
  text-align: center;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 20px));
  margin-bottom: 10px;
}

.popup-newsletter__close {
  color: var(--heading-color);
  position: absolute;
  top: 16px;
  right: 20px;
}

.popup-newsletter__close svg {
  width: 15px;
  height: 15px;
}

.popup-newsletter__content {
  text-align: center;
}

.popup-newsletter__form {
  margin-top: 20px;
}

@supports (padding: max(0px)) {
  .modal--newsletter .modal__dialog {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)  + 20px);
  }
}

@media screen and (min-width: 641px) {
  .modal--newsletter {
    height: 100%;
  }

  .modal--newsletter .modal__dialog {
    max-width: 540px;
    padding: 64px 80px 80px;
  }

  .popup-newsletter__close {
    position: absolute;
    top: 24px;
    right: 30px;
  }

  .popup-newsletter__close svg {
    width: 20px;
    height: 20px;
  }

  .popup-newsletter__title {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 28px));
  }

  .popup-newsletter__form {
    margin-top: 30px;
  }
}

.modal--exit-popup {
  height: auto;
  top: auto;
  bottom: 0;
}

.modal--exit-popup .modal__dialog {
  height: auto;
  padding: 48px 20px 20px;
  position: relative;
}

.exit-popup__title {
  text-align: center;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 28px));
  margin-bottom: 8px;
  line-height: 1.2;
}

.exit-popup__subheading {
  text-align: center;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 18px));
}

.exit-popup__close {
  color: var(--heading-color);
  position: absolute;
  top: 16px;
  right: 20px;
}

.exit-popup__close svg {
  width: 15px;
  height: 15px;
}

.exit-popup__form {
  margin-top: 20px;
}

.exit-popup__pay-more {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (min-width: 641px) {
  .modal--exit-popup {
    height: 100%;
  }

  .modal--exit-popup .modal__dialog {
    max-width: 540px;
    padding: 95px 80px 30px;
  }

  .exit-popup__close {
    position: absolute;
    top: 24px;
    right: 30px;
  }

  .exit-popup__close svg {
    width: 20px;
    height: 20px;
  }

  .exit-popup__title {
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 48px));
  }

  .exit-popup__form {
    margin-top: 30px;
  }

  .exit-popup__pay-more {
    margin-top: 75px;
  }
}

.drawer {
  z-index: 5;
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  transition: visibility .35s linear;
  position: fixed;
  top: 0;
  right: 0;
}

.drawer:before {
  content: "";
  opacity: 0;
  background: #000;
  width: 100%;
  height: 100%;
  transition: opacity .35s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.drawer__inner {
  background: var(--secondary-background);
  width: 100%;
  max-width: 345px;
  height: 100%;
  margin-left: auto;
  transition: transform .35s cubic-bezier(.645, .045, .355, 1);
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}

.drawer[aria-hidden="false"] {
  visibility: visible;
}

.drawer[aria-hidden="false"]:before {
  opacity: .4;
}

.drawer[aria-hidden="false"] .drawer__inner {
  transform: translateX(0);
}

.link-search-results:not(:only-child) {
  margin-top: 40px;
}

.link-search-results__list {
  list-style: none;
}

.link-search-results__link {
  padding: 8px 20px;
  transition: color .15s ease-in-out, background .15s ease-in-out;
  display: block;
}

.link-search-results__link:hover, .link-search-results__link:focus {
  background: var(--accent-background);
  color: var(--accent-color);
  outline: none;
}

@media screen and (min-width: 641px) {
  .link-search-results:not(:only-child) {
    margin-top: 60px;
  }
}

.expandable-content[aria-expanded] {
  max-height: 320px;
  transition: all .2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.expandable-content__toggle {
  visibility: hidden;
  opacity: 0;
  color: var(--accent-color);
  text-align: left;
  font-weight: var(--text-font-bolder-weight);
  background: var(--secondary-background);
  z-index: 1;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  transition: opacity .1s ease-in-out, visibility .1s ease-in-out;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.expandable-content__toggle:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(rgba(var(--secondary-background-rgb), 0), rgba(var(--secondary-background-rgb), .4) 15%, var(--secondary-background));
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 100%;
  left: 0;
}

.expandable-content__toggle-icon {
  width: 10px;
  height: 10px;
  margin-right: 15px;
  transition: transform .2s ease-in-out;
  position: relative;
}

.expandable-content__toggle-icon:before, .expandable-content__toggle-icon:after {
  content: "";
  background: currentColor;
  transition: transform .2s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.expandable-content__toggle-icon:before {
  width: 2px;
  height: 10px;
}

.expandable-content__toggle-icon:after {
  width: 10px;
  height: 2px;
}

.expandable-content--expandable[aria-expanded="true"] .expandable-content__toggle-icon {
  transform: rotateZ(90deg);
}

.expandable-content--expandable[aria-expanded="true"] .expandable-content__toggle-icon:after {
  display: none;
}

.expandable-content--expandable .expandable-content__toggle {
  visibility: visible;
  opacity: 1;
}

.expandable-content--expandable[aria-expanded="true"] .expandable-content__toggle:before {
  height: 0;
}

@media screen and (any-hover: hover) {
  .expandable-content[aria-expanded="false"] .expandable-content__toggle:hover .expandable-content__toggle-icon {
    transform: rotateZ(45deg);
  }
}

@media screen and (min-width: 641px) {
  .expandable-content__toggle {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.menu-item__title {
  margin-bottom: .75em;
}

.menu-item__linklist {
  list-style: none;
}

.menu-item__link-item {
  padding: 5px 0;
}

.price-range {
  padding: 20px 0;
  display: block;
}

.price-range__input-group {
  align-items: center;
  display: flex;
}

.price-range__input {
  flex: 1 0 0;
  min-width: 0;
}

.price-range__delimiter {
  margin: 0 12px;
}

.price-range__range-group {
  margin-bottom: 18px;
  position: relative;
}

.rating {
  vertical-align: bottom;
  line-height: inherit;
  align-items: center;
  display: flex;
}

.rating__stars {
  grid-auto-flow: column;
  column-gap: 2px;
  display: grid;
}

.rating__star {
  color: var(--product-review-star-color);
  width: 14px;
  height: 14px;
}

.rating__star--empty {
  color: rgba(var(--text-color-rgb), .4);
}

.rating__caption {
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 13px));
  margin-left: 7px;
  position: relative;
  top: 1px;
}

product-rerender {
  display: contents;
}

.value-picker-button svg {
  width: 9px;
  height: 7px;
  margin-left: 10px;
  transition: transform .2s ease-in-out;
}

.value-picker-button svg path {
  stroke-width: 2.5px;
}

.value-picker-button--pill {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-background);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  display: flex;
  position: relative;
}

.value-picker-button--pill svg {
  width: 12px;
  height: 8px;
  transition: transform .2s ease-in-out;
}

.value-picker-button--pill path {
  stroke-width: 2px;
}

.value-picker-button[aria-expanded="true"] svg {
  transform: rotateZ(180deg);
}

.value-picker {
  z-index: 5;
  font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 16px));
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  transition: visibility .35s ease-in-out;
  position: fixed;
  bottom: 0;
  left: 0;
}

.value-picker:before {
  content: "";
  opacity: 0;
  background: #000;
  width: 100vw;
  height: 100vh;
  transition: opacity .35s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
}

.value-picker[aria-hidden="false"] {
  visibility: visible;
}

.value-picker[aria-hidden="false"]:before {
  opacity: .4;
}

.value-picker[aria-hidden="false"] .value-picker__inner {
  transform: translateY(0);
}

.value-picker .icon--nav-triangle-borderless {
  display: none;
}

.value-picker__inner {
  background: var(--secondary-background);
  width: 100%;
  transition: visibility .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}

.value-picker__header {
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  align-items: center;
  padding: 17px 20px 16px;
  display: flex;
}

.value-picker__header .icon--close {
  color: var(--heading-color);
  width: 17px;
  height: 17px;
}

.value-picker__title {
  margin: 0;
}

.value-picker__close svg {
  display: block;
}

.value-picker__choice-list {
  overscroll-behavior: none;
  max-height: 430px;
  padding: 15px 0;
  list-style: none;
  overflow: auto;
}

.value-picker__choice-item {
  text-align: left;
  width: 100%;
  padding: 8px 50px 7px 20px;
  display: block;
  position: relative;
}

.value-picker__choice-item svg {
  width: 13px;
  height: 11px;
  transition: transform .2s ease-in-out;
  position: absolute;
  top: 17px;
  right: 20px;
  transform: scale(0);
}

.value-picker__choice-item.is-selected {
  color: var(--accent-color);
  font-weight: var(--text-font-bolder-weight);
}

.value-picker__choice-item.is-selected svg {
  transform: scale(1);
}

@supports (padding: max(0px)) {
  .value-picker__choice-list {
    max-height: calc(430px + env(safe-area-inset-bottom, 0px)  + 15px);
    padding-bottom: max(15px, env(safe-area-inset-bottom, 0px)  + 15px);
  }
}

@media screen and (min-width: 641px) {
  .value-picker-wrapper {
    position: relative;
  }

  .value-picker {
    visibility: hidden;
    opacity: 0;
    background: var(--secondary-background);
    color: var(--text-color);
    z-index: 4;
    cursor: auto;
    will-change: transform;
    border-radius: 3px;
    width: auto;
    min-width: 160px;
    height: auto;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility .25s ease-in-out;
    position: absolute;
    top: calc(100% + 10px);
    bottom: auto;
    left: auto;
    right: -25px;
    transform: scale(.9);
    box-shadow: 0 1px 5px 2px #0000001a;
  }

  .value-picker:before {
    display: none;
  }

  .value-picker[data-picker-position="top"] {
    top: auto;
    bottom: calc(100% + 10px);
  }

  .value-picker--align-left {
    left: 0;
    right: auto !important;
  }

  .value-picker[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    transition: opacity .4s cubic-bezier(0, 1, .4, 1), transform .4s cubic-bezier(.18, 1.25, .4, 1), visibility .4s linear;
    transform: scale(1.001);
  }

  .value-picker .icon--nav-triangle-borderless {
    z-index: 2;
    filter: drop-shadow(0 -2px 2px #0000001f);
    width: 18px;
    height: 8px;
    display: block;
    position: absolute;
    bottom: 100%;
    right: 20px;
  }

  .value-picker--align-left .icon--nav-triangle-borderless {
    left: 20px;
    right: auto;
  }

  .value-picker[data-picker-position="top"] .icon--nav-triangle-borderless {
    top: 100%;
    bottom: auto;
    transform: rotateZ(180deg);
  }

  .value-picker__inner {
    border-radius: 3px;
    width: auto;
    transition: none;
    position: relative;
    transform: none !important;
  }

  .value-picker__inner--restrict {
    max-height: 300px;
    overflow: auto;
  }

  .value-picker__header {
    display: none;
  }

  .value-picker__choice-list {
    white-space: nowrap;
    font-size: calc(var(--base-text-font-size)  - (var(--default-text-font-size)  - 15px));
    max-height: none;
    padding: 15px 0;
  }

  .value-picker__choice-item {
    cursor: pointer;
    padding: 2px 25px;
    transition: color .15s ease-in-out, background .15s ease-in-out;
    display: block;
  }

  .value-picker__choice-item.is-selected, .value-picker__choice-item:hover {
    background: var(--accent-background);
    color: var(--accent-color);
    font-weight: normal;
  }

  .value-picker__choice-item.is-selected svg, .value-picker__choice-item:hover svg {
    display: none;
  }

  .value-picker--small {
    min-width: 105px;
    right: -2px;
  }

  .value-picker--small .value-picker__choice-list {
    padding: 10px 0;
    font-size: .85rem;
  }

  .value-picker--small .value-picker__choice-item {
    padding: 2px 18px;
  }

  .value-picker--small .icon--nav-triangle-borderless {
    right: 11px;
  }

  .value-picker--small.value-picker--align-left .icon--nav-triangle-borderless {
    left: 11px;
  }

  .value-picker--auto {
    min-width: 0;
  }
  
}

.product-media-alt {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  color: var(--m2-nav-text);
  font-weight: 500;
}

.kit-desc { display: none; }
.variant-essentials .kit-desc.essentials,
.variant-pro .kit-desc.pro { display: block; }

/* === Product Option Buttons === */
.product-form__option .block-swatch__radio + .block-swatch__item,
.product-form__option .color-swatch__radio + .color-swatch__item,
.product-form__option .variant-swatch__radio + .variant-swatch__item {
  border-radius: 8px !important;
  border: 2px solid var(--border-color) !important;
  background-color: transparent !important;
  color: var(--heading-color) !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out;
}

.product-form__option input[type="radio"]:checked + .block-swatch__item,
.product-form__option input[type="radio"]:checked + .color-swatch__item,
.product-form__option input[type="radio"]:checked + .variant-swatch__item,
.product-form__option a.block-swatch__item.is-selected,
.product-form__option a.color-swatch__item.is-selected,
.product-form__option a.variant-swatch__item.is-selected {
  background-color: var(--m2-highlight) !important;
  color: #000 !important;
  border-color: var(--m2-highlight) !important;
}

.product-form__option .block-swatch__item:hover,
.product-form__option .color-swatch__item:hover,
.product-form__option .variant-swatch__item:hover {
  border-color: var(--m2-highlight) !important;
}

/* === Price styling === */
.product-form__info-content .price {
  font-weight: 700;
  font-size: 28px;
  color: var(--heading-color);
  text-align: right;
  display: block;
}

/* === "Add to cart" & ShopPay buttons === */
.product-form__submit,
.shopify-payment-button__button--unbranded {
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease-in-out;
}

.product-form__submit {
  background: var(--m2-grad-btn) !important;
  color: var(--primary-button-text-color) !important;
  border: none !important;
}

.product-form__submit:hover {
  box-shadow: var(--m2-shadow-btn) !important;
}

.shopify-payment-button__button--unbranded {
  background-color: var(--secondary-button-background) !important;
  color: var(--secondary-button-text-color) !important;
  border: none !important;
}

/* === Font Style & Color === */
.product-form__option-name {
  font-weight: bold;
  font-size: 16px;
  color: var(--heading-color);
}

/* === Variant Color Swatches (Squares) === */
.color-swatch-list .color-swatch__item {
  width: 75px !important;
  height: 75px !important;
  border-radius: 10px !important;
}

.color-swatch-list {
  gap: 8px !important; /* Adds spacing between larger swatches */
}

.variant-swatch__item {
  width: 75px !important;
  height: 75px !important;
  border-radius: 10px !important;
}

.variant-swatch-list {
  gap: 8px !important; /* Uniform spacing */
}


.color-swatch__item--extra-deal.is-selected {
  box-shadow: var(--m2-shadow-active);
}

/* Tiny "SALE" strip on swatches */
.color-swatch__item {
  position: relative; /* ensure banner positions relative to swatch */
  overflow: hidden;   /* crop banner to swatch box */
}

.swatch-sale-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--m2-nav-bg);
  color: var(--m2-nav-text);
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 0;
  z-index: 2;
  pointer-events: none;  /* let clicks go through to swatch */
}

/* Make room for the "Show more" toggle so it doesn't spill past the card */
/* Only affect the collection section */
section[data-section-type="collection"] .card__header--tight{
  padding-bottom: 24px !important; /* makes room for the View More/Less button */
  overflow: visible;                /* just in case the theme clips edges */
}

/*----------------Desktop Email-------------------*/
.desktop-email {
  display: flex;
  align-items: center;
}

/*------------------------------------
Hero Banner
------------------------------------*/
@media screen and (max-width: 800px) {
.slideshow--preserve-ratio .slideshow__content-wrapper {
  position: static;
  transform: none !important;
  padding: 10px 0 !important;
}
.slideshow--preserve-ratio .slideshow__content-wrapper .container {
  max-width: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.slideshow.slideshow--preserve-ratio {
padding-bottom: 20px;
}
.slideshow.slideshow--preserve-ratio .flickity-page-dots {
  bottom: 5px;
}
.slideshow.slideshow--preserve-ratio .slideshow__content {
  margin-bottom: 4px;;
}
.slideshow.slideshow--preserve-ratio .slideshow__buttons {
  display: flex;
  justify-content: center;
  gap: 10px;;
flex-direction: row !important;
  
}
.slideshow.slideshow--preserve-ratio .slideshow__buttons .slideshow__button--auto-width {
padding: 8px 16px;
line-height: 1em;
display: block;
font-size: 0.85rem;
}
/* Dot colors now controlled via theme editor settings */

}

/* ══════════════════════════════════════════════════════════════════════════
   M2 DESIGN SYSTEM
   Tokens, nav-bar, and consolidated component styles.
   To re-skin the site, update the tokens below — all components follow.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════
     SKINCRAFT DESIGN SYSTEM
     ══════════════════════════════════════════════════ */

  /* ── Palette ── */
  --m2-bg:                    #050505;
  --m2-card-surface:          rgba(255,255,255,0.03);
  --m2-card-surface-hover:    rgba(255,255,255,0.05);
  --m2-primary:               #00C8E8;
  --m2-primary-fg:            #050505;
  --m2-secondary-surface:     #1e1e21;
  --m2-callout:               #F0943D;
  --m2-callout-text:          #ffffff;
  --m2-callout-card:          rgba(0, 200, 232, 0.15);

  /* ── Text ── */
  --m2-nav-text:              #ffffff;
  --m2-text-on-card:          #ffffff;
  --m2-text-on-card-strong:   #ffffff;
  --m2-text-muted:            rgba(255,255,255,0.50);
  --m2-text-faint:            rgba(255,255,255,0.35);

  /* ── Borders ── */
  --m2-border:                rgba(255,255,255,0.08);
  --m2-border-hover:          rgba(0,200,232,0.40);
  --m2-gray:                  rgba(255,255,255,0.12);
  --m2-gold-line:             linear-gradient(90deg, transparent, rgba(200,185,154,0.25), rgba(240,216,152,0.18), transparent);
  --m2-gold-line-warm:        linear-gradient(90deg, transparent, rgba(220,195,150,0.20), rgba(200,180,140,0.15), transparent);

  /* ── Gradients ── */
  --m2-grad-btn:              #00C8E8;
  --m2-grad-metallic:         linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  --m2-grad-metallic-hover:   linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%);
  --m2-grad-metallic-active:  linear-gradient(135deg, rgba(0,200,232,0.15) 0%, rgba(0,200,232,0.25) 50%, rgba(0,200,232,0.15) 100%);
  --m2-grad-metallic-dark:    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%);
  --m2-grad-callout:          rgba(0, 200, 232, 0.15);

  /* ── Shadows ── */
  --m2-shadow-glow:           0 0 16px 2px rgba(0,200,232,0.25);
  --m2-shadow-btn:            0 4px 20px rgba(0,200,232,0.30);
  --m2-shadow-active:         0 0 0 1px rgba(0,200,232,0.40), 0 0 16px 2px rgba(0,200,232,0.25);
  --m2-shadow-elevated:       0 2px 16px rgba(0,200,232,0.08), 0 4px 24px rgba(255,255,255,0.04);

  /* ── Nav / Menu ── */
  --m2-nav-bg:                #050505;
  --m2-nav-hover:             #00C8E8;

  /* ── Aliases ── */
  --m2-highlight:             #00C8E8;
  --m2-card-bg:               rgba(255,255,255,0.03);
  --m2-dark-bg:               #050505;

  /* ── Unified component tokens ── */
  --m2-tooltip-bg:            #1a1a1e;
  --m2-tooltip-border:        rgba(255,255,255,0.12);
  --m2-control-bg:            var(--m2-bg);
  --m2-control-border:        var(--m2-gray);
  --m2-control-text:          var(--m2-nav-text);
  --m2-control-focus:         var(--m2-primary);
  --m2-badge-bg:              #00c8e8;
  --m2-badge-text:            #000000;
  --m2-status-warning:        #d4a94d;
  --m2-status-warning-text:   #1a1a1a;
  --m2-status-danger:         #b54848;
  --m2-status-danger-text:    #ffffff;

  /* ── Header borders (override Shopify setting — teal instead of orange) ── */
  --header-border-color:      rgba(0, 200, 232, 0.18);

  /* ── Typography ── */
  --font-sans:                'Inter Tight', -apple-system, sans-serif;
  --font-mono:                'Geist Mono', 'SF Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Inter Tight (sans) + Geist Mono (mono)
   Loaded via Google Fonts in layout/theme.liquid
   ══════════════════════════════════════════════════════════════════════════ */

/* Base: everything gets Inter Tight */
body,
p, li, td, th, span, a, label, input, select, textarea, button,
.rte, .rte p, .rte li {
  font-family: var(--font-sans) !important;
}

/* Headings — Inter Tight bold, inherits heading-color from tokens */
.heading, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section__title,
.product-meta__title,
.card__title,
.m2cf-header__title,
.ih-page__title,
.ih-card__header h2,
.tip-card h2,
.tip-vinyl-card__title,
.wiz-product-title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
}

/* Mono — prices, badges, buttons, nav labels, stats, controls */
.price, .money,
.product-item__price-list,
.m2cf-card__badge, .lpc__badge,
.vinyl-card__badge,
.pf-section-label, .wizard-section-label, .wizard-logo-row__title,
.button, .button--primary, .button--secondary,
.pf-logo-btn, .wizard-logo-btn,
.m2cf-sort, .m2cf-count,
.m2cf-pagination button,
.breadcrumb__link,
.m2cf-desc-toggle,
.m2cf-clear-btn,
.tip-closing__btn,
.if-btn, .if-reset {
  font-family: var(--font-mono) !important;
}

/* Body copy — Inter Tight normal weight, muted color */
.product-meta__description,
.product-block-list__item p,
.m2cf-desc-inner,
.collection__description,
.review-text,
.vinyl-card__description,
.tip-card p,
.ih-tips-content,
.ih-page__intro,
.pf-kit-tile__desc,
.wizard-kit-tile__desc,
.pf-install-desc,
.pf-vinyl-link-note,
.pf-gallery-disclaimer {
  font-family: var(--font-sans) !important;
  color: var(--text-color) !important;
}

/* Muted labels — lighter weight */
.m2cf-checkbox-item label,
.reviewer-name,
.pf-cart-box__lbl,
.wizard-p3-selection__label,
.if-label,
.if-results-label,
.tip-section-label {
  font-family: var(--font-sans) !important;
  color: var(--m2-text-muted) !important;
}

/* Section subheadings — light weight */
.section__action-link,
.collection__products-count,
.featured-collection__cta {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  color: var(--m2-text-muted);
}

/* Button style — mono, bold, uppercase */
.button--primary {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Activated by [data-theme="light"] on <html>
   Same palette, inverted surfaces and text
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* #1 Keep header/nav DARK in light mode */
  --m2-bg:                    #f5f5f5;
  --m2-card-surface:          rgba(0,0,0,0.02);
  --m2-card-surface-hover:    rgba(0,0,0,0.04);
  --m2-primary:               #0099b3;
  --m2-primary-fg:            #ffffff;
  --m2-secondary-surface:     #e8e8ea;
  --m2-callout:               #F0943D;
  --m2-callout-text:          #1a1a1a;
  --m2-callout-card:          rgba(0, 153, 179, 0.12);

  --m2-nav-text:              #ffffff;
  --m2-text-on-card:          #2a2a2a;
  --m2-text-on-card-strong:   #000000;
  --m2-text-muted:            rgba(0,0,0,0.65);
  --m2-text-faint:            rgba(0,0,0,0.40);

  --m2-border:                rgba(0,0,0,0.12);
  --m2-border-hover:          rgba(0,153,179,0.40);
  --m2-gray:                  rgba(0,0,0,0.10);
  --m2-gold-line:             linear-gradient(90deg, transparent, rgba(180,160,120,0.30), rgba(200,180,130,0.22), transparent);
  --m2-gold-line-warm:        linear-gradient(90deg, transparent, rgba(180,155,110,0.25), rgba(170,145,100,0.20), transparent);

  --m2-grad-btn:              #0099b3;
  --m2-grad-metallic:         linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.02) 100%);
  --m2-grad-metallic-hover:   linear-gradient(135deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
  --m2-grad-metallic-active:  linear-gradient(135deg, rgba(0,153,179,0.10) 0%, rgba(0,153,179,0.18) 50%, rgba(0,153,179,0.10) 100%);
  --m2-grad-metallic-dark:    linear-gradient(135deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.01) 100%);
  --m2-grad-callout:          rgba(0, 153, 179, 0.12);

  --m2-shadow-glow:           0 0 16px 2px rgba(0,153,179,0.20);
  --m2-shadow-btn:            0 4px 20px rgba(0,153,179,0.25);
  --m2-shadow-active:         0 0 0 1px rgba(0,153,179,0.35), 0 0 16px 2px rgba(0,153,179,0.20);
  --m2-shadow-elevated:       0 2px 12px rgba(0,0,0,0.08);

  --m2-nav-bg:                #050505;
  --m2-nav-hover:             #00C8E8;

  --m2-highlight:             #0099b3;
  --m2-card-bg:               #ffffff;
  --m2-dark-bg:               #ffffff;

  --m2-tooltip-bg:            #ffffff;
  --m2-tooltip-border:        rgba(0,0,0,0.12);
  --m2-control-bg:            #ffffff;
  --m2-control-border:        rgba(0,0,0,0.12);
  --m2-control-text:          #2a2a2a;
  --m2-control-focus:         #0099b3;
  --m2-badge-bg:              #00c8e8;
  --m2-badge-text:            #000000;
  --m2-status-warning:        #c48a1a;
  --m2-status-warning-text:   #ffffff;
  --m2-status-danger:         #a33333;
  --m2-status-danger-text:    #ffffff;

  --background:               #f5f5f5;
  --secondary-background:     #ffffff;
  --heading-color:            #111111;
  --text-color:               #2a2a2a;
  --text-color-rgb:           42, 42, 42;
  --border-color:             rgba(0,0,0,0.12);
  --border-color-rgb:         0, 0, 0;
  --accent-color:             #0099b3;
  --accent-color-rgb:         0, 153, 179;
  --link-color:               #0099b3;
  --link-color-hover:         #007a8f;
  --header-background:        #050505;
  --header-text-color:        #ffffff;
  --header-light-text-color:  #F0943D;
  --header-accent-color:      #00C8E8;
  --header-border-color:      rgba(255,255,255,0.08);
  --footer-background-color:  #f0f0f0;
  --footer-heading-text-color:#1a1a1a;
  --footer-body-text-color:   rgba(0,0,0,0.55);
  --footer-accent-color:      #0099b3;
  --primary-button-background:#0099b3;
  --primary-button-background-rgb: 0, 153, 179;
  --primary-button-text-color:#ffffff;
  --secondary-button-background: #e8e8ea;
  --secondary-button-text-color: #1a1a1a;
}

/* ── LIGHT MODE COMPONENT OVERRIDES ──
   Uses token references so changes cascade automatically.
   The [data-theme="light"] token block above handles most values.
   These are structural overrides that can't be handled by tokens alone. */

/* Nav/header/menus — STAY DARK in light mode */
[data-theme="light"] .nav-bar { background: var(--m2-nav-bg) !important; }
[data-theme="light"] .nav-bar__link { color: #ffffff !important; }
[data-theme="light"] .nav-bar__link:hover { color: var(--m2-nav-hover) !important; }
[data-theme="light"] .nav-bar__link[aria-expanded="true"] { color: var(--m2-nav-hover) !important; }
[data-theme="light"] .nav-dropdown { background: var(--m2-nav-bg); color: #ffffff; border-color: rgba(255,255,255,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
[data-theme="light"] .nav-dropdown__link { color: #ffffff !important; }
[data-theme="light"] .nav-dropdown__link:hover { color: var(--m2-nav-hover) !important; }
[data-theme="light"] .nav-dropdown__item + .nav-dropdown__item::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }
[data-theme="light"] .mega-menu { background: var(--m2-nav-bg) !important; color: #ffffff !important; }
[data-theme="light"] .mega-menu__link { color: #ffffff !important; }
[data-theme="light"] .mega-menu__link:hover { color: var(--m2-nav-hover) !important; }
/* Column headers use .heading, which the global light-mode rule darkens —
   keep them white since the mega-menu panel stays dark in light mode. */
[data-theme="light"] .mega-menu__title,
[data-theme="light"] .mega-menu .heading { color: #ffffff !important; }

/* Cards/tiles — white bg */
[data-theme="light"] .card { background: var(--m2-card-bg) !important; }
[data-theme="light"] .product-item { background: var(--m2-card-bg) !important; }
[data-theme="light"] .lpc__card,
[data-theme="light"] .m2cf-card { background: var(--m2-card-bg) !important; }
[data-theme="light"] .m2cf-sidebar { background: var(--m2-card-bg); border-color: var(--m2-border); }
[data-theme="light"] .ih-card { background: var(--m2-card-bg) !important; }
[data-theme="light"] .pf-kit-tile,
[data-theme="light"] .wizard-kit-tile { background: var(--m2-card-bg) !important; color: var(--text-color) !important; }

/* Collection wrappers — transparent */
[data-theme="light"] [data-section-type="collection"] .card,
[data-theme="light"] [data-section-type="featured-collection"] .card,
[data-theme="light"] [data-section-type="collection"] > .container .card,
[data-theme="light"] [data-section-type="featured-collection"] > .container .card { background: transparent !important; }

/* Kit tile images — no dark mode filter */
/* Light mode kit tile filters handled in combined img/svg block below */
[data-theme="light"] .wizard-kit-tile img,
[data-theme="light"] .wizard-kit-tile svg { filter: none !important; background: transparent !important; }

/* Buttons — always white text on cyan bg */
[data-theme="light"] .button--primary,
[data-theme="light"] .product-form__submit,
[data-theme="light"] .pf-logo-btn__radio:checked + .pf-logo-btn { color: #ffffff !important; }

/* Wizard logo (cutout) selected — primary color text (outline-style, no fill) */
[data-theme="light"] .wizard-logo-btn.is-selected { color: var(--m2-primary) !important; }

/* Callout rules moved AFTER body text overrides — see below */

/* ── Light mode: text visibility fixes ── */

/* All headings dark in light mode */
[data-theme="light"] .heading,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4,
[data-theme="light"] .product-meta__title,
[data-theme="light"] .card__title,
[data-theme="light"] .card__header .heading,
[data-theme="light"] .section__title,
[data-theme="light"] .pf-section-label,
[data-theme="light"] .wizard-section-label,
[data-theme="light"] .wizard-logo-row__title,
[data-theme="light"] .wiz-product-title,
[data-theme="light"] .swatch-group__title,
[data-theme="light"] .wizard-swatch-group-title,
[data-theme="light"] .ih-page__title,
[data-theme="light"] .ih-card__header h2,
[data-theme="light"] .if-section-label,
[data-theme="light"] .m2cf-header__title,
[data-theme="light"] .m2cf-sidebar__title,
[data-theme="light"] .m2cf-filter-toggle {
  color: #1a1a1a !important;
}

/* All body text readable in light mode */
[data-theme="light"] .rte, [data-theme="light"] .rte p,
[data-theme="light"] p, [data-theme="light"] li,
[data-theme="light"] .product-meta__description,
[data-theme="light"] .product-block-list__item p,
[data-theme="light"] .card__section p,
[data-theme="light"] .card__section li,
[data-theme="light"] .vinyl-grid-intro,
[data-theme="light"] .vinyl-card__description,
[data-theme="light"] .review-text,
[data-theme="light"] .reviewer-name,
[data-theme="light"] .tip-card p,
[data-theme="light"] .ih-tips-content,
[data-theme="light"] .ih-page__intro,
[data-theme="light"] .if-label,
[data-theme="light"] .if-results-label,
[data-theme="light"] .if-result-name,
[data-theme="light"] .if-video-caption,
[data-theme="light"] .tip-section-label,
[data-theme="light"] .tip-card h2,
[data-theme="light"] .tip-vinyl-card__title,
[data-theme="light"] .pf-vinyl-link-note,
[data-theme="light"] .pf-gallery-disclaimer,
[data-theme="light"] .pf-install-desc,
[data-theme="light"] .pf-video-tile__caption,
[data-theme="light"] .wiz-video-tile__title,
[data-theme="light"] .m2cf-card__title, [data-theme="light"] .lpc__title,
[data-theme="light"] .m2cf-checkbox-item label,
[data-theme="light"] .m2cf-count,
[data-theme="light"] .m2cf-desc-inner,
[data-theme="light"] .collection__description,
[data-theme="light"] .product-item__title a,
[data-theme="light"] .product-item__price-list .price {
  color: #2a2a2a !important;
}

/* Breadcrumb */
[data-theme="light"] .breadcrumb__link { color: rgba(0,0,0,0.45) !important; }
[data-theme="light"] .breadcrumb__item:last-child { color: #1a1a1a !important; }
[data-theme="light"] .breadcrumb__list svg,
[data-theme="light"] .card__navigation-breadcrumb svg { color: rgba(0,0,0,0.3) !important; fill: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .page__sub-header { background: var(--m2-bg) !important; }

/* Announcement bar — always white text */
[data-theme="light"] .announcement-bar,
[data-theme="light"] .announcement-bar a,
[data-theme="light"] .announcement-bar p,
[data-theme="light"] .announcement-bar__content { color: #ffffff !important; }

/* Inactive/unselected buttons */
[data-theme="light"] .button--secondary,
[data-theme="light"] .button--ternary,
[data-theme="light"] .button--transparent,
[data-theme="light"] .pf-logo-btn,
[data-theme="light"] .wizard-logo-btn {
  color: var(--secondary-button-text-color) !important;
  background: var(--secondary-button-background);
}

/* Form controls — global light mode */
[data-theme="light"] .form__field,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="url"],
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .device-finder__select,
[data-theme="light"] .if-select,
[data-theme="light"] .if-text-input,
[data-theme="light"] .if-models-select,
[data-theme="light"] .m2cf-search-input,
[data-theme="light"] .m2cf-sort {
  background-color: #ffffff !important;
  color: #2a2a2a !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* Native <option> elements inside theme selects — in dark mode they're
   painted with light text on dark popups (good); in light mode the popup
   renders on white and inherited white text from the dark-mode rule is
   invisible. Force the popup to white-bg + dark-text under data-theme=light. */
[data-theme="light"] select option,
[data-theme="light"] .device-finder__select option,
[data-theme="light"] .if-select option,
[data-theme="light"] .if-models-select option,
[data-theme="light"] .m2cf-sort option {
  background: #ffffff !important;
  color: #2a2a2a !important;
}

[data-theme="light"] .form__field::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: rgba(0,0,0,0.4) !important;
}

[data-theme="light"] .form__field:focus,
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--m2-primary) !important;
  box-shadow: 0 0 0 1px var(--m2-primary) !important;
}

[data-theme="light"] label,
[data-theme="light"] .form__label,
[data-theme="light"] .form__floating-label {
  color: #2a2a2a !important;
}

/* Install help button at bottom */
[data-theme="light"] .tip-closing__btn { color: var(--m2-primary-fg) !important; }

/* Tooltips */
[data-theme="light"] .pf-swatch-tooltip,
[data-theme="light"] .vinyl-card__adv-tooltip,
[data-theme="light"] .wiz-swatch-tt { background: #ffffff !important; color: #2a2a2a !important; border-color: rgba(0,0,0,0.12) !important; }

/* Callout/badge elements — text follows mode: white in dark, black in light */
.pf-cart-box,
.pf-cart-box p,
.pf-cart-box a,
.pf-cart-box span,
.pf-cart-box strong,
.pf-cart-box li,
.pf-cart-box li::before,
.wiz-p3-cart-box,
.wiz-p3-cart-box p,
.wiz-p3-cart-box a,
.wiz-p3-cart-box li,
.wiz-p3-cart-box li::before,
.wiz-install-support,
.wiz-install-support p,
.wiz-install-support a,
.tip-callout,
.tip-callout p,
.tip-callout strong,
.tip-callout a,
.pf-install-callout,
.pf-install-callout p,
.pf-install-callout a { color: var(--m2-callout-text) !important; }

/* Callout/kit card backgrounds — 50% transparent orange */
.pf-cart-box,
.wiz-p3-cart-box { background: var(--m2-grad-callout) !important; }

.tip-callout,
.pf-install-callout { background: var(--m2-grad-callout) !important; }

/* Theme toggle button */
.m2-theme-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  color: var(--m2-nav-text);
  line-height: 1;
  transition: color 0.2s;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.m2-theme-toggle:hover {
  color: var(--m2-primary);
}

/* Dark mode: show moon, hide sun */
.m2-theme-toggle__icon--light { display: none; }
.m2-theme-toggle__icon--dark { display: block; }

/* Light mode: show sun, hide moon */
[data-theme="light"] .m2-theme-toggle__icon--light { display: block; }
[data-theme="light"] .m2-theme-toggle__icon--dark { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   LATEST PRODUCTS CAROUSEL
   ══════════════════════════════════════════════════════════════════════════ */

.lpc__wrapper {
  position: relative;
  padding: 0 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.lpc__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 0 16px;
  /* Native-feeling scroll: iOS momentum + proximity snap so scrolls settle
     on a card boundary without forcing the user out of mid-scroll positions. */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 60px;
  overscroll-behavior-x: contain;
}
.lpc__card { scroll-snap-align: start; }

.lpc__track::-webkit-scrollbar { display: none; }

.lpc__card {
  flex: 0 0 200px;
  background: var(--m2-card-bg);
  border: 1px solid var(--m2-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--m2-text-on-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lpc__card:hover {
  border-color: var(--m2-highlight);
}

.lpc__img {
  background: var(--secondary-background);
  border-bottom: 1px solid var(--m2-border);
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.lpc__img.is-jpg {
  background: #fff;
}

.lpc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpc__info {
  padding: 12px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpc__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 1;
  margin-bottom: 6px;
}

.lpc__price {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: right;
}

/* Fade edges */
.lpc__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s;
}

.lpc__fade--left {
  left: 60px;
  background: linear-gradient(to right, var(--background), transparent);
}

.lpc__fade--right {
  right: 60px;
  background: linear-gradient(to left, var(--background), transparent);
}

/* Arrow buttons */
.lpc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--m2-nav-text);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s, background 0.2s;
  line-height: 1;
}

.lpc__arrow:hover {
  background: var(--m2-highlight);
  color: #000;
}

.lpc__arrow--left { left: 44px; }
.lpc__arrow--right { right: 44px; }


/* ══════════════════════════════════════════════════════════════════════════
   NAV-BAR & DROPDOWN MENUS
   ══════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 1000px) {
  .nav-bar {
    background: var(--m2-nav-bg);
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative;
  }

  /* Nav bottom line removed */

  .nav-bar::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6) 35%, var(--m2-nav-bg));
  }

  .nav-bar__link {
    color: var(--m2-nav-text);
    font-family: var(--font-sans) !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    text-transform: uppercase;
  }
  .nav-bar__icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 5px;
    opacity: 0.5;
    flex-shrink: 0;
  }

  .nav-bar__link:hover .nav-bar__icon {
    opacity: 0.8;
  }

  .nav-bar__link:hover { color: var(--m2-nav-hover); }
  .nav-bar__link[aria-expanded="true"] { color: var(--m2-nav-hover); }

  .nav-bar__link .icon--arrow-bottom,
  .nav-bar__link .icon--nav-triangle { display: none; }
}

.nav-dropdown {
  background: var(--m2-bg);
  color: var(--m2-nav-text);
  border: 1px solid var(--m2-border);
  border-radius: 8px;
  padding: 2px 0;
  box-shadow: var(--m2-shadow-elevated);
}

.nav-dropdown--floating {
  border: 1px solid var(--m2-gray);
  border-radius: 8px;
}

.nav-dropdown--floating::before { box-shadow: var(--m2-shadow-elevated); }

.nav-dropdown .nav-dropdown {
  border: 1px solid var(--m2-gray);
  border-radius: 8px;
}

.nav-dropdown .nav-dropdown--floating {
  border-left: 1px solid var(--m2-gray);
  border-radius: 0 8px 8px 0;
}

.nav-dropdown__item + .nav-dropdown__item { position: relative; }

.nav-dropdown__item + .nav-dropdown__item::before {
  content: "";
  display: block;
  width: 90%;
  height: 1px;
  margin: 2px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.nav-dropdown__link { color: var(--m2-nav-text); }
.nav-dropdown__link:hover { color: var(--m2-nav-hover); }
.nav-dropdown__link[aria-expanded="true"] { color: var(--m2-nav-hover); }

.nav-dropdown .icon--nav-triangle-borderless path { fill: var(--m2-nav-bg) !important; }
.nav-dropdown .icon--nav-triangle-left path { fill: var(--m2-nav-bg) !important; }

.mega-menu {
  background: var(--m2-nav-bg);
  color: var(--m2-nav-text);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--m2-shadow-elevated);
}

/* Force the mega-menu to render edge-to-edge with centered columns when
   triggered from the inline nav. Without this, residual margin/justify rules
   (mega-menu__inner--large adds 50–60px side margins to each column) clustered
   the columns off-center against the narrower nav-cell anchor. */
/* Mega-menu panel: a defined-width box (not full viewport, not content-only)
   with a 4-column grid so each category gets equal horizontal real estate.
   920px is enough for 4 × ~200px columns with 48px gaps; capped to
   viewport-32px so it never overflows on narrow windows. Anchored to
   .header via 50%/translateX(-50%) to center under the nav. */
.header .mega-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  border-radius: 0 0 10px 10px;
}
.header .mega-menu > .container {
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.header .mega-menu .mega-menu__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 26px 36px;
  overflow: visible;
  align-items: start;
  justify-content: stretch;
}
.header .mega-menu .mega-menu__column {
  margin: 0 !important;
  min-width: 0;
  padding: 0;
}

/* ── Column header: small-caps category label (matches KIT / CUTOUT / VINYL
      style in the product wizard summary bar). Explicit Geist Mono — we
      can't rely on var(--font-mono) being defined consistently across modes.
      No left padding so the rail that runs under the brand list aligns with
      the FIRST letter of the header. ── */
.header .mega-menu .mega-menu__title {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin: 0 0 14px;
  padding: 0;
  display: block;
}
.header .mega-menu .mega-menu__title:hover {
  color: var(--m2-primary);
}
[data-theme="light"] .mega-menu__title,
[data-theme="light"] .mega-menu .heading {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── "View All →" link below each column. Aligned with the column header
      (at column x=0) rather than the indented brand items. ── */
.header .mega-menu .mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  margin-left: 0;
  padding: 4px 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--m2-primary);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.header .mega-menu .mega-menu__view-all:hover {
  gap: 10px;
  color: #6ee5ff;
}
.header .mega-menu .mega-menu__view-all-arrow { display: inline-block; }

/* ── Mobile mega-menu "View all" link — matches desktop but sits inside the
      expanded collapsible. ── */
.mobile-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--m2-primary);
  text-decoration: none;
}

/* ── Header search form (replaces device finder) ── */
.header__search-form {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 220px;
  min-width: 180px;
  max-width: 240px;
  margin-left: -12px;
  margin-right: 16px;
}

.header__search-input {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--m2-nav-text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  min-width: 0;
}

.header__search-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.header__search-input:hover,
.header__search-input:focus {
  border-color: var(--m2-primary);
  background: rgba(255,255,255,0.10);
}

.header__search-btn {
  flex-shrink: 0;
  width: 36px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m2-primary);
  border: 1px solid var(--m2-primary);
  border-radius: 0 4px 4px 0;
  color: var(--m2-primary-fg);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.header__search-btn:hover { opacity: 0.85; }

.header__search-btn .icon--search {
  width: 16px;
  height: 16px;
  color: currentColor;
}

/* Light mode: the header itself stays dark, but give the search input a light
   fill so its placeholder + typed text use the theme's normal on-light colors
   (rgba(0,0,0,0.4) placeholder from the global light-mode rule). */
[data-theme="light"] .header__search-input {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* On smaller screens the search collapses onto its own row below the logo */
@media screen and (max-width: 999px) {
  .header__search-form {
    order: 10;
    flex: 1 1 100%;
    max-width: none;
    margin: 10px 0 0;
  }
}

/* ── Header inline nav (moved up from bottom nav-bar) ── */
.nav-bar--inline {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 8px;
  /* Intentionally NOT position:relative. Mega-menus are width:100vw and
     left:0 relative to the nearest positioned ancestor — if the nav itself
     is the anchor, the panel starts mid-header and pushes off-screen to the
     right. Leaving this static lets mega-menus anchor to .header (which is
     already position:relative and spans the full viewport width). Regular
     dropdowns still work because .nav-bar__item carries position:relative. */
  /* Neutralize the old nav-bar background + gradient shadow used when it
     occupied its own row — the inline version lives inside the header row. */
  background: transparent !important;
  border-bottom: none !important;
  width: auto !important;
  left: auto !important;
  text-align: left !important;
}

.nav-bar--inline::after { display: none !important; }

.nav-bar--inline .nav-bar__linklist {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  /* Dropdowns are positioned absolute on .nav-bar__item — never clip the list. */
  overflow: visible;
}

.nav-bar--inline .nav-bar__item {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
/* Restore the --static behavior that JS toggles for mega-menu items — our
   scoped .nav-bar--inline .nav-bar__item rule above would otherwise win over
   the global .nav-bar__item--static rule (same-specificity; this fires later
   and matches a more specific selector). Without this, the mega-menu anchors
   to the narrow nav item instead of bubbling up to .header. */
.nav-bar--inline .nav-bar__item--static { position: static !important; }
/* Also make the linklist and any wrapper non-positioning so mega-menu
   positioning bubbles cleanly up to .header. */
.nav-bar--inline,
.nav-bar--inline .nav-bar__linklist { position: static !important; }

.nav-bar--inline .nav-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--m2-nav-text, #fff);
  cursor: pointer;
  transition: color 0.15s ease;
}

/* Hide the nav-triangle pointer — we don't need two visual cues on the same
   link. The arrow-bottom caret stays as the "expandable" indicator. */
.nav-bar--inline .nav-bar__link .icon--nav-triangle {
  display: none !important;
}

/* Chevron caret on top-level nav items with submenus. Rotates 180° when the
   menu is open, reinforcing the open/closed state. */
.nav-bar--inline .nav-bar__link .icon--arrow-bottom {
  width: 10px;
  height: 6px;
  margin: 2px 0 0 2px;
  color: currentColor;
  transition: transform 0.2s ease;
  display: inline-block;
}
.nav-bar--inline .nav-bar__link[aria-expanded="true"] .icon--arrow-bottom,
.nav-bar--inline .is-dropdown-open > .nav-bar__link .icon--arrow-bottom {
  transform: rotate(180deg);
}

/* Active / hover state — indicate which nav item owns the open mega-menu. */
.nav-bar--inline .nav-bar__link:hover,
.nav-bar--inline .nav-bar__link[aria-expanded="true"],
.nav-bar--inline .is-dropdown-open > .nav-bar__link {
  color: var(--m2-primary) !important;
}

/* ── Mega-menu leaf-list indicator (cyan line + traveling bulge) ──
   The left border hugs the first-level column list and becomes the rail.
   Leaf items are indented away from the rail, and .mega-menu__bulge is a
   pseudo-sprite that travels between items on hover. See the script below
   the rule for the --bulge-top wiring. */
.header .mega-menu .mega-menu__linklist {
  position: relative;
  /* Rail lives at left:0 of this list (and thus at column x=0, which is
     also where the header's first letter starts). Brand items are pushed
     right of the rail by this padding. */
  padding-left: 20px;
  list-style: none;
  margin: 0;
}
/* Draw the cyan rail as a pseudo-element. Endpoints land on the vertical
   midpoint of the first/last link's text — link padding is 6px and half a
   text line-box ≈ 0.7em, so 6px + 0.7em places the rail's top/bottom at the
   visual center of the outermost item's text. em units track any future
   font-size change. */
.header .mega-menu .mega-menu__linklist::before {
  content: "";
  position: absolute;
  /* Rail sits just to the left of the text. Linklist padding-left is 20px,
     so left: 8px puts the rail 12px from the first glyph — tight but still
     clearly a rail, not a border. Text position is unchanged. */
  left: 8px;
  top: calc(6px + 0.7em);
  bottom: calc(6px + 0.7em);
  width: 2px;
  background: var(--m2-primary);
  border-radius: 1px;
}
.header .mega-menu .mega-menu__item { position: relative; }
.header .mega-menu .mega-menu__link {
  padding: 6px 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.header .mega-menu .mega-menu__link:hover {
  color: var(--m2-primary);
  transform: translateX(2px);
}
.header .mega-menu .mega-menu__bulge {
  position: absolute;
  /* Shift matches the 8px inward nudge applied to the rail above so the
     bulge's radial-gradient centre still sits on the rail. Bulge width is
     20px; (20/2) - 8 = 2, so left: -1px keeps the centre aligned. */
  left: -1px;
  top: var(--bulge-top, 14px);
  width: 20px;
  height: 30px;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: 0;
  /* Radial gradient gives a soft glowing "bulge" on the rail. */
  background: radial-gradient(
    ellipse 8px 13px at 50% 50%,
    var(--m2-primary) 0%,
    rgba(0, 200, 232, 0.72) 50%,
    transparent 78%
  );
  transition: top 0.25s cubic-bezier(0.4, 0.2, 0.2, 1),
              opacity 0.18s ease;
  z-index: 2;
}
.header .mega-menu .mega-menu__linklist.is-active .mega-menu__bulge {
  opacity: 1;
}

/* ── Header action list: uniform cell sizing + vertical alignment ── */
.header__action-list { gap: 2px; }

.header__action-item {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 4px;
}
.header__action-item:last-child { padding-right: 2px; }
.header__action-item--cart { margin-left: 6px; }
.header__action-item--currency,
.header__action-item--locale { margin-right: 8px; padding: 0 8px; }

/* Uniform icon button footprint */
.header__account-icon,
.header__support-icon,
.m2-theme-toggle,
.header__cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--m2-nav-text, #fff);
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.header__account-icon:hover,
.header__support-icon:hover,
.m2-theme-toggle:hover,
.header__cart-toggle:hover {
  color: var(--m2-primary);
  background: rgba(255,255,255,0.06);
}
.header__account-icon.is-signed-in { color: var(--m2-primary); }
.header__user-icon,
.header__msg-icon { display: block; }

/* Normalize cart icon stroke thickness to match wireframe siblings
   (shared cart snippet ships with stroke-width=2; override in header only) */
.header .icon--cart { width: 22px; height: 22px; }
.header .icon--cart g { stroke-width: 1.75; }

/* Cart: keep icon centered — existing .header__cart-count positioning retained */
.header__cart-toggle .header__action-item-content,
.header__cart-toggle .header__cart-icon,
.header__cart-toggle .icon-state__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Dropdown / mega-menu horizontal rules and separators */
.nav-dropdown { border-color: rgba(255,255,255,0.20); }
.mega-menu__column + .mega-menu__column { border-left: none; padding-left: 0; }
.nav-dropdown__link + .nav-dropdown__link { border-top-color: rgba(255,255,255,0.15); }

.mega-menu--floating {
  border: none;
  border-left: 1px solid var(--m2-border);
  border-radius: 0 8px 8px 0;
}

.mega-menu--floating::before { box-shadow: var(--m2-shadow-elevated); }
.mega-menu__title { color: var(--m2-nav-text); }
.mega-menu__link { color: var(--m2-nav-text); }
.mega-menu__link:hover { color: var(--m2-nav-hover); }
.mega-menu__image-heading { color: var(--m2-nav-text); }
.mega-menu__image-text { color: rgba(255, 255, 255, 0.7); }


/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL CARD OVERRIDES — dark mode
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Product list grid → individual card layout ── */
.product-list {
  border: none !important;
  background: transparent !important;
  gap: 12px;
  padding: 12px;
}

/* Product tiles — standard card: gray bg, black border, 20px radius */
.product-item {
  border-radius: 10px;
  overflow: hidden;
  background: var(--m2-card-bg) !important;
  color: var(--m2-text-on-card);
  box-shadow: var(--m2-shadow-elevated);
  border: 1px solid var(--m2-border) !important;
  padding: 12px !important;
}

.product-item:after {
  box-shadow: none !important;
}

.product-item:hover {
  box-shadow: var(--m2-shadow-glow);
  border-color: var(--m2-border-hover) !important;
}

.product-item__title a,
.product-item__price-list .price {
  color: var(--m2-text-on-card) !important;
}

/* Center text vertically in product tiles */
.product-item--vertical .product-item__info {
  flex: 0 0 auto !important;
  justify-content: center !important;
  padding: 12px 10px !important;
  text-align: center;
}

/* Hide action buttons on vertical tiles (they add bottom space) */
.product-item--vertical .product-item__action-list {
  display: none !important;
}

.product-item__price-list:first-child {
  margin-bottom: 4px !important;
}

.product-item__price-list {
  margin: 0 !important;
}

/* Product gallery — transparent bg, 20px corners wrapping image + thumbnails */
.product-gallery,
.m2-gallery {
  background: transparent;
  border-radius: 10px;
  padding: 12px;
}
/* On mobile the parent card already provides its own padding; the
   gallery's inner 12px padding was indenting the first image so it
   looked clipped on the left edge. Strip it on mobile and let the
   image fill the available width centered. */
@media (max-width: 640px) {
  .product-gallery,
  .m2-gallery { padding: 0; }
  .m2-gallery__main,
  .m2-gallery__stage { margin-left: auto; margin-right: auto; }
  /* Give the thumbstrip room on every side so the active thumb's
     cyan border + 8px glow render fully on mobile. `!important` is
     required because the base `.m2-gallery__thumbstrip{padding:0 4px}`
     and `.m2-gallery__thumbstrip-track{padding:4px 0}` rules appear
     later in the file (cascade order wins on equal specificity). */
  .m2-gallery__thumbstrip { padding: 0 12px !important; }
  .m2-gallery__thumbstrip-track {
    padding: 6px 4px !important;
    scroll-padding-left: 4px !important;
    scroll-padding-right: 4px !important;
    overflow-y: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

/* Gallery card wrapper — dark themed card around gallery */
.product-block-list__item--gallery > .card {
  background: var(--secondary-background) !important;
}

.product-gallery__carousel-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

.product-gallery__thumbnail {
  border-radius: 8px;
  overflow: hidden;
}

/* Wizard gallery — same treatment */
.wiz-gallery__main {
  background: #fff !important;
  border-radius: 10px !important;
}

.wiz-gallery__thumb {
  border-radius: 8px;
}

/* Image glow removed — clean white bg on image area instead */

.product-item__image-wrapper img {
  border-radius: 12px;
  display: block;
}

/* Collection list — transparent container, individual tiles */
.featured-collection .product-list {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Collection page — black bg, transparent container */
.collection .product-list,
.collection .product-list--collection {
  border: none !important;
  background: transparent !important;
}

/* Page sub-header (breadcrumbs on collection pages) */
.page__sub-header {
  background: var(--m2-dark-bg) !important;
  padding: 6px 0 !important;
  margin: 8px 0 !important;
}

/* Filter section on collection/search — light font */
.collection__filter-group-name,
.collection__filter-item,
.collection__sort-by label,
.collection__show-count,
.gspf-filter-option,
.gspf-filter-title {
  color: var(--m2-nav-text) !important;
}

/* Sort/filter controls — match device finder style */
.collection__sort-by select,
.gspf-filter-select {
  background-color: #EAEAEA;
  color: var(--m2-gray);
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  box-shadow: var(--m2-shadow-elevated);
}

/* ══════════════════════════════════════════════════════════════════════════
   #1 PRODUCT PAGE — .card is the main product container
   ══════════════════════════════════════════════════════════════════════════ */

/* All .card elements (product page, account, etc.) → standard card styling */
.card {
  border-radius: 10px !important;
  border: 1px solid var(--m2-border) !important;
  overflow: visible;
  box-shadow: var(--m2-shadow-elevated);
}

/* Collection page — .card is the full-page wrapper, make transparent */
/* Collection page — all .card wrappers transparent */
[data-section-type="collection"] .card,
[data-section-type="featured-collection"] .card,
[data-section-type="collection"] > .container .card,
[data-section-type="featured-collection"] > .container .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Featured collection section itself */
.featured-collection {
  background: transparent !important;
}

/* Collection toolbar — transparent bg, not gray */
.collection__toolbar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--m2-border);
}

/* Collection filter sidebar — light text on dark bg */
.collection__filter-group-name,
.collection__filter-link,
.collection__filter-checkbox label,
.collection__filter-group-name .link--secondary,
.collection__active-filter-item,
.collection__products-count,
.collection__showing-count,
.collection__layout-label,
.collection__layout-button,
.collection-drawer__title,
.collection-drawer__section-title,
.visual-filter__item,
.value-picker-button {
  color: var(--m2-nav-text) !important;
}

/* Value picker dropdowns — dark bg with light text */
.value-picker__inner,
.value-picker {
  background: var(--m2-card-bg) !important;
}

.value-picker__choice-item {
  color: var(--m2-text-on-card) !important;
}

/* Collection drawer (mobile filters) — dark bg */
.collection-drawer {
  background: var(--m2-dark-bg);
  color: var(--m2-nav-text);
}

.collection-drawer__section-title {
  background: var(--m2-card-bg) !important;
}

/* #2 Installation guide section text → adapt to surrounding card bg, not nav bg */
.wiz-install-section,
.wiz-install-section__title,
.wiz-install-section__desc,
.wiz-install-section p,
.product-block-list__item,
.product-block-list__item p,
.product-meta__description,
.product-meta__text {
  color: var(--m2-text-on-card) !important;
}

/* #3 Compatibility table borders → hidden */
.compat-table th,
.compat-table td {
  border-color: transparent !important;
}

/* #4 Home page collection tiles — thinner, no glow, white image area, black divider */
/* Featured collection tiles — thinner, white image, black divider */
.featured-collection .product-item {
  padding: 0 !important;
  border: 1px solid var(--m2-border) !important;
  border-radius: 10px !important;
}

.featured-collection .product-list__column {
  flex: 0 0 20% !important;
  max-width: 220px;
}

.featured-collection .product-item:last-child {
  border-right: 1px solid var(--m2-border) !important;
}

.featured-collection .product-item:hover {
  box-shadow: var(--m2-shadow-elevated) !important;
  border-color: var(--m2-highlight) !important;
}

.featured-collection .product-item__image-wrapper {
  background: #fff;
  border-bottom: 1px solid var(--m2-border);
  border-radius: 9px 9px 0 0;
  margin-bottom: 0;
}

.featured-collection .product-item__image-wrapper::after {
  display: none;
}

.featured-collection .product-item__info {
  padding: 10px 12px;
}

/* #5 All gray card shadows → #EAEAEA */
/* Already handled via --m2-shadow-elevated token: rgba(234,234,234,0.15) */

/* #6 Vinyl Advanced badge → orange metallic + light text */
.vinyl-card__badge--advanced {
  background: var(--m2-badge-bg) !important;
  color: var(--m2-badge-text) !important;
}

/* ── Installation section — force dark theme on all child cards ── */
.card__section .card,
.card .card {
  background: var(--m2-dark-bg) !important;
  color: var(--m2-nav-text) !important;
}

.card__section .card__header,
.card__section .card__section {
  color: var(--m2-nav-text);
}

/* Video embed tiles in product installation section */
.product-block-list__item iframe {
  border-radius: 8px;
}

/* ── #1 Search bar — teal border ── */
.search-bar__top {
  border: 1px solid var(--m2-highlight) !important;
  background: var(--m2-dark-bg) !important;
  border-radius: 8px;
}

/* ── #2 Device finder dropdowns ── */
.device-finder__select {
  background-color: var(--m2-control-bg) !important;
  color: var(--m2-control-text) !important;
  border: 1px solid var(--m2-control-border) !important;
  border-radius: 6px !important;
}

.device-finder__select:focus {
  border-color: var(--m2-control-focus) !important;
}

.device-finder__select option {
  background: var(--m2-bg) !important;
  color: var(--m2-nav-text) !important;
}

/* ── #5 Recently viewed — no box, transparent wrapper ── */
[data-section-type="recently-viewed-products"] .product-list,
[data-section-type="product-recommendations"] .product-list {
  background: transparent !important;
  border: none !important;
}

[data-section-type="recently-viewed-products"] .scroller,
[data-section-type="product-recommendations"] .scroller {
  background: transparent;
}

/* ── Footer gold line ── */
.footer {
  border-top: none !important;
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--m2-gold-line-warm);
}

/* ── "Hello <name>" greeting ── */
.header__action-item-title {
  color: var(--m2-callout) !important;
}

/* ── Breadcrumb / navigation carats ── */
.breadcrumb__list svg,
.card__navigation-breadcrumb svg {
  color: var(--m2-text-muted);
  fill: var(--m2-text-muted);
}

.breadcrumb__link {
  color: var(--m2-text-muted);
}

.breadcrumb__item:last-child {
  color: #ffffff;
  font-weight: 500;
}

.breadcrumb__item,
.breadcrumb__list {
  font-family: var(--font-mono) !important;
}

/* ── Page sub-header (collection pages, etc.) ── */
.page__sub-header {
  background: #000 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   SLIDESHOW — button overrides
   ══════════════════════════════════════════════════════════════════════════ */

.slideshow__button--auto-width {
  width: auto;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: var(--m2-primary);
  color: #ffffff;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}

.slideshow__button--auto-width:hover {
  box-shadow: var(--m2-shadow-btn);
}


/* ══════════════════════════════════════════════════════════════════════════
   DEVICE FINDER
   ══════════════════════════════════════════════════════════════════════════ */

.device-finder {
  text-align: center;
  padding: 32px 16px;
  background: var(--background);
  color: var(--heading-color);
}

.device-finder__title {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.device-finder__subtitle {
  margin: 0 0 24px;
  opacity: 0.6;
  font-size: .95rem;
}

.device-finder__form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.device-finder__field {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 280px;
  /* Label on top, control below. */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.device-finder__field--button {
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
  /* Buttons have no label — push them down so they sit on the same line
     as the controls (whose tops are now offset by the label above). */
  justify-content: flex-end;
}

/* Vertical "OR" divider column between the attribute-filter path
   (manufacturer + series) and the direct-jump path (model number).
   Replaces the prior left-border-on-the-model-field decoration with a
   real flex item: a thin centered rule with the OR chip overlaying the
   middle. Stretches to the height of the adjacent controls via
   align-items: stretch on .device-finder__form. */
.device-finder__divider {
  position: relative;
  flex: 0 0 auto;
  width: 1px;
  background: var(--m2-border);
  margin: 0 12px;
  align-self: stretch;
}

.device-finder__or {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  background: var(--m2-bg);
  font-family: var(--font-mono, var(--font-sans));
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--m2-primary);
  z-index: 1;
  pointer-events: none;
}

/* Standalone reset-icon button — sits between Series and the OR divider
   as its own narrow flex slot. Sized to the 48px control row but the
   visible hit-target is just the 28px circle (the surrounding flex slot
   keeps it vertically centered on the dropdowns). */
.device-finder__reset-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-self: center;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--m2-border);
  border-radius: 50%;
  color: var(--m2-text-muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.device-finder__reset-icon:hover {
  color: var(--m2-primary);
  border-color: var(--m2-primary);
  background: rgba(0, 200, 232, .08);
}

.device-finder__label {
  font-family: var(--font-mono, var(--font-sans));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m2-text-muted);
}

.device-finder__select {
  width: 100%;
  height: 48px;
  padding: 0 36px 0 14px;
  font-size: .95rem;
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  background-color: #EAEAEA;
  color: var(--m2-gray);
  box-shadow: var(--m2-shadow-elevated);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.device-finder__select:disabled { opacity: 0.4; cursor: not-allowed; }
.device-finder__select:focus { outline: none; border-color: var(--accent-color); }
.device-finder__select option { background: var(--m2-card-bg); color: var(--m2-text-on-card); }

/* ── Model-number quick-jump (autocomplete) ─────────────────────────────
   Sibling of the manufacturer/series selects in the device-finder row.
   Uses the theme's `--m2-control-*` tokens so the input matches the
   selects in both dark and light modes (same fill, text, border, focus
   ring). The wrapping .device-finder__field--model is positioned:
   relative so the absolute suggestion list anchors to it.
*/
.device-finder__field--model { position: relative; }

.device-finder__input {
  width: 100%;
  height: 48px;            /* matches .device-finder__select */
  padding: 0 14px;
  font-size: .95rem;
  font-family: var(--font-sans);
  background-color: var(--m2-control-bg);
  color: var(--m2-control-text);
  border: 1px solid var(--m2-control-border);
  border-radius: 6px;
  box-shadow: var(--m2-shadow-elevated);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.device-finder__input::placeholder {
  color: var(--m2-control-text);
  opacity: 0.55;
}
.device-finder__input:focus {
  outline: none;
  border-color: var(--m2-control-focus);
}

/* The wrapper owns positioning + the dark backdrop. The <ul> inside owns
   the scrolling overflow; a custom track + thumb overlay on the right is
   always visible (macOS auto-hides styled native scrollbars even with
   -webkit-appearance: none, so we render our own). */
.device-finder__model-wrap {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(5, 5, 5, 0.80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  box-shadow: var(--m2-shadow-elevated);
  z-index: 30;
  overflow: hidden; /* clip the rounded corners over the list */
}

.device-finder__model-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Hard-cap height; show ~6 items before scrolling. */
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Hide the native scrollbar — the custom overlay below replaces it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Reserve room on the right so the custom track doesn't sit over text. */
  padding-right: 14px;
}
.device-finder__model-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Custom scrollbar overlay — track pinned to the wrapper's right edge,
   thumb position + height computed in JS from list.scrollTop /
   scrollHeight. Pointer-events disabled so it doesn't block clicks. */
.device-finder__model-scroll {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 5px;
  width: 6px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  pointer-events: none;
}
.device-finder__model-scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36px;
  background: var(--m2-primary);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 200, 232, 0.35);
}
.device-finder__model-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--m2-text-on-card);
  transition: background-color 0.12s ease;
  /* Themed separator between entries — last item has no rule. */
  border-bottom: 1px solid var(--m2-border);
}
.device-finder__model-item:last-child { border-bottom: 0; }
.device-finder__model-item:hover,
.device-finder__model-item.is-active {
  background-color: rgba(0, 200, 232, 0.10);
}
/* Top line: model number — normal themed text. */
.device-finder__model-item-name {
  font-weight: 600;
  font-size: .92rem;
  font-family: var(--font-mono, var(--font-sans));
  color: var(--m2-text-on-card);
}
.device-finder__model-item-name mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
/* Bottom line: product title — accent themed text. */
.device-finder__model-item-title {
  font-size: .78rem;
  color: var(--m2-primary);
  font-weight: 600;
}
[data-theme="light"] .device-finder__model-wrap {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .device-finder__model-scroll {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .device-finder__model-item {
  color: #2a2a2a;
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .device-finder__model-item-name {
  color: #2a2a2a;
}

.device-finder__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 48px;
  padding: 0 28px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  background: var(--m2-grad-btn);
  color: var(--m2-nav-text);
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
}

.device-finder__button:hover:not(:disabled) { box-shadow: var(--m2-shadow-btn); }
.device-finder__button:disabled { opacity: 0.4; cursor: not-allowed; }

.device-finder__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  height: 48px;
  padding: 0 28px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.device-finder__reset:hover {
  background: rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .35);
}

/* Fallback prompt sitting between the controls and the results — same
   ask as the product-wizard step-1 "shoot us a request" copy. */
.device-finder__missing {
  text-align: center;
  margin: 18px 0 0;
  font-size: .9rem;
  color: var(--m2-text-muted);
}
.device-finder__missing-link {
  color: var(--m2-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s;
}
.device-finder__missing-link:hover { opacity: .8; }

/* Device finder results now reuse .lpc__* classes (see latest-products-carousel)
   so tile chrome stays in lockstep with the Latest Skins carousel. */
.device-finder__results { margin-top: 28px; }

.device-finder__results-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
}

@media screen and (max-width: 640px) {
  .device-finder { padding: 20px 12px; }
  .device-finder__title { font-size: 1.2rem; margin-bottom: 4px; }
  .device-finder__subtitle { font-size: .85rem; margin-bottom: 14px; }
  .device-finder__form { gap: 8px; }
  /* Mobile: every field takes its own row — manufacturer, series, model
     each stack vertically. The reset icon stays absolute-positioned at
     the top-right of the series field. */
  .device-finder__field { flex: 1 1 100%; min-width: 0; max-width: none; }
  /* Vertical divider can't sit between row-wrapped fields without looking
     broken, so swap it for a horizontal "OR" chip on its own row. */
  .device-finder__divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
    align-self: auto;
    margin-top: 6px;
  }
  .device-finder__or {
    font-size: .7rem;
  }
  .device-finder__select { height: 42px; font-size: .85rem; padding: 0 30px 0 10px; }
  .device-finder__input { height: 42px; font-size: .85rem; }
  .device-finder__results { margin-top: 18px; }

  /* Mobile: results carousel shows ~1.5 tiles at a time so the peek of
     the next card signals "more on the right". Wrapper padding is pulled
     in tight and card width is a calc'd share of the track (1.5 cards +
     1 gap = 100% of the wrapper interior). The edge fade is halved so
     it hints at overflow without eating the half-tile peek. */
  .device-finder__results .lpc__wrapper { padding: 0 20px; }
  .device-finder__results .lpc__track { scroll-padding-left: 20px; }
  .device-finder__results .lpc__card { flex: 0 0 calc((100% - 16px) / 1.5); }
  .device-finder__results .lpc__fade { width: 30px; }
  .device-finder__results .lpc__fade--left { left: 20px; }
  .device-finder__results .lpc__fade--right { right: 20px; }
  .device-finder__results .lpc__arrow--left { left: 4px; }
  .device-finder__results .lpc__arrow--right { right: 4px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   VINYL GRID — "Our Material Library" page
   ══════════════════════════════════════════════════════════════════════════ */

.vinyl-grid-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 48px;
  color: var(--m2-text-on-card);
}

/* ── Header ── */
.vinyl-grid__header {
  text-align: center;
  margin: 8px 0 24px;
}
.vinyl-grid__heading {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.vinyl-grid__subheading {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1rem;
  color: var(--m2-text-muted);
  line-height: 1.55;
}

/* ── Sampler pack CTA callout ── */
.vinyl-grid__sampler-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin: 0 0 20px;
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  background: var(--m2-grad-callout);
  color: var(--m2-callout-text);
  box-shadow: var(--m2-shadow-elevated);
}
.vinyl-grid__sampler-copy {
  flex: 1 1 320px;
  font-size: 0.98rem;
  line-height: 1.5;
}
.vinyl-grid__sampler-copy p { margin: 0; }
.vinyl-grid__sampler-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--m2-highlight);
  border-radius: 8px;
  background: transparent;
  color: var(--m2-primary);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.15s;
}
.vinyl-grid__sampler-btn:hover,
.vinyl-grid__sampler-btn:focus-visible {
  box-shadow: var(--m2-shadow-glow);
  transform: translateY(-1px);
}

/* ── Advanced install explainer ── */
.vinyl-grid__advanced-explainer {
  padding: 16px 20px;
  margin: 0 0 28px;
  border: 1px solid var(--m2-border);
  border-left: 3px solid var(--m2-highlight);
  border-radius: 10px;
  background: var(--m2-card-surface);
}
.vinyl-grid__advanced-title {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m2-primary);
}
.vinyl-grid__advanced-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--m2-text-on-card);
}
.vinyl-grid__advanced-body p { margin: 0 0 8px; }
.vinyl-grid__advanced-body p:last-child { margin-bottom: 0; }
.vinyl-grid__advanced-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--m2-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.vinyl-grid__advanced-link:hover,
.vinyl-grid__advanced-link:focus-visible {
  border-bottom-color: var(--m2-primary);
}

/* ── Filter bar ── */
.vinyl-grid__filters {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 16px 20px;
  margin: 0 0 14px;
  border: 1px solid var(--m2-border);
  border-radius: 10px;
  background: var(--m2-card-surface);
}
.vinyl-filter-group {
  flex: 1 1 220px;
  min-width: 0;
}
.vinyl-filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0 8px;
  border: none;
  background: transparent;
  color: var(--m2-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.vinyl-filter-group__toggle .vinyl-filter-group__chevron {
  display: none;
  transition: transform 0.2s;
}
.vinyl-filter-group__toggle[aria-expanded="false"] .vinyl-filter-group__chevron {
  transform: rotate(-90deg);
}
.vinyl-filter-group__panel {
  overflow: hidden;
  transition: height 0.25s ease-in-out;
}
.vinyl-filter-group__panel-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.vinyl-filter-chip {
  padding: 6px 14px;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: transparent;
  color: var(--m2-text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.2s;
}
.vinyl-filter-chip:hover {
  border-color: var(--m2-border-hover);
  color: var(--m2-text-on-card);
}
.vinyl-filter-chip.is-active {
  /* Canonical selected-state treatment — matches wizard-kit-tile.is-selected */
  border-color: var(--m2-highlight);
  color: var(--m2-primary);
  box-shadow: var(--m2-shadow-glow);
}
.vinyl-filter-chip:focus-visible {
  outline: 2px solid var(--m2-highlight);
  outline-offset: 2px;
}

/* Result count */
.vinyl-grid__count {
  margin: 0 0 16px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--m2-text-muted);
  letter-spacing: 0.03em;
}

/* ── Grid ── */
.vinyl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.vinyl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m2-border);
  border-radius: 10px;
  background: var(--m2-card-bg);
  box-shadow: var(--m2-shadow-elevated);
  color: var(--m2-text-on-card);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vinyl-card:hover {
  transform: translateY(-3px);
  border-color: var(--m2-highlight);
  box-shadow: var(--m2-shadow-glow);
}
.vinyl-card.is-hidden {
  display: none;
}

/* Card media */
.vinyl-card__media {
  position: relative;
}
.vinyl-card__image-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
}
.vinyl-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vinyl-card__image-stack .vinyl-card__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vinyl-card__image-stack .vinyl-card__image.is-active {
  opacity: 1;
}
.vinyl-card__media > .vinyl-card__image {
  aspect-ratio: 1 / 1;
  background: #fff;
}
.vinyl-card__no-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m2-secondary-surface);
  color: var(--m2-text-faint);
  font-size: 0.9rem;
}

/* Image toggle */
.vinyl-card__image-toggle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vinyl-card__toggle-btn {
  padding: 2px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.2s;
}
.vinyl-card__toggle-btn.is-selected {
  border-color: var(--m2-highlight);
  color: var(--m2-primary);
  box-shadow: var(--m2-shadow-glow);
}
/* Image toggle sits on a dark translucent pill over a photograph, so its
   accent is theme-independent — in light mode, the canonical darker teal
   reads muddy against the dark backdrop. Use the brighter cyan here. */
[data-theme="light"] .vinyl-card__toggle-btn.is-selected {
  border-color: #00C8E8;
  color: #00C8E8;
  box-shadow: 0 0 16px 2px rgba(0, 200, 232, 0.25);
}
.vinyl-card__toggle-btn:focus-visible {
  outline: 2px solid var(--m2-highlight);
  outline-offset: 2px;
}

/* Badge stack */
.vinyl-card__badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  z-index: 3;
}
.vinyl-card__badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
}
.vinyl-card__badge--advanced {
  background: var(--m2-badge-bg);
  color: var(--m2-badge-text);
  border: none;
  cursor: help;
}
.vinyl-card__badge--clearance {
  background: var(--m2-status-warning);
  color: var(--m2-status-warning-text);
}
.vinyl-card__badge--low {
  background: var(--m2-status-warning);
  color: var(--m2-status-warning-text);
  opacity: 0.85;
}
.vinyl-card__badge--oos {
  background: var(--m2-status-danger);
  color: var(--m2-status-danger-text);
}

/* Advanced badge tooltip — anchored to the badge, not the card */
.vinyl-card__adv-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 240px;
  max-width: calc(100vw - 40px);
  padding: 10px 12px;
  background: var(--m2-tooltip-bg);
  color: var(--m2-text-on-card);
  border: 1px solid var(--m2-tooltip-border);
  border-radius: 8px;
  box-shadow: var(--m2-shadow-elevated);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 4;
}
.vinyl-card__adv-tooltip p { margin: 0 0 6px; }
.vinyl-card__adv-tooltip p:last-child { margin-bottom: 0; }
.vinyl-card__badge--advanced:hover + .vinyl-card__adv-tooltip,
.vinyl-card__badge--advanced:focus-visible + .vinyl-card__adv-tooltip,
.vinyl-card__adv-tooltip.is-open,
.vinyl-card__adv-tooltip:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Card info */
.vinyl-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
}
.vinyl-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.3;
}
.vinyl-card__taxonomy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--m2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vinyl-card__taxonomy-sep {
  margin: 0 6px;
  opacity: 0.5;
}
.vinyl-card__description {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--m2-text-on-card);
}
.vinyl-card__description p { margin: 0 0 6px; }
.vinyl-card__description p:last-child { margin-bottom: 0; }
.vinyl-card__description strong {
  /* Keep intentional emphasis subtle so it doesn't compete with the taxonomy row above */
  font-weight: 600;
}
.vinyl-card__fingerprint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m2-text-muted);
}
.vinyl-card__fingerprint[data-fp="high"] { color: var(--m2-primary); }
.vinyl-card__fingerprint[data-fp="low"] { color: var(--m2-text-faint); }
.vinyl-card__fp-icon {
  flex-shrink: 0;
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  .vinyl-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Responsive: mobile — collapse filter groups to accordion ── */
@media (max-width: 700px) {
  .vinyl-grid__filters {
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
  }
  .vinyl-filter-group {
    flex: 1 1 100%;
    border-top: 1px solid var(--m2-border);
    padding: 8px 0;
  }
  .vinyl-filter-group:first-child { border-top: none; }
  .vinyl-filter-group__toggle {
    padding: 8px 0;
  }
  .vinyl-filter-group__toggle .vinyl-filter-group__chevron {
    display: inline-block;
  }
  .vinyl-filter-group__panel {
    height: 0;
  }
  .vinyl-filter-group__toggle[aria-expanded="true"] + .vinyl-filter-group__panel {
    height: auto;
  }
  .vinyl-filter-group__panel-inner {
    padding: 6px 0 10px;
  }

  .vinyl-grid { grid-template-columns: 1fr; }

  .vinyl-grid__sampler-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    box-shadow: none;
  }
  .vinyl-grid__sampler-copy {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.4;
  }
  .vinyl-grid__sampler-btn {
    padding: 6px 12px;
    font-size: .72rem;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .vinyl-card__adv-tooltip {
    right: auto;
    left: 0;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   BEFORE/AFTER REVIEWS
   ══════════════════════════════════════════════════════════════════════════ */

.before-after-reviews {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.review-item {
  background: var(--m2-card-bg);
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  padding: 18px;
  /* No box-shadow — the trust-bar accent + cyan border provide enough
     visual lift on dark, and on light the flat card surface already
     reads as a card without elevation. */
  color: var(--m2-text-on-card);
  display: flex;
  flex-direction: column;
  text-align: left;
  /* overflow:hidden + border-box keeps the negative-margin image
     wrapper from extending past the rounded corners and prevents long
     text from stretching the tile beyond its grid track. */
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}

.review-product-link {
  display: block;
  /* Pull out of the .review-item's 18px padding so the image hugs the
     top + left + right edges of the tile. Bottom margin (16px) leaves a
     consistent gap between the image and the device/text content below. */
  margin: -18px -18px 16px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  transition: opacity 0.2s;
}

.review-product-link:hover {
  opacity: 0.85;
}

.review-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Corner rounding lives on the .review-product-link wrapper so the
     image hugs the wrapper's clipped edges. */
  border-radius: 0;
  display: block;
}

/* Placeholder for archived/retired products. No border — the dashed
   outline was reading as a stray artifact at the tile's flush edges.
   Subtle surface tint + muted icon/text is enough to communicate the
   placeholder state without competing with the tile chrome. */
.review-product-link--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -18px -18px 16px;
  border-radius: 12px 12px 0 0;
  border: none;
  background: var(--m2-card-surface);
  color: var(--m2-text-muted);
}

.review-image--placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

.review-device {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--m2-primary);
  text-decoration: none;
  margin: 0 0 10px;
  display: block;
  text-align: center;
}

a.review-device:hover {
  opacity: 0.7;
}

.review-text {
  color: var(--m2-text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 12px;
  /* Clamp to 4 lines + ellipsis so a long review can't stretch one tile
     taller than its neighbors. Bump to 3 for tighter rows / 5 for
     roomier. Replaces the previous `flex: 1` (which made text fill
     remaining space and defeated equal-height clamping). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reviewer-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--m2-primary);
  margin: 0 0 6px;
  /* Pin name+stars (stars follow in DOM order) to the bottom of every
     tile so they line up across the row no matter how much review text
     each tile has. */
  margin-top: auto;
  text-align: center !important;
  width: 100%;
}

.review-stars {
  color: var(--m2-primary);
  font-size: 14px;
  margin: 0;
  letter-spacing: 2px;
  text-align: center !important;
  width: 100%;
}

@media screen and (max-width: 1100px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ── Zoomable review images ── */
.review-product-link--zoomable {
  cursor: zoom-in;
  position: relative;
}

.review-zoom-hint {
  position: absolute;
  bottom: 20px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.review-product-link--zoomable:hover .review-zoom-hint {
  opacity: 1;
}

/* ── Review lightbox ── */
.review-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.review-lightbox[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.review-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.review-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
  padding: 8px;
}

.review-lightbox__close:hover {
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════════════
   COMPATIBILITY MODAL
   ══════════════════════════════════════════════════════════════════════════ */

.pf-compat-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.pf-compat-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.pf-compat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pf-compat-modal__dialog {
  position: relative;
  background: var(--secondary-background);
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  box-shadow: var(--m2-shadow-elevated);
  max-width: 700px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 32px 32px;
}

.pf-compat-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--m2-text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.pf-compat-modal__close:hover {
  color: var(--heading-color);
}

.pf-compat-modal__header {
  margin-bottom: 16px;
  padding-right: 32px;
}

.pf-compat-modal__body {
  color: var(--text-color);
}

.pf-compat-modal__body .rte {
  font-size: 0.88rem;
  line-height: 1.65;
}

.pf-compat-modal__divider {
  border: none;
  border-top: 1px solid var(--m2-border);
  margin: 24px 0;
}

.pf-compat-modal__similar-heading {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0 0 16px;
}

.pf-compat-modal__products {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-compat-modal__product-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--m2-border);
  border-radius: 8px;
  padding: 8px;
  transition: border-color 0.2s;
}

.pf-compat-modal__product-tile:hover {
  border-color: var(--m2-primary);
}

.pf-compat-modal__product-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 6px;
  background: #ffffff;
}

.pf-compat-modal__product-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--m2-primary);
  line-height: 1.3;
}

/* Compat table column widths inside popup: 40/30/30 */
.pf-compat-modal .compat-table th:first-child,
.pf-compat-modal .compat-table td:first-child { width: 40%; }
.pf-compat-modal .compat-table th:nth-child(2),
.pf-compat-modal .compat-table td:nth-child(2) { width: 30%; }
.pf-compat-modal .compat-table th:nth-child(3),
.pf-compat-modal .compat-table td:nth-child(3) { width: 30%; }
.pf-compat-modal .compat-table { table-layout: fixed; }

.pf-compat-modal__intro {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--m2-text-muted);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--m2-border);
}

.pf-compat-modal__request {
  font-size: 0.88rem;
  color: var(--m2-text-muted);
  text-align: center;
  margin: 0;
}

.pf-compat-modal__request a {
  color: var(--m2-primary);
  font-weight: 600;
  text-decoration: none;
}

.pf-compat-modal__request a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT VARIANT SELECTOR
   ══════════════════════════════════════════════════════════════════════════ */

.pf-section-label,
.card .pf-section-label,
.product-block-list__item .pf-section-label {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--heading-color) !important;
  text-align: center;
}

/* Product page section/content titles → white */
.product-meta__title,
.card__section .heading,
.card__header .heading,
.card__header .card__title {
  color: var(--m2-nav-text) !important;
}

/* Product page body text → muted white */
.card__section p,
.card__section li,
.card__section .rte,
.product-meta__description,
.product-meta__text,
.product-block-list__item p {
  color: var(--text-color) !important;
}

.pf-section-divider {
  width: 100%;
  margin: 20px 0 24px;
  border: none;
  border-top: 2px solid var(--m2-border);
}

/* ── Logo buttons ── */
.pf-logo-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pf-logo-btn__radio { position: absolute; opacity: 0; pointer-events: none; }

.pf-logo-btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--m2-gray);
  border-radius: 6px;
  background: transparent;
  color: var(--m2-nav-text);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: 1;
  transition: all .2s ease;
}

.pf-logo-btn:hover {
  border-color: var(--m2-highlight);
  box-shadow: var(--m2-shadow-glow);
}

.pf-logo-btn__radio:checked + .pf-logo-btn {
  border-color: var(--m2-highlight);
  background: var(--m2-grad-btn);
  color: #000;
  box-shadow: var(--m2-shadow-glow);
}

/* Cutout dropdown (replaces button group) */
.pf-logo-select {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 42px;
  padding: 0 36px 0 14px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  background-color: var(--secondary-background);
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.pf-logo-select:hover,
.pf-logo-select:focus {
  border-color: var(--m2-primary);
  outline: none;
}

.pf-logo-select option {
  background: var(--secondary-background);
  color: var(--text-color);
}

[data-theme="light"] .pf-logo-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Kit tiles ── */
.pf-kit-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.pf-kit-tile__radio { position: absolute; opacity: 0; pointer-events: none; }

.pf-kit-tile {
  position: relative;
  border: 2px solid var(--m2-gray);
  border-radius: 10px;
  background: var(--m2-dark-bg);
  color: var(--m2-nav-text);
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  transition: box-shadow .2s, border-color .15s;
}

.pf-kit-tile:hover {
  box-shadow: var(--m2-shadow-glow);
  border-color: var(--m2-highlight);
}

.pf-kit-tile:has(.pf-kit-tile__radio:checked) {
  border-color: var(--m2-highlight);
  box-shadow: var(--m2-shadow-glow);
}

.pf-kit-tile__label-wrap {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* Preview image area — left side, fixed 200x200 */
.pf-kit-tile__preview {
  flex: 0 0 216px;
  width: 216px;
  height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.pf-kit-tile img,
.pf-kit-tile svg {
  display: block;
  object-fit: contain;
  background: transparent;
  transition: opacity 0.2s ease;
  width: 100%;
  height: 100%;
}

/* Hide images until JS has set the correct src via data-current-src */
.pf-kit-tile img:not([data-current-src]) {
  opacity: 0 !important;
}

/* Vertical rule between preview and content */
.pf-kit-tile__vr {
  width: 1px;
  align-self: stretch;
  background: var(--m2-border);
  flex-shrink: 0;
}

/* Content area — right side */
.pf-kit-tile__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
}

/* Dark mode: invert black lines to white */
.pf-kit-tile img,
.pf-kit-tile svg {
  filter: invert(1);
}

/* Dark mode selected: cyan tint */
.pf-kit-tile:has(.pf-kit-tile__radio:checked) img,
.pf-kit-tile:has(.pf-kit-tile__radio:checked) svg {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(155deg) brightness(0.85);
}

/* Light mode */
/* Light mode kit tiles: no filter for imgs (JPGs stay as-is), no filter for SVGs */
[data-theme="light"] .pf-kit-tile img {
  filter: none !important;
  background: #ffffff !important;
}

[data-theme="light"] .pf-kit-tile svg {
  filter: none !important;
}

/* Light mode selected: cyan tint ONLY on SVGs; JPG imgs stay unfiltered */
[data-theme="light"] .pf-kit-tile:has(.pf-kit-tile__radio:checked) svg {
  filter: sepia(1) saturate(5) hue-rotate(155deg) brightness(0.8) !important;
}

/* Light mode selected JPG imgs: no filter, just border highlight */
[data-theme="light"] .pf-kit-tile:has(.pf-kit-tile__radio:checked) img {
  filter: none !important;
}

.pf-kit-tile__rule { display: none; } /* replaced by __vr */

.pf-kit-tile__label {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}

.pf-kit-tile__desc {
  font-size: .82rem;
  color: var(--m2-text-muted);
}

.pf-kit-tile__desc ul { margin: 0; padding-left: 0; list-style: none; }
.pf-kit-tile__desc li { padding: 2px 0; }
.pf-kit-tile__desc li::before { content: '\00ab\00a0'; color: rgba(0, 165, 199, .6); font-weight: 700; letter-spacing: -.02em; }
.pf-kit-tile__desc li::after  { content: '\00a0\00bb'; color: rgba(0, 165, 199, .6); font-weight: 700; letter-spacing: -.02em; }
.pf-kit-tile--unavailable { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  /* Kit tiles: side-by-side, 50/50 split */
  .pf-kit-tile__label-wrap {
    flex-direction: row;
  }
  .pf-kit-tile__preview {
    flex: 0 0 50%;
    width: 50%;
    height: auto;
    min-height: 120px;
  }
  .pf-kit-tile img, .pf-kit-tile svg {
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
  }
  .pf-kit-tile__vr {
    width: 1px;
    height: auto;
    align-self: stretch;
  }
  .pf-kit-tile__content {
    flex: 0 0 calc(50% - 1px);
    padding: 10px 12px;
  }
  .pf-kit-tile__label { font-size: 0.88rem; }
  .pf-kit-tile__desc { font-size: 0.75rem; }

  /* Product page cards: add padding so they don't touch edges */
  .product-block-list__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .product-block-list__item > .card {
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 12px;
    border-radius: 10px !important;
  }
}

/* ── Cart summary box ── */
.pf-cart-box {
  padding: 16px;
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  background: var(--m2-grad-callout);
  color: var(--m2-callout-text);
  box-shadow: var(--m2-shadow-elevated);
  margin-top: 4px;
  margin-bottom: 20px;
}

.pf-cart-box__title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.pf-cart-box__selection { font-size: .9rem; line-height: 1.6; width: 100%; }
.pf-cart-box__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pf-cart-box__row--value-only { justify-content: flex-end; }
.pf-cart-box__row--after-includes { margin-top: 6px; }
.pf-cart-box__lbl { color: var(--m2-nav-text); white-space: nowrap; flex-shrink: 0; }
.pf-cart-box__val { font-weight: 600; text-align: right; }

.pf-cart-box__divider {
  border: none;
  border-top: 1px solid var(--m2-border);
  width: 100%;
  margin: 12px 0 8px;
}

.pf-cart-box__note {
  font-size: .82rem;
  color: var(--m2-nav-text);
  margin: 0;
  line-height: 1.4;
}

/* ── Vinyl swatches ── */
.pf-swatch-wrap {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--m2-gray);
  border-radius: 8px;
  padding: 0;
  background: transparent;
  transition: background .15s, box-shadow .15s;
  position: relative;
  margin: 4px;
}

.pf-swatch-wrap:hover {
  border-color: var(--m2-highlight);
  box-shadow: var(--m2-shadow-glow);
}

.pf-swatch-wrap:has(.is-selected),
.pf-swatch-wrap:has(.color-swatch__radio:checked) {
  border-color: var(--m2-highlight);
  box-shadow: var(--m2-shadow-glow);
}

/* Remove base theme's accent-color border on selected swatches inside our wraps */
.pf-swatch-wrap .color-swatch__radio:checked + .color-swatch__item:after,
.pf-swatch-wrap .color-swatch__item.is-selected:after {
  display: none !important;
}

.pf-swatch-wrap .color-swatch {
  margin: 0 !important;
  background: transparent !important;
}

.pf-swatch-wrap .color-swatch__item,
.product-form__option .pf-swatch-wrap .color-swatch__radio + .color-swatch__item,
.product-form__option .pf-swatch-wrap .color-swatch__item.is-selected,
.product-form__option .pf-swatch-wrap .color-swatch__item:hover {
  border: none !important;
  border-radius: 5px;
  width: 100px !important;
  height: 100px !important;
  overflow: hidden;
  display: block !important;
  padding: 0 !important;
  background-color: transparent !important;
}
.pf-swatch-wrap .swatch-sale-banner { font-size: 11px; padding: 3px 0; letter-spacing: 0.4px; }
.pf-swatch-wrap .color-swatch { margin: 0; }

.color-swatch-list:has(.pf-swatch-wrap) { display: flex; flex-wrap: wrap; justify-content: center; margin: -4px; }
.color-swatch-list:has(.pf-swatch-wrap) .swatch-group__title { flex-basis: 100%; text-align: center; margin: 14px 0 6px; }

/* ── Swatch tooltip ── */
.pf-swatch-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--m2-tooltip-bg);
  color: var(--text-color);
  border: 1px solid var(--m2-tooltip-border);
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 240px;
  max-width: 400px;
  box-shadow: var(--m2-shadow-elevated);
  z-index: 200;
  pointer-events: none;
  white-space: normal;
  text-align: left;
}

.pf-swatch-wrap:hover .pf-swatch-tooltip { display: block; }

.pf-swatch-tooltip__label { font-weight: 700; font-size: .82rem; margin: 0; line-height: 1.3; }

.pf-swatch-tooltip__rule {
  border: none;
  border-top: 1px solid var(--m2-border);
  margin: 5px 0;
}

.pf-swatch-tooltip__desc { font-size: .87rem; color: var(--text-color); margin: 0; line-height: 1.4; }
.pf-swatch-tooltip__desc p { margin: 0 0 4px; }
.pf-swatch-tooltip__desc p:last-child { margin-bottom: 0; }
.pf-swatch-tooltip__desc strong { color: var(--heading-color); }
.pf-swatch-tooltip__desc ul,
.pf-swatch-tooltip__desc ol { margin: 0; padding-left: 16px; }

/* ── Gallery thumbnails below main image ── */
@media screen and (min-width: 1000px) {
  .product-gallery.product-gallery--with-thumbnails { flex-direction: column !important; }
  .product-gallery--with-thumbnails .product-gallery__carousel-wrapper { order: 1 !important; width: 100% !important; margin: 0 !important; }
  .product-gallery--with-thumbnails .scroller { order: 2 !important; width: 100% !important; position: relative; }

  .product-gallery--with-thumbnails .product-gallery__thumbnail-list {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 32px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-gallery--with-thumbnails .product-gallery__thumbnail-list::-webkit-scrollbar { display: none; }
  .product-gallery--with-thumbnails .product-gallery__thumbnail { flex-shrink: 0; }

  .pf-thumb-scroll {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid var(--m2-border);
    border-radius: 50%;
    background: var(--secondary-background);
    color: var(--heading-color);
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    transition: background .15s, opacity .15s;
    opacity: 0;
    pointer-events: none;
  }

  .pf-thumb-scroll:hover { background: var(--m2-dark-bg); }
  .pf-thumb-scroll--visible { opacity: 1; pointer-events: auto; }
  .pf-thumb-scroll--left { left: 0; }
  .pf-thumb-scroll--right { right: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   INSTALL HELP CENTER (consolidated from sections/install-help.liquid)
   ══════════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════════
     PAGE — wizard-matched container
     ══════════════════════════════════════════════════════════════════════════ */
  .ih-page {
    /* Match the site's standard content width — same 1480px cap as
       the `.container` wrapper used by the footer and other sections.
       The install-help section doesn't sit inside its own .container
       wrapper, so this max-width on .ih-page IS the constraint. */
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 32px 48px;
  }
  .ih-page__header {
    text-align: center;
    margin-bottom: 32px;
  }
  .ih-page__title {
    /* Promoted from caps-mono micro-title to a real H1 — clamp scales
       it down on mobile, tight letter-spacing matches the m2-secthead
       treatment used elsewhere. */
    font-weight: 700;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0 0 12px;
    color: var(--heading-color);
  }
  .ih-page__intro {
    margin: 0 auto;
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--m2-text-muted);
  }

  /* ── Wizard-style section cards ─────────────────
     Tile chassis aligned with trust-bar / product-card / closing CTA
     system: 16px corners, standard border, no elevated drop-shadow
     (dark mode picks up the cyan radial wash + cyan-tinted border
     via the shared `.ih-card` entry in the trust-bar accent selector
     in this file's universal section).
     `max-width: 1100px` matches the .ih-vinyl section below — the
     two vinyl tiles together fill that exact width, so capping the
     search tile here aligns its visible edges with the vinyl row's
     outer edges. */
  .ih-card {
    background: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 16px;
    margin: 0 auto 16px;
    max-width: 1100px;
    overflow: hidden;
  }
  .ih-card:last-child { margin-bottom: 0; }
  .ih-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .ih-card__header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--heading-color); }
  .ih-card__subtitle {
    font-size: .87rem;
    font-style: italic;
    color: var(--m2-nav-text);
    margin: 0;
    padding: 0 20px 4px;
  }
  .ih-card__body { padding: 0 20px 20px; }

  /* ══════════════════════════════════════════════════════════════════════════
     SEARCH CARD
     ══════════════════════════════════════════════════════════════════════════ */
  .if-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
  }
  .if-vr {
    width: 1px;
    background: var(--m2-border);
    align-self: stretch;
    margin: 0 28px;
  }
  .if-block { transition: opacity .2s; }
  .if-block.is-disabled { opacity: 0.25; pointer-events: none; }

  .if-section-label {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--heading-color);
    margin: 0 0 16px;
  }

  /* ── Guided: 2-col grid ───────────────────────── */
  .if-guided-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .if-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin-bottom: 4px;
  }
  .if-select {
    width: 100%;
    height: 40px;
    padding: 0 32px 0 10px;
    font-size: .85rem;
    border: 1px solid var(--m2-border);
    border-radius: 6px;
    background: var(--m2-control-bg);
    color: var(--m2-control-text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EAEAEA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s;
  }
  .if-select:disabled { opacity: 0.3; cursor: not-allowed; }
  .if-select:focus { outline: none; border-color: var(--m2-control-focus); }
  .if-guided-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
  }

  /* ── Text search: inline ──────────────────────── */
  .if-text-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .if-text-input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    font-size: .85rem;
    border: 1px solid var(--m2-border);
    border-radius: 6px;
    background: var(--m2-control-bg);
    color: var(--m2-control-text);
    transition: border-color .15s;
    box-sizing: border-box;
  }
  .if-text-input:focus { outline: none; border-color: var(--m2-control-focus); }
  .if-text-input::placeholder { color: var(--m2-text-on-card); }

  .if-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    background: var(--m2-grad-btn);
    color: var(--m2-primary-fg);
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
    white-space: nowrap;
  }
  .if-btn:hover:not(:disabled) { box-shadow: var(--m2-shadow-btn); }
  .if-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .if-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid var(--m2-border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background .15s;
  }
  .if-reset:hover { background: rgba(255,255,255,.05); }

  /* ── Models dropdown (select-style) ───────────── */
  .if-models-field { margin-top: 12px; }
  .if-models-select {
    width: 100%;
    height: 40px;
    padding: 0 32px 0 10px;
    font-size: .85rem;
    border: 1px solid var(--m2-border);
    border-radius: 6px;
    background: var(--m2-control-bg);
    color: var(--m2-control-text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EAEAEA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s;
  }
  .if-models-select:focus { outline: none; border-color: var(--m2-control-focus); }

  /* ── Results ──────────────────────────────────── */
  .if-results-divider {
    border: none;
    border-top: 2px solid var(--m2-border);
    margin: 24px 0;
  }
  .if-results-label {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin: 0 0 14px;
  }
  .if-result-product { margin-bottom: 24px; }
  .if-result-product:last-child { margin-bottom: 0; }
  .if-result-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
  }
  .if-result-thumb {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--m2-dark-bg);
    flex-shrink: 0;
  }
  .if-result-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0;
    line-height: 1.3;
  }
  .if-result-name a { color: inherit; text-decoration: none; }
  .if-result-name a:hover { color: var(--m2-highlight); }

  /* ── Video tiles (wizard-matched) ─────────────── */
  .if-video-grid { display: flex; gap: 12px; flex-wrap: wrap; }
  .if-video-tile {
    width: 200px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--m2-border);
    background: var(--m2-dark-bg);
    transition: box-shadow .2s, transform .2s;
    flex-shrink: 0;
  }
  .if-video-tile:hover {
    box-shadow: var(--m2-shadow-elevated);
    transform: translateY(-2px);
  }
  .if-video-thumb {
    position: relative;
    width: 100%; height: 112px;
    overflow: hidden;
    background: var(--m2-dark-bg);
  }
  .if-video-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: .85;
    transition: opacity .15s;
  }
  .if-video-tile:hover .if-video-thumb img { opacity: 1; }
  .if-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: rgba(0,0,0,.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    pointer-events: none;
  }
  .if-video-caption {
    padding: 8px 10px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--text-color);
  }
  .if-no-videos { font-size: .88rem; color: var(--m2-text-faint); font-style: italic; padding: 8px 0; }
  .if-no-results { padding: 24px; text-align: center; font-size: .88rem; color: var(--m2-text-faint); }

  /* ══════════════════════════════════════════════════════════════════════════
     TIPS — page.content styles (wizard-matched typography + metallic borders)
     ══════════════════════════════════════════════════════════════════════════ */
  .ih-tips-content { font-size: .92rem; line-height: 1.65; color: var(--text-color); }
  .ih-tips-placeholder {
    border: 2px dashed var(--m2-border);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--m2-text-on-card);
    font-size: .88rem;
  }

  /* ── Vinyl type cards (metallic blue border, light blue bg) ── */
  .tip-vinyl-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .tip-vinyl-card {
    padding: 3px;
    border-radius: 8px;
    background: var(--m2-grad-metallic);
  }
  .tip-vinyl-card__inner {
    background: var(--m2-dark-bg);
    border-radius: 5px;
    padding: 20px 22px;
  }
  .tip-vinyl-card__label {
    font-size: .65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--m2-highlight);
    margin-bottom: 4px;
  }
  .tip-vinyl-card__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 8px;
  }
  .tip-vinyl-card p {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--m2-nav-text);
    margin: 0 0 6px;
  }
  .tip-vinyl-card__brands {
    display: inline-block;
    margin-top: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--m2-highlight);
    background: rgba(0,165,199,.15);
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,165,199,.25);
  }

  /* ── Section labels (wizard-matched) ──────────── */
  .tip-section-label {
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin: 0 0 20px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--m2-border);
  }

  /* ── Tip cards ─────────────────────────────────── */
  .tip-card {
    margin-bottom: 24px;
    padding: 0;
  }
  .tip-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .tip-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--m2-grad-btn);
    color: var(--m2-primary-fg);
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .tip-card h2 {
    font-family: var(--text-font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--heading-color);
  }
  .tip-card p {
    font-size: .92rem;
    color: var(--m2-nav-text);
    line-height: 1.7;
    margin: 0 0 10px;
  }
  .tip-card p:last-child { margin-bottom: 0; }

  /* ── Callout sub-cards (same metallic border as vinyl cards) ── */
  .tip-callout {
    margin-top: 12px;
    padding: 0;
    border: 1px solid var(--m2-border);
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.6;
    background: var(--m2-grad-callout);
    color: var(--m2-callout-text);
  }
  .tip-callout__inner {
    padding: 14px 16px;
    color: var(--m2-callout-text);
  }
  .tip-callout strong { font-weight: 700; }

  /* ── Tip divider (wizard-style centered rule) ─── */
  .tip-divider {
    border: none;
    border-top: 1px solid var(--m2-border);
    margin: 0 0 24px;
  }

  /* ── Closing CTA ──────────────────────────────── */
  .tip-closing {
    text-align: center;
    padding: 24px 20px 8px;
    margin-top: 8px;
    border-top: 2px solid var(--m2-border);
  }
  .tip-closing__title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--heading-color);
    margin-bottom: 12px;
  }
  .tip-closing p {
    font-size: .92rem;
    color: var(--m2-nav-text);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 18px;
  }
  .tip-closing__btn {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--m2-primary-fg);
    background: var(--m2-primary);
    padding: 12px 28px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    letter-spacing: .03em;
    transition: box-shadow .2s;
  }
  .tip-closing__btn:hover { box-shadow: var(--m2-shadow-btn); }
  .tip-closing__response { font-size: .78rem; color: var(--m2-text-on-card); margin-top: 10px; }

  /* ══════════════════════════════════════════════════════════════════════════
     RESPONSIVE
     ══════════════════════════════════════════════════════════════════════════ */
  @media screen and (max-width: 860px) {
    .ih-page { padding: 18px 16px 36px; }
    .ih-card__body { padding: 0 16px 16px; }
    .ih-card__header { padding: 12px 16px; }
    .if-row { grid-template-columns: 1fr; }
    .if-vr { width: auto; height: 1px; margin: 20px 0; }
    .if-guided-grid { grid-template-columns: 1fr; }
    .if-video-tile { width: calc(50% - 6px); }
    .if-video-thumb { height: 85px; }
    .tip-vinyl-types { grid-template-columns: 1fr; }
    .tip-card { padding: 0; }
  }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT WIZARD (consolidated from sections/main-product-wizard.liquid)
   ══════════════════════════════════════════════════════════════════════════ */
  /* Isolate wizard stacking context so internal z-index values don't escape
     and appear above the site header or other global elements */
  section[data-section-type="product-wizard"] { isolation: isolate; }

  /* ── Wizard pages (tab card) ─────────────────────── */
  .wizard-page { display: none; }
  .wizard-page.is-active {
    display: block;
    background: var(--m2-card-bg);
    /* Full 4-sided border with all corners rounded — it's no longer joined to a tab,
       it's a standalone content card below the sticky top bar. */
    border: 1px solid var(--m2-border);
    border-radius: 10px;
    padding: 28px 32px;
    /* Standard card-to-card spacing below the sticky top card */
    margin-top: 20px;
    margin-bottom: 32px;
    color: var(--m2-text-on-card);
    box-shadow: var(--m2-shadow-elevated);
    position: relative;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .wizard-page.is-active { padding: 18px 16px; }
  }

  /* ── Page 1 ────────────────────────────────────── */
  .wizard-p1__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .wizard-p1__title { margin: 0; }

  .wizard-section-card {
    background: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .wizard-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
  }
  .wizard-section-card__header h2 { margin: 0; font-size: 1rem; }
  .wizard-section-card__body { padding: 0 20px 20px; }

  .compat-table { width: 100%; border-collapse: collapse; text-align: left; }
  .compat-table th,
  .compat-table td { padding: 6px; border: 1px solid transparent; vertical-align: top; }
  .compat-table th { font-weight: 700; vertical-align: middle; }

  /* ── Page 1 top grid (compat + similar) ────────── */
  .wizard-p1-top-grid { margin-bottom: 24px; }
  .wizard-p1-top-grid--split {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 767px) {
    .wizard-p1-top-grid--split { grid-template-columns: 1fr; }
  }

  .wizard-similar-box {
    border-radius: 8px;
    overflow: hidden;
    /* No background — the panel underneath already provides a card surface.
       A card-bg here stacked over the panel's card-bg creates a visible border in dark mode. */
  }
  .wizard-similar-box__header {
    margin: 0;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--m2-border);
  }
  .wizard-similar-list {
    max-height: 320px;
    overflow-y: auto;
  }
  .wizard-similar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
  }
  .wizard-similar-item:hover { background: rgba(0,165,199,.08); }
  .wizard-similar-item__img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--m2-card-bg);
  }
  .wizard-similar-item__name {
    font-size: .9rem;
    line-height: 1.3;
  }

  /* ── Page 2 ────────────────────────────────────── */
  .wizard-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
  }

  .wizard-logo-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .wizard-logo-row__title {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0;
    color: var(--heading-color) !important;
  }
  .wizard-logo-row__buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .wizard-section-divider {
    width: 50%;
    margin: 20px auto 24px;
    border: none;
    border-top: 2px solid var(--m2-border);
  }

  .wizard-section-label {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .03em;
    color: var(--heading-color) !important;
    margin: 0 0 16px;
    text-align: center;
    text-transform: uppercase;
  }

  .wizard-kit-section {
    padding: 0;
    margin-bottom: 20px;
  }
  /* Cutout style buttons — match theme's standard secondary-button look. */
  .wizard-logo-btn {
    padding: 0 24px;
    height: 42px;
    min-width: 140px;
    border: 1px solid var(--m2-border);
    border-radius: 2px;
    background: var(--secondary-button-background);
    color: var(--secondary-button-text-color);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    transition: background .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out, border-color .2s;
  }
  .wizard-logo-btn:hover {
    background: rgba(var(--secondary-button-background-rgb), .8);
    border-color: var(--m2-primary);
  }
  .wizard-logo-btn.is-selected {
    /* Match the canonical kit-tile selection treatment: outer glow + accent border.
       No solid fill, so selection signaling is consistent across all three steps. */
    border-color: var(--m2-highlight);
    background: transparent;
    color: var(--m2-primary);
    box-shadow: var(--m2-shadow-glow);
    opacity: 1;
  }

  .wizard-kit-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .wizard-kit-tile {
    /* Wider so descriptions don't wrap aggressively when there's room.
       Stays flexible (flex: 0 1) so 3 tiles still fit on desktop. */
    flex: 0 1 420px;
    max-width: 520px;
    border: 2px solid var(--m2-gray);
    border-radius: 10px;
    background: var(--m2-dark-bg);
    color: var(--m2-nav-text);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--m2-shadow-elevated);
    transition: box-shadow .2s, border-color .15s;
  }
  .wizard-kit-tile:hover {
    border-color: var(--m2-highlight);
    box-shadow: var(--m2-shadow-glow);
  }
  .wizard-kit-tile.is-selected {
    border-color: var(--m2-highlight);
    box-shadow: var(--m2-shadow-glow);
  }
  .wizard-kit-tile--oos { opacity: .5; cursor: not-allowed; }
  .wizard-kit-tile img,
  .wizard-kit-tile svg {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: transparent;
    filter: invert(1) brightness(0.6)
      drop-shadow(0 0 0.4px currentColor)
      drop-shadow(0 0 0.4px currentColor);
  }

  .wizard-kit-tile.is-selected img,
  .wizard-kit-tile.is-selected svg {
    filter: invert(1) contrast(1.5) sepia(1) saturate(5) hue-rotate(155deg) brightness(0.7)
      drop-shadow(0 0 0.4px currentColor)
      drop-shadow(0 0 0.4px currentColor);
  }

  .wizard-kit-tile svg path,
  .wizard-kit-tile svg line,
  .wizard-kit-tile svg rect,
  .wizard-kit-tile svg circle {
    stroke-width: 3px;
  }
  .wizard-kit-tile.is-selected img {
    filter: invert(1) contrast(1.5) sepia(1) saturate(5) hue-rotate(155deg) brightness(0.7);
  }
  .wizard-kit-tile__label {
    padding: 12px 12px 6px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
  }
  .wizard-kit-tile__desc {
    padding: 0 18px 14px;
    font-size: .92rem;
    color: var(--m2-text-on-card);
    text-align: center;
  }
  .wizard-kit-tile__desc li {
    white-space: nowrap;
  }
  .wizard-kit-tile__desc ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: block;
    text-align: center;
  }
  .wizard-kit-tile__desc li {
    padding: 3px 0;
  }
  .wizard-kit-tile__desc li::before {
    content: '«\00a0';
    color: rgba(0, 165, 199, .6);
    font-weight: 700;
    letter-spacing: -.02em;
  }
  .wizard-kit-tile__desc li::after {
    content: '\00a0»';
    color: rgba(0, 165, 199, .6);
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .wizard-additional-desc {
    margin-top: 0;
  }

  /* ── Page 3 ────────────────────────────────────── */
  .wizard-p3-layout {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0;
    align-items: start;
  }
  /* Gallery now on the LEFT */
  .wiz-gallery-col {
    padding-right: 28px;
    border-right: 2px solid var(--m2-border);
    padding-left: 0;
  }
  /* Swatches + cart on the RIGHT */
  .wiz-p3-col-left {
    padding-left: 28px;
    padding-right: 0;
    border-right: none;
  }
  .wiz-p3-section-hr {
    border: none;
    border-top: 1px solid var(--m2-border);
    margin: 18px 0;
  }
  .wiz-p3-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
  }
  @media (max-width: 767px) {
    /* Page 3 — single column, swatches stack below gallery. `minmax(0,1fr)`
       (not bare `1fr`, which implies `minmax(auto,1fr)`) lets the track
       shrink below its content's intrinsic width. Without this, a long
       unbroken string in the subtitle prevents the column from shrinking
       to viewport width and the subtitle renders on one overflow line
       until a later DOM mutation forces recalc. */
    .wizard-p3-layout { grid-template-columns: minmax(0, 1fr); }
    .wiz-gallery-col {
      border-right: none;
      padding-right: 0;
      padding-left: 0;
      order: 1;
      min-width: 0;
    }
    .wiz-p3-col-left {
      border-right: none;
      padding-left: 0;
      padding-right: 0;
      order: 2;
      min-width: 0;
    }

    /* Gallery — keep only the minimum mobile constraints needed to
       prevent horizontal scroll. Let the standard gallery behaviour
       (auto-crop, reflection canvas, aspect sizing) run the same way
       as on desktop — previous overrides (aspect-ratio 4:3, margin-top:0)
       were clipping tops of images and hiding reflections. */
    [data-wizard-gallery-col] {
      max-width: 100%;
    }
    [data-wizard-gallery-col] .m2-gallery,
    [data-wizard-gallery-col] .m2-gallery__main,
    [data-wizard-gallery-col] .m2-gallery__slide,
    [data-wizard-gallery-col] .m2-gallery__thumbs {
      max-width: 100%;
    }
    /* Strip the desktop 260px min-height — on mobile it reserves a blank
       260px block above the thumbs on first paint (before the image loads),
       which reads as a long empty gap before the swatch grid below. */
    [data-wizard-gallery-col] .m2-gallery__main {
      min-height: 0;
    }
    /* Skip the auto-crop margin-top too — the JS skips mobile now, but the
       CSS fallback of -10% was still shifting images up and sometimes
       clipping their tops. Zero crop on mobile is predictable. */
    [data-wizard-gallery-col] .m2-gallery__image {
      margin-top: 0;
    }

    /* Swatch grid — 64px minimum (was 90px) fits ~5 per row on a typical
       phone width instead of 3, cutting scroll length ~40%. */
    .wizard-swatch-grid {
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      gap: 6px;
    }

    /* Swatch group headings — smaller on mobile and forced to wrap. The
       first-render not-wrapping bug is a layout glitch where the group
       container inherits an auto width from its hidden parent chain and
       the subtitle doesn't reflow until a subsequent mutation (material
       pick). `min-width: 0` on the parents plus explicit width/wrap on
       the text elements makes the wrap deterministic on first paint. */
    .wizard-material-card,
    [id^="wizard-swatch-"][id$="-group"] {
      min-width: 0;
      max-width: 100%;
    }
    .wizard-swatch-group-title {
      font-size: .78rem;
      margin: 10px 0 2px;
    }
    .wizard-swatch-group-subtitle {
      font-size: .75rem;
      margin: 0 0 6px;
      line-height: 1.35;
      width: 100%;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-wrap: break-word;
      white-space: normal;
    }

    /* Kit tiles — horizontal on mobile: image on the left, label + desc
       stacked on the right. One tile per row (full width) so text has
       room to breathe. The <hr> rule is hidden because the column
       boundary now provides the same visual separation. */
    .wizard-kit-grid { gap: 12px; }
    .wizard-kit-tile {
      flex: 0 1 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: 110px 1fr;
      grid-template-rows: auto auto;
      align-items: center;
    }
    .wizard-kit-tile img,
    .wizard-kit-tile svg {
      grid-column: 1;
      grid-row: 1 / span 2;
      width: 100%;
      height: 100%;
      max-height: 110px;
      aspect-ratio: 1 / 1;
    }
    .wizard-kit-tile__rule { display: none; }
    .wizard-kit-tile__label {
      grid-column: 2;
      grid-row: 1;
      text-align: center;
      padding: 10px 14px 4px;
      font-size: 1rem;
    }
    .wizard-kit-tile__desc {
      grid-column: 2;
      grid-row: 2;
      text-align: center;
      padding: 0 14px 12px;
      font-size: .85rem;
    }
    .wizard-kit-tile__desc ul { text-align: center; }
    .wizard-kit-tile__desc li {
      /* Allow wrapping at narrow widths — desktop nowrap would overflow */
      white-space: normal;
      padding: 2px 0;
    }
  }

  /* ── Custom gallery (page 3) ─────────────────────── */
  .wiz-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .wiz-gallery__main {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--m2-card-bg);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
  }
  .wiz-gallery__slide {
    position: absolute;
    inset: 0;
    display: none;
  }
  .wiz-gallery__slide.is-selected.is-visible {
    display: block;
  }
  .wiz-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .4s ease;
    transform-origin: center center;
  }
  .wiz-gallery__main:hover .wiz-gallery__img {
    transform: scale(1.08);
  }
  .wiz-gallery__thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .wiz-gallery__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s;
    display: none;
  }
  .wiz-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wiz-gallery__thumb.is-visible {
    display: block;
  }
  .wiz-gallery__thumb.is-nav-selected {
    border-color: var(--color-primary, #000);
  }

  .wizard-gallery-disclaimer {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--m2-text-muted);
    font-style: italic;
    line-height: 1.4;
  }

  .wizard-swatch-grid {
    /* Grid — fixed column count so last-row swatches don't look orphaned.
       auto-fill means rows always fill to the same visual width. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    justify-items: center;
  }
  .wizard-swatch-wrap {
    /* Fills its grid cell square. NO overflow:hidden — we need tooltips to escape
       this container. The swatch-item inside gets its own border-radius so the
       image clips cleanly inside the rounded border. */
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--m2-gray);
    border-radius: 8px;
    background: transparent;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
  }
  .wizard-swatch-wrap:hover {
    border-color: var(--m2-highlight);
    box-shadow: var(--m2-shadow-glow);
  }
  .wizard-swatch-wrap:has(.is-selected) {
    border-color: var(--m2-highlight);
    box-shadow: var(--m2-shadow-glow);
  }
  .wizard-swatch-item {
    /* Fills the wrap completely. Its own border-radius (slightly tighter than wrap's
       8px to sit inside the 2px border) so the image clips cleanly to rounded corners
       without needing overflow:hidden on the wrap (which would clip the tooltip). */
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
  }
  .wizard-swatch-item--oos { opacity: .4; cursor: not-allowed; }

  /* ─── Page-3 swatch tooltip (shared singleton, body-anchored) ────────────
     One tooltip element is appended to <body> and repositioned per hover /
     focus / touch. Viewport-anchored (position: fixed) so it escapes ancestor
     overflow and stacking contexts. Positioning + data-arrow value are set
     by wizardTooltipPosition(). */
  .wiz-swatch-tt {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    padding: 16px;
    background: var(--m2-tooltip-bg);
    color: var(--m2-text-on-card);
    border: 1px solid var(--m2-tooltip-border);
    border-radius: 8px;
    box-shadow: var(--m2-shadow-elevated);
    z-index: 9999;
    pointer-events: none;
    text-align: left;
    font-family: var(--font-mono);
    font-size: .87rem;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  }
  .wiz-swatch-tt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
  }
  /* Arrow — vertical offset tracks the swatch center via --wiz-tt-arrow-y so
     the pointer still aims at the source when the tooltip was clamped. */
  .wiz-swatch-tt::before {
    content: '';
    position: absolute;
    top: var(--wiz-tt-arrow-y, 50%);
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--m2-tooltip-bg);
    border: 1px solid var(--m2-tooltip-border);
  }
  .wiz-swatch-tt[data-arrow="left"]::before  { left:  -6px; border-right: none; border-top:    none; }
  .wiz-swatch-tt[data-arrow="right"]::before { right: -6px; border-left:  none; border-bottom: none; }

  .wiz-swatch-tt__name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--m2-text-on-card-strong, var(--m2-text-on-card));
    margin: 0 0 8px;
  }
  .wiz-swatch-tt__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px;
  }
  .wiz-swatch-tt__badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
    background: rgba(255,255,255,0.08);
    color: var(--m2-text-on-card);
    border: 1px solid var(--m2-border);
  }
  .wiz-swatch-tt__badge--adv       { background: var(--m2-highlight); color: #0b0b0e; border-color: transparent; }
  .wiz-swatch-tt__badge--clearance { background: #d99a3a;             color: #1a1a1a; border-color: transparent; }
  .wiz-swatch-tt__badge--oos       { background: rgba(0,0,0,.55);     color: #fff;    border-color: transparent; }
  .wiz-swatch-tt__badge--low       { background: rgba(0,0,0,.35);     color: #fff;    border-color: transparent; }

  .wiz-swatch-tt__taxonomy { color: var(--m2-text-on-card); margin: 0 0 8px; line-height: 1.45; }
  .wiz-swatch-tt__sep      { color: var(--m2-text-muted);   margin: 0 2px; }

  .wiz-swatch-tt__desc        { color: var(--m2-text-on-card); margin: 0 0 8px; }
  .wiz-swatch-tt__desc p      { margin: 0 0 4px; }
  .wiz-swatch-tt__desc p:last-child { margin-bottom: 0; }
  .wiz-swatch-tt__desc strong { color: var(--m2-text-on-card-strong, var(--m2-text-on-card)); }
  .wiz-swatch-tt__desc ul,
  .wiz-swatch-tt__desc ol     { margin: 0; padding-left: 16px; }

  .wiz-swatch-tt__fp {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--m2-border);
    font-size: .78rem;
    color: var(--m2-text-muted);
  }
  .wiz-swatch-tt__fp-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--m2-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .wiz-swatch-tt,
    .wiz-swatch-tt.is-visible { transition: none; transform: none; }
  }

  /* Keyboard focus ring on swatches (spec P4). */
  .wizard-swatch-item:focus-visible { outline: 2px solid var(--m2-highlight); outline-offset: 2px; }
  .wizard-swatch-item:focus:not(:focus-visible) { outline: none; }

  .wizard-swatch-group-title { font-weight: 700; margin: 14px 0 2px; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
  .wizard-swatch-group-subtitle { font-size: .87rem; color: var(--m2-text-muted); margin: 0 0 8px; font-style: italic; }

  /* OOS overlay */
  .wiz-swatch-oos-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
  }

  /* Clearance banner */
  .wiz-swatch-clearance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Muted amber — keeps the "selection" cyan reserved for the currently-selected state */
    background: #d99a3a;
    color: #1a1a1a;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 4px;
    border-radius: 3px 3px 0 0;
    pointer-events: none;
  }

  /* Sale banner — same shape contract as Clearance (full-width strip at
     the top of the swatch, rounded top corners matching the swatch's own
     border-radius so it doesn't appear as a rectangle floating above
     the rounded card). Color is the brand cyan to read as commerce-
     positive without colliding with Clearance's amber. */
  .wiz-swatch-sale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--m2-highlight);
    color: #0b0b0e;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    padding: 3px 4px;
    /* Match .wizard-swatch-item's 6px radius on the top corners so the
       banner molds to the swatch curves cleanly (no reveal at the
       outer wrap's 8px corners — the 6px sits inside the wrap's 2px
       border, so this is the right radius to mirror). */
    border-radius: 6px 6px 0 0;
    pointer-events: none;
    line-height: 1.1;
  }

  .wizard-material-name { margin: 0 0 10px; font-size: .95rem; min-height: 1.4em; }
  .wizard-material-name span { font-weight: 700; }


  .wizard-price-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 0;
  }
  .wizard-price-block { display: flex; align-items: baseline; gap: 8px; }
  .wizard-price { font-size: 1.5rem; font-weight: 700; }
  .wizard-price--compare { font-size: 1rem; text-decoration: line-through; color: var(--m2-text-faint); }

  /* Box around kit summary + cart (replaces old bottom-bar) */
  .wiz-p3-cart-box {
    padding: 16px;
    border: 1px solid var(--m2-border);
    border-radius: 12px;
    background: var(--m2-grad-callout);
    color: var(--m2-callout-text);
    box-shadow: var(--m2-shadow-elevated);
    margin-top: 4px;
  }
  .wiz-p3-kit-summary { margin-bottom: 8px; }
  .wiz-p3-kit-summary__title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 6px;
  }
  .wizard-p3-selection {
    font-size: .9rem;
    line-height: 1.6;
    width: 100%;
  }
  .wizard-p3-selection__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .wizard-p3-selection__row--value-only { justify-content: flex-end; }
  .wizard-p3-selection__row--after-includes { margin-top: 6px; }
  .wizard-p3-selection__label { color: var(--m2-nav-text); white-space: nowrap; flex-shrink: 0; }
  .wizard-p3-selection__value { font-weight: 600; text-align: right; }
  .wizard-p3-selection__value--sm { font-weight: 400; color: var(--m2-text-on-card); font-size: .84rem; }
  .wiz-p3-cart-divider {
    border: none;
    border-top: 1px solid var(--m2-border);
    width: 100%;
    margin: 12px 0;
  }

  /* ── Kit tile rule ───────────────────────────────── */
  .wizard-kit-tile__rule {
    border: none;
    border-top: 1px solid var(--m2-border);
    width: 80%;
    margin: 0 auto;
  }

  /* ── Material card + selection card ─────────────── */
  .wizard-material-card {
    /* No background — stacking card-bg over the wizard panel's card-bg creates
       a visible box in dark mode. The swatches stand on their own. */
    background: transparent;
    border-radius: 0;
    padding: 12px 0 0;
    margin-bottom: 14px;
  }

  /* ── Prevent form wrapper from adding top gap ───── */
  [data-section-type="product-wizard"] .product-form { margin-top: 0; padding-top: 0; }

  /* ── Wizard section spacing ────────────────────── */
  section[data-section-type="product-wizard"] { padding-top: 0; margin-top: 0; }
  section[data-section-type="product-wizard"] > .container { padding-top: 6px; }

  /* ── Tab navigation (box tabs) ──────────────────── */
  .wiz-product-title { margin: 4px 0 0; color: var(--heading-color) !important; }
  /* .wiz-product-subtitle styles consolidated under PRODUCT-CONTENT METAOBJECT SECTIONS */
  /* ── Header: title + price on every step ────────── */
  .wiz-header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
    margin: 4px 0 0;
  }
  .wiz-header__titleblock { flex: 1; min-width: 240px; }
  .wiz-header__price {
    font-family: var(--font-sans);
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .wiz-header__price-from {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--m2-text-muted);
    font-weight: 500;
  }
  .wiz-header__price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
  }

  /* ── Stepper ─────────────────────────────────────── */
  .wiz-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 22px 0 12px;
    padding: 0;
    list-style: none;
  }
  .wiz-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--m2-text-muted);
    transition: color .2s;
    font-family: var(--font-sans);
  }
  .wiz-step:disabled { cursor: not-allowed; opacity: 0.5; }
  .wiz-step:hover:not(:disabled) { color: var(--m2-primary); }
  .wiz-step__circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--m2-gray);
    background: var(--m2-card-bg);
    color: inherit;
    flex-shrink: 0;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
  }
  .wiz-step__num {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
  }
  .wiz-step__check {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
  }
  .wiz-step__label {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    white-space: nowrap;
  }
  /* Current step: slow breathing pulse — a subtle, continuous inhale/exhale that
     reads as "I'm alive, pay attention to me" without being distracting. */
  @keyframes wizCurrentBreath {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(0, 200, 232, 0.15), 0 0 6px 1px rgba(0, 200, 232, 0.20);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(0, 200, 232, 0),   0 0 18px 5px rgba(0, 200, 232, 0.55);
      transform: scale(1.08);
    }
  }
  .wiz-step.is-current .wiz-step__circle {
    border-color: var(--m2-primary);
    color: var(--m2-primary);
    animation: wizCurrentBreath 3s ease-in-out infinite;
  }

  /* Next step: a quick flash triggered at the moment the lump arrives at the
     end of the connector. Flash fires at the 80% mark of the 5s cycle — the
     same point where wizBumpMove lands the lump against the step circle. */
  @keyframes wizNextFlash {
    0%, 75%, 100% {
      box-shadow: 0 0 0 0 rgba(0, 200, 232, 0);
      background: var(--m2-card-bg);
    }
    80% {
      box-shadow:
        0 0 0 2px rgba(0, 200, 232, 0.9),
        0 0 18px 6px rgba(0, 200, 232, 0.75);
      background: rgba(0, 200, 232, 0.2);
    }
    95% {
      box-shadow:
        0 0 0 14px rgba(0, 200, 232, 0),
        0 0 36px 14px rgba(0, 200, 232, 0);
      background: var(--m2-card-bg);
    }
  }
  .wiz-step.is-next:not(:disabled) .wiz-step__circle,
  .wiz-step.is-next[disabled] .wiz-step__circle {
    border-color: var(--m2-primary);
    color: var(--m2-primary);
    opacity: 1;
    animation: wizNextFlash 5s linear infinite;
  }
  .wiz-step.is-next[disabled],
  .wiz-step.is-next:not(:disabled) {
    opacity: 1;
    color: var(--m2-primary);
  }
  .wiz-step.is-next .wiz-step__label {
    color: var(--m2-primary);
    font-weight: 600;
  }
  .wiz-step.is-current { color: var(--m2-primary); }
  .wiz-step.is-current .wiz-step__label { font-weight: 700; }
  .wiz-step.is-complete .wiz-step__circle {
    background: var(--m2-primary);
    border-color: var(--m2-primary);
    color: #fff;
  }
  .wiz-step.is-complete .wiz-step__num { opacity: 0; }
  .wiz-step.is-complete .wiz-step__check { opacity: 1; }
  .wiz-step.is-complete { color: var(--m2-primary); }
  .wiz-step__connector {
    flex: 1;
    min-width: 20px;
    height: 2px;
    background: var(--m2-gray);
    transition: background .3s;
    position: relative;
  }
  .wiz-step__connector.is-filled { background: var(--m2-primary); }

  /* Glowing bump on the connector between CURRENT and NEXT step.
     A solid cyan line with a bright bump + halo that travels left→right,
     fading in at the start and fading out at the end — reads as "progress
     flowing toward the next step". */
  .wiz-step__connector.is-active {
    background: var(--m2-primary);
    overflow: visible;
    position: relative;
  }
  .wiz-step__connector.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    /* Wider soft lump — radial gradient fades from opaque cyan at center to
       transparent at the edges, so there's no hard boundary. The element box
       is larger than the visible core so the gradient has room to fade. */
    width: 70px;
    height: 22px;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 200, 232, 1) 0%,
      rgba(0, 200, 232, 0.85) 18%,
      rgba(0, 200, 232, 0.45) 45%,
      rgba(0, 200, 232, 0.12) 75%,
      rgba(0, 200, 232, 0) 100%
    );
    /* Keep a faint ambient glow for atmosphere, but the main "glow" effect is
       now in the gradient itself */
    box-shadow: 0 0 18px 4px rgba(0, 200, 232, 0.18);
    /* Anchor by LEFT edge (no translateX) so we can animate with calc(100% - width)
       and have the lump's RIGHT edge end exactly at the line's right end. */
    transform: translateY(-50%);
    /* 5s cycle: lump traverses during the first ~80% (0 → 4s), then pauses
       invisible for the final ~20% (4 → 5s). This creates the "rest beat" the
       user can see, and synchronizes with the next-step flash which fires at
       the 80% mark — right when the lump arrives at the circle. */
    animation: wizBumpMove 5s linear infinite;
    pointer-events: none;
  }
  @keyframes wizBumpMove {
    0%   { left: 0%;                 opacity: 0; transform: translateY(-50%) scaleX(0.7); }
    10%  {                           opacity: 1; transform: translateY(-50%) scaleX(1); }
    70%  {                           opacity: 1; transform: translateY(-50%) scaleX(1); }
    80%  { left: calc(100% - 70px); opacity: 0; transform: translateY(-50%) scaleX(0.7); }
    /* Hold invisible/offscreen until next cycle begins (creates the 5s rhythm) */
    100% { left: calc(100% - 70px); opacity: 0; transform: translateY(-50%) scaleX(0.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wiz-step__connector.is-active::before { animation: none; opacity: 0; }
  }

  @media (max-width: 767px) {
    .wiz-stepper { flex-wrap: wrap; }
    .wiz-step__label { display: none; }
    .wiz-step.is-current .wiz-step__label { display: inline; }
  }

  /* ── Closing CTA (product_content.closing_cta_*) — sits between wizard and FAQ ── */
  .wiz-closing-cta {
    /* Spans the full container interior (no max-width) so the tile sits
       flush with the sticky bar and the rest of the wizard content. The
       outer .container element handles horizontal gutters; the 48/56px
       margins below add the vertical buffer above/below the tile. */
    margin: 48px auto 56px;
    padding: 40px 32px;
    /* Dark default: three top-anchored cyan spotlight radials layered
       over the card-bg. Alphas and radii are tuned for the full-container
       width — at the prior 820px max-width the smaller values still read
       cleanly, but spread across the wider tile the glow needs more punch
       and a third pool to bridge the middle so it doesn't look like two
       isolated bumps with a dead zone between them. */
    background:
      radial-gradient(60% 130% at 25% 0%, rgba(0, 200, 232, 0.28), transparent 60%),
      radial-gradient(55% 120% at 75% 0%, rgba(0, 200, 232, 0.22), transparent 60%),
      radial-gradient(40% 90% at 50% 0%, rgba(0, 200, 232, 0.14), transparent 65%),
      var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  [data-theme="light"] .wiz-closing-cta {
    /* Light counterpart to the dark cyan-radial wash: top-anchored accent
       tint over a clean white card + soft elevation shadow. Alpha bumped
       and split into a second pool so the glow stays visible across the
       full-container tile width. */
    background:
      radial-gradient(55% 120% at 30% 0%, rgba(0, 153, 179, 0.14), transparent 60%),
      radial-gradient(55% 120% at 75% 0%, rgba(0, 153, 179, 0.10), transparent 60%),
      var(--m2-card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.20);
  }
  /* Eyebrow — small, mono, wide-tracked uppercase. Mirrors the section
     labels used elsewhere in the wizard. */
  .wiz-closing-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin: 0 0 10px;
  }
  .wiz-closing-cta__headline {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--m2-text-on-card);
    line-height: 1.2;
  }
  .wiz-closing-cta__body {
    font-size: .98rem;
    color: var(--m2-text-muted);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 24px;
  }
  .wiz-closing-cta__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  /* Shared button base — same height/typography for primary + secondary.
     The `[hidden]` override is needed because `display: inline-flex`
     would otherwise win over the HTML hidden attribute the JS uses to
     gate the Add-to-cart button until selections are complete. */
  .wiz-closing-cta__btn[hidden] { display: none; }
  .wiz-closing-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s, box-shadow .15s, background .15s;
    white-space: nowrap;
  }
  .wiz-closing-cta__btn--primary {
    background: var(--m2-primary);
    color: var(--m2-bg);
  }
  .wiz-closing-cta__btn--primary:hover { box-shadow: var(--m2-shadow-btn, 0 4px 12px rgba(0, 200, 232, 0.35)); }
  .wiz-closing-cta__btn--secondary {
    background: transparent;
    color: var(--m2-text-on-card);
    border-color: var(--m2-border);
  }
  .wiz-closing-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, .04);
  }
  [data-theme="light"] .wiz-closing-cta__btn--secondary:hover {
    background: rgba(0, 0, 0, .03);
  }
  @media (max-width: 767px) {
    .wiz-closing-cta { padding: 28px 20px; margin: 36px auto 40px; }
    .wiz-closing-cta__headline { font-size: 1.4rem; }
    .wiz-closing-cta__eyebrow { font-size: .65rem; letter-spacing: .22em; }
    .wiz-closing-cta__btn { width: 100%; }
    .wiz-closing-cta__actions { flex-direction: column; align-items: stretch; }
  }

  /* ── Product USP Module (sections/product-usp-module.liquid) ── */
  .wiz-usp {
    margin: 64px auto 0;
  }

  /* ── Shared section header (eyebrow + heading + intro) ──
     Drop-in pattern used at the top of Description / USP / FAQ /
     Reviews so every major block opens the same way. Eyebrow and intro
     render only when their settings are populated; the wrapping
     `.m2-secthead` keeps spacing consistent across sections. Add
     `.m2-secthead--center` for centered sections (Reviews).

     No max-width on the wrapper — that was forcing the H2 to wrap even
     when the container had plenty of room. The intro paragraph caps
     itself at 56ch (below) for readability; the title is unconstrained
     and can use the full container width. */
  .m2-secthead { margin: 0 0 28px; }
  .m2-secthead--center { margin-left: auto; margin-right: auto; text-align: center; max-width: 64ch; }

  .m2-secthead__title {
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--heading-color);
  }
  .m2-secthead__intro {
    margin: 16px 0 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--m2-text-muted);
    max-width: 56ch;
  }
  .m2-secthead--center .m2-secthead__intro { margin-left: auto; margin-right: auto; }

  /* Universal eyebrow — mono micro-label with a short accent dash.
     Canonical class is `.m2-eyebrow`; `.wiz-usp__eyebrow` is kept as an
     alias so existing markup continues to work. Apply `.m2-eyebrow` to
     any new small uppercase label (gallery caption, disclaimer, etc.). */
  .m2-eyebrow,
  .wiz-usp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--m2-text-faint);
    margin: 0 0 16px;
  }
  .m2-eyebrow::before,
  .wiz-usp__eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--m2-primary);
  }
  /* Variant: no accent dash (use when the dash conflicts with adjacent
     decoration, e.g. centered captions). */
  .m2-eyebrow--no-dash::before { display: none; }

  /* Variant: keep the muted eyebrow color + mono font, but render the
     text as written (no uppercase / letter-spacing). For multi-line
     micro-copy like the gallery disclaimer where ALL CAPS reads
     shouty. */
  .m2-eyebrow--cased {
    text-transform: none;
    letter-spacing: 0;
  }

  /* Centered section opener gets a mirrored dash on the right edge so
     the eyebrow reads as balanced when text-align: center applies. */
  .m2-secthead--center .m2-eyebrow::after {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--m2-primary);
  }

  /* Gallery caption — single-line centered eyebrow chip above the
     thumbnails. Flex with justify-content: center handles centering
     regardless of parent text-align. */
  .m2-gallery__caption {
    display: flex;
    justify-content: center;
    margin: 4px 0 10px;
  }
  /* Gallery disclaimer — block (not flex) so the inline <br> creates
     a real second line. Centered via text-align. Color + font are set
     explicitly here because some theme paths put higher-specificity
     selectors (page-1 dark-mode forced colors, RTE overrides, etc.) on
     surrounding <p>s that were beating the .m2-eyebrow rule and
     bleaching the disclaimer back to plain body text. */
  .m2-gallery__disclaimer {
    display: block;
    text-align: center;
    margin: 12px 0 4px;
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--m2-text-faint);
  }
  /* Restore the ::before pseudo's absence so it doesn't collide with
     the centered text now that the disclaimer is block-level. */
  .m2-gallery__disclaimer::before { display: none; }

  /* Section opener — left-aligned eyebrow + heading + intro line. */
  .wiz-usp__intro {
    max-width: 60ch;
    margin: 0 0 8px;
  }
  .wiz-usp__heading {
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--heading-color);
    text-align: left;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .wiz-usp__intro-body {
    margin: 16px 0 0;
    font-size: 1.05rem;
    color: var(--m2-text-muted);
    line-height: 1.6;
    max-width: 56ch;
  }

  /* Rows — hairline dividers + symmetric vertical padding. Only the
     image alternates sides; text stays left-aligned both ways. */
  .wiz-usp__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--m2-border);
  }
  /* First row keeps its top border — it doubles as the horizontal
     rule between the section header (.m2-secthead "Why M2 / The
     details that separate a skin from a sticker.") and the first
     feature row, per the redesign. */
  .wiz-usp__row:last-child { margin-bottom: 0; }
  .wiz-usp__row--right .wiz-usp__media { order: 2; }
  .wiz-usp__row--right .wiz-usp__text  { order: 1; }
  .wiz-usp__row--left  .wiz-usp__text,
  .wiz-usp__row--right .wiz-usp__text { text-align: left; }
  .wiz-usp__media {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
  }
  [data-theme="light"] .wiz-usp__media {
    background: var(--m2-card-surface);
  }
  .wiz-usp__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .wiz-usp__media--placeholder {
    display: grid;
    place-items: center;
  }
  .wiz-usp__placeholder-label {
    color: var(--m2-text-muted);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Headline — kept mono + uppercase (brand voice) but smaller and
     tighter than before so it reads as a deliberate label-headline
     instead of an all-caps shout. */
  .wiz-usp__hl {
    font-family: var(--font-mono) !important;
    font-size: 1.65rem;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--heading-color) !important;
    line-height: 1.1;
  }
  .wiz-usp__body {
    font-size: 1.05rem;
    color: var(--m2-text-muted);
    line-height: 1.6;
    max-width: 46ch;
  }
  .wiz-usp__body p { margin: 0; }
  .wiz-usp__body p + p { margin-top: 10px; }
  @media (max-width: 767px) {
    .wiz-usp { margin-top: 40px; }
    .wiz-usp__heading { font-size: 1.5rem; text-align: left; }
    .wiz-usp__row {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 28px 0;
    }
    .wiz-usp__row--right .wiz-usp__media { order: 0; }
    .wiz-usp__row--right .wiz-usp__text { order: 0; }
    .wiz-usp__row--left .wiz-usp__text,
    .wiz-usp__row--right .wiz-usp__text { text-align: left; }
    .wiz-usp__hl { font-size: 1.3rem; }
    .wiz-usp__body { font-size: 1rem; max-width: none; }
    .wiz-usp__eyebrow { margin-bottom: 12px; }
  }

  /* ── Product Trust Bar (sections/product-trust-bar.liquid) ──
     Thin, single-row strip of icon + label proof points sitting above
     the closing CTA. Mirrors the divided-cell visual language of the
     sticky summary buy bar (hairline cell separators, rounded outer
     border, single rounded surface). Distinct from the "Why M2" grid
     and the Product USP rows — this is labels only. */
  .wiz-trustbar {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: 12px 0 24px;
    border: 1px solid var(--m2-border);
    border-radius: 12px;
    background: var(--m2-card-bg);
    overflow: hidden;
  }
  .wiz-trustbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 14px;
    border-left: 1px solid var(--m2-border);
  }
  .wiz-trustbar__item:first-child { border-left: 0; }
  .wiz-trustbar__icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--m2-primary);
  }
  .wiz-trustbar__icon svg { width: 18px; height: 18px; display: block; }
  .wiz-trustbar__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--m2-text-on-card);
    line-height: 1.25;
  }

  /* Dark-only accent wash + cyan-tinted dividers — matches the
     redesigned sticky bar's top-pooled cyan. Light mode keeps the
     flat card surface + standard border via the base rule. */
  :root:not([data-theme="light"]) .wiz-trustbar {
    background:
      radial-gradient(120% 220% at 50% 0%, rgba(0, 200, 232, 0.06), transparent 60%),
      var(--m2-card-bg);
    border-color: rgba(0, 200, 232, 0.14);
  }
  :root:not([data-theme="light"]) .wiz-trustbar__item {
    border-left-color: rgba(0, 200, 232, 0.12);
  }
  :root:not([data-theme="light"]) .wiz-trustbar__item:first-child {
    border-left: 0;
  }

  /* ── Shared "trust-bar" tile accent ───────────────────────────────
     Dark-mode-only: top-pooled cyan radial wash + cyan-tinted border.
     Applied to product/review tiles across the site so they share the
     same elevation language as the trust bar. Light mode keeps each
     tile's existing flat card surface (per the [data-theme="light"]
     overrides at the top of the theme block ~12886) — only the dark
     surface gets the wash so it visually lifts off the dark page.

     `!important` on background + border-color is needed to defeat the
     theme's earlier `.product-item { background: ... !important; border:
     ... !important; }` block at ~13783 which would otherwise win the
     cascade. Other tile classes don't have `!important` chrome but
     inherit the same rule painlessly. Alpha values bumped from 0.06 /
     0.14 → 0.14 / 0.28 so the wash is actually visible against the
     dark page (the prior subtle pass was overwhelmed by other tile
     shadows / borders). */
  :root:not([data-theme="light"]) .review-item,
  :root:not([data-theme="light"]) .lpc__card,
  :root:not([data-theme="light"]) .m2cf-card,
  :root:not([data-theme="light"]) .product-item,
  :root:not([data-theme="light"]) .m2cf-sidebar,
  :root:not([data-theme="light"]) .c-closing__card,
  :root:not([data-theme="light"]) .ih-card,
  :root:not([data-theme="light"]) .ih-jumpnav,
  :root:not([data-theme="light"]) .ih-stuck {
    background:
      radial-gradient(120% 220% at 50% 0%, rgba(0, 200, 232, 0.14), transparent 60%),
      var(--m2-card-bg) !important;
    border-color: rgba(0, 200, 232, 0.28) !important;
  }

  /* Mobile: 6 cells in one row is too tight. Drop to a 2-col grid. */
  @media (max-width: 767px) {
    .wiz-trustbar { flex-wrap: wrap; }
    .wiz-trustbar__item {
      flex: 1 1 50%;
      justify-content: flex-start;
      border-left: 0;
      border-top: 1px solid var(--m2-border);
    }
    .wiz-trustbar__item:nth-child(odd) { border-right: 1px solid var(--m2-border); }
    .wiz-trustbar__item:nth-child(-n+2) { border-top: 0; }
    :root:not([data-theme="light"]) .wiz-trustbar__item {
      border-top-color: rgba(0, 200, 232, 0.12);
    }
    :root:not([data-theme="light"]) .wiz-trustbar__item:nth-child(odd) {
      border-right-color: rgba(0, 200, 232, 0.12);
    }
  }

  /* ── Product Description (sections/product-description.liquid) ──
     Two-column structured layout driven by a writing convention:
     first <p> = lede, each <h3> + following content = numbered feature
     row (CSS counters add 01, 02, 03…). Falls back to a clean ordinary
     description when the body has no <h3>s — the feature-row rules
     only fire on h3 elements. */
  .wiz-prod-desc__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: start;
    margin: 48px auto 0;
  }
  .wiz-prod-desc__media {
    border: 1px solid var(--m2-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--m2-card-bg);
  }
  .wiz-prod-desc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Lede = the first paragraph inside the RTE body. */
  .wiz-prod-desc__body.rte > p:first-of-type {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--m2-text-muted);
    max-width: 60ch;
    margin: 0 0 8px;
  }

  /* Numbered feature rows. counter-style: decimal-leading-zero handles
     10+ features without the "0X"/"010" string-concat bug. Two
     equivalent author conventions are supported because not every RTE
     description is written the same way:

       1. Heading-driven: <h3>Title</h3><p>Body</p> pairs.
       2. List-driven:    <ul><li><strong>Title</strong>Body…</li></ul>
                          (Shopify's bullet list, with a bold first
                          phrase used as the feature title).

     Both paths use the same counter so 01/02/03… numbering is
     consistent regardless of which structure the author picked. */
  .wiz-prod-desc__body.rte { counter-reset: m2feat; }

  /* Path 1 — Heading-driven (canonical). */
  .wiz-prod-desc__body.rte h3 {
    counter-increment: m2feat;
    position: relative;
    padding: 22px 0 6px 52px;
    margin: 0;
    border-top: 1px solid var(--m2-border);
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-color);
  }
  .wiz-prod-desc__body.rte h3::before {
    content: counter(m2feat, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 24px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--m2-primary);
    letter-spacing: 0.04em;
  }
  .wiz-prod-desc__body.rte h3 + p {
    margin: 0 0 18px 52px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--m2-text-muted);
    max-width: 46ch;
  }
  /* Bottom hairline only when there's at least one feature row, so
     plain-prose descriptions (no <h3>) don't get an orphan border. */
  .wiz-prod-desc__body.rte h3 ~ p:last-child {
    border-bottom: 1px solid var(--m2-border);
    padding-bottom: 18px;
  }

  /* Path 2 — List-driven. Each <li> becomes a numbered feature row.
     If the <li>'s first content is bold (<strong>/<b>), that runs as
     the title (white, larger); the remaining text in the <li> reads as
     the muted body. Plain <li> without a bolded title renders the whole
     line as the body — still cleanly numbered. */
  .wiz-prod-desc__body.rte ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0;
  }
  .wiz-prod-desc__body.rte ul > li {
    counter-increment: m2feat;
    position: relative;
    padding: 22px 0 18px 52px;
    margin: 0;
    border-top: 1px solid var(--m2-border);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--m2-text-muted);
  }
  .wiz-prod-desc__body.rte ul > li::before {
    content: counter(m2feat, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 24px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--m2-primary);
    letter-spacing: 0.04em;
  }
  /* Bold lead text in an <li> reads as the feature title — bumped to
     heading scale, white, on its own line. */
  .wiz-prod-desc__body.rte ul > li > strong:first-child,
  .wiz-prod-desc__body.rte ul > li > b:first-child {
    display: block;
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 4px;
  }
  .wiz-prod-desc__body.rte ul > li:last-child {
    border-bottom: 1px solid var(--m2-border);
  }

  @media (max-width: 859px) {
    .wiz-prod-desc__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .wiz-prod-desc__media { order: -1; }
    .wiz-prod-desc__body.rte h3,
    .wiz-prod-desc__body.rte ul > li { padding-left: 46px; }
    .wiz-prod-desc__body.rte h3 + p { margin-left: 46px; }
  }

  /* ── FAQ section (below wizard, schema-marked) ── */
  .wiz-faq {
    margin: 48px auto 24px;
  }
  .wiz-faq__heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--heading-color);
  }
  /* 2-column accordion. Each column is its own DOM stack so an opening
     item only stretches its column — the other side is visually
     independent. Mobile collapses to a single column; the inline script
     widens the close-scope to the whole list there so the single visual
     stack still reads as one accordion. */
  .wiz-faq__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
  }
  .wiz-faq__col {
    border-top: 1px solid var(--m2-gray);
    min-width: 0;
  }
  .wiz-faq__item {
    border-bottom: 1px solid var(--m2-gray);
  }
  @media (max-width: 767px) {
    .wiz-faq__list {
      grid-template-columns: 1fr;
      column-gap: 0;
    }
    /* Avoid a stacked double divider where the two columns meet. */
    .wiz-faq__col + .wiz-faq__col { border-top: 0; }
  }
  .wiz-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 16px 40px 16px 0;
    position: relative;
    transition: color .15s;
  }
  .wiz-faq__q::-webkit-details-marker { display: none; }
  .wiz-faq__q::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform .2s;
  }
  .wiz-faq__item[open] .wiz-faq__q::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .wiz-faq__q:hover { color: var(--m2-primary); }
  .wiz-faq__q h3 {
    display: inline;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
  }
  .wiz-faq__a {
    padding: 0 40px 18px 0;
    color: var(--m2-text-muted);
    line-height: 1.6;
    font-size: .95rem;
  }

  /* ── Per-step context line (keyword-rich intro) ── */
  .wiz-step-context {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--m2-text-muted);
    margin: 0 0 18px;
    max-width: 720px;
  }
  /* Variant: inline — tighter spacing, used after an H3 */
  .wiz-step-context--inline {
    font-size: .88rem;
    margin: 0 0 12px;
  }
  /* Variant: centered — below kit tiles */
  .wiz-step-context--centered {
    text-align: center;
    margin: 16px auto 0;
    font-size: .9rem;
  }

  /* The wizard section creates an isolation context for internal z-indexes;
     remove it here because it can clip sticky descendants under certain parent
     compositing setups. Header nav has its own z-index: 100+ managed separately. */
  section[data-section-type="product-wizard"] { isolation: auto; }

  /* ── Sticky bar — natural position at scroll=0, fixes to top once scrolled past.
     Uses JS-driven `.is-pinned` class instead of position: sticky (which un-sticks
     when the wizard section ends) — with fixed mode we keep the bar pinned through
     reviews/FAQ/recommendations too. Spacer only renders height when bar is pinned. */
  .wiz-sticky-bar {
    position: relative;
    z-index: 20;
    background: var(--m2-bg);
    padding: 8px 0 6px;
    margin-left: calc(-1 * var(--mobile-container-gutter, 20px));
    margin-right: calc(-1 * var(--mobile-container-gutter, 20px));
    padding-left: var(--mobile-container-gutter, 20px);
    padding-right: var(--mobile-container-gutter, 20px);
  }
  .wiz-sticky-bar.is-pinned {
    position: fixed;
    top: calc(var(--header-height, 0px) * var(--header-is-sticky, 0));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1480px;
    z-index: 30;
    padding: 8px var(--mobile-container-gutter, 20px) 6px;
    margin: 0;
    box-sizing: border-box;
  }
  @media (min-width: 641px) {
    .wiz-sticky-bar.is-pinned {
      padding: 8px var(--desktop-container-gutter, 30px) 6px;
    }
  }
  .wiz-sticky-bar .wiz-stepper { margin: 0 0 10px; }
  .wiz-sticky-bar .wiz-top-cart { margin: 0; }

  /* Spacer is hidden in the default state (bar occupies its own natural space).
     When bar becomes pinned, JS sets --spacer-h and we reveal the spacer so
     content below doesn't jump up. */
  .wiz-sticky-spacer {
    display: none;
    height: var(--spacer-h, 0);
  }
  .wiz-sticky-bar.is-pinned ~ .wiz-sticky-spacer {
    display: block;
  }

  /* ── Top summary bar — 4-cell layout: Kit | Cutout | Vinyl | Total+CTA ──
     The wizard sticky wrapper handles pinning. The card keeps its layered
     background so scrolling content doesn't bleed through its translucent
     cyan tint (pf-cart-box default is rgba(0,200,232,0.15)). */
  .wiz-top-cart {
    margin: 0 0 24px;
    padding: 14px 18px;
    /* Dark default: two-stop top-pooled cyan tile gradient + cyan-tinted
       border + 1px inset top highlight. Light override below restores the
       flat callout wash unchanged. */
    background:
      radial-gradient(120% 200% at 78% 0%, rgba(0, 200, 232, 0.10), transparent 55%),
      radial-gradient(120% 200% at 30% 0%, rgba(0, 200, 232, 0.07), transparent 60%),
      var(--m2-bg, #050505) !important;
    border: 1px solid rgba(0, 200, 232, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  [data-theme="light"] .wiz-top-cart {
    background:
      linear-gradient(var(--m2-grad-callout), var(--m2-grad-callout)),
      var(--m2-bg, #f5f5f5) !important;
    /* Light-mode elevation: hairline border + layered drop-shadow + 1px
       white inset top highlight so the bar lifts cleanly off the #f5f5f5
       page. Dark counterpart uses cyan radials instead; that rule lives
       in the base .wiz-top-cart above and is left untouched. */
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      0 10px 28px -14px rgba(15, 23, 42, 0.22),
      0 2px 6px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  .wiz-top-cart__grid {
    display: grid;
    /* 5 columns: Kit / Cutout / Vinyl / Total / CTA.
         Was 1.2 / 1.2 / 1.3 / 0.8 / auto — Total cell was getting squeezed
         when sale state shows ("SALE ##% OFF <strike> <price>" overlapped
         the Vinyl swatch). Cutout content is short (e.g. "No Logo Cutout"),
         so we steal share from it and give it to Total. New ratios keep
         the same 4.5fr total: Cutout 0.9 (down from 1.2), Total 1.1 (up
         from 0.8). Kit and Vinyl share unchanged. */
    grid-template-columns: 1.2fr 0.9fr 1.3fr 1.1fr auto;
    gap: 0;
    align-items: stretch;
  }
  .wiz-top-cart__cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* Kit/Cutout/Vinyl: content at top */
    gap: 6px;
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 200, 232, 0.35);
  }
  .wiz-top-cart__cell:first-child {
    padding-left: 0;
    border-left: none;
  }
  /* Total cell — vertically centered, right-aligned (so $ sits next to the button) */
  .wiz-top-cart__cell--total {
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    padding-left: 26px;
  }
  /* Inline price row (desktop default).
     On-sale state: SALE ##% OFF <strike compare> <price> all on one line.
     Full-price: just the price. JS toggles sale-tag and compare visibility.
     Mobile rule below restacks this into a centred column. */
  .wiz-top-cart__price-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
  }
  /* compare + price wrapper — keeps the two numbers glued together
     and vertically centred on each other. (Baseline alignment looked
     off because compare is .9rem and the live price is 1.25rem; the
     baseline alignment dropped the smaller number visually.) */
  .wiz-top-cart__numbers {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  /* SALE ##% OFF — emphasised at near-price weight so the discount reads
     at a glance instead of feeling like a small annotation. Uses the
     callout cyan to flag it as commerce-positive vs. neutral text. */
  .wiz-top-cart__sale-tag {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--m2-highlight);
    align-self: baseline;
    white-space: nowrap;
  }
  .wiz-top-cart__compare {
    font-size: 1rem;
    text-decoration: line-through;
    color: var(--m2-text-faint);
    white-space: nowrap;
    /* Extra breathing room before the live price so the eye reads
       <was> ... <now> as two distinct numbers, not "$69$62". */
    margin-right: 6px;
  }
  @media (max-width: 900px) {
    /* Mobile total cell layout:
         TOTAL              ##% OFF
                            $69 $62
       The cell runs flex-row at this breakpoint (heading on the left,
       price content on the right). Push the price content to the right
       edge with margin-left:auto; restack the price-row as a centred
       column so the badge floats over the numbers. The static "SALE "
       label is dropped on mobile so the badge reads as just "##% OFF"
       — keeps the layout compact. */
    .wiz-top-cart__cell--total {
      align-items: flex-start;
    }
    .wiz-top-cart__price-row {
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin-left: auto;
    }
    .wiz-top-cart__sale-tag__label { display: none; }
    .wiz-top-cart__sale-tag {
      font-size: .8rem;
      /* Reset the desktop `align-self: baseline` here — in the column
         layout it overrides the parent's align-items: center and
         pulls the badge to the left edge instead of centring it
         over the prices. */
      align-self: center;
    }
    .wiz-top-cart__compare { font-size: .9rem; margin-right: 6px; }
  }
  /* CTA cell — flex-row so Back + Add-to-cart sit side by side (not stacked).
     `justify-content: flex-end` keeps them hugging the right so the primary
     button stays dominant; back sits to its left. */
  .wiz-top-cart__cell--cta {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-left: 18px;
    padding-right: 0;
    border-left: none;
  }
  .wiz-top-cart__cell .pf-cart-box__col-heading {
    margin-bottom: 2px;
  }
  .wiz-top-cart__value {
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 600;
    color: var(--m2-callout-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wiz-top-cart__value.is-empty {
    color: var(--m2-callout-text);
    opacity: 0.5;
    font-style: italic;
    font-weight: 400;
  }
  /* Kit cell: two sub-blocks side-by-side. Left = "KIT / Pro", right = "CONTENTS / list".
     Both are flex-columns with the same gap:6 so the HEADING row and the FIRST-VALUE row
     line up across both blocks — "CONTENTS" sits above "2x Top Lids" at the same y as
     "KIT" sits above "Pro". Right block hidden until a kit is picked. */
  .wiz-top-cart__cell--kit {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
  }
  .wiz-top-cart__kit-left,
  .wiz-top-cart__kit-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .wiz-top-cart__kit-right {
    text-align: right;
    flex: 1;
  }
  .wiz-top-cart__kit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .82rem;
    color: var(--m2-callout-text);
    opacity: 0.9;
    line-height: 1.35;
    text-align: right;
  }
  .wiz-top-cart__kit-list li {
    padding: 0;
  }
  /* Vinyl cell: identical DOM structure to Kit/Cutout (heading + value as direct children),
     so "Not selected" renders at the exact same y as the other two. Swatch is
     absolutely positioned in the right gutter — out of flow, no effect on layout.
     padding-right reserves 32px for the swatch + 12px buffer from the vertical rule. */
  .wiz-top-cart__cell--vinyl {
    position: relative;
    /* Room for the square swatch that spans the cell's full height — the cell's
       inner padding (0) is the swatch height, so we reserve that + buffers */
    padding-right: 82px;
  }
  .wiz-top-cart__cell--vinyl .wiz-top-cart__value {
    text-align: left;
    white-space: normal;
  }
  .wiz-top-cart__cell--vinyl .wiz-top-cart__swatch {
    position: absolute;
    right: 12px;   /* buffer between swatch and the vertical rule on the right */
    top: 0;
    bottom: 0;     /* top:0 + bottom:0 means the swatch fills the full cell height */
  }
  /* Double class selector beats the later-defined .pf-cart-box__swatch-preview { width: 72px } */
  .wiz-top-cart__swatch.pf-cart-box__swatch-preview {
    /* Fills the cell's full height; aspect-ratio keeps it square (width = height) */
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.2);
    background-size: 175%;
    background-position: center;
  }
  .wiz-top-cart__swatch.is-empty {
    background-color: rgba(255,255,255,0.08);
    background-image: none;
  }
  [data-theme="light"] .wiz-top-cart__swatch.pf-cart-box__swatch-preview {
    border-color: rgba(0,0,0,0.15);
  }
  [data-theme="light"] .wiz-top-cart__swatch.is-empty {
    background-color: rgba(0,0,0,0.06);
  }
  /* Total + CTA cell — Total block on the left, button on the right, both vertically centered */
  /* (total-block wrapper was removed; Total is its own grid cell now) */
  .wiz-top-cart__total {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m2-callout-text);
    line-height: 1.1;
  }
  .wiz-top-cart__btn {
    min-width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0 22px;
    font-size: .85rem;
    white-space: nowrap;
  }
  /* Disabled Next-step on page 2 (kit/logo not picked yet). */
  .wiz-top-cart__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Back button — compact, secondary. Just wide enough to fit the word
     "Back" plus a little padding; sits to the left of the primary Add-to-
     cart so the primary stays visually dominant. */
  .wiz-top-cart__btn--back {
    min-width: 0;
    width: auto;
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    font-size: .72rem;
    background: transparent;
    color: var(--m2-callout-text);
    border: 1px solid var(--m2-border);
    margin-right: 0;
    flex: 0 0 auto;
  }
  .wiz-top-cart__btn--back:hover {
    border-color: var(--m2-primary);
    color: var(--m2-primary);
  }
  .wiz-top-cart__cta-placeholder {
    font-size: .78rem;
    color: var(--m2-callout-text);
    opacity: 0.6;
    font-style: italic;
    text-align: center;
    align-self: center;
  }
  /* Mobile: 3 info cells on top row (Kit / Cutout / Vinyl), then Total +
     CTA on bottom row (Total 1/3, button 2/3). Contents list and vinyl
     swatch are hidden — both are confirmable further down the page, and
     removing them prevents the swatch from overlapping the vinyl text at
     narrow widths. */
  @media (max-width: 900px) {
    .wiz-top-cart {
      padding: 10px 14px;
      margin-bottom: 16px;
    }
    .wiz-top-cart__grid {
      /* Kit shrinks to ~25% — it's just the tier name ("Pro" / "Essentials"
         / "Ultimate"), short text. Cutout and Vinyl get the freed width
         (~37.5% each) since their values are longer and need to wrap. */
      grid-template-columns: 1fr 1.5fr 1.5fr;
      column-gap: 0;            /* cells use their own padding now */
      row-gap: 0;
      align-items: stretch;
    }
    /* Contents list in the kit cell — verbose on mobile, hidden. */
    .wiz-top-cart__kit-right { display: none !important; }
    /* Swatch preview on the vinyl cell — takes up ~44px of gutter and
       overlapped the label on narrow viewports. Hide on mobile; the vinyl
       color is still visible in the swatch grid immediately below. */
    .wiz-top-cart__cell--vinyl .wiz-top-cart__swatch { display: none !important; }
    /* Kit/Cutout/Vinyl info cells — identical layout so the heading sits at
       the same y-position across all three and the value sits at the same y
       below. Center both within the column so labels and values line up
       visually regardless of string length. */
    .wiz-top-cart__cell--kit,
    .wiz-top-cart__cell--cutout,
    .wiz-top-cart__cell--vinyl {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      text-align: center;
    }
    /* Hide the KIT / CUTOUT / VINYL column headings on mobile — the
       empty-state values (Select Kit / Select Cutout / Select Vinyl)
       already convey the column purpose, and dropping the heading
       reclaims a row of vertical space. */
    .wiz-top-cart__cell--kit .pf-cart-box__col-heading,
    .wiz-top-cart__cell--cutout .pf-cart-box__col-heading,
    .wiz-top-cart__cell--vinyl .pf-cart-box__col-heading { display: none !important; }
    /* Center the value text inside each column. */
    .wiz-top-cart__cell--kit .wiz-top-cart__value,
    .wiz-top-cart__cell--cutout .wiz-top-cart__value,
    .wiz-top-cart__cell--vinyl .wiz-top-cart__value {
      text-align: center;
      width: 100%;
    }
    .wiz-top-cart__cell {
      padding: 4px 8px;
      border-left: 1px solid rgba(0, 200, 232, 0.25);
      border-top: none;
      gap: 2px;
      min-width: 0;
    }
    .wiz-top-cart__cell:first-child {
      padding-left: 0;
      border-left: none;
    }
    /* Kit cell has an extra wrapper (.wiz-top-cart__kit-left) that the other
       two cells don't — flatten its spacing so it matches the cell-level gap
       used by cutout/vinyl, otherwise the "Pro" value sits 4px lower than
       "No logo" and "Matte Black". kit-right is display:none on mobile. */
    .wiz-top-cart__cell--kit .wiz-top-cart__kit-left {
      align-items: center;
      gap: 2px;
      text-align: center;
      width: 100%;
    }
    .wiz-top-cart__cell--kit .pf-cart-box__col-heading,
    .wiz-top-cart__cell--cutout .pf-cart-box__col-heading,
    .wiz-top-cart__cell--vinyl .pf-cart-box__col-heading {
      margin-bottom: 0;
      text-align: center;
    }
    /* Vinyl cell now uses its full width — no swatch gutter needed. */
    .wiz-top-cart__cell--vinyl {
      padding-right: 8px;
    }
    /* Allow wrapping in the info cells — cutout and vinyl values are long
       (e.g. "Matte Cool Grey Camo") and ellipsis was cutting meaningful
       text. Two lines is fine; the card's total height is driven by the
       bottom row anyway. */
    .wiz-top-cart__cell--vinyl .wiz-top-cart__value,
    .wiz-top-cart__value {
      font-size: .82rem;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .wiz-top-cart__cell .pf-cart-box__col-heading { font-size: .62rem; }

    /* Bottom row — Total (1/3) + CTA (2/3). Separator rule marks the break.
       Card has `padding: 10px 14px`; negative side margins on each
       cell + matching padding-left/right pull the border-top out to
       the card's outer edge so the rule reads as a single solid line
       across the whole card width (no left-edge cutoff, no middle gap). */
    .wiz-top-cart__cell--total,
    .wiz-top-cart__cell--cta {
      padding-top: 10px;
      margin-top: 8px;
      border-top: 1px solid rgba(0, 200, 232, 0.25);
      border-left: none;
    }
    .wiz-top-cart__cell--total {
      margin-left: -14px;
      padding-left: 14px;
      padding-right: 5px;
    }
    .wiz-top-cart__cell--cta {
      margin-right: -14px;
      padding-right: 14px;
      padding-left: 5px;
    }
    .wiz-top-cart__cell--total {
      grid-column: 1 / span 1;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      text-align: left;
    }
    .wiz-top-cart__cell--cta {
      grid-column: 2 / span 2;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }
    /* Add-to-cart on mobile — size to its content + a generous padding
       instead of stretching to fill the CTA cell. The cell already has
       justify-content: flex-end so both buttons cluster on the right;
       freeing the leftover space gives the TOTAL/SALE block more room
       to breathe. */
    .wiz-top-cart__cell--cta .wiz-top-cart__btn:not(.wiz-top-cart__btn--back) {
      flex: 0 1 auto;
      width: auto;
      min-width: 0;
    }
    .wiz-top-cart__total { font-size: 1.05rem; }
    .wiz-top-cart__btn {
      height: 38px;
      line-height: 38px;
      min-width: 0;
      padding: 0 14px;
      font-size: .82rem;
    }
    /* Back button on mobile — same height as Add-to-cart so the two
       buttons sit on the same baseline and read as a paired CTA cluster
       rather than mismatched siblings. Still secondary in style
       (transparent + border, smaller font) so the primary action stays
       dominant. Declared AFTER the generic .wiz-top-cart__btn rule
       above so it wins on source order at equal specificity. */
    .wiz-top-cart__btn--back {
      flex: 0 0 auto;
      width: auto;
      height: 38px;
      line-height: 36px; /* 38 - 1px border top - 1px border bottom */
      padding: 0 12px;
      font-size: .78rem;
      background: transparent;
      color: var(--m2-callout-text);
      border: 1px solid var(--m2-border);
    }
    .wiz-top-cart__cta-placeholder { font-size: .72rem; }
  }

  /* ── Trust strip ─────────────────────────────────── */
  .wiz-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px 0;
    margin: 0 0 14px;
    list-style: none;
    border-top: 1px solid var(--m2-gray);
    border-bottom: 1px solid var(--m2-gray);
    font-size: .82rem;
    color: var(--m2-text-muted);
  }
  .wiz-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .wiz-trust-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--m2-primary);
    font-size: .9em;
  }
  @media (max-width: 640px) {
    .wiz-trust-strip { gap: 10px; font-size: .75rem; }
  }

  /* Wizard gallery — strip the default card border/background so it sits cleanly on the panel.
     IMPORTANT: at ≥641px, .card gets a full 4-sided border + radius + shadow,
     so we need to nuke all of them. Scoped to the wizard section so the main product
     page's card (if used elsewhere) stays unaffected. */
  section[data-section-type="product-wizard"] .card,
  [data-wizard-gallery-col] .card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  section[data-section-type="product-wizard"] .card__section,
  section[data-section-type="product-wizard"] .card__section--tight,
  [data-wizard-gallery-col] .card__section,
  [data-wizard-gallery-col] .card__section--tight {
    padding: 0 !important;
  }
  /* Kill ALL gallery backgrounds/borders inside the wizard panel — the panel already
     provides a card surface; stacking another card-bg creates a visible box. */
  [data-wizard-gallery-col] .m2-gallery,
  [data-wizard-gallery-col] .m2-gallery.is-jpg,
  [data-wizard-gallery-col] .m2-gallery__main,
  [data-wizard-gallery-col] .m2-gallery.is-jpg .m2-gallery__main,
  [data-wizard-gallery-col] .m2-gallery.is-jpg .m2-gallery__thumb {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  /* Let the container shrink to the image so there's no gap between image bottom
     and reflection. Without this, aspect-ratio leaves blank space above the reflection. */
  [data-wizard-gallery-col] .m2-gallery__main {
    aspect-ratio: auto;
    height: auto;
    min-height: 260px;
    /* Allow the centered drop-shadow halo on .m2-gallery__image to bleed
       beyond the stage bounds. The previous overflow:hidden was there to
       clip the reflection canvas — reflection is now disabled globally
       so the clip isn't needed and was cropping the shadow. */
    overflow: visible;
    position: relative;
  }

  /* ── Product shadow / glow behind the gallery image (both themes) ──
     Single centered halo behind the transparent-PNG product. Replaces
     the prior offset drop-shadow (which read as a ground shadow under
     the device) and the dark-mode cyan ::before / light-mode ::after
     contact-shadow combo. Centered on the silhouette so the effect
     reads as "device lifted off the page" in both themes. Dark uses a
     cyan-tinted halo so it shows against the dark bg; light uses a
     neutral dark halo. */
  [data-wizard-gallery-col] .m2-gallery__slide { position: relative; z-index: 1; }

  /* No more centered drop-shadow halo — the device-bottom ground shadow
     below (rendered as a pseudo-element pool positioned by JS) replaces
     it. The halo read as a back-glow rather than depth; the ground
     shadow anchors the device to a virtual surface. */
  [data-wizard-gallery-col] .m2-gallery__image,
  .wiz-p1-image__img { filter: none; }

  /* ── Ground shadow: oval pool positioned at the bottom of the device.
     `--m2-shadow-y` is set per-image by the scanBounds-driven JS in
     main-product-wizard.liquid — it lands the shadow ~20px above the
     detected device-bottom in rendered pixel space. If the product
     fills >85% of the image height, the JS sets the var to 50% so the
     shadow centers instead of clinging to the bottom edge. */
  [data-wizard-gallery-col] .m2-gallery__main::before,
  .wiz-p1-image__stack::before {
    content: "";
    position: absolute;
    left: 50%;
    top: var(--m2-shadow-y, 78%);
    transform: translate(-50%, -50%);
    /* Wider + taller oval — 40% wider than the previous 72% width so
       the shadow falls off well beyond the device's lateral footprint
       and reads as ambient ground rather than a contained pool. */
    width: 100%;
    height: 18%;
    pointer-events: none;
    z-index: 0;
    filter: blur(22px);
    /* Default neutral shadow — light mode keeps this; dark mode swaps
       to a cyan-tinted radial below. */
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.42), transparent 70%);
  }
  :root:not([data-theme="light"]) [data-wizard-gallery-col] .m2-gallery__main::before,
  :root:not([data-theme="light"]) .wiz-p1-image__stack::before {
    background: radial-gradient(ellipse at center, rgba(0, 200, 232, 0.45), transparent 70%);
  }

  /* Page-1 stack needs position: relative so its ::before anchors. The
     wizard `.m2-gallery__main` already has position: relative set
     earlier in the file. */
  .wiz-p1-image__stack { position: relative; }
  /* Image stacks above the shadow inside its parent. */
  [data-wizard-gallery-col] .m2-gallery__slide { z-index: 1; }
  .wiz-p1-image__img { position: relative; z-index: 1; }

  /* ── Mobile: eliminate first-load gap between gallery and swatches ──
     The gallery stage is pinned to 1:1 with object-fit: contain so its
     height never shifts between "all images" (initial state) and "filtered
     to selected material" (after swatch pick). The rules after it strip
     every margin/padding source on the chain from <m2-gallery> up to
     <wizard-p3-layout> so nothing vertical can live between the thumbstrip
     and the swatch grid. Reflection is disabled on mobile — on small
     screens it was eating ~30-50px of visual space below the device and
     reading as "extra scroll" rather than "surface anchor". */
  @media (max-width: 767px) {
    [data-wizard-gallery-col] .m2-gallery__main {
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      height: auto !important;
      max-height: 70vw;
    }
    [data-wizard-gallery-col] .m2-gallery__slide {
      position: absolute !important;
      inset: 0 !important;
      height: 100% !important;
    }
    [data-wizard-gallery-col] .m2-gallery__image {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      margin-top: 0 !important;
    }
    /* Kill every source of vertical whitespace below the thumbstrip and
       above the first swatch group. */
    [data-wizard-gallery-col],
    [data-wizard-gallery-col] .card,
    [data-wizard-gallery-col] .card__section,
    [data-wizard-gallery-col] .m2-gallery,
    [data-wizard-gallery-col] .m2-gallery__stage,
    [data-wizard-gallery-col] .m2-gallery__thumbstrip {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
    .wiz-p3-col-left { margin-top: 0 !important; padding-top: 0 !important; }
    .wiz-p3-col-left > .wizard-section-label:first-child { margin-top: 12px; }
    /* Disable the reflection canvas entirely on mobile — it's visual-only
       (absolutely positioned, so no layout impact) but on small screens
       it doubled as visual noise and read as extra gap below the device. */
    [data-wizard-gallery-col] .m2-gallery__reflection {
      display: none !important;
    }
  }
  [data-wizard-gallery-col] .m2-gallery__slide {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  [data-wizard-gallery-col] .m2-gallery__slide:not(.is-active) {
    display: none;
  }
  [data-wizard-gallery-col] .m2-gallery__image {
    height: auto;
    width: 100%;
    /* JS measures each image's first/last non-transparent rows and sets
       these to per-image negative offsets so the device fills the frame
       with a small buffer above/below. Default 0 = uncropped until JS
       writes real values. The slide + main containers both have
       overflow:hidden, so the negative margins clip cleanly at both
       edges instead of overflowing the gallery. */
    margin-top: var(--wiz-gallery-crop-top, 0px);
    margin-bottom: var(--wiz-gallery-crop-bottom, 0px);
  }
  .wiz-tab:disabled { opacity: .45; cursor: not-allowed; }
  @media (max-width: 767px) {
    .wiz-tab { padding: 8px 14px 9px; font-size: .8rem; }
    .wiz-tab.is-active { padding-bottom: 10px; }
  }

  /* ── Page 1 layout ───────────────────────────────── */
  .wiz-p1-top {
    display: flex;
    gap: 0;
    align-items: stretch;
  }
  /* Image on LEFT */
  .wiz-p1-image {
    flex: 0 0 50%;
    padding-right: 28px;
    border-right: 2px solid var(--m2-border);
    display: flex;
    align-items: flex-start;
  }
  .wiz-p1-image__img {
    width: 100%;
    border-radius: 8px;
    display: block;
  }
  /* Compat + similar on RIGHT */
  .wiz-p1-compat {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
  }
  /* .wiz-p1-compat__note styles — moved further down, see the
     device_specs-driven compatibility block. The note now sits at the
     bottom of the compat group rather than the top. */
  .wiz-p1-divider {
    width: 100%;
    margin: 24px 0;
    border: none;
    border-top: 2px solid var(--m2-border);
  }
  .wiz-p1-bottom { margin-top: 0; }
  .wiz-p1-desc { min-width: 0; }

  /* ── Page 2 layout — 50/50 wireframe + controls (mirrors page 1) ── */
  .wiz-p2-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
  }
  /* LEFT: live wireframe of the current kit/cutout selection */
  .wiz-p2-wireframe {
    flex: 0 0 50%;
    padding-right: 28px;
    border-right: 2px solid var(--m2-border);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .wiz-p2-wireframe__stack {
    position: relative;
    width: 100%;
  }
  .wiz-p2-wireframe__img {
    width: 100%;
    border-radius: 8px;
    display: block;
    /* Fade-out → swap → fade-in driven by JS (wizardP2UpdateWireframe). */
    transition: opacity 0.35s ease;
  }
  /* Dark-mode recolor: a cyan fill masked by the wireframe art, so the
     strokes render in exact brand cyan (#00C8E8) instead of the source
     art's dark lines (invisible on the dark card). Absolutely positioned
     over the <img>, which still drives the box height. mask-size:contain
     matches the img's width:100%/height:auto fit, so the tint lines up
     pixel-for-pixel with where the source art renders. */
  .wiz-p2-wireframe__tint {
    position: absolute;
    inset: 0;
    background-color: #00C8E8;
    -webkit-mask: var(--wf-mask) center / contain no-repeat;
    mask: var(--wf-mask) center / contain no-repeat;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  /* Default theme is dark — show the cyan tint, hide the dark source art
     (kept in flow via visibility:hidden so it still sizes the box). */
  .wiz-p2-wireframe__img  { visibility: hidden; }
  .wiz-p2-wireframe__tint { display: block; }
  /* Light mode — the dark strokes read fine on the white card, so show the
     source art and drop the cyan tint entirely. */
  [data-theme="light"] .wiz-p2-wireframe__img  { visibility: visible; }
  [data-theme="light"] .wiz-p2-wireframe__tint { display: none; }
  /* RIGHT: dropdowns + kit breakdown */
  .wiz-p2-controls {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
  }
  /* Cutout + Kit dropdowns side-by-side, callout/tagline stacked beneath
     each. align-items: flex-start so a tall cutout callout doesn't stretch
     the kit column. A lone field (no cutout option) flexes to full width. */
  .wiz-p2-fields {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .wiz-p2-field {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 18px;
  }
  @media (max-width: 600px) {
    .wiz-p2-fields { flex-direction: column; gap: 0; }
  }
  .wiz-p2-label {
    display: block;
    font-family: var(--font-mono, var(--font-sans));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin-bottom: 6px;
  }
  .wiz-p2-select {
    width: 100%;
    height: 48px;
    padding: 0 36px 0 14px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--m2-text-on-card);
    background-color: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300C8E8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color .2s;
  }
  .wiz-p2-select:focus {
    outline: none;
    border-color: var(--m2-primary);
  }
  [data-theme="light"] .wiz-p2-select {
    background-color: #ffffff;
    color: #2a2a2a;
    border-color: rgba(0,0,0,0.15);
  }
  [data-theme="light"] .wiz-p2-select option {
    background: #ffffff;
    color: #2a2a2a;
  }
  /* Cutout description + kit tagline — accented with the same cyan left-bar
     used on the component list (rather than a boxed callout) so all the
     supporting text under the dropdowns shares one visual language. */
  .wiz-p2-callout,
  .wiz-p2-tagline {
    margin-top: 10px;
    padding-left: 14px;
    border-left: 2px solid var(--m2-primary);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--m2-text-on-card);
  }
  .wiz-p2-callout p:first-child { margin-top: 0; }
  .wiz-p2-callout p:last-child { margin-bottom: 0; }
  /* Divider before the kit breakdown */
  .wiz-p2-divider {
    border: none;
    border-top: 1px solid var(--m2-border);
    margin: 22px 0 18px;
  }
  /* Kit breakdown section */
  .wiz-p2-summary__header {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--m2-text-on-card-strong, var(--m2-text-on-card));
    margin: 0 0 10px;
  }
  .wiz-p2-summary__includes {
    font-weight: 700;
    font-size: .92rem;
    color: var(--m2-primary);
    margin: 0 0 12px;
  }
  .wiz-p2-components {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wiz-p2-component {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    border-left: 2px solid var(--m2-primary);
  }
  .wiz-p2-component__name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--m2-text-on-card);
  }
  .wiz-p2-component__desc {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--m2-text-muted);
  }
  @media (max-width: 767px) {
    .wiz-p2-layout { flex-direction: column; }
    .wiz-p2-wireframe {
      flex: none;
      width: 100%;
      padding-right: 0;
      border-right: none;
      border-bottom: 2px solid var(--m2-border);
      padding-bottom: 18px;
      margin-bottom: 18px;
    }
    .wiz-p2-controls { padding-left: 0; width: 100%; }
  }

  /* Compatibility — device_specs-driven groups (Display & Dims / Internals / Models) */
  .wiz-compat-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-bottom: 20px;
  }
  /* Models row spans both columns — list can be long, deserves the room */
  .wiz-compat-group--full { grid-column: 1 / -1; }

  .wiz-compat-group__label {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--m2-border);
  }

  .wiz-compat-dl {
    display: grid;
    gap: 8px;
    margin: 0;
  }
  .wiz-compat-dl__row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: baseline;
  }
  .wiz-compat-dl__row--list { align-items: start; }
  .wiz-compat-dl dt {
    font-size: .82rem;
    font-weight: 500;
    color: var(--m2-text-muted);
    margin: 0;
  }
  .wiz-compat-dl dd {
    font-size: .88rem;
    color: var(--m2-text-on-card);
    margin: 0;
    line-height: 1.5;
  }

  .wiz-compat-list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .wiz-compat-list-inline li {
    font-size: .88rem;
    color: var(--m2-text-on-card);
  }

  .wiz-compat-model-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 20px;
  }
  .wiz-compat-model-list li {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--m2-text-on-card);
  }

  /* Compatibility notes — cyan-accented callout list below the spec groups */
  .wiz-compat-notes {
    list-style: none;
    padding: 14px 18px;
    margin: 16px 0;
    background: rgba(0, 200, 232, 0.04);
    border-left: 3px solid var(--m2-highlight);
    border-radius: 0 6px 6px 0;
  }
  [data-theme="light"] .wiz-compat-notes {
    background: rgba(0, 200, 232, 0.06);
  }
  .wiz-compat-notes li {
    font-size: .88rem;
    font-weight: 600;
    color: var(--m2-text-on-card);
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .wiz-compat-notes li:last-child { margin-bottom: 0; }
  .wiz-compat-notes li::before {
    content: '→ ';
    color: var(--m2-highlight);
    font-weight: 700;
  }

  /* Override: footer note appears beneath everything, italicised */
  .wiz-p1-compat__note {
    font-size: .82rem;
    color: var(--m2-text-muted);
    margin: 20px 0 0;
    font-style: italic;
  }
  /* Footer-note link colour — same affordance as before (cyan + underline) */
  .wiz-p1-compat__note a {
    color: var(--m2-primary);
    text-decoration: underline;
    font-weight: 600;
    font-style: normal;
  }
  .wiz-p1-compat__note a:hover { color: var(--m2-highlight); }

  /* "See similar variants" trigger — quiet bordered button below the footer */
  .wiz-similar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--m2-border);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--m2-text-on-card);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
    margin-top: 10px;
  }
  .wiz-similar-trigger:hover {
    border-color: var(--m2-highlight);
    color: var(--m2-highlight);
  }
  .wiz-similar-trigger:focus-visible {
    outline: 2px solid var(--m2-highlight);
    outline-offset: 2px;
  }
  .wiz-similar-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
  }
  .wiz-similar-trigger:hover svg { transform: translateX(2px); }

  /* Similar-products modal — mirrors wiz-video-modal patterns */
  .wiz-similar-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .wiz-similar-modal__wrap {
    background: var(--m2-card-bg, var(--m2-dark-bg));
    border: 1px solid var(--m2-border);
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
  }
  [data-theme="light"] .wiz-similar-modal__wrap {
    background: var(--m2-bg);
  }
  .wiz-similar-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: none;
    color: var(--m2-text-on-card);
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .18s ease;
    z-index: 1;
  }
  .wiz-similar-modal__close:hover { background: rgba(255, 255, 255, .15); }
  [data-theme="light"] .wiz-similar-modal__close { background: rgba(0, 0, 0, .08); }
  [data-theme="light"] .wiz-similar-modal__close:hover { background: rgba(0, 0, 0, .15); }
  .wiz-similar-modal__inner { padding: 30px 28px; }
  .wiz-similar-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--m2-text-on-card);
  }
  .wiz-similar-modal__intro {
    font-size: .88rem;
    color: var(--m2-text-muted);
    line-height: 1.6;
    margin: 0 0 22px;
  }
  .wiz-similar-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  /* Tiles now use the `.m2cf-card` chassis (added to the same anchor
     in the Liquid). The legacy `.wiz-similar-tile` class is kept so
     any selector pinned to it still matches, but we let m2cf-card
     supply the surface, border, radius, hover, and internal layout
     — only the grid spans + a hairline neutralizer live here. */
  .wiz-similar-tile {
    text-decoration: none;
  }

  @media (max-width: 720px) {
    .wiz-compat-groups { grid-template-columns: 1fr; }
    .wiz-compat-model-list { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 767px) {
    .wiz-p1-top { flex-direction: column; }
    .wiz-p1-image {
      flex: none; width: 100%;
      padding-right: 0; border-right: none;
      border-bottom: 2px solid var(--m2-border);
      padding-bottom: 20px; margin-bottom: 20px;
    }
    .wiz-p1-compat { padding-left: 0; width: 100%; }
    .wiz-compat-dl__row { grid-template-columns: 90px 1fr; }
  }

  /* ── Video tiles (page 3 installation) ──────────── */
  .wiz-install-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--m2-border);
  }
  .wiz-install-section__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .wiz-install-section__desc {
    font-size: .88rem;
    color: var(--text-color);
    line-height: 1.55;
    margin: 0 0 14px;
  }
  .wiz-install-support {
    margin-bottom: 16px;
    padding: 14px 18px;
    background: var(--m2-grad-callout);
    color: var(--m2-callout-text);
    border-radius: 12px;
    border: 1px solid var(--m2-border);
  }
  .wiz-video-tiles {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .wiz-video-tile {
    width: 200px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--m2-border);
    background: var(--m2-dark-bg);
    color: var(--m2-nav-text);
    transition: box-shadow .2s, transform .2s, border-color .15s;
    flex-shrink: 0;
  }
  .wiz-video-tile:hover {
    border-color: var(--m2-highlight);
    box-shadow: var(--m2-shadow-btn);
    transform: translateY(-2px);
  }
  .wiz-video-tile__thumb {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--m2-dark-bg);
  }
  .wiz-video-tile__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .85;
    transition: opacity .15s;
  }
  .wiz-video-tile:hover .wiz-video-tile__thumb img { opacity: 1; }
  .wiz-video-tile__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
  }
  .wiz-video-tile__title {
    padding: 10px 12px 12px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
    text-align: center;
  }

  /* Video lightbox */
  .wiz-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .wiz-video-modal__wrap {
    position: relative;
    width: 100%;
    max-width: 860px;
  }
  .wiz-video-modal__close {
    position: absolute;
    top: -38px;
    right: 0;
    background: rgba(255,255,255,.18);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
  }
  .wiz-video-modal__close:hover { background: rgba(255,255,255,.35); }
  .wiz-video-modal__inner {
    background: #000;
    border-radius: 8px;
    overflow: hidden;
  }
  .wiz-video-modal__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .wiz-video-modal__embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }
  @media (max-width: 767px) {
    .wiz-video-tile { width: calc(50% - 8px); }
    .wiz-video-tile__thumb { height: 100px; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     PRODUCT-CONTENT METAOBJECT SECTIONS
     - wiz-intro      → page 1 top
     - wiz-install    → page 1 below compatibility (videos + considerations + method)
     - wizard-material-header / --rationale / swatch --recommended → page 3
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Subtitle under the H1 (replaces the standalone .wiz-intro section) ── */
  .wiz-product-subtitle {
    font-size: .94rem;
    color: var(--m2-text-muted);
    line-height: 1.55;
    margin-top: 8px;
    max-width: 720px;
  }
  .wiz-product-subtitle p { margin: 0; }
  .wiz-product-subtitle p + p { margin-top: 6px; }

  /* ── Install guidance section (page 1, replaces wiz-install-section) ── */
  .wiz-install {
    margin-bottom: 8px;
  }
  /* Header stacks: heading on top, lead-in directly below — both full-width
     above the split columns. */
  .wiz-install__header {
    margin-bottom: 20px;
  }
  .wiz-install__heading {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--m2-text-on-card);
    margin: 0 0 10px;
  }
  .wiz-install__leadin {
    font-size: .94rem;
    color: var(--m2-text-muted);
    line-height: 1.65;
    margin: 0;
  }

  /* Two-column split — videos on left, considerations on right. Mirrors the
     wizard image/compat 50/50 layout above. Either column collapses to full
     width via :only-child if only one is rendered. */
  .wiz-install__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .wiz-install__split:has(> .wiz-install__col:only-child) {
    grid-template-columns: 1fr;
  }
  .wiz-install__col { min-width: 0; }
  .wiz-install__col-heading {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wiz-install__col-heading::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--m2-text-muted);
  }

  /* Videos column — 2-up inner grid (4 videos = 2x2). Drops to single column
     at very narrow widths. */
  .wiz-install__videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .wiz-install-video {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    position: relative;
    padding: 0;
    font: inherit;
    color: inherit;
  }
  .wiz-install-video:hover {
    border-color: var(--m2-highlight);
    transform: translateY(-2px);
    box-shadow: var(--m2-shadow-btn);
  }
  .wiz-install-video:focus-visible {
    outline: 2px solid var(--m2-highlight);
    outline-offset: 2px;
  }
  .wiz-install-video__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--m2-dark-bg);
    position: relative;
    overflow: hidden;
  }
  .wiz-install-video__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .wiz-install-video__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.3) 100%);
    pointer-events: none;
  }
  .wiz-install-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #0f1419;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    z-index: 2;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }
  .wiz-install-video:hover .wiz-install-video__play {
    transform: scale(1.08);
    background: var(--m2-highlight);
    color: #fff;
  }
  .wiz-install-video__title {
    display: block;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--m2-text-on-card);
    line-height: 1.35;
  }

  /* Considerations column — vertical card stack */
  .wiz-install__considerations {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wiz-consideration {
    background: var(--m2-card-bg);
    border: 1px solid var(--m2-border);
    border-radius: 10px;
    padding: 16px 18px;
    position: relative;
    transition: border-color .18s ease;
  }
  .wiz-consideration:hover { border-color: var(--m2-gray); }
  /* Tricky cards get a cyan left accent rail — the only difficulty signal */
  .wiz-consideration--tricky {
    border-left: 3px solid var(--m2-highlight);
    padding-left: calc(18px - 2px);
  }
  .wiz-consideration__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .wiz-consideration__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--m2-highlight);
    display: grid;
    place-items: center;
  }
  .wiz-consideration__icon svg { width: 18px; height: 18px; }
  .wiz-consideration__headline {
    font-size: .94rem;
    font-weight: 600;
    color: var(--m2-text-on-card);
    line-height: 1.3;
    flex: 1;
    margin: 0;
  }
  .wiz-consideration__body {
    font-size: .87rem;
    color: var(--m2-text-on-card);
    line-height: 1.55;
  }
  .wiz-consideration__body p:not(:last-child) { margin-bottom: 8px; }

  /* Mobile (<=900px): stack columns; videos drop to auto-fit grid */
  @media (max-width: 900px) {
    .wiz-install__split {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .wiz-install__videos {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }
  @media (max-width: 767px) {
    .wiz-install__leadin { max-width: none; }
  }
  /* Very narrow viewports: single-column videos */
  @media (max-width: 480px) {
    .wiz-install__videos { grid-template-columns: 1fr; }
  }

  /* ── Material header + recommendation hint/rationale split (page 3) ──
     Hint above swatches = single line meaning of the cyan dot.
     Rationale below swatches = full editorial callout, doesn't push the
     swatch grid down. */
  .wizard-material-header { margin-bottom: 14px; }

  .wizard-material-hint {
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--m2-text-muted);
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.5;
  }
  .wizard-material-hint__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m2-highlight);
    box-shadow: 0 0 0 2px rgba(0, 200, 232, 0.25);
    margin: 0 2px;
    flex-shrink: 0;
  }

  /* Hover trigger for "M2's picks" — shows the rationale tooltip below.
     The hint container is position:relative so the absolutely-positioned
     tooltip anchors to it. */
  .wizard-material-hint { position: relative; }

  .wizard-material-picks {
    color: var(--m2-highlight);
    font-weight: 600;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    cursor: help;
    transition: color .15s ease, border-color .15s ease;
  }
  .wizard-material-picks:hover,
  .wizard-material-picks:focus-visible {
    color: var(--m2-primary);
    border-bottom-style: solid;
    outline: none;
  }
  [data-theme="light"] .wizard-material-picks:hover,
  [data-theme="light"] .wizard-material-picks:focus-visible {
    color: var(--m2-primary);
  }

  .wizard-material-picks__tip {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    width: min(380px, 100%);
    padding: 14px 16px;
    background: var(--m2-tooltip-bg, var(--m2-card-bg));
    border: 1px solid var(--m2-border);
    border-left: 3px solid var(--m2-highlight);
    border-radius: 8px;
    box-shadow: var(--m2-shadow-elevated);
    font-size: .85rem;
    color: var(--m2-text-on-card);
    line-height: 1.55;
  }
  [data-theme="light"] .wizard-material-picks__tip {
    background: #ffffff;
  }
  .wizard-material-picks:hover ~ .wizard-material-picks__tip,
  .wizard-material-picks:focus ~ .wizard-material-picks__tip,
  .wizard-material-picks:focus-visible ~ .wizard-material-picks__tip,
  .wizard-material-picks__tip:hover {
    display: block;
  }
  .wizard-material-picks__tip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--m2-text-on-card);
    margin: 0 0 8px;
  }
  .wizard-material-picks__tip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m2-highlight);
    box-shadow: 0 0 0 2px rgba(0, 200, 232, 0.25);
    flex-shrink: 0;
  }
  .wizard-material-picks__tip-body p { margin: 0 0 6px; }
  .wizard-material-picks__tip-body p:last-child { margin-bottom: 0; }

  /* Recommended swatch dot — bottom-left corner. .wizard-swatch-item is
     position:relative so the dot anchors inside the rounded tile.
     Sale/Clearance banners sit at top:0; bottom-left placement keeps the
     dot clear of them with no special-case offset needed. */
  .wizard-swatch-item--recommended::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--m2-highlight);
    box-shadow:
      0 0 0 2px rgba(0, 200, 232, 0.25),
      0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
  }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE VIDEO TILES (from main-product.liquid)
   ══════════════════════════════════════════════════════════════════════════ */

.pf-install-desc {
  font-size: .88rem;
  color: var(--text-color);
  line-height: 1.55;
  margin: 0 0 14px;
}

.pf-video-tiles {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.pf-video-tile {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 200px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--m2-border);
  background: var(--m2-dark-bg);
  transition: box-shadow .2s, transform .2s, border-color .15s;
  flex-shrink: 0;
}

.pf-video-tile:hover {
  box-shadow: var(--m2-shadow-glow);
  transform: translateY(-2px);
  border-color: var(--m2-highlight);
}

.pf-video-tile__thumb {
  position: relative;
  width: 100%;
  height: 124px;
  overflow: hidden;
  background: #111;
}

.pf-video-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  transition: opacity .15s;
}

.pf-video-tile:hover .pf-video-tile__thumb img { opacity: 1; }

.pf-video-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, .65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  pointer-events: none;
}

.pf-video-tile__caption {
  padding: 8px 10px 10px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color);
  text-align: center;
}

/* Video lightbox */
.pf-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pf-video-modal__wrap {
  position: relative;
  width: 100%;
  max-width: 860px;
}

.pf-video-modal__close {
  position: absolute;
  top: -38px;
  right: 0;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-video-modal__close:hover { background: rgba(255, 255, 255, .35); }

.pf-video-modal__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.pf-video-modal__embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Install callout bar */
.pf-install-callout {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--m2-grad-callout);
  border-radius: 12px;
  border: 1px solid var(--m2-border);
  color: var(--m2-callout-text);
}

.pf-install-callout p { margin: 0; font-size: .9rem; }
.pf-install-callout a { color: var(--m2-callout-text); font-weight: 600; text-decoration: underline; }

@media (max-width: 767px) {
  .pf-video-tile { width: calc(50% - 8px); }
  .pf-video-tile__thumb { height: 90px; }
}


/* ── Product card selector ── */
.kit-card.selected {
  border-color: var(--m2-highlight) !important;
  background-color: rgba(0, 165, 199, 0.08);
}

/* ── Slick carousel overrides ── */
.slick-prev, .slick-next { background: rgba(0,0,0,0.5); border-radius: 50%; width: 30px; height: 30px; z-index: 10; }
.slick-prev:before, .slick-next:before { font-size: 16px; color: white; }


/* ══════════════════════════════════════════════════════════════════════════
   M2 FILTERED COLLECTION PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.m2cf-header {
  padding: 24px 0;
  /* Override the .m2-secthead--center max-width: 64ch — the collection
     header should center but use the full content width for the H1 so
     longer collection titles don't clip mid-line. */
  max-width: none;
}

.m2cf-header__title {
  color: var(--m2-nav-text);
  margin-bottom: 8px;
}

/* Description now handled by .m2cf-desc-inner */

/* ── Layout ── */
.m2cf-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 40px;
}

@media screen and (max-width: 999px) {
  .m2cf-layout { grid-template-columns: 1fr; }

  /* Sidebar layout on mobile — inline above the grid (when revealed),
     full-width, no sticky/overlay behaviour. The collapse-by-default
     rule below hides it until the customer taps the Filters toggle. */
  .m2cf-sidebar {
    position: relative;
    width: 100%;
    max-height: none;
    border-radius: 10px;
    overflow: visible;
    margin-bottom: 16px;
  }
  .m2cf-sidebar:not(.is-open) {
    display: none;
  }
  .m2cf-sidebar.is-open {
    display: block;
  }

  /* Show the Filters toggle (was hidden everywhere by default — at this
     breakpoint it's the primary control for revealing the sidebar) and
     hide the sidebar's internal close button since the toggle is now
     bidirectional (tap to open, tap again to close). */
  .m2cf-mobile-toggle { display: flex !important; }
  .m2cf-sidebar__close { display: none !important; }

  /* Visual hint that the toggle has open state — tiny caret + accent
     fill flip when expanded. */
  .m2cf-mobile-toggle[aria-expanded="true"] {
    background: var(--m2-primary);
    color: var(--m2-bg);
  }
  .m2cf-mobile-toggle[aria-expanded="true"]::after {
    content: " — close";
    margin-left: 4px;
  }

  /* Collapse filter groups by default on mobile */
  .m2cf-sidebar .m2cf-filter-toggle[aria-expanded="false"] + [aria-hidden="true"] {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  /* Fix 2-column grid overflow */
  .m2cf-grid {
    gap: 10px !important;
  }

  .m2cf-layout {
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }
}

/* Extended mobile guard — some collections (e.g. /collections/all-skins
   with many products) were rendering partially off the page on tablet-phone
   widths between 641-999px because the grid's min-content could exceed the
   column width. min-width: 0 lets each card shrink; overflow-x: hidden on
   the layout catches any lingering overflow so the page doesn't horizontal-
   scroll. */
@media screen and (max-width: 999px) {
  .m2cf-layout { overflow-x: hidden; }
  .m2cf-card,
  .m2cf-main { min-width: 0; }
  .m2cf-card__title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ── Sidebar ── */
.m2cf-sidebar {
  /* Card chrome aligned with the trust-bar tile system: card-bg
     surface + standard border token + 12px corners. Dark-mode gets the
     cyan radial wash + tinted border via the shared
     `.review-item / .lpc__card / .m2cf-card / .product-item /
     .m2cf-sidebar` accent block in the theme header section. */
  background: var(--m2-card-bg);
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height, 60px) + 16px);
  max-height: calc(100vh - var(--header-height, 60px) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--m2-gray) transparent;
}

/* Re-assert the mobile sidebar behaviour AFTER the base rule — the earlier
   @media block at ~line 17965 was being overridden by the base `.m2cf-sidebar`
   above (same specificity, later in source order), which kept `position:
   sticky` active on mobile and made the filters float over the product grid
   while scrolling. Bumping these overrides below the base rule makes source
   order do the right thing. */
@media screen and (max-width: 999px) {
  .m2cf-sidebar {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    overflow-y: visible;
    box-shadow: none;
  }
}

.m2cf-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(90deg, transparent, rgba(106,106,106,0.3), transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.m2cf-sidebar__title {
  /* `!important` defeats the blanket `span { font-family: sans
     !important }` rule at line 12683 which would otherwise force
     Inter Tight back onto this label. */
  font-family: var(--font-mono) !important;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--heading-color);
}

.m2cf-sidebar__close {
  display: none;
  background: none;
  border: none;
  color: var(--m2-nav-text);
  font-size: 1.4rem;
  cursor: pointer;
}

@media screen and (max-width: 999px) {
  .m2cf-sidebar__close { display: block; }
}

.m2cf-clear-btn {
  background: none;
  border: none;
  color: var(--m2-highlight);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Mobile toggle ── */
.m2cf-mobile-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--secondary-background);
  border: 1px solid var(--m2-primary);
  border-radius: 8px;
  color: var(--m2-primary);
  cursor: pointer;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  justify-content: center;
}

.m2cf-mobile-toggle svg { width: 16px; height: 16px; }

/* ── Filter groups ── */
.m2cf-filter-group {
  border-bottom: none;
  position: relative;
}

.m2cf-filter-group + .m2cf-filter-group::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--m2-grad-metallic);
}

.m2cf-filter-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  color: var(--heading-color);
  /* `!important` defeats the blanket `button { font-family: sans
     !important }` rule at line 12683. */
  font-family: var(--font-mono) !important;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: none;
  border: none;
}

.m2cf-filter-toggle svg {
  width: 12px;
  height: 8px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.m2cf-filter-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.m2cf-filter-body {
  padding: 0 16px 14px;
}

.m2cf-filter-body[aria-hidden="true"] {
  height: 0 !important;
  padding: 0 16px;
  overflow: hidden;
  visibility: hidden;
}

/* ── Search inputs ── */
.m2cf-search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--m2-control-bg);
  border: 1px solid var(--m2-control-border);
  border-radius: 8px;
  color: var(--m2-control-text);
  font-size: 0.85rem;
  box-sizing: border-box;
}

.m2cf-search-input::placeholder { color: var(--m2-text-faint); }

.m2cf-search-input:focus {
  border-color: var(--m2-control-focus);
  outline: none;
}

/* ── Checkbox list ── */
.m2cf-checkbox-list {
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--m2-gray) transparent;
}

.m2cf-checkbox-item {
  padding: 3px 0;
}

.m2cf-checkbox-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
  font-size: 0.82rem;
  cursor: pointer;
}

.m2cf-checkbox-item input[type="checkbox"] {
  accent-color: var(--m2-highlight);
  flex-shrink: 0;
}

/* ── Toolbar ── */
.m2cf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px;
  color: var(--m2-nav-text);
  border-bottom: 1px solid var(--m2-gray);
  margin-bottom: 16px;
}

.m2cf-count {
  font-size: 0.85rem;
  color: var(--m2-text-muted);
}

.m2cf-sort {
  background: var(--m2-dark-bg);
  border: 1px solid var(--m2-control-border);
  border-radius: 8px;
  color: var(--m2-control-text);
  padding: 6px 12px;
  font-size: 0.82rem;
}

/* ── Product grid ── */
.m2cf-grid {
  display: grid;
  grid-template-columns: repeat(var(--m2cf-cols, 4), 1fr);
  gap: 16px;
  transition: opacity 0.3s ease;
}

.m2cf-grid.is-fading {
  opacity: 0;
}

@media screen and (max-width: 999px) { .m2cf-grid { --m2cf-cols: 3 !important; } }
@media screen and (max-width: 640px) { .m2cf-grid { --m2cf-cols: 2 !important; } }

/* ── Product cards (same as carousel lpc__card) ── */
/* ── Framed product card (collection-page redesign) ──
   Border + 16px radius, image area on top with contained product
   render, hover lift + cyan border glow + cross-fade to an alternate
   pooled render. Info block carries title + optional tagline + optional
   swatch row / finish count. All of the optional pieces gracefully
   degrade — a product with no tagline / no flag / no swatches renders
   as a clean image + title + price card. */
.m2cf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--m2-border);
  border-radius: 16px;
  background: var(--m2-card-bg);
  overflow: hidden;
  text-decoration: none;
  color: var(--m2-text-on-card);
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.m2cf-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--m2-primary) 55%, transparent);
  box-shadow:
    0 22px 48px -22px rgba(0,0,0,.6),
    0 0 0 1px color-mix(in srgb, var(--m2-primary) 25%, transparent);
}
/* Dark-mode hover border brighten — needs same `:root:not` prefix as
   the resting trust-bar accent at ~17927 to outrank its `!important`
   border-color. */
:root:not([data-theme="light"]) .m2cf-card:hover {
  border-color: color-mix(in srgb, var(--m2-primary) 55%, transparent) !important;
}

.m2cf-card__img {
  position: relative;
  aspect-ratio: 5 / 4;
  /* `overflow: visible` so anything inside (e.g. the prior ground
     shadow ::before) can bleed past — kept after the ::before
     itself was removed because the product photos are absolutely
     positioned to `inset: 0` and self-contained. The card outer
     (.m2cf-card) still has `overflow: hidden` for the rounded
     corners.

     `background: transparent` so the card's underlying chrome
     (incl. the dark-mode cyan radial-wash accent) shows through
     under the image area as well as under the info area. The prior
     `var(--secondary-background)` painted an opaque box that
     terminated mid-card and produced a visible horizontal seam
     where the image area ended and the info area began. */
  overflow: visible;
  background: transparent;
}
/* JPG-stage products still need an opaque white backdrop so the
   product photo (which assumes a white canvas) renders correctly. */
.m2cf-card__img.is-jpg { background: #fff; }

.m2cf-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
  z-index: 1; /* sit above the ::before ground shadow */
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}

/* Ground-shadow `::before` removed — same call as on series tiles.
   The oval pool was rendering as a visible cyan band cutting across
   the device on narrower / shorter cards. JS still computes
   --m2-shadow-y harmlessly (the scan results are cached and the var
   just sits unused). */
.m2cf-card:hover .m2cf-card__photo { transform: scale(1.15); }
/* Alt-image cross-fade removed — hover is now just a scale on the
   existing image. The `.m2cf-card__photo--alt` rules used to live
   here. */

/* Flag chip — top-left. Uses cyan-tinted background with the standard
   text-on-card color so it reads as an accent without dominating. */
.m2cf-card__flag {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--m2-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--m2-primary) 40%, transparent);
  color: var(--m2-text-on-card);
}

.m2cf-card__info {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  text-align: center;
  align-items: stretch;
  justify-content: flex-start;
}
/* Meta row above the title — manufacturer on the LEFT, year on the
   RIGHT, both in the same small mono cyan eyebrow style. Empty when
   neither field is set (gated in renderGrid). When only one of the
   two is present the row still renders justified (the empty span
   takes zero width). */
.m2cf-card__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  text-align: left;
}
.m2cf-card__mfr,
.m2cf-card__year {
  font-family: var(--font-mono) !important;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m2-primary) !important;
}
.m2cf-card__mfr  { text-align: left; }
.m2cf-card__year { text-align: right; }

.m2cf-card__title {
  display: block;
  font-family: var(--font-heading, inherit);
  font-weight: 600;
  /* Slightly smaller than before (was 1.05rem) so longer device
     names wrap less often inside the fixed card width. */
  font-size: .95rem;
  line-height: 1.2;
  color: var(--heading-color);
  text-align: center;
}
.m2cf-card__tagline {
  /* Hidden globally — the tagline added visual noise on the carousel
     tiles and didn't carry enough value to keep. Leaving the rule
     so any per-section override can re-show it if needed. */
  display: none !important;
}
.m2cf-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.m2cf-card__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m2cf-card__sw {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--m2-border);
  /* `cover` shows the swatch crisp-edge across the chip. The prior
     `160%` zoomed past the visible area and often landed on a uniform
     center (brushed-metal previews especially) — which made the
     swatches read as B&W even when their full image was colored. */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.m2cf-card__sw:hover {
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 0 0 2px var(--m2-primary);
}
.m2cf-card__sw-more {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--m2-text-faint);
  margin-left: 2px;
}
.m2cf-card__fincount {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m2-text-faint);
  white-space: nowrap;
}

.m2cf-card__price {
  /* Legacy class (old card markup used it). Hidden globally below;
     kept declared here for documentation. */
  display: none;
}

.m2cf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--m2-gray);
  font-size: 0.9rem;
}

/* ── Pagination ── */
.m2cf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 0;
}

.m2cf-pagination button {
  background: var(--m2-grad-btn);
  border: none;
  border-radius: 6px;
  color: var(--m2-nav-text);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: box-shadow 0.2s, opacity 0.2s;
  opacity: 0.6;
  overflow: hidden;
  position: relative;
}

.m2cf-pagination button.is-active {
  opacity: 1;
  box-shadow: var(--m2-shadow-glow);
}

.m2cf-pagination button:hover {
  opacity: 1;
  box-shadow: var(--m2-shadow-btn);
}

/* ── #1-2 Collapsible description ── */
.m2cf-desc-wrap {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.m2cf-desc-wrap.is-collapsed {
  max-height: 50px;
}

.m2cf-desc-wrap:not(.is-collapsed) {
  max-height: 2000px;
}

.m2cf-desc-inner {
  color: var(--m2-gray);
  font-size: 0.92rem;
  line-height: 1.6;
}

.m2cf-desc-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(transparent, var(--background));
  pointer-events: none;
  transition: opacity 0.3s;
}

.m2cf-desc-wrap:not(.is-collapsed) .m2cf-desc-fade {
  opacity: 0;
}

.m2cf-desc-toggle {
  background: none;
  border: none;
  color: var(--m2-highlight);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 6px 0;
  text-decoration: underline;
}

/* ── #3 Custom outline checkboxes ── */
.m2cf-checkbox-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--m2-control-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.m2cf-checkbox-item input[type="checkbox"]:checked {
  border-color: var(--m2-highlight);
  background: var(--m2-highlight);
}

.m2cf-checkbox-item label:has(input:checked) {
  color: var(--m2-highlight);
}

.m2cf-checkbox-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── #5 Filter headings light, options gray ── */
.m2cf-filter-toggle {
  color: var(--m2-nav-text);
}

.m2cf-checkbox-item label {
  color: var(--m2-gray);
}

/* ── #6 Price badge on image ── */
.m2cf-card__badge,
.lpc__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--m2-badge-bg);
  color: var(--m2-badge-text);
  font-weight: 700;
  font-size: 0.65rem;
  padding: 4px 10px;
  border-radius: 10px;
  z-index: 2;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Ensure "FROM" prefix on all price badges */
.m2cf-card__badge::before,
.lpc__badge::before {
  content: "From ";
  font-weight: 400;
}

.m2cf-card__img,
.lpc__img {
  position: relative;
}

/* Remove old price from card info */
.m2cf-card__price,
.lpc__price {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   STANDARDIZED COMPONENT CLASSES (consolidated from inline liquid styles)
   ══════════════════════════════════════════════════════════════════════════ */

/* Gallery disclaimer text */
.pf-gallery-disclaimer {
  margin: 10px 16px 4px;
  font-size: .78rem;
  color: var(--m2-text-muted);
  line-height: 1.4;
  text-align: center;
}

/* Vinyl link note (on product pages) */
.pf-vinyl-link-note {
  margin: 0;
  font-size: .82rem;
  color: var(--m2-text-muted);
  text-align: center;
}

.pf-vinyl-footer {
  margin-top: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pf-vinyl-footer .product-form__option-name {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   VINYL STRIP — horizontal swatch bar above gallery
   REVERT: delete this block + remove render call in product-gallery.liquid +
   flip vinyl_strip_enabled in product-variant-selector.liquid
   ════════════════════════════════════════════════════════════════════════════ */

.pf-vinyl-strip-wrap {
  padding: 12px 18px 4px;
  border-bottom: 1px solid var(--m2-border);
}

/* Tighten space between vinyl strip and gallery image */
.pf-vinyl-strip-wrap + .card__section--tight {
  padding-top: 8px !important;
}

.pf-vinyl-strip__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pf-vinyl-strip__label {
  margin: 0;
}

.pf-vinyl-strip__current {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m2-text-muted);
}

.pf-vinyl-strip__current-label {
  color: var(--m2-text-muted);
}

.pf-vinyl-strip__current .product-form__selected-value {
  color: var(--heading-color);
  font-weight: 600;
  margin-left: 4px;
}

.pf-vinyl-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-vinyl-strip__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--m2-border);
  border-radius: 50%;
  color: var(--text-color);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s, color 0.2s;
  padding: 0;
}

.pf-vinyl-strip__arrow:hover {
  opacity: 1;
  border-color: var(--m2-primary);
  color: var(--m2-primary);
}

.pf-vinyl-strip__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.pf-vinyl-strip__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 8px 20px 8px 0;
  cursor: grab;
  mask-image: linear-gradient(to right, black, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 20px), transparent);
}

.pf-vinyl-strip__track.at-end {
  mask-image: none;
  -webkit-mask-image: none;
}

.pf-vinyl-strip__track::-webkit-scrollbar { display: none; }

/* Sticky group labels that stay visible while scrolling */
.pf-vinyl-strip__group-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m2-text-muted);
  padding: 0 14px 0 8px;
  align-self: center;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--secondary-background);
  height: 84px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--m2-border);
  margin-right: 8px;
  /* Soft shadow suggests scrolling content is hidden behind */
  box-shadow: 12px 0 12px -8px var(--secondary-background);
}

.pf-vinyl-strip__group-label--advanced {
  color: var(--m2-primary);
}

.pf-vinyl-strip__divider {
  flex-shrink: 0;
  width: 12px;
  align-self: stretch;
}

/* Swatch sizing within strip — rounded rectangles, larger with zoomed texture */
.pf-vinyl-strip__track .pf-swatch-wrap {
  flex: 0 0 auto;
  margin: 0;
  width: 68px;
}

.pf-vinyl-strip__track .color-swatch {
  margin: 0;
  width: 68px;
  height: 76px;
  display: block;
}

.pf-vinyl-strip__track .color-swatch__item {
  width: 68px !important;
  height: 76px !important;
  border-radius: 8px !important;
  display: block;
  background-size: 140% !important; /* zoom in on texture */
  background-position: center !important;
  background-color: var(--m2-surface, #2a2a2a); /* last-resort fallback so swatch is never invisible */
}

.pf-vinyl-strip__track .color-swatch__radio:checked + .color-swatch__item::after,
.pf-vinyl-strip__track .color-swatch__item.is-selected::after {
  border-radius: 10px;
}

/* Portal tooltips: when appended to document.body, use fixed positioning */
.pf-swatch-tooltip--portal {
  position: fixed !important;
  top: auto;
  bottom: auto !important;
  left: auto;
  transform: none !important;
  z-index: 99999 !important;
  pointer-events: none;
  display: block !important;
}

/* Allow tooltips to overflow the strip */
.pf-vinyl-strip,
.pf-vinyl-strip__track,
.pf-vinyl-strip-wrap {
  overflow-x: visible;
}

.pf-vinyl-strip__track {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.pf-vinyl-strip-wrap .pf-vinyl-link-note {
  margin-top: 8px;
  font-size: 0.72rem;
  text-align: center;
}

/* Mobile tightening */
@media screen and (max-width: 640px) {
  .pf-vinyl-strip-wrap {
    padding: 12px 12px 8px;
  }
  .pf-vinyl-strip__track .pf-swatch-wrap { width: 56px; }
  .pf-vinyl-strip__track .color-swatch {
    width: 56px;
    height: 64px;
  }
  .pf-vinyl-strip__track .color-swatch__item {
    width: 56px !important;
    height: 64px !important;
  }
  .pf-vinyl-strip__group-label {
    height: 72px;
    font-size: 0.6rem;
    padding: 0 12px 0 4px;
  }
  .pf-vinyl-strip__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.pf-vinyl-link-note a {
  font-weight: 600;
  text-decoration: underline;
  color: var(--m2-highlight);
}

/* Kit card (card-selector) — uses standard card tokens */
#kit-cards {
  display: flex;
  gap: 16px;
}

.kit-card {
  cursor: pointer;
  border: 2px solid var(--m2-gray);
  padding: 12px;
  flex: 1;
  border-radius: 10px;
  background: var(--m2-card-bg);
  color: var(--text-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kit-card img {
  width: 100%;
  border-radius: 6px;
}

.kit-card:hover {
  border-color: var(--m2-highlight);
}

.kit-card.selected {
  border-color: var(--m2-highlight) !important;
  box-shadow: var(--m2-shadow-glow);
}

/* Install support callout in liquid blocks — use standard callout theme */
.card__section [style*="border-radius:10px"] {
  background: var(--m2-grad-callout) !important;
  border: 1px solid var(--m2-border) !important;
  color: var(--m2-callout-text) !important;
}

.card__section [style*="border-radius:10px"] a {
  color: var(--m2-callout-text) !important;
}

/* Breadcrumb — last item matches heading, arrows use text-muted */
.breadcrumb__item:last-child {
  color: var(--heading-color) !important;
  font-weight: 500;
}

/* Product page titles — always visible in both modes */
.product-meta__title {
  color: var(--heading-color) !important;
}

/* Force product title dark in light mode — bypass variable cascade */
[data-theme="light"] .product-meta__title,
[data-theme="light"] .product-meta__title a,
[data-theme="light"] h1.product-meta__title {
  color: #1a1a1a !important;
}

.card__header .heading,
.card__header .card__title {
  color: var(--heading-color) !important;
}

/* Breadcrumb — prevent truncation, allow wrapping */
.breadcrumb__list {
  flex-wrap: wrap;
}

.breadcrumb__item {
  white-space: normal;
  word-break: break-word;
}


/* ══════════════════════════════════════════════════════════════════════════
   BANNER CAROUSEL — transparent images + updated text
   ══════════════════════════════════════════════════════════════════════════ */

/* Banner images at full opacity */
.slideshow__slide .slideshow__image,
.slideshow__slide img {
  opacity: 1;
}

/* Banner title — bold, thick, modern, large */
.slideshow__title {
  font-family: var(--font-sans) !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Banner body text — standard H1 styling */
.slideshow__content {
  font-family: var(--font-sans) !important;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* Banner behind header — pull slideshow up under the nav */
[data-section-type="slideshow"] {
  margin-top: calc(-1 * var(--header-height, 80px));
  position: relative;
  z-index: 0;
}

[data-section-type="slideshow"] .slideshow {
  padding-top: var(--header-height, 80px);
}

/* Edge fades — thin gradients at top/bottom only */
.slideshow__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #050505 0%, transparent 8%),
    linear-gradient(to top, #050505 0%, transparent 8%);
}

.slideshow__content-wrapper {
  z-index: 2 !important;
}

[data-theme="light"] .slideshow__slide::after {
  background:
    linear-gradient(to bottom, #050505 0%, transparent 8%),
    linear-gradient(to top, #f5f5f5 0%, transparent 8%);
}

/* Light mode — keep white text on banner */
[data-theme="light"] .slideshow__title {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

[data-theme="light"] .slideshow__content {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

[data-theme="light"] .slideshow__slide-inner {
  color: #ffffff !important;
}

/* Gallery image fade transitions */
.product-gallery__carousel-item img {
  transition: opacity 0.8s ease;
}

.product-gallery__thumbnail img {
  transition: opacity 0.3s ease;
}

/* Fade transition when gallery slides are filtered by swatch selection */
.product-gallery__carousel-item {
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.product-gallery__carousel-item.is-filtered {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Mobile gallery thumbnails — contained within card */
@media screen and (max-width: 640px) {
  .product-gallery__thumbnail-list {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .product-gallery__carousel-item {
    padding: 0 12px !important;
  }
}

/* Non-skin product template — hide gallery, show description full-width */
/* Non-skin products: gallery hidden, description moves to gallery area via JS */
.template-suffix-non-skin-products .product-gallery,
.template-suffix-non-skin-products .m2-gallery {
  display: none !important;
}

.template-suffix-non-skin-products .product-block-list__item--gallery {
  display: block !important;
}

/* Hide description everywhere on non-skin products by default */
.template-suffix-non-skin-products .product-block-list__item--description {
  display: none !important;
}

/* Show it only when inside the gallery container (after JS moves it) */
.template-suffix-non-skin-products .product-block-list__item--gallery > .product-block-list__item--description {
  display: block !important;
}

/* Sticky gallery handled in base layout block above */

/* ══════════════════════════════════════════════════════════════════════════
   YOUR KIT CARD — redesigned two-column layout
   ══════════════════════════════════════════════════════════════════════════ */

.pf-cart-box__columns {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.pf-cart-box__col-vinyl {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  padding-right: 20px;
}

.pf-cart-box__col-contents {
  flex: 1 1 auto;
  border-left: 1px solid var(--m2-border);
  border-right: 1px solid var(--m2-border);
  padding-left: 20px;
  padding-right: 20px;
}

.pf-cart-box__col-heading {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m2-callout-text);
  opacity: 0.6;
  margin-bottom: 8px;
  display: block;
}

.pf-cart-box__swatch-preview {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background-size: 175%;
  background-position: center;
  background-color: rgba(255,255,255,0.1);
  margin-bottom: 6px;
  overflow: hidden;
}

.pf-cart-box__swatch-name {
  font-family: var(--font-sans) !important;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--m2-callout-text);
  text-align: center;
  max-width: 100px;
  line-height: 1.2;
}

.pf-cart-box__cutout-label {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

.pf-cart-box__kit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pf-cart-box__kit-list li {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem;
  padding: 3px 0;
  color: var(--m2-callout-text) !important;
  position: relative;
  padding-left: 16px;
}

.pf-cart-box__kit-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--m2-callout-text);
  opacity: 0.5;
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  .pf-cart-box__columns {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pf-cart-box__col-vinyl {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
    min-width: auto;
    padding-right: 0;
  }

  .pf-cart-box__col-contents {
    border: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    margin-top: 8px;
    align-items: center;
  }

  .pf-cart-box__col-cutout {
    border: none;
    padding-top: 8px;
    margin-top: 8px;
    align-items: center;
  }

  .pf-cart-box__col-heading {
    text-align: center;
  }

  .pf-cart-box__swatch-preview {
    width: 48px;
    height: 48px;
  }

  .pf-cart-box__kit-list {
    text-align: center;
  }
}

/* Cutout style column in Your Kit card */
.pf-cart-box__col-cutout {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  text-align: center;
  padding-left: 20px;
}

.pf-cart-box__cutout-value {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--m2-callout-text);
  margin-top: 4px;
}

/* Gallery releases sticky when .product-block-list__item--info ends */
.product-block-list__item--gallery.is-released {
  position: relative !important;
}

/* Compatibility check section on product page */
.pf-compat-note {
  font-size: 0.88rem;
  color: var(--m2-text-muted);
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* compat button uses standard .pf-logo-btn class */

/* Light mode — footer email input */
[data-theme="light"] .footer input[type="email"],
[data-theme="light"] .footer .input {
  background: #ffffff !important;
  color: #2a2a2a !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* Price right-aligned in product info — sale price left of compare price, both on one line */
.product-form__info-content .price-list {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.product-form__info-content .price--highlight {
  margin-right: 0;
}

.product-form__info-content .price--compare {
  color: var(--m2-text-muted);
  opacity: 0.8;
  font-weight: 500;
}

/* Product gallery images — white background for JPGs */
.product-gallery__carousel-item,
.product-gallery__size-limiter,
.product-gallery__image {
  background: #ffffff !important;
}

.product-gallery__thumbnail img {
  background: #ffffff;
}

/* When gallery has PNG images — transparent background */
.product-gallery.has-png-images {
  background: transparent;
}

.product-gallery.has-png-images .product-gallery__carousel-item,
.product-gallery.has-png-images .product-gallery__size-limiter,
.product-gallery.has-png-images .product-gallery__image {
  background: transparent !important;
}

.product-gallery.has-png-images .product-gallery__thumbnail img {
  background: transparent;
}

/* Gallery reflection — removed, revisit with custom gallery */

/* Center vinyl/color selection text */
.product-form__option-name,
.product-form__selected-value {
  text-align: center;
}

/* When cutout column is absent, remove right border from contents column */
.pf-cart-box__col-contents:last-child {
  border-right: none;
  padding-right: 0;
}

/* Mobile: remove vertical rules, stack columns */
@media screen and (max-width: 640px) {
  .pf-cart-box__col-contents {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--m2-border);
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
    margin-top: 12px;
  }
}

/* ==========================================================================
   SEO CONTENT — Bento Mosaic Grid
   ========================================================================== */

.seo-bento {
  padding: 0 0 80px;
}

.seo-bento .container {
  max-width: 1200px;
}

/* ── Prose blocks — no card bg ── */
.seo-bento__prose {
  padding: 8px 4px 24px;
}

.seo-bento__prose p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--m2-text-muted);
  margin: 0 0 12px;
}

.seo-bento__prose p:last-of-type { margin-bottom: 0; }

/* ── Headings ── */
.seo-bento__heading {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading-color);
  margin: 0 0 20px;
  line-height: 1.25;
}

.seo-bento__subheading {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* ── Wireframe icons in headings ── */
.seo-bento__icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Base card ── */
.seo-bento__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.seo-bento__card:hover {
  border-color: rgba(0, 200, 232, 0.2);
}

.seo-bento__card p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--m2-text-muted);
  margin: 0 0 12px;
}

.seo-bento__card p:last-child,
.seo-bento__card p:last-of-type { margin-bottom: 0; }

/* ── Shimmer effect (slow sweep) ── */
@keyframes seo-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

/* Same shimmer treatment reused on sub-category tiles
   ([snippets/collection-tile.liquid]). The `position: relative` rule
   is duplicated here from the snippet's inline <style> so both pieces
   ship in the same file — the absolute pseudo needs a positioned
   ancestor to anchor `inset: 0` against, otherwise the gradient
   stretches to whatever ancestor IS positioned (often the section or
   body, making the shimmer appear page-wide). `!important` defends
   against any future rule shadowing this. */
.c-tile {
  position: relative !important;
}
/* `.c-tile::after` shimmer removed — neither the shimmer nor the
   ground glow on series tiles was working cleanly, so both were
   stripped per request. Kept the `.seo-bento__shimmer::after` rule
   intact below since it's a separate component. */
.seo-bento__shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0, 200, 232, 0.06) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(0, 200, 232, 0.06) 55%,
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.seo-bento__shimmer:hover::after {
  opacity: 1;
  animation: seo-shimmer 2s ease-out;
}

/* ── Category grid: 2 cols left + 1 tall CTA right ── */
.seo-bento__grid--categories {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
  margin-bottom: 32px;
}

.seo-bento__grid--categories .seo-bento__prose {
  grid-column: 1 / -1;
}

/* CTA tall tile — right column, spans 2 rows */
.seo-bento__card--cta-tall {
  grid-column: 3;
  grid-row: span 2;
  background: linear-gradient(135deg, rgba(0, 200, 232, 0.08) 0%, rgba(0, 200, 232, 0.03) 100%);
  border-color: rgba(0, 200, 232, 0.15);
  display: flex;
  flex-direction: column;
}

.seo-bento__card--cta-tall p { flex: 1; }

/* ── Category tiles ── */
.seo-bento__card--tile {
  padding: 22px 24px 20px;
  position: relative;
  overflow: hidden;
}

/* ── Tile with background image ── */
.seo-bento__tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: inherit;
}

.seo-bento__tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  transition: background 0.3s;
  background: rgba(0,0,0,0.45);
}

[data-theme="light"] .seo-bento__tile-overlay {
  background: rgba(0,0,0,0.10);
}

.seo-bento__card--tile:hover .seo-bento__tile-overlay {
  background: rgba(0,0,0,0.35);
}

[data-theme="light"] .seo-bento__card--tile:hover .seo-bento__tile-overlay {
  background: rgba(0,0,0,0.05);
}

.seo-bento__card--has-bg {
  border-color: transparent;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.25);
}

[data-theme="light"] .seo-bento__card--has-bg {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.3);
}

[data-theme="light"] .seo-bento__card--has-bg .seo-bento__tile-heading {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.4);
}

[data-theme="light"] .seo-bento__card--has-bg p {
  color: #ffffff;
}

.seo-bento__card--has-bg .seo-bento__tile-heading,
.seo-bento__card--has-bg .seo-bento__link {
  color: #ffffff !important;
}

.seo-bento__card--has-bg p {
  color: #ffffff !important;
  opacity: 0.92;
}

.seo-bento__card--has-bg .seo-bento__icon {
  stroke: #ffffff !important;
}

/* Text + icons above image and overlay */
.seo-bento__card--has-bg .seo-bento__tile-heading,
.seo-bento__card--has-bg > p,
.seo-bento__card--has-bg > .seo-bento__link {
  position: relative;
  z-index: 2;
}

.seo-bento__tile-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m2-primary);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
}

.seo-bento__card--tile p {
  font-size: 0.82rem;
  line-height: 1.65;
}

.seo-bento__link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m2-primary);
  text-decoration: none;
  margin-top: 12px;
  transition: opacity 0.2s;
}

.seo-bento__link:hover { opacity: 0.7; }

/* ── Features grid: 3 cols with center tall card ── */
.seo-bento__grid--features {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

/* ── Section heading (no card) ── */
.seo-bento__section-heading {
  grid-column: 1 / -1;
  padding: 12px 4px 0;
}

.seo-bento__section-heading .seo-bento__subheading {
  margin: 0;
  font-size: 1.25rem;
}

/* ── Feature cards ── */
.seo-bento__card--feature {
  padding: 22px 24px 20px;
  border-left: 2px solid var(--m2-primary);
}

/* Premium materials — center, spans 2 rows */
.seo-bento__card--feature-tall {
  grid-column: 2;
  grid-row: span 2;
}

.seo-bento__feature-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m2-primary);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.seo-bento__card--feature p {
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 12px;
}

.seo-bento__card--feature p:last-of-type { margin-bottom: 0; }

/* ── Brand logos in Premium Materials tile ── */
.seo-bento__brand-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.seo-bento__brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.seo-bento__brand-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.seo-bento__brand-desc {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--m2-text-faint);
}

.seo-bento__brand-frame {
  width: 48px;
  height: 48px;
  border: 1px solid var(--m2-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.seo-bento__brand-frame img {
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.seo-bento__brand-frame span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--m2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seo-bento__brand-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--m2-text-muted);
}

/* ── Horizontal rule divider ── */
.seo-bento__divider {
  border: none;
  border-top: 1px solid var(--m2-border);
  margin: 16px 0 32px;
}

/* ── Button ── */
.seo-bento__btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 28px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m2-primary-fg);
  background: var(--m2-primary);
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.seo-bento__btn:hover { opacity: 0.85; }

/* ── Responsive ── */
@media screen and (max-width: 999px) {
  .seo-bento__grid--categories {
    grid-template-columns: 1fr 1fr;
  }

  .seo-bento__card--cta-tall {
    grid-column: auto;
    grid-row: auto;
  }

  .seo-bento__grid--features {
    grid-template-columns: 1fr 1fr;
  }

  .seo-bento__card--feature-tall {
    grid-column: auto;
    grid-row: auto;
  }

}

@media screen and (max-width: 640px) {
  .seo-bento {
    padding: 40px 0 60px;
  }

  .seo-bento__grid--categories,
  .seo-bento__grid--features {
    grid-template-columns: 1fr;
  }

  /* Push "Don't see what you're looking for" to end on mobile */
  .seo-bento__card--cta-tall {
    order: 99;
  }

  .seo-bento__heading {
    font-size: 1.3rem;
  }

  .seo-bento__card {
    padding: 22px 20px 18px;
  }

  .seo-bento__prose {
    padding: 4px 0 20px;
  }

  .seo-bento__brand-list {
    gap: 12px;
  }
}

/* ── Light mode ── */
[data-theme="light"] .seo-bento__card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .seo-bento__card:hover {
  border-color: rgba(0, 153, 179, 0.25);
}

[data-theme="light"] .seo-bento__card--cta-tall {
  background: linear-gradient(135deg, rgba(0, 153, 179, 0.06) 0%, rgba(0, 153, 179, 0.02) 100%);
  border-color: rgba(0, 153, 179, 0.12);
}

[data-theme="light"] .seo-bento__card--feature {
  border-left-color: var(--m2-primary);
}

[data-theme="light"] .seo-bento__brand-frame {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .seo-bento__brand-frame img {
  filter: none;
  opacity: 0.8;
}

[data-theme="light"] .seo-bento__shimmer::after {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0, 153, 179, 0.05) 45%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(0, 153, 179, 0.05) 55%,
    transparent 60%
  );
}

[data-theme="light"] .seo-bento__divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* ── Install help center email button — dark mode fix ── */
.closing a[href^="mailto:"] {
  background: var(--m2-primary) !important;
  color: var(--m2-primary-fg) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em !important;
}

/* ── "More payment options" — Shopify auto-generated link ── */
.shopify-payment-button__more-options {
  color: var(--text-color) !important;
  text-decoration: underline;
}

[data-theme="light"] .shopify-payment-button__more-options {
  color: #1a1a1a !important;
}

/* ==========================================================================
   M2 CUSTOM GALLERY
   ========================================================================== */

.m2-gallery {
  position: relative;
  margin-bottom: 12px;
}

/* --- Stage: main image + reflection --- */
.m2-gallery__stage {
  position: relative;
  margin-bottom: 0; /* tight — reflection bleeds behind thumbstrip */
}

.m2-gallery__main {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--secondary-background);
  aspect-ratio: 1 / 1;
  cursor: crosshair;
}

.m2-gallery__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* No transition here — the image + reflection handle their own fade-in
     together so compound opacity doesn't desync them */
}

.m2-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.m2-gallery__slide.is-filtered {
  display: none !important;
}

.m2-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.m2-gallery__image.is-loaded {
  opacity: 1;
}

.m2-gallery__model,
.m2-gallery__video {
  width: 100%;
  height: 100%;
}

.m2-gallery__video .video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.m2-gallery__video .video-wrapper iframe,
.m2-gallery__video .video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Reflection canvas ---
   Reflection disabled globally — the centered drop-shadow on
   .m2-gallery__image is the new grounding effect. The canvas element
   still renders (JS draws into it) but stays display:none so it doesn't
   contribute layout or visual weight. */
.m2-gallery__reflection {
  display: none !important;
}

/* --- Zoom lens & window --- */
.m2-gallery__zoom-lens {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid var(--m2-primary);
  border-radius: 4px;
  background: rgba(0, 200, 232, 0.08);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.15s ease;
}

.m2-gallery__zoom-window {
  position: absolute;
  top: 0;
  left: calc(100% + 16px);
  width: 400px;
  height: 400px;
  border: 1px solid var(--m2-border);
  border-radius: 6px;
  background-color: #ffffff; /* white for JPGs */
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 100;
  box-shadow: var(--m2-shadow-elevated);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* --- Thumbnail strip --- */
.m2-gallery__thumbstrip {
  position: relative;
  z-index: 2; /* above reflection */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.m2-gallery__thumbstrip-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--m2-border);
  border-radius: 50%;
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
  opacity: 0.6;
}

.m2-gallery__thumbstrip-arrow:hover {
  border-color: var(--m2-primary);
  color: var(--m2-primary);
  opacity: 1;
}

.m2-gallery__thumbstrip-arrow:disabled,
.m2-gallery__thumbstrip-arrow.is-hidden {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
/* Hidden arrows should also collapse their 28px flex column so the
   track can use the full row width. Without this the arrow box still
   claims layout space even when invisible, leaving an empty "cutoff"
   on the side of the thumbstrip. */
.m2-gallery__thumbstrip-arrow.is-hidden {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

.m2-gallery__thumbstrip-track {
  display: flex;
  gap: 8px;
  /* Center thumbnails under the gallery image when they don't overflow.
     Once the row grows past the track width, scroll wins and justify-
     content has no visual effect (consistent with native flex behaviour). */
  justify-content: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 4px 0;
  flex: 1;
  cursor: grab;
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

/* Remove fade on the side that's fully scrolled */
.m2-gallery__thumbstrip-track.at-start {
  mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
}

.m2-gallery__thumbstrip-track.at-end {
  mask-image: linear-gradient(to right, transparent, black 24px, black);
  -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black);
}

.m2-gallery__thumbstrip-track.at-start.at-end {
  mask-image: none;
  -webkit-mask-image: none;
}

.m2-gallery__thumbstrip-track::-webkit-scrollbar {
  display: none;
}

.m2-gallery__thumb {
  flex-shrink: 0;
  /* 50% larger than the prior 64px so thumbnails read at a glance and
     have room for the device + cutout details inside. */
  width: 96px;
  height: 96px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.m2-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
  pointer-events: none;
}

.m2-gallery__thumb.is-active {
  border-color: var(--m2-primary);
  box-shadow: 0 0 8px rgba(0, 200, 232, 0.3);
}

.m2-gallery__thumb:not(.is-active):hover {
  border-color: transparent;
}

.m2-gallery__thumb.is-filtered {
  display: none !important;
}

.m2-gallery__thumb-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  z-index: 1;
}

/* --- JPG: white sub-card encompassing image + thumbnails --- */
.m2-gallery.is-jpg {
  background: #ffffff;
  border-radius: 10px;
  padding: 12px;
}

.m2-gallery.is-jpg .m2-gallery__main {
  background: #ffffff;
}

.m2-gallery.is-jpg .m2-gallery__thumb {
  background: #ffffff;
}

.m2-gallery.is-jpg .m2-gallery__thumbstrip-arrow {
  color: #333;
  border-color: rgba(0,0,0,0.12);
}

.m2-gallery.is-jpg .m2-gallery__thumbstrip-arrow:hover {
  color: var(--m2-primary);
  border-color: var(--m2-primary);
}

/* --- PNG/WebP: dark zoom window background --- */
.m2-gallery.has-png-images .m2-gallery__zoom-window {
  background-color: var(--secondary-background);
}

/* --- Responsive --- */
@media screen and (max-width: 999px) {
  .m2-gallery {
    margin-bottom: 0;
  }

  .m2-gallery__stage {
    margin-bottom: 4px;
  }

  /* Force gallery and info to stack with clear separation */
  .product-block-list__wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  .product-block-list__item--gallery {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .product-block-list__item--info {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Fix product title bleeding above card on mobile */
  .product-meta {
    margin-top: 6px !important;
  }
}

@media screen and (max-width: 640px) {
  .m2-gallery__main {
    border-radius: 0;
  }

  /* Reflection stays enabled on mobile — it's what makes the device look
     "sit" on a surface rather than float in whitespace. Only zoom is
     disabled on touch devices (no hover). */
  .m2-gallery__zoom-lens,
  .m2-gallery__zoom-window {
    display: none !important;
  }

  .m2-gallery__thumb {
    /* 50% larger than the prior 52px mobile size to match the desktop
       upsize. */
    width: 78px;
    height: 78px;
  }
}

@media screen and (min-width: 641px) {
  .m2-gallery__thumb {
    /* 50% larger than the prior 72px desktop size. Was previously
       overriding the base 96px declaration — now sized consistently. */
    width: 108px;
    height: 108px;
  }
}

@media screen and (min-width: 1000px) {
  .m2-gallery__zoom-window {
    width: 450px;
    height: 450px;
  }
}

/* --- Light mode overrides --- */
[data-theme="light"] .m2-gallery.is-jpg .m2-gallery__main {
  background: #ffffff;
}

[data-theme="light"] .m2-gallery.is-jpg .m2-gallery__thumb {
  background: #ffffff;
}

[data-theme="light"] .m2-gallery__thumb {
  border-color: transparent;
}

[data-theme="light"] .m2-gallery__thumb.is-active {
  border-color: var(--m2-primary);
}

[data-theme="light"] .m2-gallery__thumbstrip-arrow {
  border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .m2-gallery__zoom-window {
  background-color: var(--secondary-background);
  border-color: rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL ELEMENTS (eyebrow + section header + gallery caption + disclaimer)
   ──────────────────────────────────────────────────────────────────────────
   These were originally added inside the desktop-only `@media (min-width:
   1000px)` block at ~15908, so on narrower viewports they silently failed
   and the gallery caption / disclaimer rendered as plain page text. Lifted
   to file scope here so the eyebrow theme applies at every breakpoint and
   wins source-order battles against earlier .pf-gallery-disclaimer
   !important leftovers.
   ══════════════════════════════════════════════════════════════════════════ */

.m2-eyebrow,
.wiz-usp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* `!important` on font-family + color is required because the
     theme's blanket `p, span, … { font-family: var(--font-sans)
     !important }` rule at the top of the file beats unimported class
     selectors. Without these, the gallery caption / disclaimer kept
     rendering as bright-white Inter Tight no matter what scope this
     rule lived in. */
  font-family: var(--font-mono) !important;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m2-text-faint) !important;
  margin: 0 0 16px;
}
.m2-eyebrow::before,
.wiz-usp__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--m2-primary);
}
.m2-eyebrow--no-dash::before { display: none; }
.m2-eyebrow--cased {
  text-transform: none;
  letter-spacing: 0;
}

.m2-secthead { margin: 0 0 28px; }
.m2-secthead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 64ch;
}
.m2-secthead--center .m2-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--m2-primary);
}
.m2-secthead__title {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--heading-color);
}
.m2-secthead__intro {
  margin: 16px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--m2-text-muted);
  max-width: 56ch;
}
.m2-secthead--center .m2-secthead__intro {
  margin-left: auto;
  margin-right: auto;
}

/* Gallery render caption — small chip above the thumbnails. Inherits
   font + faint color from .m2-eyebrow on the same element; the material
   span overrides COLOR only (keeps mono / uppercase / letter-spacing).
   `!important` required to win against the blanket `span { font-family:
   sans !important }` rule at line 12683 — spans inside the caption
   would otherwise revert to sans serif and standard text color. */
.m2-gallery__caption {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-align: center;
  margin: 4px 0 10px;
  padding: 0 12px;
  max-width: 100%;
}
.m2-gallery__caption span {
  font-family: var(--font-mono) !important;
  color: inherit;
  white-space: nowrap;
}
/* If the line truly can't fit on a narrow phone, allow just the
   material span to break — keeps "Studio render" and the kit name
   intact on their own lines rather than wrapping mid-word. */
@media (max-width: 380px) {
  .m2-gallery__caption { white-space: normal; }
  .m2-gallery__caption-sep + .m2-gallery__caption-material { white-space: normal; }
}
/* Mobile: drop the "Studio render" prefix entirely so the caption
   just reads "<material> · <kit>". Also hides the first separator
   that follows the prefix so we don't end up with a leading dot. */
@media (max-width: 640px) {
  .m2-gallery__caption-prefix,
  .m2-gallery__caption-prefix + .m2-gallery__caption-sep { display: none; }
}
.m2-gallery__caption-material {
  color: var(--m2-text-on-card) !important;
}

/* Gallery disclaimer — block (not flex) so the inline <br> creates a
   real line break. Explicit color/font/size declared here too because
   surrounding theme rules were beating the .m2-eyebrow inheritance and
   bleaching the disclaimer back to plain body text. */
.m2-gallery__disclaimer {
  display: block;
  text-align: center;
  margin: 12px 0 4px;
  line-height: 1.5;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--m2-text-faint) !important;
  letter-spacing: 0;
}
.m2-gallery__disclaimer::before { display: none; }

/* Specificity reinforcement — the theme's earlier blanket override
   `[data-theme="light"] p { color: #2a2a2a !important }` at ~12940
   has specificity (0,1,1)+!important and beats `.m2-eyebrow` (0,1,0)
   +!important. These `:root`-prefixed selectors bump to (0,2,0) so
   the eyebrow's faint color actually wins. Same idea for the material
   standard-color span. */
:root .m2-eyebrow,
[data-theme="light"] .m2-eyebrow,
:root .m2-gallery__caption,
[data-theme="light"] .m2-gallery__caption,
:root .m2-gallery__caption span,
[data-theme="light"] .m2-gallery__caption span,
:root .m2-gallery__disclaimer,
[data-theme="light"] .m2-gallery__disclaimer {
  color: var(--m2-text-faint) !important;
}
:root .m2-gallery__caption-material,
[data-theme="light"] .m2-gallery__caption-material {
  color: var(--m2-text-on-card) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — SHARED DESIGN TOKENS + UTILITIES
   ──────────────────────────────────────────────────────────────────────────
   Drives the redesigned home-page sections (device-finder band, latest-skins
   rail, seo-content bento, home-why, home-cta) plus the global chrome
   (announcement bar, header, footer). All selectors are scoped under
   `.m2-home-token` host classes or new section-specific names so nothing
   leaks into existing product / collection / wizard styles.

   Type stack (Google Fonts already loaded via the existing wizard heading
   load — Cabin / Archivo / JetBrains Mono are added here as additional
   stacks; existing Inter Tight remains for body fallback).
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@500;600;700&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Type stacks */
  --m2h-font-display: 'Cabin', 'Inter Tight', sans-serif;
  --m2h-font-body:    'Archivo', 'Inter Tight', sans-serif;
  --m2h-font-mono:    'JetBrains Mono', 'Geist Mono', 'SF Mono', monospace;

  /* Dark palette (default) */
  --m2h-bg:        #050506;
  --m2h-surface:   #0c0c0e;
  --m2h-surface-2: #151518;
  --m2h-line:      rgba(255, 255, 255, 0.09);
  --m2h-line-2:    rgba(255, 255, 255, 0.16);
  --m2h-ink:       #ffffff;
  --m2h-ink-2:     rgba(255, 255, 255, 0.66);
  --m2h-ink-3:     rgba(255, 255, 255, 0.42);
  --m2h-accent:    #00C8E8;
  --m2h-acc-rgb:   0, 200, 232;
  /* Slightly raised fill for inputs / selects. */
  --m2h-field:     rgba(255, 255, 255, 0.03);
}

[data-theme="light"] {
  --m2h-bg:        #eef0f2;
  --m2h-surface:   #ffffff;
  --m2h-surface-2: #f5f6f8;
  --m2h-line:      rgba(0, 0, 0, 0.09);
  --m2h-line-2:    rgba(0, 0, 0, 0.16);
  --m2h-ink:       #11141a;
  --m2h-ink-2:     rgba(17, 20, 26, 0.72);
  --m2h-ink-3:     rgba(17, 20, 26, 0.50);
  --m2h-accent:    #009fc4;
  --m2h-acc-rgb:   0, 159, 196;
  --m2h-field:     rgba(0, 0, 0, 0.02);
}

/* ── Eyebrow — mono, uppercase, with a 22px accent dash before the text */
.m2h-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--m2h-font-mono) !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m2h-ink-3);
  margin: 0;
}
.m2h-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--m2h-accent);
}
/* Centered eyebrow variant — mirror dash on the right side. */
.m2h-eyebrow--center {
  justify-content: center;
}
.m2h-eyebrow--center::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--m2h-accent);
}

/* ── Section headings (H2) */
.m2h-h2 {
  font-family: var(--m2h-font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--m2h-ink);
  margin: 12px 0 0;
}

/* Lede / intro paragraph under the heading */
.m2h-lede {
  margin: 12px 0 0;
  font-family: var(--m2h-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--m2h-ink-2);
  max-width: 56ch;
}

/* ── Buttons (mono uppercase, 10px radius) */
.m2h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  font-family: var(--m2h-font-mono) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.m2h-btn--primary {
  background: var(--m2h-accent);
  color: #04141a;
}
.m2h-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -16px rgba(var(--m2h-acc-rgb), 0.55);
}
.m2h-btn--ghost {
  background: transparent;
  color: var(--m2h-ink);
  border-color: var(--m2h-line-2);
}
.m2h-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--m2h-accent);
  color: var(--m2h-accent);
}

/* ── Card chassis used across the home page */
.m2h-card {
  background: var(--m2h-surface);
  border: 1px solid var(--m2h-line);
  border-radius: 14px;
  padding: 24px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.m2h-card:hover {
  transform: translateY(-3px);
  border-color: var(--m2h-accent);
  box-shadow: 0 18px 40px -22px rgba(var(--m2h-acc-rgb), 0.45);
}

/* ── Material chips (mono pill outlines) */
.m2h-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--m2h-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m2h-ink-2);
  padding: 7px 12px;
  border: 1px solid var(--m2h-line-2);
  border-radius: 999px;
  background: transparent;
}

/* ── Band wrapper used by hero-adjacent bands (device finder, etc.)
   Hairline top/bottom borders + a faint accent radial glow pooled
   from the top center. */
.m2h-band {
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(var(--m2h-acc-rgb), 0.08), transparent 60%),
    var(--m2h-surface);
  border-top: 1px solid var(--m2h-line);
  border-bottom: 1px solid var(--m2h-line);
}