/** Shopify CDN: Minification failed

Line 464:0 Unexpected "}"

**/
*, :before, :after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--border-color));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
    /* Imperial Bathrooms: matches the prototype's .wrap
       (width: min(1180px, 100% - 40px)) - 1220px max-width with 20px
       padding each side (box-sizing:border-box) gives 1180px of content
       at wide viewports and a 20px gutter below that. The prototype
       tightens to 14px at 600px; see the media query below. */
    max-width: 1220px;
    margin: 0 auto !important;
    padding: 0 20px;
    width: 100%;
}

/* styles.css @media(max-width:600px): .wrap { width: min(100% - 28px, 1180px) } */
@media (max-width: 600px) {
  .container {
    padding: 0 14px;
  }
}
html {
  /* styles.css: html { scroll-behavior: smooth } - the prototype's in-page
     anchors (#shop, #sizing-guides, #reviews) scroll rather than jump. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: var(--sticky-area-height);
  interpolate-size: allow-keywords;
  line-height: 1.5;
}

body {
  background: rgb(var(--page-background));
  /* Imperial Bathrooms: prototype body line-height is 1.55 (styles.css `body`).
     Prestige shipped 1.65, which stretched every paragraph block on the site. */
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.55 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
  position: relative;
}

hr {
  border-top-width: 1px;
  justify-self: stretch;
  height: 0;
}

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

b, strong {
  font-weight: bolder;
}

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

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

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

input[type="submit"] {
  cursor: pointer;
}

button, select {
  text-transform: none;
}

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

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

[type="date"] {
  min-height: 3rem;
}

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

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

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

summary {
  list-style-type: none;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ul, ol, menu {
  margin: 0;
  padding: 0;
}

.unstyled-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

textarea {
  resize: vertical;
  field-sizing: content;
  min-height: 4lh;
}

input::placeholder, textarea::placeholder {
  opacity: 1;
  color: rgb(var(--text-color) / .65);
}

:disabled {
  cursor: default !important;
}

img, svg, video, canvas, audio, iframe, embed, object {
  vertical-align: middle;
  display: block;
}

img {
  color: #0000;
  max-width: 100%;
  height: auto;
}

[role="img"] svg {
  display: initial;
}

picture source {
  display: contents;
}

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

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

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0s;
  }
}

height-observer {
  display: block;
}

.color-scheme {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  border-color: rgb(var(--border-color));
}

.color-scheme--with-image-overlay {
  --border-color: var(--text-color) / .6;
}

.color-scheme--with-image-overlay .button--outline {
  --border-color: var(--text-color);
}

.accordion {
  box-sizing: content-box;
  display: block;
}

.accordion {
  border-block-width: 1px;
}

.accordion :is(svg) {
  transition: transform .2s;
}

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

.accordion__toggle {
  justify-content: space-between;
  align-items: center;
  column-gap: .625rem;
  padding-block: 1.25rem;
  display: flex;
}

.accordion__content {
  margin-block-start: -.25rem;
  padding-block-end: 1.25rem;
  padding-inline-end: 1.25rem;
}

@media screen and (min-width: 1000px) {
  .accordion__toggle.text-lg {
    padding-block: 1.5rem;
  }

  .accordion--lg .accordion__toggle {
    padding-block: 2rem;
  }

  .accordion--lg .accordion__content {
    margin-block-start: -.5rem;
  }
}

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

.blog-post-card {
  align-content: start;
  gap: 1.25rem;
  display: grid;
}

.blog-post-card__info {
  justify-items: start;
  row-gap: 1rem;
  display: grid;
}

.blog-post-card__meta {
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;
  display: flex;
}

.blog-post-card__meta > * + :before {
  content: "•";
  margin-inline-end: .5rem;
}

.blog-post-list {
  --blog-post-list-items-per-row: 1;
  --blog-post-list-column-gap: 1.875rem;
  --blog-post-list-row-gap: var(--section-stack-gap);
  --blog-post-list-card-width: calc(100% / var(--blog-post-list-items-per-row)  - var(--blog-post-list-column-gap) * (var(--blog-post-list-items-per-row)  - 1) / var(--blog-post-list-items-per-row));
  grid: auto / repeat(auto-fit, var(--blog-post-list-card-width));
  align-items: start;
  column-gap: var(--blog-post-list-column-gap);
  row-gap: var(--blog-post-list-row-gap);
  display: grid;
}

.featured-blog-post {
  grid-column: 1 / -1;
  display: none;
}

@media screen and (min-width: 700px) {
  .blog-post-list {
    --blog-post-list-items-per-row: 2;
  }
}

@media screen and (max-width: 999px) {
  .blog-post-list--carousel {
    --blog-post-list-card-width: 40vw;
    grid: auto / auto-flow var(--blog-post-list-card-width);
  }
}

@media screen and (max-width: 699px) {
  .blog-post-list--carousel {
    --blog-post-list-card-width: 74vw;
  }
}

@media screen and (min-width: 1000px) {
  .blog-post-list {
    --blog-post-list-items-per-row: 3;
    --blog-post-list-column-gap: 3.75rem;
  }

  .featured-blog-post {
    display: block;
  }

  .featured-blog-post + .blog-post-card {
    display: none;
  }
}

@media screen and (min-width: 1150px) {
  .blog-post-list {
    --blog-post-list-row-gap: 3.75rem;
  }
}

.shopify-challenge__button, .shopify-payment-button__button--unbranded {
  all: revert;
}

.button, .shopify-challenge__button, .shopify-payment-button__button--unbranded {
  --initial-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --hover-gradient: linear-gradient(transparent, transparent);
  --initial-background-position: var(--transform-origin-end);
  --hover-background-position: var(--transform-origin-start);
  -webkit-appearance: none;
  appearance: none;
  text-transform: var(--button-text-transform);
  font: var(--button-font);
  letter-spacing: var(--button-letter-spacing);
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  color: rgb(var(--button-text-color));
  border: 1px solid rgb(var(--button-outline-color, var(--button-background)));
  border-radius: var(--button-border-radius);
  background-color: #0000;
  background-image: var(--initial-gradient), var(--hover-gradient);
  background-size: 101% 101%, 0 101%;
  background-position: var(--initial-background-position);
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  column-gap: 1.125rem;
  padding: .65rem 1.75rem;
  transition: background-size .45s cubic-bezier(.785, .135, .15, .86), background-position .45s step-end, color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86);
  display: inline-flex;
  position: relative;
}

.shopify-payment-button__button--unbranded {
  border: 1px solid rgb(var(--button-outline-color, var(--button-background))) !important;
  border-radius: var(--button-border-radius) !important;
  background-color: #0000 !important;
  transition: background-size .45s cubic-bezier(.785, .135, .15, .86), background-position .45s step-end, color .45s cubic-bezier(.785, .135, .15, .86), border .45s cubic-bezier(.785, .135, .15, .86) !important;
}

.shopify-payment-button__button--unbranded:not(:hover) {
  color: rgb(var(--button-text-color)) !important;
}

.button--outline {
  --initial-gradient: linear-gradient(transparent, transparent);
  --hover-gradient: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
  --initial-background-position: var(--transform-origin-start);
  --hover-background-position: var(--transform-origin-end);
  color: rgb(var(--button-background, var(--text-color)));
  border-color: rgb(var(--button-outline-color, var(--border-color)));
}

.button--subdued.button--outline {
  color: rgb(var(--button-background) / .65);
  border-color: rgb(var(--border-color));
}

.button--sm {
  font-size: var(--text-xs);
  padding: .5rem .75rem;
}

/* @media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .features--button-transition :is(.button, .shopify-challenge__button, .shopify-payment-button__button--unbranded):not([disabled]):hover {
    color: rgb(var(--button-background));
    background-position: var(--hover-background-position);
    border-color: rgb(var(--button-background));
    background-size: 0 101%, 101% 101%;
  } */

  .features--button-transition .shopify-payment-button__button--unbranded:not([disabled]):hover {
    background-color: #0000;
  }

  .features--button-transition .button--outline:not([disabled]):hover {
    color: rgb(var(--button-text-color));
  }
}

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

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

.button-group:has(.link):has(.button) {
  column-gap: 1.5rem;
}

@media screen and (min-width: 700px) {
  .button-group {
    gap: 1.25rem;
  }

  .button-group:has(.link):not(:has(.button)) {
    column-gap: 2rem;
  }

  .button-group--same-width {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    display: grid;
  }
}

.additional-checkout-buttons {
  width: 100%;
}

.shopify-payment-button__button {
  vertical-align: top;
  width: 100%;
  min-height: calc(1lh + 1.3rem + 2px);
}

shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: var(--button-border-radius);
  --shopify-accelerated-checkout-button-box-shadow: none;
}

@keyframes animateIconInline {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }

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

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

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

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

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

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

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

.circle-button {
  --circle-button-size: 2.75rem;
  width: var(--circle-button-size);
  height: var(--circle-button-size);
  background: rgb(var(--circle-button-background));
  color: rgb(var(--circle-button-text-color));
  border-radius: var(--rounded-full);
  box-shadow: 0 .125rem .625rem rgb(var(--circle-button-text-color) / .15);
  place-items: center;
  display: grid;
}

.circle-button > svg {
  width: .75rem;
}

.circle-button > .icon-zoom {
  width: .875rem;
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .circle-button.hover\:animate-icon-inline:hover svg {
    animation: .35s ease-in-out forwards animateIconInline;
  }

  .circle-button.hover\:animate-icon-block:hover svg {
    animation: .35s ease-in-out forwards animateIconBlock;
  }
}

.circle-button--sm {
  --circle-button-size: 2.25rem;
}

.circle-button--lg, .circle-button--xl {
  --circle-button-size: 3.125rem;
}

:is(.circle-button--lg, .circle-button--xl) > svg {
  width: 1rem;
}

@media screen and (min-width: 700px) {
  .circle-button--xl {
    --circle-button-size: 3.5rem;
  }
}

.content-over-media {
  --content-over-media-gap: 1.25rem;
  --content-over-media-calculated-row-gap: var(--content-over-media-row-gap, var(--content-over-media-gap));
  --content-over-media-calculated-column-gap: var(--content-over-media-column-gap, var(--content-over-media-gap));
  grid-template: [full-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [full-end] / [full-start] minmax(0, 1fr) [content-start] minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-column-gap, var(--content-over-media-gap, var(--container-gutter))) * 2)) [content-end] minmax(0, 1fr) [full-end];
  row-gap: var(--content-over-media-calculated-row-gap);
  column-gap: var(--content-over-media-calculated-column-gap);
  min-height: var(--content-over-media-height, auto);
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.content-over-media:before {
  content: "";
  background: var(--content-over-media-gradient-overlay, rgb(var(--content-over-media-overlay)));
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.content-over-media > picture, .content-over-media > image-parallax picture {
  display: contents;
}

.content-over-media > :is(img, video, iframe, svg, video-media), .content-over-media > picture img, .content-over-media > image-parallax img {
  height: var(--content-over-media-height, auto);
  overflow-wrap: anywhere;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  grid-area: full-start / full-start / full-end / full-end;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
}

.content-over-media > :not(img, video, iframe, svg, video-media, picture, image-parallax) {
  max-width: var(--content-over-media-content-max-width, 48rem);
  z-index: 1;
  text-shadow: 0 1px rgb(var(--content-over-media-text-shadow) / 50%);
  grid-area: content-start / content-start / content-end / content-end;
  position: relative;
}

.content-over-media:has( > .prose):not(:has( > .prose .button:last-child)) {
  row-gap: calc(var(--content-over-media-calculated-row-gap)  - .5rem);
}

@supports (row-gap: 1lh) {
  .content-over-media:has( > .prose):not(:has( > .prose .button:last-child)) {
    row-gap: calc(var(--content-over-media-calculated-row-gap)  - .5lh);
  }
}

.content-over-media > video-media:not([autoplay]) ~ :not(img, video, iframe, svg, video-media, picture, image-parallax) {
  pointer-events: none;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.content-over-media > video-media:not([autoplay])[loaded] ~ :not(img, video, iframe, svg, video-media, picture, image-parallax) {
  opacity: 0;
  visibility: hidden;
}

.content-over-media:has(video-media:not([autoplay])) .play-button {
  transition: transform .2s ease-in-out;
}

.content-over-media:has(video-media:not([autoplay])):hover .play-button {
  transform: scale(1.1);
}

.shopify-section:first-child [allow-transparent-header] > .content-over-media > :not(img, video, iframe, svg, video-media, picture, image-parallax) {
  padding-block-start: var(--header-height, 0px);
}

.content-over-media--xs {
  --content-over-media-height: clamp(15rem, 65vw, 25rem);
}

.content-over-media--sm {
  --content-over-media-height: clamp(20rem, 85vw, 32rem);
}

.content-over-media--md {
  --content-over-media-height: clamp(25rem, 100vw, 36rem);
}

.content-over-media--lg {
  --content-over-media-height: clamp(30rem, 125vw, 42rem);
}

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

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

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

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

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

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

@media screen and (min-width: 700px) {
  .content-over-media {
    --content-over-media-gap: 2rem;
  }
}

@media screen and (min-width: 1000px) {
  .content-over-media {
    --content-over-media-gap: 3rem;
  }
}

.page-dots {
  --dot-size: .375rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  display: flex;
}

.page-dots > * {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--rounded-full);
  place-content: center;
  display: grid;
}

.page-dots > *:after {
  content: "";
  border-radius: inherit;
  opacity: .4;
  background: currentColor;
  transition: opacity .25s, background .25s;
  position: absolute;
  inset: 0;
}

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

.page-dots--narrow {
  column-gap: .5rem;
}

.page-dots--autoplay > [aria-current="false"]:after, .page-dots--autoplay > [aria-current="true"] .circular-progress {
  transition-delay: .15s;
}

.page-dots--autoplay > [aria-current="true"]:after, .page-dots--autoplay > [aria-current="false"] .circular-progress {
  opacity: 0;
}

.page-dots--autoplay > [aria-current="true"] .circular-progress circle:last-child {
  animation: animateCircularProgress var(--slideshow-progress-duration) linear var(--slideshow-progress-play-state) both;
}

.prev-next-button {
  transition: opacity .15s ease-in-out, transform .15s ease-in-out, visibility .15s ease-in-out;
}

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

@media screen and (pointer: fine) {
  .prev-next-button--prev:hover svg {
    animation-direction: reverse !important;
  }
}

@media screen and (pointer: fine) {
  .floating-controls-container {
    padding-inline: 4.625rem;
    display: block;
    position: relative;
  }

  .floating-controls-container:not(:has(.is-scrollable)) .floating-controls-container__control {
    display: none;
  }

  .floating-controls-container--inside {
    --floating-controls-inset-inline: 1.5rem;
    padding-inline: 0;
  }

  .floating-controls-container--on-hover > .floating-controls-container__control {
    opacity: 0;
    transform: translateY(-10px);
  }

  .floating-controls-container--on-hover:hover > .floating-controls-container__control:not(:has([disabled])) {
    opacity: 1;
    transform: translateY(0);
  }

  .floating-controls-container__control {
    z-index: 2;
    transition: opacity .2s, transform .2s;
    display: grid;
    position: absolute;
    inset-block-start: calc(50% - 1.5625rem);
  }

  .floating-controls-container__control:first-child {
    inset-inline-start: var(--floating-controls-inset-inline, 0);
  }

  .floating-controls-container__control:last-child {
    inset-inline-end: var(--floating-controls-inset-inline, 0);
  }
}

@media not screen and (pointer: fine) {
  .floating-controls-container > .floating-controls-container__control {
    display: none;
  }
}

:where(x-drawer, x-modal, x-popover):not(:defined) {
  display: none;
}

:where(.modal, .drawer, .popover, .header-search) {
  z-index: 999;
  display: none;
  position: relative;
}

:where(.modal, .drawer, .popover, .header-search)::part(overlay) {
  background: rgb(var(--page-overlay));
  min-height: 100vh;
  position: fixed;
  inset: 0;
}

:where(.modal, .drawer, .popover, .header-search)::part(close-button) {
  color: currentColor;
  cursor: pointer;
  background: none;
  border: none;
  place-items: center;
  padding: 0;
  display: grid;
}

:where(.modal, .drawer, .popover, .header-search)::part(close-button) > svg {
  display: block;
}

@media screen and (pointer: fine) {
  :where(.modal, .drawer, .popover, .header-search)::part(close-button) {
    opacity: .6;
    transition: all .2s ease-in;
  }

  :where(.modal, .drawer, .popover, .header-search)::part(close-button):hover {
    opacity: 1;
  }
}

:where(.modal, .drawer, .popover, .header-search)::part(tap-area) {
  position: relative;
}

:where(.modal, .drawer, .popover, .header-search)::part(tap-area):before {
  content: "";
  position: absolute;
  inset: -.65rem;
}

.modal {
  --distance-to-bleed: var(--modal-body-padding-inline);
  --modal-header-padding-block: .875rem;
  --modal-header-padding-inline: 1.25rem;
  --modal-body-padding-block: 1.25rem;
  --modal-body-padding-inline: 1.25rem;
  --modal-body-max-width: 30rem;
}

.modal::part(base) {
  place-items: end center;
  width: 100%;
  height: 100%;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal::part(content) {
  width: 100%;
  max-width: var(--modal-body-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  max-height: 75vh;
  color: rgb(var(--text-color));
  isolation: isolate;
  overflow: auto;
}

@supports (height: 100dvh) {
  .modal::part(content) {
    max-height: 85dvh;
  }
}

.modal::part(header) {
  background: inherit;
  border-block-end: 1px solid rgb(var(--border-color));
  text-align: center;
  z-index: 2;
  align-items: center;
  padding-block-start: var(--modal-header-padding-block);
  padding-block-end: var(--modal-header-padding-block);
  padding-inline-start: var(--modal-header-padding-inline);
  padding-inline-end: var(--modal-header-padding-inline);
  display: grid;
  position: sticky;
  inset-block-start: 0;
}

.modal::part(close-button) {
  position: absolute;
  inset-inline-end: var(--modal-header-padding-inline);
}

.modal::part(body) {
  padding-block-start: var(--modal-body-padding-block);
  padding-block-end: var(--modal-body-padding-block);
  padding-inline-start: var(--modal-body-padding-inline);
  padding-inline-end: var(--modal-body-padding-inline);
}

@media screen and (min-width: 700px) {
  .modal {
    --modal-header-padding-block: 1.125rem;
    --modal-header-padding-inline: 2rem;
    --modal-body-padding-block: 2rem;
    --modal-body-padding-inline: 2rem;
  }

  .modal::part(base) {
    place-items: center;
  }

  .modal--lg {
    --modal-body-max-width: 45rem;
  }
}

.drawer {
  --distance-to-bleed: var(--drawer-body-padding-inline);
  --drawer-header-padding-block: 1rem;
  --drawer-header-padding-inline: 1.25rem;
  --drawer-body-padding-block: 1.25rem;
  --drawer-body-padding-inline: 1.25rem;
  --drawer-footer-padding-block: 1rem;
  --drawer-footer-padding-inline: 1.25rem;
  --drawer-max-width: min(92vw, 28.125rem);
}

.drawer::part(base) {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
}

.drawer::part(content) {
  width: 100%;
  height: 100%;
  max-width: var(--drawer-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  grid-auto-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  display: grid;
  position: relative;
}

.drawer::part(header) {
  min-height: min(var(--header-height), 5rem);
  border-block-end: 1px solid rgb(var(--border-color));
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  padding-block-start: var(--drawer-header-padding-block);
  padding-block-end: var(--drawer-header-padding-block);
  padding-inline-start: var(--drawer-header-padding-inline);
  padding-inline-end: var(--drawer-header-padding-inline);
  display: flex;
}

.drawer::part(body) {
  overscroll-behavior-y: contain;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-block-start: var(--drawer-body-padding-block);
  padding-block-end: var(--drawer-body-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  display: grid;
  overflow: hidden auto;
}

.drawer::part(footer) {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  border-block-start: 1px solid rgb(var(--border-color));
  padding-block-start: var(--drawer-footer-padding-block);
  padding-block-end: var(--drawer-footer-padding-block);
  padding-inline-start: var(--drawer-footer-padding-inline);
  padding-inline-end: var(--drawer-footer-padding-inline);
}

.drawer--sm {
  --drawer-max-width: min(92vw, 25rem);
}

.drawer--center-body::part(body) {
  align-self: center;
}

@media screen and (min-width: 1000px) {
  .drawer {
    --drawer-header-padding-block: 1.125rem;
    --drawer-header-padding-inline: 2rem;
    --drawer-body-padding-block: 2rem;
    --drawer-body-padding-inline: 2rem;
    --drawer-footer-padding-block: 2rem;
    --drawer-footer-padding-inline: 2rem;
  }
}

.popover {
  --distance-to-bleed: var(--popover-body-padding-inline);
  --popover-header-padding-block: .875rem;
  --popover-header-padding-inline: 1.25rem;
  --popover-body-padding-block: 1.25rem;
  --popover-body-padding-inline: 1.25rem;
}

.popover::part(content) {
  background: rgb(var(--background));
  width: 100%;
  max-height: 75vh;
  color: rgb(var(--text-color));
  isolation: isolate;
  overflow: auto;
}

@supports (height: 100dvh) {
  .popover::part(content) {
    max-height: 85dvh;
  }
}

.popover::part(header) {
  background: inherit;
  border-block-end: 1px solid rgb(var(--border-color));
  text-align: center;
  z-index: 2;
  align-items: center;
  padding-block-start: var(--popover-header-padding-block);
  padding-block-end: var(--popover-header-padding-block);
  padding-inline-start: var(--popover-header-padding-inline);
  padding-inline-end: var(--popover-header-padding-inline);
  display: grid;
  position: sticky;
  inset-block-start: 0;
}

.popover::part(close-button) {
  position: absolute;
  inset-inline-end: var(--popover-header-padding-inline);
}

.popover::part(body) {
  padding-block-start: var(--popover-body-padding-block);
  padding-block-end: var(--popover-body-padding-block);
  padding-inline-start: var(--popover-body-padding-inline);
  padding-inline-end: var(--popover-body-padding-inline);
}

.popover__value-list {
  text-align: start;
  justify-items: start;
  gap: .75rem;
  display: grid;
  position: relative;
}

.popover__value-list > * {
  text-align: inherit;
  width: 100%;
  color: rgb(var(--text-color) / .65);
  transition: color .2s ease-in-out;
}

.popover__value-list > *[aria-selected="true"], .popover__value-list > *:hover {
  color: rgb(var(--text-color));
}

.popover__value-list > *:has(:checked) {
  color: rgb(var(--text-color));
}

.popover__value-option {
  text-align: inherit;
  width: 100%;
  color: rgb(var(--text-color) / .65);
  transition: color .2s ease-in-out;
}

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

@media screen and (max-width: 999px) {
  .popover::part(base) {
    place-items: end center;
    width: 100%;
    height: 100%;
    display: grid;
    position: fixed;
    inset: 0;
  }
}

@media screen and (min-width: 1000px) {
  .popover {
    --popover-block-offset: .75rem;
    position: absolute;
  }

  .popover::part(content) {
    border: 1px solid rgb(var(--border-color));
    width: max-content;
    max-width: 18.75rem;
    max-height: min(60vh, 25rem);
    box-shadow: 2px 2px 6px rgb(var(--text-color) / .05);
  }

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

  .popover:has(.popover__value-list)::part(body) {
    padding-inline-end: 2.5rem;
  }

  .popover--top-start {
    inset-block-end: calc(100% + var(--popover-block-offset));
    inset-inline-start: 0;
  }

  .popover--top-end {
    inset-block-end: calc(100% + var(--popover-block-offset));
    inset-inline-end: 0;
  }

  .popover--bottom-start {
    inset-block-start: calc(100% + var(--popover-block-offset));
    inset-inline-start: 0;
  }

  .popover--bottom-end {
    inset-block-start: calc(100% + var(--popover-block-offset));
    inset-inline-end: 0;
  }
}

.pop-in {
  z-index: 10;
  padding: 2rem;
  display: none;
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
}

.pop-in__close-button {
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  position: absolute !important;
}

@media screen and (min-width: 700px) {
  .pop-in {
    inset-block-end: 2rem;
    inset-inline: 2rem;
  }
}

.banner {
  font-size: var(--text-base);
  color: rgb(var(--banner-color));
  background: rgb(var(--banner-background));
  text-shadow: none;
  padding: .625rem 1.25rem;
}

.banner:has(.banner__text-with-button) {
  padding-block: 1.25rem;
}

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

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

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

.banner__text-with-button {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .8rem 1.5rem;
  display: flex;
}

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

.form-row {
  gap: var(--fieldset-gap);
  flex-wrap: wrap;
  display: flex;
}

.form-row > .form-control {
  flex: 1 0 var(--fieldset-row-control-width, 14rem);
}

.form-row > button {
  flex-grow: 1;
}

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

.fieldset-row {
  gap: inherit;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  display: grid;
}

.form-control {
  gap: var(--form-control-gap);
  display: grid;
  position: relative;
}

.form-control > label {
  justify-self: start;
}

.form-control__max-characters-count {
  margin-block-start: -.375rem;
}

.checkbox-control {
  align-items: flex-start;
  column-gap: var(--checkbox-control-gap);
  text-align: start;
  display: flex;
  position: relative;
}

.input, .textarea, .select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: var(--input-padding-block) var(--input-padding-inline);
  border-radius: var(--input-border-radius);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  text-align: start;
  border-width: 1px;
  transition: border-color .1s ease-in-out;
}

:is(.input, .textarea, .select)::placeholder {
  color: rgb(var(--input-text-color, var(--text-color)) / .6);
}

:is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: currentColor;
  outline: none;
}

.select {
  box-shadow: 0 1px 3px rgb(var(--text-color) / .08);
  padding-inline-end: calc(var(--input-padding-inline) * 2 + 10px);
}

.select:required:invalid {
  color: rgb(var(--input-text-color, var(--text-color)) / .6);
}

.select ~ svg, .select > svg {
  transition: transform .2s;
  position: absolute;
  inset-block-start: calc(50% - 3.5px);
  inset-inline-end: calc(var(--input-padding-inline)  + 1px);
}

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

.form-control:has(.select):before {
  content: "";
  width: calc(var(--input-padding-inline) * 2 + 35px);
  background-image: linear-gradient(to var(--transform-origin-start), rgb(var(--background)) calc(var(--input-padding-inline)  + 20px), rgb(var(--background-without-opacity) / 0));
  pointer-events: none;
  height: calc(100% - 2px);
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
}

.form-control:has(.select):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}

.form-control:has(.select):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}

.floating-label {
  z-index: 1;
  background: rgb(var(--background));
  color: rgb(var(--input-text-color, var(--text-color)) / .6);
  opacity: 0;
  pointer-events: none;
  padding: 0 .25rem;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  position: absolute;
  inset-block-start: calc(-1 * var(--input-padding-block)  + 1px);
  inset-inline-start: calc(var(--input-padding-inline)  - .25rem + 1px);
  transform: translateY(3px);
}

:-webkit-autofill ~ .floating-label {
  color: #000;
}

:-webkit-any(:-webkit-any(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :-webkit-any(.input, .textarea, .select):-webkit-autofill ~ .floating-label, .select:valid ~ .floating-label) {
  opacity: 1;
  transform: translateY(0);
}

:is(:is(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :is(.input, .textarea, .select):autofill ~ .floating-label, .select:valid ~ .floating-label) {
  opacity: 1;
  transform: translateY(0);
}

.input-suffix {
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
  position: absolute;
  inset-block-start: var(--input-padding-block);
  inset-inline-end: var(--input-padding-inline);
}

.form-control:has(:focus-within) + .input-suffix.hide-on-focus {
  opacity: 0;
  visibility: hidden;
}

.checkbox {
  --checkbox-baseline-distance: calc(1em * 1.6);
  --checkbox-offset: calc((var(--checkbox-baseline-distance)  - var(--checkbox-size)) / 2);
  -webkit-appearance: none;
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-width: 1px;
  border-color: rgb(var(--text-color) / .8);
  background: var(--checkmark-svg-url) no-repeat center / 0;
  border-radius: 2px;
  flex-shrink: 0;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
  position: relative;
  inset-block-start: var(--checkbox-offset);
}

@supports (width: 1lh) {
  .checkbox {
    inset-block-start: calc(.5lh - var(--checkbox-size) / 2);
  }
}

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

.checkbox:checked ~ label {
  opacity: 1;
}

.checkbox:disabled, .checkbox:disabled ~ label {
  opacity: .5;
  cursor: default;
}

.checkbox:not(:disabled, :checked) ~ label {
  opacity: .7;
}

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

.dot-checkbox {
  -webkit-appearance: none;
  appearance: none;
  background: rgb(var(--text-color));
  opacity: 0;
  pointer-events: none;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  transition: opacity .2s;
  display: block;
  position: absolute;
  inset-block-start: calc(.5em + 1.5px);
}

.dot-checkbox ~ label {
  opacity: .65;
  transition: opacity .2s, transform .2s;
  position: relative;
}

.dot-checkbox ~ label:hover {
  opacity: 1;
}

.dot-checkbox:checked {
  opacity: 1;
}

.dot-checkbox:checked ~ label {
  opacity: 1;
  transform: translateX(calc(var(--transform-logical-flip) * 1.125rem));
}

.dot-checkbox:focus-visible ~ label {
  outline: 5px auto highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.switch {
  --switch-height: 1rem;
  --switch-width: 2.25rem;
  --switch-padding: .1875rem;
  --switch-toggle-size: .625rem;
  -webkit-appearance: none;
  appearance: none;
  height: var(--switch-height);
  width: var(--switch-width);
  padding: var(--switch-padding);
  border-radius: var(--rounded-full);
  background: rgb(var(--text-color) / .2);
  align-self: center;
  transition: background .2s ease-in-out;
  display: grid;
}

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

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

.switch:checked:after {
  transform: translateX(calc(var(--transform-logical-flip) * (var(--switch-width)  - var(--switch-toggle-size)  - var(--switch-padding) * 2)));
}

.shopify-section:not(:first-child) .bordered-section {
  border-block-start-width: 1px;
}

.shopify-section:not(:has(.section-spacing)) + .shopify-section {
  border-block-start-width: 0;
}

.container {
  --distance-to-bleed: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
  margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

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

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

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

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

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

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

.container--align-start {
  margin-inline: var(--container-gutter) auto;
  max-width: var(--container-max-width);
}

.container--align-end {
  margin-inline: auto var(--container-gutter);
  max-width: var(--container-max-width);
}

.section-spacing {
  padding-block-start: calc(var(--section-vertical-spacing-override, var(--section-vertical-spacing))  + var(--section-vertical-spacing-block-start-compensation, 0px));
  padding-block-end: var(--section-vertical-spacing-override, var(--section-vertical-spacing));
}

.shopify-section:has(.section-spacing) {
  scroll-padding-block-start: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px)  + var(--header-is-sticky, 0) * var(--header-height, 0px));
}

.section-spacing--tight {
  --section-vertical-spacing: var(--section-vertical-spacing-tight);
  --section-stack-gap: var(--section-stack-gap-tight);
}

.shopify-section:empty {
  display: none;
}

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

.section-header {
  max-width: min(var(--container-xs-max-width), 100%);
  margin-inline-start: var(--container-gutter);
  margin-inline-end: var(--container-gutter);
}

.container .section-header {
  margin-inline: 0;
}

.v-stack {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
}

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

.bleed, .full-bleed {
  margin-inline-start: calc(-1 * var(--distance-to-bleed));
  margin-inline-end: calc(-1 * var(--distance-to-bleed));
}

.bleed {
  scroll-padding-inline: var(--distance-to-bleed);
  padding-inline-start: var(--distance-to-bleed);
  padding-inline-end: var(--distance-to-bleed);
}

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

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

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

.empty-state {
  text-align: center;
  place-content: center;
  padding-block: 6.25rem;
  display: grid;
}

@media screen and (min-width: 1000px) {
  .empty-state {
    padding-block: 12.5rem;
  }
}

@media screen and (min-width: 1400px) {
  .empty-state {
    padding-block: 15.625rem;
  }
}

.shopify-section--announcement-bar, .shopify-section--header {
  transform: translateY(calc(((var(--announcement-bar-height, 0px)  + var(--header-height, 0px)) * -1) * var(--hide-header-group, 0)));
  transition: transform .25s ease-in-out;
}

video-media, model-media {
  border-radius: inherit;
  aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
  width: 100%;
  display: block;
  position: relative;
  container: media / inline-size;
}

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

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

@container media (width >= 32rem) {
  :is(video-media, model-media)::part(play-button) {
    width: 4rem;
    height: 4rem;
  }
}

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

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

video-media[show-play-button]:not([loaded]), video-media:not([autoplay]) {
  cursor: pointer;
}

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

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

video-media > :-webkit-any(video:not(:-webkit-full-screen), img) {
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

video-media > :is(video:not(:fullscreen), img) {
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

video-media > :is(iframe, img) {
  position: absolute;
  inset: 0;
}

video-media:not([loaded]) > :is(video, iframe), video-media[loaded] > img, video-media[loaded]::part(play-button) {
  opacity: 0;
  pointer-events: none;
}

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

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

video-media:hover::part(play-button) {
  scale: 1.1;
}

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

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

@media screen and (max-width: 699px) {
  .order-summary__header, .order-summary__body td:nth-child(n+2), .order-summary__footer td:first-child {
    display: none;
  }

  .order-summary__body td {
    border-width: 0;
  }

  .order-summary__body tr:last-child td {
    border-block-end-width: 1px;
  }

  .order-summary__body tr:first-child td {
    padding-block-start: 0;
  }

  .order-summary__body tr:last-child td {
    padding-block-end: calc(var(--table-cell-padding-block) * 2);
  }
}

@media screen and (min-width: 700px) {
  .order-summary .line-item-info {
    max-width: 500px;
  }
}

.line-item {
  --line-item-media-width: 4.375rem;
  align-items: center;
  column-gap: 1.5rem;
  display: flex;
}

.line-item__media {
  width: var(--line-item-media-width);
  flex-shrink: 0;
}

@media screen and (min-width: 700px) {
  .line-item {
    --line-item-media-width: 7.5rem;
  }
}

.discount-badge {
  background: rgb(var(--on-sale-badge-background));
  color: rgb(var(--on-sale-badge-text));
  align-items: center;
  column-gap: .5rem;
  padding: .125rem .5rem;
  display: flex;
}

.shipping-estimator__form {
  gap: var(--fieldset-gap);
  display: grid;
}

@media screen and (min-width: 700px) {
  .shipping-estimator__form {
    flex-wrap: wrap;
    display: flex;
  }

  .shipping-estimator__form .select {
    max-width: 15rem;
  }
}

.pagination {
  border-block-end-width: 1px;
  grid-auto-rows: minmax(0, 2.8125rem);
  grid-auto-columns: minmax(0, 2.625rem);
  grid-auto-flow: column;
  justify-self: center;
  display: inline-grid;
}

.pagination__link {
  place-content: center;
  display: grid;
  position: relative;
}

.pagination__link[aria-current="page"] {
  box-shadow: 0 1px, inset 0 -2px;
}

@media screen and (min-width: 700px) {
  .pagination {
    grid-auto-columns: minmax(0, 3.75rem);
  }
}

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

.pswp:focus {
  outline: 0;
}

.pswp--open {
  display: block;
}

.pswp img {
  max-width: none;
}

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

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

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

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

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

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

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

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

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img {
  cursor: zoom-out;
}

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

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

.pswp__hidden {
  display: none !important;
}

.pswp .pswp__hide-on-close {
  opacity: .005;
  will-change: opacity;
  z-index: 10;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4, 0, .22, 1), transform .3s cubic-bezier(.4, 0, .22, 1);
  transform: translateY(15px);
}

.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .3s;
  transform: translateY(0);
}

.pswp__top-bar {
  z-index: 10;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: .75rem;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  pointer-events: none !important;
}

.pswp__top-bar > .circle-button {
  pointer-events: auto;
  transition: transform .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .pswp__top-bar > .circle-button:hover {
    transform: scale(1.1);
  }
}

.pswp__preloader {
  display: none;
}

@media screen and (min-width: 700px) {
  .pswp__top-bar {
    column-gap: 1.125rem;
  }
}

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

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

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

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

.range::-moz-range-thumb {
  background: rgb(var(--text-color));
  cursor: pointer;
  border: none;
  border-radius: 100%;
  width: .625rem;
  height: .625rem;
}

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

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

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

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

@media not screen and (pointer: fine) {
  .range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-block-start: -.4375rem;
  }

  .range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
  }
}

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

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

.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;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.input-group {
  align-items: center;
  column-gap: .75rem;
  display: flex;
}

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

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

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

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

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

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

.price-range {
  padding-block-start: .25rem;
  display: block;
}

.price-range > .range-group {
  margin-block-end: 1.125rem;
  position: relative;
}

@media not screen and (pointer: fine) {
  .price-range {
    padding-block-start: .625rem;
  }
}

.product-card {
  scroll-snap-align: start;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  display: grid;
  position: relative;
}

.product-card__figure {
  position: relative;
}

.product-card__figure > .badge-list {
  z-index: 1;
  position: absolute;
  inset-block-start: .25rem;
  inset-inline-start: .25rem;
}

.product-card__media {
  isolation: isolate;
  display: block;
}

.product-card__image {
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  transition: opacity .1s ease-in-out;
}

.product-card__image--secondary {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.product-card__quick-add-button {
  background: rgb(var(--circle-button-background));
  color: rgb(var(--circle-button-text-color));
  z-index: 1;
  padding: .625rem;
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-end: .5rem;
}

@media screen and (pointer: fine) {
  .product-card__quick-add-button {
    opacity: 0;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    transform: translateY(5px);
  }

  .product-card__quick-add-button :is(svg) {
    transition: transform .2s ease-in-out;
  }

  .product-card__quick-add-button:focus svg, .product-card__quick-add-button:hover svg {
    transform: rotateZ(90deg);
  }

  .product-card:focus-within .product-card__quick-add-button, .product-card:hover .product-card__quick-add-button, .product-card__quick-add-button:focus {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card__info {
  --heading-text-transform: var(--product-card-text-transform);
  text-align: center;
  text-transform: var(--product-card-text-transform);
  align-content: start;
  justify-items: center;
  gap: .75rem;
  padding-block-start: 1.25rem;
  display: grid;
}

.product-card__info :is(.price-list, .rating-badge) {
  justify-content: center;
}

.product-card__info .color-swatch {
  --swatch-size: 1.375rem;
}

@media screen and (pointer: fine) {
  .product-card__image--secondary {
    opacity: 0;
    mix-blend-mode: plus-lighter;
    display: block;
  }

  .product-card__figure:has(.product-card__image--secondary):hover > .product-card__media .product-card__image--primary {
    opacity: 0;
  }

  .product-card__figure:has(.product-card__image--secondary):hover > .product-card__media .product-card__image--secondary {
    opacity: 1;
  }
}

@media screen and (min-width: 700px) {
  .product-card__figure > .badge-list {
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
  }
}

.horizontal-product-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  align-items: center;
  column-gap: 1.5rem;
  display: flex;
  position: relative;
  container: horizontal-product-card / inline-size;
}

.horizontal-product-card__figure {
  flex-shrink: 0;
  width: 6.25rem;
}

.horizontal-product-card__info {
  flex-grow: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: auto;
  justify-items: start;
  gap: .625rem;
  display: grid;
}

.\@large\:horizontal-product-card__button {
  display: none;
}

@media screen and (min-width: 700px) {
  .horizontal-product-card {
    column-gap: 2rem;
  }
}

@container horizontal-product-card (width >= 450px) {
  .horizontal-product-card__info {
    grid-auto-flow: column;
    align-items: center;
  }

  .\@narrow\:horizontal-product-card__button {
    display: none;
  }

  .\@large\:horizontal-product-card__button {
    display: block;
  }
}

.product-list {
  --product-list-max-items-per-row-allowed: 2;
  --product-list-calculated-items-per-row: min(var(--product-list-max-items-per-row-allowed), var(--product-list-items-per-row));
  --product-list-default-row-gap: 2.1875rem;
  --product-list-default-column-gap: .625rem;
  --product-list-calculated-row-gap: clamp(var(--section-vertical-spacing) / 4, var(--product-list-default-row-gap) * var(--product-list-vertical-spacing-factor, 1), var(--section-vertical-spacing) * 2);
  --product-list-calculated-column-gap: clamp(var(--container-gutter) / 4, var(--product-list-default-column-gap) * var(--product-list-horizontal-spacing-factor, 1), var(--container-gutter) * 2);
  --product-list-card-width: calc(100% / var(--product-list-calculated-items-per-row)  - var(--product-list-calculated-column-gap, 0px) * (var(--product-list-calculated-items-per-row)  - 1) / var(--product-list-calculated-items-per-row));
  grid: auto-flow dense / repeat(auto-fit, var(--product-list-card-width));
  align-items: start;
  column-gap: var(--product-list-calculated-column-gap);
  row-gap: var(--product-list-calculated-row-gap);
  reading-flow: grid-rows;
  display: grid;
}

.product-list.product-list--compact {
  row-gap: var(--product-list-calculated-column-gap);
}

@supports (grid-template-rows: subgrid) {
  .product-list:not([collection-desktop-layout="compact"], .product-list--compact) > * {
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

.product-list--carousel {
  --product-list-default-column-gap: 1.25rem;
  grid: auto / auto-flow var(--product-list-card-width);
  justify-content: safe center;
}

@media screen and (max-width: 699px) {
  .product-list:not(.product-list--carousel) {
    margin-inline: -.625rem;
  }

  .product-list--carousel {
    --product-list-card-width: min(300px, 65%);
  }
}

@media screen and (min-width: 700px) {
  .product-list {
    --product-list-max-items-per-row-allowed: 3;
    --product-list-default-row-gap: 3rem;
    --product-list-default-column-gap: 1.5rem;
  }

  .product-list--compact {
    --product-list-max-items-per-row-allowed: 4;
  }
}

@media screen and (min-width: 1000px) {
  .product-list {
    --product-list-max-items-per-row-allowed: 4;
    --product-list-default-row-gap: 4rem;
    --product-list-default-column-gap: 3rem;
  }

  .product-list--compact {
    --product-list-max-items-per-row-allowed: 5;
  }

  .product-list--carousel {
    scroll-snap-type: x mandatory;
  }
}

@media screen and (min-width: 1150px) {
  .product-list {
    --product-list-max-items-per-row-allowed: var(--product-list-items-per-row);
  }
}

@media screen and (min-width: 1400px) {
  .product-list {
    --product-list-default-row-gap: 4rem;
    --product-list-default-column-gap: 3.75rem;
  }
}

.product-list__promo {
  grid-column: 1 / -1;
}

@media screen and (min-width: 700px) {
  .product-list__promo {
    grid-column: span var(--product-list-promo-column-span);
    grid-row: span 1;
    height: 100%;
  }

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

  .product-list[collection-desktop-layout="compact"] .product-list__promo {
    display: none;
  }

  @supports (grid-template-rows: subgrid) {
    .product-list__promo {
      grid-row: span 2;
      gap: 0;
      display: grid;
    }

    .product-list__promo .content-over-media {
      grid-row: span 1;
    }
  }
}

.quick-buy-modal {
  --modal-body-max-width: 55.625rem;
}

.quick-buy-modal::part(content) {
  position: relative;
}

.quick-buy-modal__content {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.quick-buy-modal__close-button {
  position: absolute;
  inset-block-start: 1.875rem;
  inset-inline-end: 1.875rem;
}

.quick-buy-modal__view-more {
  margin-block-start: 2rem;
  display: inline-block;
}

@media screen and (max-width: 699px) {
  .quick-buy-modal::part(body) {
    padding-inline: 0;
  }

  .quick-buy-modal__gallery-wrapper, .quick-buy-modal__info-wrapper {
    padding-inline-start: var(--modal-body-padding-inline);
    padding-inline-end: var(--modal-body-padding-inline);
  }

  .quick-buy-modal__gallery-wrapper .price-list {
    justify-content: center;
  }

  .quick-buy-modal__gallery-wrapper .price-list .h6 {
    font-size: .6875rem;
  }

  .quick-buy-modal__mobile-info {
    margin-block-start: 1.25rem;
  }

  .quick-buy-modal__info-wrapper {
    border-block-start-width: 1px;
    margin-block-start: 1.25rem;
  }

  .quick-buy-modal__info-wrapper .product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="price"], [data-block-type="rating"], [data-block-type="separator"]), .quick-buy-modal__info-wrapper .product-info__block-group[data-group-type="text-with-rating"] {
    display: none;
  }

  .quick-buy-modal__info-wrapper .product-info__block-item[data-block-type="variant-picker"] {
    --product-info-gap: 1.25rem;
  }

  .quick-buy-modal__info-wrapper .product-info__block-item[data-block-type="buy-buttons"] {
    --product-info-gap: 28px;
  }
}

@media screen and (min-width: 700px) {
  .quick-buy-modal {
    --modal-body-padding-inline: 3.125rem;
    --modal-body-padding-block: 3.125rem;
  }

  .quick-buy-modal::part(header) {
    display: none;
  }

  .quick-buy-modal__content {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 2.5rem;
    display: grid;
  }

  .quick-buy-modal__content .product-info {
    top: unset;
    position: relative;
  }
}

.prose {
  overflow-wrap: anywhere;
}

.prose :first-child, .prose .sr-only:first-child + * {
  margin-block-start: 0 !important;
}

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

.prose :where(:not(meta, span) + *) {
  margin-block-start: 1rem;
}

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

.prose :is(.link + .link) {
  margin-inline-start: .75rem;
}

.prose :is(.button, .button-group:has(.button)) {
  margin-block-start: 1.5rem;
}

.prose :is(p img:not([style*="float"]):only-child, div img:not([style*="float"]):only-child, figure, video, object, blockquote, table) {
  margin-block: 1.6rem;
}

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

.prose .play-button {
  margin: 2rem auto;
  display: block;
}

.prose :is(ol, ul) :is(ol, ul) {
  margin-block-start: 0 !important;
}

.prose :is(ol, ul) {
  row-gap: .4em;
  display: grid;
}

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

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

.prose blockquote {
  border-inline-start-width: 3px;
  padding: .375rem 0 .375rem 1rem;
  font-size: 1.15rem;
  line-height: 1.75;
}

@media screen and (min-width: 1000px) {
  .prose:not(.prose--tight) :where(:not(meta, span) + *) {
    margin-block-start: 1.25rem;
  }

  .prose:not(.prose--tight) :is(.button, .button-group:has(.button)) {
    margin-block-start: 2rem;
  }

  .prose:not(.prose--tight) .play-button {
    margin-block: 2.5rem;
  }

  .prose:not(.prose--tight) blockquote {
    margin-inline-start: 2rem;
    padding-inline-start: 2rem;
  }
}

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

.prose a:not(.h1, .h2, .h3, .h4, .h5, .h6, .button, .link-faded, .link-faded-reverse, :has(img)) {
  background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  text-decoration: none;
  transition: background-size .3s ease-in-out;
}

@supports (height: 1lh) {
  .prose a:not(.h1, .h2, .h3, .h4, .h5, .h6, .button, .link-faded, .link-faded-reverse, :has(img)) {
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }
}

@media screen and (pointer: fine) {
  .prose a:not(.h1, .h2, .h3, .h4, .h5, .h6, .button, .link-faded, .link-faded-reverse, :has(img)):hover {
    background-size: 0 1px;
  }
}

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

@media screen and (pointer: fine) {
  .link:hover {
    background-size: 0 1px;
  }
}

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

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

@media screen and (pointer: fine) {
  .link-reverse:hover {
    background-size: 100% 1px;
  }
}

.link-faded {
  color: rgb(var(--text-color) / .65);
  transition: color .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .link-faded:hover {
    color: rgb(var(--text-color));
  }
}

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

@media screen and (pointer: fine) {
  .link-faded-reverse:hover {
    color: rgb(var(--text-color) / .65);
  }
}

table {
  --table-cell-padding-block: .75rem;
  --table-cell-padding-inline: .5rem;
  --table-foot-cell-padding-block: .75rem;
  --table-foot-cell-padding-inline: .5rem;
  width: 100%;
}

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

th {
  text-align: start;
}

:where(td, th):not(:empty) {
  border-block-width: 1px;
}

:where(th):not(:empty) {
  border-block-start-width: 0;
}

td:not(:empty) + td {
  border-inline-start-width: 1px;
}

th, td {
  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
}

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

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

th {
  opacity: .6;
  line-height: 1.7;
  font-size: var(--text-h6);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  padding-block: 0 .625rem;
}

tfoot td {
  padding: var(--table-foot-cell-padding-block) var(--table-foot-cell-padding-inline);
}

tr[onclick] {
  cursor: pointer;
  transition: background .2s;
}

tr[onclick]:hover {
  background: rgb(var(--text-color) / .05);
}

@media screen and (min-width: 700px) {
  table {
    --table-cell-padding-block: 1rem;
    --table-cell-padding-inline: .75rem;
    --table-foot-cell-padding-block: 1rem;
    --table-foot-cell-padding-inline: .75rem;
  }
}

.table--bordered {
  --table-cell-padding-inline: .75rem;
}

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

.table--reduce-border :is(td) + td {
  border-inline-start-width: 0;
}

.table--no-border td {
  border: none;
}

.table--sm {
  --table-cell-padding-block: .35rem;
  --table-cell-padding-inline: .5rem;
}

.table--lg {
  --table-cell-padding-block: 1.5rem;
  --table-cell-padding-inline: .5rem;
}

@media screen and (min-width: 700px) {
  .table--lg {
    --table-cell-padding-block: 2rem;
    --table-cell-padding-inline: .75rem;
  }
}

.social-media--list {
  align-items: center;
  gap: var(--social-media-list-gap, .75rem 2rem);
  flex-wrap: wrap;
  display: flex;
}

.social-media--list .social-media__item {
  opacity: .65;
  transition: opacity .2s, color .2s;
}

.social-media--list svg {
  width: var(--social-media-icon-size, 1.25rem);
}

@media screen and (pointer: fine) {
  .social-media--list .social-media__item:hover {
    opacity: 1;
  }
}

.social-media--block {
  grid-template-columns: repeat(auto-fit, minmax(0, .33fr));
  gap: 1px;
  display: grid;
}

.social-media--block:has(:nth-child(4)) {
  grid-template-columns: repeat(auto-fit, minmax(0, .25fr));
}

.social-media--block .social-media__item {
  outline: 1px solid rgb(var(--border-color));
  z-index: 0;
  width: 100%;
  transition: background .15s, color .15s, outline .15s, z-index .15s;
}

.social-media--block a {
  padding-block: .625rem;
  display: block;
}

.social-media--block svg {
  margin-inline: auto;
}

@media screen and (pointer: fine) {
  .social-media--block .social-media__item:hover {
    background: rgb(var(--branding-background));
    outline-color: rgb(var(--branding-background));
    color: rgb(var(--branding-color));
    z-index: 1;
  }
}

@media not screen and (pointer: fine) {
  .social-media--block .social-media__item {
    background: rgb(var(--branding-background));
    outline-color: rgb(var(--branding-background));
    color: rgb(var(--branding-color));
  }
}

@media screen and (min-width: 700px) {
  .social-media--block {
    grid-template-columns: repeat(auto-fit, minmax(0, 3.75rem));
  }
}

.branding-colors--facebook {
  --branding-background: 24 119 242;
  --branding-color: 255 255 255;
}

.branding-colors--twitter {
  --branding-background: 29 161 242;
  --branding-color: 255 255 255;
}

.branding-colors--instagram {
  --branding-background: 195 42 163;
  --branding-color: 255 255 255;
}

.branding-colors--pinterest {
  --branding-background: 189 8 28;
  --branding-color: 255 255 255;
}

.branding-colors--youtube {
  --branding-background: 255 0 0;
  --branding-color: 255 255 255;
}

.branding-colors--tiktok {
  --branding-background: 1 1 1;
  --branding-color: 255 255 255;
}

.branding-colors--vimeo {
  --branding-background: 26 183 234;
  --branding-color: 255 255 255;
}

.branding-colors--linkedin {
  --branding-background: 10 102 194;
  --branding-color: 255 255 255;
}

.branding-colors--whatsapp {
  --branding-background: 79 206 93;
  --branding-color: 255 255 255;
}

.branding-colors--snapchat {
  --branding-background: 255 252 0;
  --branding-color: 0 0 0;
}

.branding-colors--tumblr {
  --branding-background: 54 70 93;
  --branding-color: 255 255 255;
}

.branding-colors--wechat {
  --branding-background: 9 184 62;
  --branding-color: 255 255 255;
}

.branding-colors--reddit {
  --branding-background: 255 69 0;
  --branding-color: 255 255 255;
}

.branding-colors--line {
  --branding-background: 6 199 85;
  --branding-color: 255 255 255;
}

.branding-colors--spotify {
  --branding-background: 30 215 96;
  --branding-color: 255 255 255;
}

.branding-colors--21buttons {
  --branding-background: 0 0 0;
  --branding-color: 255 255 255;
}

.branding-colors--email {
  --branding-background: var(--text-color);
  --branding-color: var(--background);
}
.color-swatch:hover {
    transform: scale(1.1);
}
.color-swatch {
      border: 2.5px solid transparent;
         transition: all 0.2s;
  --swatch-offset: 0px;
  --swatch-size: 2.125rem;
  --swatch-border-size: 1px;
  --swatch-disabled-strike-color: rgb(var(--border-color));
  width: var(--swatch-size);
  height: var(--swatch-size);
  padding: var(--swatch-offset);
  /* border: var(--swatch-border-size) solid transparent; */
  background: content-box var(--swatch-background) no-repeat center / cover;
  place-items: center;
  display: grid;
  position: relative;
  border-radius: 50%;
}

.color-swatch.is-disabled:before {
  content: "";
  margin: var(--swatch-disabled-margin, var(--swatch-offset));
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--swatch-disabled-strike-color) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  position: absolute;
  inset: 0;
}

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

:checked + .color-swatch, .color-swatch.is-selected {
    --swatch-disabled-margin: 0;
    --swatch-disabled-strike-color: currentColor;
    /* border-color: currentColor; */
    box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 4px #1f2f4a;
    border-color: #1f2f4a;
}

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

.color-swatch--underline {
  --swatch-size: 1.75rem;
  --swatch-offset: 0;
  border: none;
}

:is(:checked + .color-swatch--underline, .color-swatch--underline.is-selected):after {
  content: "";
  background-color: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 0;
}

.thumbnail-swatch {
  --swatch-size: 3rem;
  --swatch-disabled-strike-color: rgb(var(--border-color));
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: min(4px, var(--input-border-radius));
  border-width: 1px;
  display: block;
  position: relative;
}

:checked + .thumbnail-swatch, .thumbnail-swatch.is-selected {
  --swatch-disabled-strike-color: currentColor;
  border-color: currentColor;
}

.thumbnail-swatch.is-disabled:before {
  content: "";
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--swatch-disabled-strike-color) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  position: absolute;
  inset: 0;
}

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

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

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

@media screen and (min-width: 700px) {
  .thumbnail-swatch {
    --swatch-size: 4.25rem;
  }
}
.block-swatch {
    --swatch-border-size: 1px;
    --swatch-padding: calc(var(--input-padding-block) - var(--swatch-border-size) * 2) .875rem;
    --swatch-disabled-strike-color: rgb(var(--border-color));
    padding: 9px 19px;
    border-width: var(--swatch-border-size);
    border-radius: var(--input-border-radius);
    min-width: 2.5rem;
    color: rgb(var(--text-color) / .65);
    justify-content: center;
    align-items: center;
    column-gap: .875rem;
    display: flex;
    position: relative;
}

.block-swatch.is-disabled {
  color: rgb(var(--text-color) / .5);
}

:checked + .block-swatch, .block-swatch.is-selected {
  --swatch-disabled-strike-color: currentColor;
  color: var(--text-color);
  border-color: currentColor;
  border-color: #1f2f4a;
    background: #1f2f4a;
    color: #ffffff;
}

.block-swatch.is-disabled:before {
  content: "";
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--swatch-disabled-strike-color) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  position: absolute;
  inset: 0;
}

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

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

.block-swatch__color {
  background: var(--swatch-background) center / cover;
  width: 1rem;
  height: 1rem;
}

.block-underline {
  position: relative;
}

:is(:checked + .block-underline, .block-underline.is-selected):after {
  content: "";
  background-color: rgb(var(--text-color));
  width: 100%;
  height: 1px;
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 0;
}

.block-underline.is-disabled {
  color: rgb(var(--text-color) / .65);
  text-decoration: line-through;
}

.image-filter {
  --image-filter-width: 3rem;
  grid-template-columns: var(--image-filter-width) minmax(0, 1fr);
  align-items: center;
  column-gap: 1.25rem;
  display: grid;
}

.image-filter__image {
  width: var(--image-filter-width);
  height: var(--image-filter-width);
  object-fit: contain;
  object-position: center;
}

.image-filter__label {
  grid-column-start: 2;
}

:checked + .image-filter .image-filter__image {
  outline: 1px solid rgb(var(--text-color));
}

:checked + .image-filter .image-filter__label {
  color: rgb(var(--text-color));
}

.content-tabs::part(tab-list) {
  border-block-end: 1px solid rgb(var(--border-color));
  white-space: nowrap;
  grid-auto-flow: column;
  justify-content: start;
  gap: 2.5rem;
  margin-block-end: 1.5rem;
  display: grid;
}

.content-tabs [role="tab"] {
  box-shadow: 0 1px rgb(var(--text-color));
  padding-block-end: .625rem;
  transition: opacity .2s ease-in, box-shadow .2s ease-in;
}

.content-tabs [role="tab"]:not([aria-selected="true"]) {
  opacity: .6;
  box-shadow: 0 1px #0000;
}

.content-tabs--center::part(tab-list) {
  width: max-content;
  margin-inline: auto;
}

.content-tabs--center::part(tab-panel-list) {
  text-align: center;
  width: min(800px, 100%);
  margin-inline: auto;
  display: block;
}

@media screen and (min-width: 1000px) {
  .content-tabs::part(tab-list) {
    gap: 4.375rem;
    margin-block-end: 2rem;
  }
}

.constrained-image {
  width: var(--image-mobile-max-width, var(--image-max-width));
  max-width: 100%;
}

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

.text-with-icon {
  align-items: center;
  gap: .625rem;
  display: flex;
}

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

.icon {
  vertical-align: middle;
  height: auto;
  transition: transform .2s;
  display: block;
}

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

[dir="rtl"] .icon--direction-aware {
  scale: -1;
}

.offset-icon {
  --icon-baseline-distance: calc(1em * 1.65 / 2);
  top: var(--icon-baseline-distance);
  position: relative;
  translate: 0 -50%;
}

@supports (top: 1lh) {
  .offset-icon {
    top: .5lh;
  }
}

.price-list {
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  display: flex;
}

.price-list--product {
  column-gap: 1rem;
}

.localization-selectors {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.75rem;
  display: flex;
}

.localization-selectors__separator {
  background: rgb(var(--border-color));
  width: 1px;
  height: .5rem;
}

.localization-selectors__separator:last-child {
  display: none;
}

.localization-toggle {
  vertical-align: middle;
  align-items: center;
  column-gap: .625rem;
  display: inline-flex;
}

.localization-toggle > svg {
  transition: transform .2s;
}

.localization-toggle[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.country-flag {
  width: 20px;
  height: 15px;
}

.payment-methods {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.badge {
  width: max-content;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  align-items: center;
  padding: .0625rem .3125rem;
  font-size: .625rem;
  display: flex;
}

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

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

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

@media screen and (min-width: 700px) {
  .badge {
    font-size: .6875rem;
  }
}

.badge-list {
  flex-wrap: wrap;
  gap: .25rem;
  display: flex;
}

.badge-list--vertical {
  flex-direction: column;
}

.feature-badge {
  font-size: var(--text-xs);
  align-items: center;
  column-gap: .5rem;
  padding: .375rem .5rem;
  display: inline-flex;
}

.feature-badge :is(svg, img) {
  flex-shrink: 0;
}

.feature-badge-list {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.rating-badge {
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;
  line-height: normal;
  display: flex;
}

.rating-badge__stars {
  column-gap: .125rem;
  display: flex;
  position: relative;
  top: -.5px;
}

@media (pointer: fine) {
  .is-scrollable[allow-drag] {
    cursor: grab;
  }

  .is-scrollable[allow-drag]:active {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}

.text-with-rating {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem .5rem;
  display: flex;
}

.inventory {
  row-gap: .5rem;
  font-style: italic;
  display: grid;
}

.progress-bar {
  background: rgb(var(--text-color) / .1);
  height: 2px;
  display: block;
  position: relative;
}

.progress-bar:before {
  content: "";
  width: 100%;
  height: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  transition: transform .45s ease-in-out;
  display: block;
}

[data-tooltip] {
  --tooltip-text-color: var(--text-color);
  --tooltip-background: var(--background);
  position: relative;
}

@media screen and (pointer: fine) {
  [data-tooltip]:after {
    content: attr(data-tooltip);
    inset-block-end: calc(100% + var(--tooltip-offset, .5rem));
    border-radius: min(1.5rem, var(--button-border-radius));
    background: rgb(var(--tooltip-text-color));
    width: max-content;
    max-width: 15rem;
    color: rgb(var(--tooltip-background));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    justify-self: center;
    padding: .125rem .5rem;
    font-size: .6875rem;
    transition: opacity .1s ease-in-out, visibility .1s ease-in-out, scale .1s ease-in-out;
    position: absolute;
    left: 50%;
    translate: -50%;
    scale: .9;
  }

  [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
    scale: 1;
  }
}

.separator-dot {
  --dot-size: .25rem;
  width: var(--dot-size);
  height: var(--dot-size);
  background: currentColor;
  border-radius: 100%;
}

.animated-plus {
  --animated-plus-size: .625rem;
  width: var(--animated-plus-size);
  height: var(--animated-plus-size);
  display: block;
  position: relative;
}

.animated-plus:before, .animated-plus:after {
  content: "";
  background-color: currentColor;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-90deg);
}

.animated-plus:before {
  width: var(--animated-plus-size);
  opacity: 1;
  height: 1px;
}

.animated-plus:after {
  width: 1px;
  height: var(--animated-plus-size);
}

.group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before {
  opacity: 0;
}

.group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:before, .group[aria-expanded="true"] .animated-plus.group-expanded\:rotate:after {
  transform: translate(-50%, -50%)rotate(90deg);
}

@media (pointer: fine) {
  .is-scrollable[allow-drag] {
    cursor: grab;
  }

  .is-scrollable[allow-drag]:active {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-type: none;
  }
}

@media screen and (min-width: 700px) {
  .play-button svg {
    width: 5rem;
    height: 5rem;
  }
}

.quantity-selector {
  --quantity-selector-height: 2.4rem;
  --quantity-selector-input-width: 2.5rem;
  --tooltip-offset: calc(-1 * var(--quantity-selector-height) / 2 + 1rem);
  grid-template-columns: var(--quantity-selector-height) auto var(--quantity-selector-height);
  grid-auto-rows: var(--quantity-selector-height);
  border-width: 1px;
  align-items: center;
  display: inline-grid;
}

.quantity-selector:focus-within:has(:focus-visible) {
  border-color: currentColor;
}

.quantity-selector__button {
  place-content: center;
  min-height: 100%;
  display: grid;
}

.quantity-selector__button svg {
  transition: opacity .2s;
}

.quantity-selector__button[disabled] svg, .quantity-selector__button:hover svg {
  opacity: .65;
}

.quantity-selector__input-wrapper {
  place-items: center;
  display: grid;
}

.quantity-selector__input-wrapper > * {
  grid-area: 1 / -1;
}

.quantity-selector__input {
  -webkit-appearance: textfield;
  appearance: textfield;
  min-width: var(--quantity-selector-input-width);
  width: var(--quantity-selector-character-count, 1ch);
  text-align: center;
  background: none;
  transition: opacity .2s ease-in-out .2s;
}

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

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

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

@media screen and (min-width: 700px) {
  .quantity-selector {
    --quantity-selector-height: 2.7rem;
  }
}

.quantity-selector--sm {
  --quantity-selector-height: 2.2rem;
  --quantity-selector-input-width: 2rem;
}

@keyframes quantitySelectorSpinner {
  0% {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
    transform: rotate(0);
  }

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

  100% {
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
    transform: rotate(720deg);
  }
}

.quantity-selector__spinner {
  transform-origin: center;
  opacity: 0;
  transition: opacity .2s ease-in-out, translate .2s ease-in-out, display .2s ease-in-out allow-discrete;
  animation: 2.5s cubic-bezier(.4, 0, .6, 1) infinite quantitySelectorSpinner;
  display: none;
  translate: 0 4px;
}

.quantity-selector__input-wrapper[aria-busy="true"] .quantity-selector__spinner {
  opacity: 1;
  display: block;
  translate: none;
}

@starting-style {
  .quantity-selector__input-wrapper[aria-busy="true"] .quantity-selector__spinner {
    opacity: 0;
    translate: 0 4px;
  }
}

.quantity-selector__input-wrapper[aria-busy="true"] .quantity-selector__input {
  opacity: 0;
  transition-delay: 0s;
}

.breadcrumb {
  display: none;
}

.breadcrumb__list {
  align-items: center;
  column-gap: .5rem;
  line-height: 1;
  display: flex;
}

.breadcrumb__list-item + .breadcrumb__list-item:before {
  content: "/";
  color: rgb(var(--text-color) / .65);
  margin-inline-end: .375rem;
  font-size: .625rem;
  display: inline-block;
}

@media screen and (min-width: 1000px) {
  .breadcrumb {
    display: block;
  }
}

.breadcrumb--floating {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: var(--container-gutter);
}

.bordered-box {
  border-width: 1px;
  padding: 2.5rem 1.25rem 1.25rem;
  position: relative;
}

.bordered-box__title {
  inset-block-start: 0;
  text-align: center;
  background: rgb(var(--background));
  width: max-content;
  padding-inline: .5rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 1000px) {
  .bordered-box {
    padding: 3rem;
  }
}

.loading-bar {
  z-index: 2000;
  pointer-events: none;
  mix-blend-mode: exclusion;
  width: 100%;
  height: 2px;
  transform-origin: var(--transform-origin-start);
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

@media screen and (min-width: 700px) {
  .loading-bar {
    height: 3px;
  }
}

@keyframes animateCircularProgress {
  from {
    stroke-dashoffset: var(--stroke-dasharray);
  }

  to {
    stroke-dashoffset: 0;
  }
}

.circular-progress {
  transition: opacity .25s;
  transform: rotate(-90deg);
}

.circular-progress circle:last-child {
  stroke-dasharray: var(--stroke-dasharray);
  stroke-dashoffset: var(--stroke-dasharray);
}

@media (prefers-reduced-motion: no-preference) {
  image-parallax img {
    transform: scale(1.3)translateY(-11.5385%);
  }
}

.scroll-margin-offset {
  scroll-margin-block-start: 20px;
}

.share-buttons {
  align-items: center;
  gap: .875rem;
  display: flex;
}

.share-buttons .social-media {
  --social-media-icon-size: 1rem;
  --social-media-list-gap: .75rem;
}

.share-buttons--native:not([hidden]) + .share-buttons {
  display: none;
}

product-rerender {
  display: contents;
}

.customer-account-box {
  min-height: calc(100vh - var(--section-vertical-spacing) * 2 - var(--announcement-bar-height, 0px)  - var(--header-height, 0px));
  text-align: center;
  align-items: center;
  display: grid;
}

.customer-account-category {
  border-block-end-width: 1px;
  padding-block-end: .625rem;
}

.customer-account-overview {
  grid-gap: 2.5rem 3rem;
  display: grid;
}

.customer-account-order-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  display: grid;
}

@media screen and (min-width: 1000px) {
  .customer-account-overview {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}

@media screen and (min-width: 1150px) {
  .customer-account-overview {
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: 3.75rem;
  }
}

.customer-address-list {
  --addresses-per-row: 1;
  grid-template-columns: repeat(var(--addresses-per-row), minmax(0, 1fr));
  gap: 3rem 3.75rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .customer-address-list {
    --addresses-per-row: 2;
  }
}

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

.customer-order {
  grid: auto / minmax(0, 1fr);
  gap: 3rem;
  display: grid;
}

.customer-order__details {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3rem;
  display: grid;
}

.customer-order__address-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-content: start;
  gap: 2.5rem 3.75rem;
  display: grid;
}

@media screen and (min-width: 1150px) {
  .customer-order {
    grid: auto / auto-flow minmax(0, 1fr) 14rem;
    column-gap: 3.75rem;
  }
}

@media screen and (min-width: 1400px) {
  .customer-order {
    grid-auto-columns: minmax(0, 1fr) 18rem;
  }
}

.announcement-bar {
  --announcement-bar-gutter: .625rem;
  text-align: center;
  font-size: var(--announcement-bar-font-size);
  place-content: center;
  column-gap: .75rem;
  padding-block: 1em;
  padding-inline-start: max(var(--announcement-bar-gutter), 50% - var(--container-max-width) / 2);
  padding-inline-end: max(var(--announcement-bar-gutter), 50% - var(--container-max-width) / 2);
  display: flex;
}

.announcement-bar__carousel {
  flex-grow: 1;
  place-items: center;
  max-width: 35rem;
  display: grid;
}

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

.announcement-bar__carousel > :not(.is-selected) {
  visibility: hidden;
}

@media screen and (min-width: 700px) {
  .announcement-bar {
    --announcement-bar-gutter: var(--container-gutter);
    justify-content: center;
    column-gap: 2.5rem;
  }
}

.before-after {
  --before-after-content-inset-inline: 1.25rem;
  --before-after-content-inset-block: 1rem;
  --before-after-cursor-size: 3.125rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  display: grid;
  position: relative;
}

.before-after > * {
  grid-area: 1 / -1;
}

.before-after__after-image {
  z-index: 1;
}

.before-after__content-wrapper {
  position: absolute;
}

.before-after__cursor {
  pointer-events: auto;
  filter: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 1px 1px #0000000d);
  z-index: 1;
  display: grid;
  position: relative;
}

.before-after__cursor:before {
  content: "";
  background: rgb(var(--before-after-cursor-background));
  z-index: -1;
  position: absolute;
}

.before-after__cursor svg {
  width: var(--before-after-cursor-size);
  height: var(--before-after-cursor-size);
}

.before-after--horizontal {
  cursor: ew-resize;
}

.before-after--horizontal .before-after__after-image {
  clip-path: inset(0 0 0 var(--before-after-cursor-position, 0%));
}

[dir="rtl"] :is(.before-after--horizontal .before-after__after-image) {
  clip-path: inset(0 var(--before-after-cursor-position, 0%) 0 0);
}

.before-after--horizontal .before-after__before-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--horizontal .before-after__after-image .before-after__content-wrapper {
  text-align: end;
  justify-items: end;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-end: var(--before-after-content-inset-inline);
}

.before-after--horizontal .before-after__cursor {
  justify-self: start;
  place-items: center start;
  inset-inline-start: calc(var(--before-after-cursor-position, 0%)  - var(--before-after-cursor-size) / 2);
}

.before-after--horizontal .before-after__cursor:before {
  width: .125rem;
  height: 100%;
  inset-inline-start: calc(var(--before-after-cursor-size) / 2);
}

.before-after--vertical {
  cursor: ns-resize;
}

.before-after--vertical .before-after__after-image {
  clip-path: inset(var(--before-after-cursor-position, 0%) 0 0 0);
}

.before-after--vertical .before-after__before-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-start: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--vertical .before-after__after-image .before-after__content-wrapper {
  justify-items: start;
  inset-block-end: var(--before-after-content-inset-block);
  inset-inline-start: var(--before-after-content-inset-inline);
}

.before-after--vertical .before-after__cursor {
  align-self: start;
  place-items: start center;
  inset-block-start: calc(var(--before-after-cursor-position, 0%)  - var(--before-after-cursor-size) / 2);
}

.before-after--vertical .before-after__cursor:before {
  width: 100%;
  height: .125rem;
  inset-block-start: calc(var(--before-after-cursor-size) / 2);
}

@media screen and (max-width: 699px) {
  .before-after {
    --before-after-cursor-size: 2.5rem;
  }

  .before-after .button {
    padding: .45rem 1.5rem;
  }
}

@media screen and (min-width: 700px) {
  .before-after {
    --before-after-content-inset-inline: 2.5rem;
    --before-after-content-inset-block: 2rem;
  }

  .before-after__content-wrapper:has(.button) {
    --before-after-content-inset-block: 2.5rem;
  }
}

.blog-tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  display: flex;
}

.article {
  --article-wrapper-offset: 0px;
  --article-wrapper-padding-inline: 0px;
  padding-block-end: var(--section-vertical-spacing);
}

.article__toolbar {
  visibility: hidden;
  z-index: 1;
  width: 100vw;
  padding-block: 1rem;
  transition: transform .2s, visibility .2s, inset-block-start .15s ease-in-out;
  position: fixed;
  inset-block-start: var(--sticky-area-height);
  transform: translateY(-100%);
}

.article__toolbar.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.article__toolbar .social-media {
  gap: .75rem 1rem;
}

.article__toolbar .social-media svg {
  width: 1rem;
  height: 1rem;
}

.article__image {
  overflow: hidden;
}

.article__image img {
  height: var(--article-image-height);
  object-fit: cover;
}

.article__wrapper {
  padding: 1.5rem var(--article-wrapper-padding-inline) 0;
  background: rgb(var(--background));
  gap: 5rem;
  margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2 - var(--article-wrapper-padding-inline));
  margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2 - var(--article-wrapper-padding-inline));
  display: grid;
  position: relative;
}

.article__image + .article__wrapper {
  margin-block-start: var(--article-wrapper-offset);
}

.article__comments {
  gap: inherit;
  scroll-margin-block-start: calc(var(--sticky-area-height)  + 20px);
  display: grid;
}

.article__author {
  border-block-width: 1px;
  align-items: center;
  column-gap: 1rem;
  padding-block: 1.5rem;
  display: flex;
}

.article__author-image {
  border-radius: 100%;
  flex-shrink: 0;
  align-self: start;
  width: 3.75rem;
}

.article__footer-bottom {
  gap: 2.5rem;
  display: grid;
}

.article__author + .article__footer-bottom {
  margin-block-start: 1.75rem;
}

@media screen and (min-width: 700px) {
  .article {
    --article-wrapper-offset: -2.75rem;
    --article-wrapper-padding-inline: 3.125rem;
  }

  .article__wrapper {
    gap: 6.25rem;
    padding-block-start: 2.5rem;
  }

  .article__footer-bottom {
    grid: auto / auto-flow minmax(0, 1fr);
    align-items: center;
  }
}

@media screen and (min-width: 1000px) {
  .article {
    --article-wrapper-offset: -4.375rem;
  }
}

.comment {
  gap: 1.125rem;
  display: grid;
}

.comment:not(:first-child) {
  padding-block-start: 2rem;
}

.cart-page {
  align-items: start;
  row-gap: max(4rem, var(--section-vertical-spacing-tight));
  display: grid;
}

.cart-footer {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.cart-recap {
  gap: .5rem;
  display: grid;
}

.cart-recap [type="submit"] {
  margin-block-start: 1rem;
}

@media screen and (min-width: 700px) {
  .cart-footer {
    flex-direction: row;
    gap: 3rem;
  }

  .cart-footer > :not(:only-child) {
    width: min(24rem, 100%);
  }

  .cart-recap {
    text-align: end;
    justify-items: end;
    margin-inline-start: auto;
  }
}

@media screen and (min-width: 1000px) {
  .cart-page {
    row-gap: max(6rem, var(--section-vertical-spacing-tight));
  }
}

.cart-discount-field__loader {
  display: none;
  position: absolute;
  inset-block-start: calc(50% - .375rem);
  inset-inline-end: 1rem;
}

.cart-discount-field[aria-busy="true"] .cart-discount-field__loader {
  animation: 1s linear infinite spin;
  display: block;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.cart-drawer::part(body) {
  padding-block: 0;
}

:is(.cart-drawer:has(.cart-drawer__order-note[open])::part(header), .cart-drawer:has(.cart-drawer__order-note[open])::part(body)) {
  opacity: .4;
  pointer-events: none;
  transition: opacity .2s;
}

.cart-drawer:not(:has(.cart-drawer__footer:only-child))::part(footer) {
  padding-block-start: calc(var(--drawer-footer-padding-block)  - .5rem);
}

.cart-drawer .free-shipping-bar {
  font-size: var(--text-sm);
  border-block-end-width: 1px;
  margin-inline-start: calc(-1 * var(--drawer-body-padding-inline));
  margin-inline-end: calc(-1 * var(--drawer-body-padding-inline));
  padding-block: .5rem;
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
}

.cart-drawer__items {
  gap: 1.5rem;
  padding-block-start: var(--drawer-body-padding-block);
  padding-block-end: var(--drawer-body-padding-block);
  display: grid;
}

.cart-drawer__complementary-products {
  padding-inline: var(--drawer-body-padding-inline);
  border-block-start-width: 1px;
  padding-block: 1.25rem;
  margin-inline: calc(-1 * var(--drawer-body-padding-inline)) !important;
  row-gap: 1.25rem !important;
}

.cart-drawer__button-price {
  align-items: center;
  display: flex;
}

.cart-drawer__button-price:before {
  content: "";
  background: currentColor;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  margin-inline-end: 1.125rem;
}

.cart-drawer__footer {
  align-items: start;
  gap: 1rem;
  display: grid;
}

.cart-drawer__order-note {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  width: 100%;
  box-shadow: 1px 0 6px rgb(var(--border-color));
  z-index: 2;
  border-block-start-width: 1px;
  padding-block-start: calc(var(--drawer-footer-padding-block)  - .5rem);
  padding-block-end: var(--drawer-footer-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  display: none;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
}

@media screen and (min-width: 700px) {
  .cart-drawer__complementary-products {
    padding-block: 2rem;
    row-gap: 1rem !important;
  }
}

.collection-banner {
  display: block;
  position: relative;
}

.collection-banner .breadcrumb {
  z-index: 2;
}

.collection {
  --collection-gap: 2rem;
  --collection-grid-template: minmax(0, 1fr);
  --collection-sidebar-width: 15rem;
  grid-template-columns: var(--collection-grid-template);
  align-items: start;
  gap: var(--collection-gap);
  margin-block-end: var(--section-vertical-spacing);
  scroll-margin-block-start: calc(var(--collection-toolbar-height, 0px)  + 20px);
  display: grid;
}

.collection:only-child {
  margin-block-start: 1.5rem;
}

.collection__main {
  row-gap: var(--section-stack-gap);
  display: grid;
}

.collection .product-list[collection-mobile-layout="medium"] {
  --product-list-items-per-row: var(--collection-items-per-row-medium);
}

.collection .product-list[collection-mobile-layout="large"] {
  --product-list-items-per-row: var(--collection-items-per-row-large);
}

@media screen and (min-width: 700px) {
  .collection:only-child {
    margin-block-start: 3rem;
  }

  .collection .product-list[collection-desktop-layout="compact"] {
    --product-list-items-per-row: var(--collection-items-per-row-compact);
  }

  .collection .product-list[collection-desktop-layout="compact"] .product-card__info {
    display: none;
  }

  .collection .product-list[collection-desktop-layout="medium"] {
    --product-list-items-per-row: var(--collection-items-per-row-medium);
  }

  .collection .product-list[collection-desktop-layout="large"] {
    --product-list-items-per-row: var(--collection-items-per-row-large);
  }
}

@media screen and (min-width: 1150px) {
  .collection {
    --collection-gap: 3.125rem;
  }
}

.collection-toolbar {
  min-height: 3em;
  box-shadow: 0 1px rgb(var(--border-color)), 0 -1px rgb(var(--border-color));
  background-color: rgb(var(--background));
  reading-flow: flex-visual;
  z-index: 2;
  transition: inset-block-start .15s ease-in-out;
  display: flex;
  position: sticky;
  inset-block-start: var(--sticky-area-height);
  inset-inline-start: 0;
}

.collection-toolbar .popover {
  --popover-block-offset: 0px;
  inset-inline-end: -1px;
}

.collection-toolbar__button-list {
  reading-flow: flex-visual;
  flex-grow: 1;
  display: flex;
}

.collection-toolbar__button {
  padding-block: .75rem;
}

.collection-toolbar__button :is(svg) {
  transition: transform .2s;
}

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

.collection-toolbar__button-container {
  width: 100%;
  position: relative;
}

.collection-toolbar__button-container + .collection-toolbar__button-container {
  border-inline-start-width: 1px;
}

.collection-toolbar__layout-switch-list {
  border-inline-start-width: 1px;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.25rem;
  display: flex;
}

.collection-toolbar__button {
  opacity: .5;
  transition: opacity .2s;
}

.collection-toolbar__button:hover, .collection-toolbar__button.is-active {
  opacity: 1;
}

@media screen and (min-width: 700px) {
  .collection-toolbar {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .collection-toolbar__button {
    padding-block: 1.125rem;
  }

  .collection-toolbar__button-list {
    flex-direction: row-reverse;
    flex: none;
  }

  .collection-toolbar__button-container {
    border-inline-start-width: 1px;
  }

  .collection-toolbar__button-container > .collection-toolbar__button {
    width: max-content;
    padding-inline: 2.875rem;
  }

  .collection-toolbar__layout-switch-list {
    border-inline-width: 0 1px;
    padding-inline: 1.875rem;
  }

  .collection-toolbar__products-count {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }
}

.facets .accordion-list .accordion:first-child {
  border-block-start-width: 0;
}

.facets .accordion-list .accordion:first-child .accordion__toggle {
  padding-block-start: 0;
}

.facets .accordion-list .accordion:last-child {
  border-block-end-width: 0;
}

.facets .accordion-list .accordion:last-child .accordion__content {
  padding-block-end: 0;
}

.active-facets {
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  display: flex;
}

.removable-facet {
  font-size: var(--text-sm);
  border-width: 1px;
  align-items: center;
  column-gap: .375rem;
  padding: .375rem .625rem;
  display: flex;
}

.facets-clear-all {
  margin-inline-start: .625rem;
}

@media screen and (min-width: 700px) {
  .removable-facet {
    font-size: var(--text-base);
    column-gap: .625rem;
    padding: .625rem .875rem;
  }
}

@media screen and (min-width: 1000px) {
  .facets-sidebar {
    top: calc(var(--sticky-area-height)  + var(--collection-toolbar-height, 0px)  + 20px);
    width: var(--collection-sidebar-width);
    grid-column-end: -2;
    display: block;
    position: sticky;
  }
}

.collection-list {
  gap: var(--collection-list-gap, 0px);
  display: flex;
}

.collection-list .collection-card {
  flex-basis: var(--collection-list-item-size, calc(100% / var(--collection-list-items-per-row)  - var(--collection-list-gap, 0px) * (var(--collection-list-items-per-row)  - 1) / var(--collection-list-items-per-row)));
}

.collection-list--text-outside {
  row-gap: 3rem;
}

.collection-card {
  align-content: start;
  gap: 1.5rem;
  display: grid;
}

.countdown {
  gap: var(--section-stack-gap);
  display: grid;
}

.countdown__timer {
  text-transform: uppercase;
  text-align: center;
  grid: auto / auto-flow minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  display: grid;
}

.countdown__timer-item {
  display: grid;
}

.countdown__timer-flip {
  --heading-letter-spacing: 0;
  justify-content: center;
  column-gap: 2px;
  display: flex;
}

.countdown__timer-flip::part(digit) {
  color: rgb(var(--countdown-timer-flip-text-color));
}

.countdown__timer-flip--background::part(digit) {
  background: rgb(var(--countdown-timer-flip-background));
  border-radius: .25rem;
  padding: .375rem .5rem;
}

@media screen and (max-width: 699px) {
  .countdown__content {
    text-align: center;
  }

  .countdown__timer {
    justify-content: center;
  }
}

@media screen and (min-width: 700px) {
  .countdown {
    grid-template-columns: minmax(250px, 570px) max-content;
    justify-content: space-between;
    gap: 4rem;
    width: 100%;
  }

  .countdown__timer-item {
    row-gap: .5rem;
  }

  .countdown--reverse {
    grid-template-columns: max-content minmax(250px, 570px);
  }

  .countdown--reverse .countdown__timer {
    order: -1;
  }
}

@media screen and (min-width: 1000px) {
  .countdown__timer {
    column-gap: 1rem;
  }
}

.countdown-condensed {
  column-gap: 2.25rem;
  justify-content: var(--countdown-condensed-justify-content, space-between);
  padding: 1rem var(--container-gutter);
  display: flex;
}

.countdown-condensed__text {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  display: flex;
}

.countdown-condensed__timer {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
  align-items: center;
  column-gap: .25rem;
  display: flex;
}

.countdown-condensed__timer-item {
  display: grid;
}

.countdown-condensed__timer-flip {
  font-size: .625rem;
  font-weight: bolder;
}

.countdown-condensed__timer-unit {
  font-size: .5rem;
}

@media screen and (max-width: 699px) {
  .countdown-condensed .h6 {
    font-size: .625rem;
  }
}

@media screen and (min-width: 700px) {
  .countdown-condensed {
    column-gap: 5rem;
  }

  .countdown-condensed__timer {
    column-gap: .75rem;
  }

  .countdown-condensed__timer-flip {
    font-size: .75rem;
  }

  .countdown-condensed__timer-unit {
    font-size: .625rem;
  }
}

.footer {
  background: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  padding-block-start: var(--section-vertical-spacing);
  padding-block-end: min(var(--section-vertical-spacing), 3rem);
}

.footer__inner {
  row-gap: min(var(--section-vertical-spacing), 3rem);
  display: grid;
}

.footer__block-list {
  justify-content: start;
  align-items: start;
  gap: min(var(--section-vertical-spacing), 2.5rem);
  display: grid;
}

.footer__aside {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  display: grid;
}

.footer__aside .payment-methods {
  justify-content: center;
  max-width: 30rem;
}

@media screen and (min-width: 700px) {
  .footer__block-list {
    justify-content: var(--footer-content-justify-items);
    flex-wrap: wrap;
    gap: 56px;
      display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  .footer__block {
    flex: auto;
  }

  .footer__block--links, .footer__block--image {
    flex-grow: 0;
    max-width: 14rem;
  }

  .footer__block--newsletter, .footer__block--app {
    flex-basis: 14rem;
    max-width: 18rem;
  }

  .footer__block--text {
    flex-basis: 14rem;
    /* max-width: 24rem; */
  }
}

@media screen and (min-width: 1000px) {
  .footer__aside {
    grid-auto-flow: column;
    justify-content: space-between;
  }

  .footer__aside .payment-methods {
    justify-content: end;
  }
}

@media screen and (min-width: 1150px) {
  .footer__block-list {
    justify-content: var(--footer-content-justify-items);
    column-gap: 3.75rem;
  }
}

@media screen and (min-width: 1400px) {
  .footer__block-list {
    column-gap: 56px;
  }
}

.gift-card__image {
  max-width: 16.875rem;
  margin-inline: auto;
}

.gift-card__redeem-info {
  padding: 1.5rem;
}

.gift-card__save {
  place-items: center;
  gap: 1.5rem;
  display: grid;
}

.gift-card__qr-code {
  width: 5rem;
  height: 5rem;
}

@media screen and (min-width: 700px) {
  .gift-card__redeem-info {
    padding: 2rem;
  }

  .gift-card__save {
    grid-auto-flow: column;
  }
}

/* .faq {
  justify-content: center;
  align-items: start;
  column-gap: 3.75rem;
  display: flex;
} */

.faq__toc {
  align-content: start;
  justify-items: start;
  gap: .75rem;
  min-width: 150px;
  max-width: 300px;
  transition: inset-block-start .15s ease-in-out;
  display: grid;
  position: sticky;
  inset-block-start: calc(var(--sticky-area-height)  + 1.25rem);
}

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

.faq__toc-item.is-active {
  background-size: 100% 1px;
}

.faq__content {
  flex-basis: 650px;
}

.faq__category {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  scroll-margin-block-start: 1.25rem;
  display: flex;
}

.faq__category + .accordion {
  margin-block-start: 1.25rem;
}

.accordion + .faq__category {
  margin-block-start: 3rem;
}

.featured-collections-navigation {
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  justify-content: safe center;
  column-gap: 1.5rem;
  display: grid;
}

.featured-collections-navigation > button:not(:only-child) {
  padding-block-end: 2px;
  position: relative;
}

.featured-collections-navigation > button:not(:only-child):after {
  content: "";
  width: calc(100% - var(--heading-letter-spacing));
  height: 1px;
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  transition: transform .3s;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  transform: scaleX(0);
}

.featured-collections-navigation > button:not(:only-child)[aria-current="true"]:after {
  transform: scaleX(1);
}

@media screen and (min-width: 700px) {
  .featured-collections-navigation {
    column-gap: 2.5rem;
  }
}

.featured-collections-carousel {
  display: grid;
  position: relative;
}

.featured-collections-carousel > * {
  grid-area: 1 / -1;
}

.featured-collections-carousel__item {
  gap: var(--section-stack-gap);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.featured-collections-carousel__item:not(.is-selected) {
  display: none;
}

.header {
  --header-show-transparent-logo: 0;
  grid: var(--header-grid);
  justify-content: center;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: var(--header-padding-block);
  box-shadow: 0 -1px rgb(var(--header-separation-border-color)) inset;
  reading-flow: grid-columns;
  padding-block-start: var(--header-padding-block);
  padding-block-end: var(--header-padding-block);
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
  transition: background .2s, color .2s, border .2s, box-shadow .2s, transform .15s ease-in-out;
  display: grid;
  position: relative;
}

.header.is-hidden {
  transform: translateY(-100%);
}

.shopify-section--header:has(.header.is-hidden) {
  pointer-events: none;
}

:has(.shopify-section:first-child [allow-transparent-header]):not(:has(.shopify-section--header ~ .shopify-section-group-header-group)) .header {
  margin-block-end: calc(-1 * var(--header-height, 0px));
}

:has(.shopify-section:first-child [allow-transparent-header]):not(:has(.shopify-section--header ~ .shopify-section-group-header-group)) .header:not(:hover, .is-solid, :has(.header__primary-nav [open], .header__secondary-nav [open], .header-search[open])) {
  --header-show-transparent-logo: 1;
  --header-separation-border-color: 0 0 0 / 0;
  --background: 0 0 0 / 0;
  --background-gradient: 0 0 0 / 0;
  --border-color: 0 0 0 / 0;
  --text-color: var(--header-transparent-header-text-color);
}

:has(.shopify-section:first-child [allow-transparent-header]):not(:has(.shopify-section--header ~ .shopify-section-group-header-group)) .header:not(:hover, .is-solid, :has(.header__primary-nav [open], .header__secondary-nav [open], .header-search[open])) .link-faded {
  color: currentColor;
  transition: none;
}

.header__cart-dot {
  width: .5rem;
  height: .5rem;
  box-shadow: 0 0 0 2px rgb(var(--background));
  background-color: currentColor;
  border-radius: 100%;
  transition: transform .2s ease-in-out;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -.125rem;
  transform: scale(0);
}

.header__cart-dot.is-visible {
  transform: scale(1);
}

@media screen and (min-width: 700px) {
  .header {
    column-gap: 2.5rem;
  }
}

.header__logo {
  grid-area: logo;
  justify-self: start;
  position: relative;
}

.header__logo-image {
  width: var(--header-logo-width);
  max-width: 100%;
  height: auto;
}

.header__logo-image:where(:not(:only-of-type)) {
  opacity: calc(1 - var(--header-show-transparent-logo));
  transition: opacity .2s;
}

.header__logo-image--transparent {
  opacity: var(--header-show-transparent-logo);
  pointer-events: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.header__logo-text {
  display: block;
}

.header__primary-nav {
  flex-wrap: wrap;
  grid-area: primary-nav;
  align-items: center;
  gap: .625rem 1.25rem;
  display: flex;
}

.header__primary-nav-item [data-title]:before {
  content: attr(data-title);
  width: max-content;
  height: 2px;
  transform-origin: var(--transform-origin-start);
  /* Same colour as the menu item's own text (.header__primary-nav-item a,
     below) - not Prestige's default gold accent. */
  background: #172033;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #0000;
  pointer-events: none;
  transition: transform .2s ease-in-out;
  position: absolute;
  inset-block-end: 0;
  transform: scaleX(0);
}

.header__primary-nav-item [data-title]:hover:before {
  transform: scaleX(1);
}

.header__primary-nav-item [data-title]:has(.header__dropdown-menu):before {
  display: none;
}

@media screen and (max-width: 699px) {
  .header__nav-icon {
    width: 1.375rem;
  }
}

@media screen and (min-width: 1000px) {
  .header__primary-nav--center {
    justify-content: safe center;
  }
}

@media screen and (min-width: 1150px) {
  .header__primary-nav {
    column-gap: 32px;
  }
}

.header__secondary-nav {
  flex-wrap: wrap;
  grid-area: secondary-nav;
  justify-content: end;
  justify-self: end;
  align-items: center;
  gap: .625rem .9rem;
  display: flex;
}

.header__secondary-nav .localization-selectors:not(:only-child) {
  margin-inline-end: .625rem;
}

@media screen and (min-width: 700px) {
  .header__secondary-nav {
    column-gap: 1.25rem;
  }
}

shopify-account {
  --shopify-account-font-heading: var(--heading-font-family);
  --shopify-account-font-heading-weight: var(--heading-font-weight);
  --shopify-account-font-body: var(--text-font-family);
  --shopify-account-font-body-weight: var(--text-font-weight);
  --shopify-account-radius-button: var(--button-border-radius);
  --shopify-account-radius-input: var(--input-border-radius);
  --shopify-account-radius-dialog: 0;
  --shopify-account-color-background: rgb(var(--modal-scheme-background));
  --shopify-account-color-text: rgb(var(--modal-scheme-text-color));
  --shopify-account-signed-in-avatar-color-background: rgb(var(--text-color));
  --shopify-account-signed-in-avatar-color-text: rgb(from rgb(var(--text-color)) calc(255 - r) calc(255 - g) calc(255 - b));
  --shopify-account-signed-in-avatar-size: 24px;
  color: inherit;
  display: block;
}

shopify-account::part(signed-out-avatar) {
  min-width: 0;
  min-height: 0;
  line-height: 1.7;
}

.header__dropdown-menu {
  background: rgb(var(--background));
  width: max-content;
  min-width: 12.5rem;
  max-width: 17.5rem;
  color: rgb(var(--text-color));
  box-shadow: 2px 2px 6px rgb(var(--text-color) / .05);
  border-width: 0 1px 1px;
  padding-block: 1.125rem;
  position: absolute;
  inset-block-start: calc(100% - 2px);
}

.header__dropdown-menu:not(:has(.header__dropdown-menu)) {
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 20px);
  overflow: auto;
}

.header__dropdown-menu:before {
  content: "";
  width: 100%;
  height: 2px;
  transform-origin: var(--transform-origin-start);
  background: rgb(var(--text-color));
  transition: transform .25s ease-in-out 50ms;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: scaleX(0);
}

[aria-expanded="true"] > .header__dropdown-menu:before {
  transform: scaleX(1);
}

.header__dropdown-menu :is(a, summary) {
  padding: .375rem 1.5625rem;
  display: block;
}

.header__dropdown-menu .header__menu-disclosure {
  position: relative;
}

.header__dropdown-menu--restrictable {
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 40px);
  overflow-y: auto;
}

.header__dropdown-menu .header__dropdown-menu {
  border-width: 1px;
  inset-block-start: calc(-1.125rem - 1px);
  inset-inline-start: 100%;
}

.header__dropdown-menu .header__dropdown-menu:before {
  display: none;
}

.header-search {
  z-index: -1;
  width: 100%;
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
}

.header-search::part(overlay) {
  min-height: calc(100vh - var(--sticky-area-height));
  inset-block-start: var(--sticky-area-height);
}

.header-search::part(content) {
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 1.25rem);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  overflow: auto;
}

@supports (max-height: 100dvh) {
  .header-search::part(content) {
    max-height: min(var(--header-search-max-height, 100vh), 100dvh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 1.25rem);
  }
}

.header-search__form-control {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  padding-block: .75rem;
  display: grid;
}

.header-search__input {
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

.header-search__input:focus {
  outline: none;
}

.header-search__input::-webkit-search-decoration {
  display: none;
}

.header-search__input::-webkit-search-cancel-button {
  display: none;
}

.header-search__input::-webkit-search-results-button {
  display: none;
}

.header-search__input::-webkit-search-results-decoration {
  display: none;
}

@media screen and (min-width: 700px) {
  .header-search__form-control {
    column-gap: 1.25rem;
    padding-block: 1.5rem;
  }
}

.predictive-search {
  display: block;
}

.predictive-search__no-results {
  text-align: center;
  padding-block: 2.5rem 4rem;
}

.predictive-search__results {
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: 1.25rem 2rem;
  display: grid;
}

.predictive-search__suggestions {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: .75rem 1.5rem;
  display: grid;
}

.predictive-search__suggestions mark {
  background: none;
  font-weight: bolder;
}

.predictive-search__tabs::part(tab-list-scrollable) {
  scrollbar-width: none;
  margin-inline-start: calc(-1 * var(--distance-to-bleed));
  margin-inline-end: calc(-1 * var(--distance-to-bleed));
  padding-inline-start: var(--distance-to-bleed);
  padding-inline-end: var(--distance-to-bleed);
  display: flex;
  overflow: auto;
}

.predictive-search__tabs::part(tab-list) {
  width: min-content;
  min-width: 100%;
}

.predictive-search__category {
  border-block-end-width: 1px;
  padding-block-end: .625rem;
}

.predictive-search__products {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  display: grid;
}

.predictive-search__blog-posts {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  display: grid;
}

.predictive-search__blog-posts .blog-post-card__info {
  row-gap: .75rem;
}

.predictive-search__collections {
  align-items: start;
  gap: var(--container-gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

@media screen and (max-width: 699px) {
  .predictive-search__suggestions {
    grid: auto / auto-flow max-content;
    row-gap: 1.25rem;
  }

  .predictive-search__products .horizontal-product-card__figure {
    max-width: 4.375rem;
  }

  .predictive-search__blog-posts .blog-post-card {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    align-items: center;
  }
}

@media screen and (min-width: 700px) {
  .predictive-search__no-results {
    padding-block: 4.75rem 6.25rem;
  }

  .predictive-search__results {
    padding-block: 1.5rem 3rem;
  }

  .predictive-search__blog-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .predictive-search__blog-posts .blog-post-card__category {
    font-size: .6875rem;
  }
}

@media screen and (min-width: 1000px) {
  .predictive-search__results--with-suggestions {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .predictive-search__products {
    grid-template-columns: repeat(var(--product-list-items-per-row, 4), minmax(0, 1fr));
  }

  .predictive-search__blog-posts {
    grid-template-columns: repeat(var(--blog-post-list-items-per-row, 4), minmax(0, 1fr));
  }

  .predictive-search__collections {
    grid-template-columns: repeat(var(--collection-list-items-per-row), minmax(0, 1fr));
  }
}

.mega-menu {
  --mega-menu-gap: 2.5rem;
  --mega-menu-linklist-gap: 2.5rem;
  --mega-menu-promo-gap: 2rem;
  width: 100%;
  max-height: calc(100vh - var(--header-height, 0px)  - var(--announcement-bar-height, 0px)  - 20px);
  justify-content: safe center;
  align-items: start;
  column-gap: var(--mega-menu-gap);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  border-block-end-width: 1px;
  padding-block: 2.5rem;
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
  display: flex;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  overflow-y: auto;
}

.mega-menu--reverse {
  flex-direction: row-reverse;
}

.mega-menu--reverse .mega-menu__promo {
  justify-content: flex-start;
}

.mega-menu__linklist {
  gap: var(--mega-menu-linklist-gap);
  flex-wrap: wrap;
  flex: 0 auto;
  display: flex;
}

.mega-menu__linklist > * {
  max-width: 280px;
}

.mega-menu__promo {
  justify-content: flex-end;
  column-gap: var(--mega-menu-promo-gap);
  flex: 0 auto;
  display: flex;
}

.mega-menu__promo > * {
  flex: 315px;
  min-width: 240px;
  max-width: 315px;
}

@media screen and (min-width: 1400px) {
  .mega-menu {
    --mega-menu-gap: 6.25rem;
    --mega-menu-linklist-gap: 2.5rem 6.25rem;
  }

  .mega-menu:has(.mega-menu__linklist > :nth-child(5)) {
    --mega-menu-linklist-gap: 2.5rem 4rem;
  }
}

.header-sidebar {
  --header-linklist-padding-block: 1rem;
}

.header-sidebar::part(close-button) {
  opacity: 1;
}

.header-sidebar::part(header) {
  border-block-end: none;
}

.header-sidebar::part(content) {
  box-sizing: border-box;
  overflow-x: hidden;
}

.header-sidebar::part(panel-list) {
  position: relative;
}

.header-sidebar__scroller {
  padding-block-end: var(--drawer-body-padding-block);
  padding-inline-start: var(--drawer-body-padding-inline);
  padding-inline-end: var(--drawer-body-padding-inline);
  overflow-y: auto;
}

.header-sidebar__linklist-button {
  text-align: start;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-block-start: calc(var(--header-linklist-padding-block) / 2);
  padding-block-end: calc(var(--header-linklist-padding-block) / 2);
  transition: color .2s;
  display: flex;
}

@media screen and (pointer: fine) {
  .header-sidebar__main-panel li:has([aria-expanded="true"]) ~ li .header-sidebar__linklist-button {
    color: rgb(var(--text-color) / .65);
  }

  .header-sidebar__main-panel li:has( ~ li [aria-expanded="true"]):not(:has([aria-expanded="true"])) .header-sidebar__linklist-button {
    color: rgb(var(--text-color) / .65);
  }
}

.header-sidebar__sub-panel li:has([aria-expanded="true"]) ~ li .header-sidebar__linklist-button {
  color: rgb(var(--text-color) / .65);
}

.header-sidebar__sub-panel li:has( ~ li [aria-expanded="true"]):not(:has([aria-expanded="true"])) .header-sidebar__linklist-button {
  color: rgb(var(--text-color) / .65);
}

.header-sidebar__sub-panel li:has([aria-expanded="true"]) .header-sidebar__linklist-button {
  color: rgb(var(--text-color)) !important;
}

.header-sidebar__back-button {
  width: 100%;
  border-block-end-width: 1px;
  margin-block-end: 1rem;
  padding-block-start: var(--header-linklist-padding-block);
  padding-block-end: 1rem;
}

.header-sidebar__back-button.is-divided {
  margin-block-end: .5rem;
}

.header-sidebar__nested-linklist {
  border-inline-start-width: 1px;
  row-gap: .75rem;
  margin-block: 2px 1.125rem;
  margin-inline-start: .5rem;
  padding-inline-start: 1.5rem;
  display: grid;
}

.header-sidebar__main-panel {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: max-content;
  height: 100%;
  display: grid;
}

.header-sidebar__footer {
  position: relative;
}

.header-sidebar__footer:before {
  content: "";
  background: linear-gradient(transparent, rgb(var(--background)));
  width: 100%;
  height: 2.5rem;
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 0;
}

.header-sidebar__footer > * {
  padding-block: 1.25rem;
  padding-inline-start: var(--drawer-footer-padding-inline);
  padding-inline-end: var(--drawer-footer-padding-inline);
}

.header-sidebar__footer .localization-selectors {
  border-block-start-width: 1px;
  justify-content: flex-start;
  column-gap: 1.25rem;
}

.header-sidebar__collapsible-panel {
  height: 100%;
  width: var(--drawer-max-width);
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  display: none;
  position: absolute;
  inset-block-start: 0;
}

.header-sidebar__promo {
  grid-auto-flow: column;
  gap: 2rem 1.25rem;
  margin-block-start: 1.25rem;
  display: flex;
}

.header-sidebar__promo > * {
  min-width: 12.5rem;
}

.header-sidebar__promo > *:only-child {
  min-width: 100%;
}

.header-sidebar__linklist.divide-y .header-sidebar__linklist-button {
  padding-block-start: var(--header-linklist-padding-block);
  padding-block-end: var(--header-linklist-padding-block);
}

.header-sidebar__linklist.divide-y .header-sidebar__back-button {
  padding-block-end: var(--header-linklist-padding-block);
}

.header-sidebar__linklist.divide-y .header-sidebar__nested-linklist {
  margin-block-end: calc(.5rem + var(--header-linklist-padding-block));
}

.header-sidebar__linklist.divide-y .header-sidebar__promo {
  margin-block-start: .75rem;
}

@media screen and (min-width: 700px) {
  .header-sidebar {
    --header-linklist-padding-block: 1.25rem;
  }
}

@media screen and (min-width: 1000px) {
  .header-sidebar::part(panel-list) {
    position: static;
  }

  .header-sidebar::part(content) {
    overflow-x: visible;
  }

  .header-sidebar:has(.header-sidebar__collapsible-panel[aria-activedescendant])::part(content) {
    border-inline-end: 1px solid rgb(var(--border-color));
  }

  .header-sidebar__main-panel {
    z-index: 1;
    position: relative;
  }

  .header-sidebar__collapsible-panel .header-sidebar__scroller {
    width: 100%;
    inset-block: min(var(--header-height), 5rem) 0;
    position: absolute;
  }

  .header-sidebar__promo {
    flex-direction: column;
  }

  .header-sidebar__promo > * {
    min-width: 100%;
  }
}

.image-with-text {
  display: grid;
  overflow: hidden;
}

.image-with-text > .prose {
  box-sizing: content-box;
  max-width: var(--image-with-text-content-max-width);
  margin-block: 1.5rem;
  padding-inline-start: var(--container-gutter);
  padding-inline-end: var(--container-gutter);
}

.image-with-text > :is(svg, img) {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 699px) {
  .image-with-text > .prose {
    margin-inline: auto;
  }
}

@media screen and (min-width: 700px) {
  .image-with-text {
    --image-with-text-gap: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .image-with-text > .prose {
    padding-inline-start: var(--image-with-text-gap);
  }

  .image-with-text:not(.image-with-text--reverse) picture {
    margin-inline-start: auto;
  }

  .image-with-text--reverse > :is(picture, svg, img) {
    order: 9999;
  }

  .image-with-text--reverse > .prose {
    margin-inline-start: auto;
    padding-inline-end: var(--image-with-text-gap);
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text {
    --image-with-text-gap: 6rem;
  }
}

.image-with-text-block > :not(img, svg, picture) {
  background: rgb(var(--background));
  padding: 2.375rem 1.25rem;
  box-shadow: 0 1px 20px #3636364d;
}

@media screen and (min-width: 700px) {
  .image-with-text-block > :not(img, svg, picture) {
    padding: 3rem 1rem;
  }
}

.image-with-text-block--parallax {
  min-height: var(--content-over-media-height, auto);
  aspect-ratio: var(--image-with-text-block-aspect-ratio);
  transform: unset;
  clip-path: inset(0);
}

@media (prefers-reduced-motion: no-preference) {
  .image-with-text-block--parallax > svg, .image-with-text-block--parallax > picture img {
    pointer-events: none;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

  @supports (min-height: 100lvh) {
    .image-with-text-block--parallax > svg, .image-with-text-block--parallax > picture img {
      min-height: 100lvh;
    }
  }
}

.images-with-text-scroll {
  --sticky-area-height: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px)  + var(--header-is-sticky, 0) * var(--header-height, 0px));
  align-items: start;
  display: grid;
  position: relative;
}

.images-with-text-scroll:before {
  content: "";
  background: rgb(var(--images-with-text-scroll-overlay));
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.images-with-text-scroll__image-background, .images-with-text-scroll__container {
  grid-area: 1 / -1;
}

.images-with-text-scroll__image-background {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  position: sticky;
  inset-block-start: 0;
}

.images-with-text-scroll__container {
  z-index: 1;
  place-items: start center;
  row-gap: 2rem;
  padding-block-start: var(--section-vertical-spacing);
  padding-block-end: var(--section-vertical-spacing);
  display: grid;
}

.images-with-text-scroll__item {
  display: contents;
}

.images-with-text-scroll__item:not(:first-child) > .images-with-text-scroll__image {
  opacity: 0;
}

.images-with-text-scroll__image {
  grid-area: 1 / 1;
  align-self: center;
}

.images-with-text-scroll__text {
  text-align: center;
  grid-area: 2 / 1;
  max-width: 375px;
}

@media screen and (min-width: 700px) {
  .images-with-text-scroll__container {
    row-gap: 3rem;
  }
}

@media screen and (max-width: 999px) {
  .images-with-text-scroll__item:not(.is-selected) {
    visibility: hidden;
  }

  .images-with-text-scroll__image {
    width: min(56vw, 27.5rem);
  }
}

@media screen and (min-width: 1000px) {
  .images-with-text-scroll {
    min-height: calc(100vh - var(--sticky-area-height));
  }

  .images-with-text-scroll__container {
    --image-width: min(50vw - var(--container-gutter), 575px);
    --image-height: min(var(--image-width), var(--image-width) / var(--images-with-text-scroll-master-image-ratio));
    --content-padding: calc((100vh - var(--image-height)  - var(--sticky-area-height)) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: center;
    padding-block-start: var(--content-padding);
    padding-block-end: var(--content-padding);
  }

  .images-with-text-scroll__image {
    height: var(--image-height);
    object-fit: contain;
    object-position: center;
    position: sticky;
    inset-block-start: calc(var(--content-padding)  + var(--sticky-area-height));
  }

  .images-with-text-scroll__text {
    text-align: var(--images-with-text-scroll-text-alignment);
    grid-area: auto / 2;
  }

  .images-with-text-scroll--reverse .images-with-text-scroll__image {
    grid-column: 2;
  }

  .images-with-text-scroll--reverse .images-with-text-scroll__text {
    grid-column: 1;
  }
}

.logo-list {
  grid: var(--logo-list-grid);
  justify-content: safe center;
  gap: var(--logo-list-gap);
  display: grid;
}

.logo-list__item {
  outline: 1px solid rgb(var(--logo-list-item-border-color));
  place-items: center;
  padding: 1.25rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .logo-list__item {
    padding: 2rem 1.5rem;
  }
}

.media-grid {
  --media-grid-column-count: 2;
  align-items: start;
  gap: var(--media-grid-gap);
  grid: auto-flow dense var(--media-grid-row-height) / repeat(var(--media-grid-column-count), minmax(0, 1fr));
  display: grid;
}

.media-grid__item {
  grid-area: span min(2, var(--media-grid-item-row-span)) / span 2;
  height: 100%;
  container-type: inline-size;
}

.media-grid__item > * {
  height: 100%;
}

@media screen and (min-width: 700px) {
  .media-grid {
    --media-grid-column-count: 12;
  }

  .media-grid__item {
    grid-area: span var(--media-grid-item-row-span) / span var(--media-grid-item-column-span);
  }

  .media-grid__item--padded {
    padding: 32px;
  }
}

.multi-column {
  grid: var(--multi-column-grid);
  column-gap: var(--multi-column-gap);
  row-gap: var(--section-stack-gap);
  justify-content: var(--multi-column-content-alignment);
  display: grid;
}

.multi-column__item {
  align-content: start;
  gap: 2rem;
  display: grid;
}

.multi-column__item--overlap:has(.multi-column__media) {
  gap: 0;
}

.multi-column__item--overlap:has(.multi-column__media) > .prose {
  isolation: isolate;
}

.multi-column__item--overlap:has(.multi-column__media) > .prose > :first-child {
  margin-block-start: -.5lh !important;
}

.multiple-media-with-text {
  --multiple-media-with-text-gap: 2rem;
  grid: var(--multiple-media-with-text-grid);
  gap: var(--multiple-media-with-text-gap);
  display: grid;
}

.multiple-media-with-text__media-wrapper {
  grid-area: media-wrapper;
  grid: var(--multiple-media-with-text-media-grid);
  column-gap: var(--multiple-media-with-text-media-gap);
  display: grid;
}

.multiple-media-with-text__media-wrapper > * {
  grid-row: 1 / -1;
}

.multiple-media-with-text__content-wrapper {
  grid-area: content-wrapper;
}

@media screen and (min-width: 1000px) {
  .multiple-media-with-text {
    --multiple-media-with-text-gap: 2rem 4rem;
  }
}

@media screen and (min-width: 1150px) {
  .multiple-media-with-text {
    --multiple-media-with-text-gap: 2rem 7.5rem;
  }
}

.multiple-media-with-text--overlap .multiple-media-with-text__media-wrapper > :first-child {
  grid-column: 1 / 3;
}

.multiple-media-with-text--overlap .multiple-media-with-text__media-wrapper > :nth-child(2) {
  grid-column: 2 / 4;
}

@media screen and (min-width: 700px) {
  .multiple-media-with-text--overlap.multiple-media-with-text--reverse .multiple-media-with-text__media-wrapper > :first-child {
    grid-column: 2 / 4;
  }

  .multiple-media-with-text--overlap.multiple-media-with-text--reverse .multiple-media-with-text__media-wrapper > :nth-child(2) {
    grid-column: 1 / 3;
  }
}

@media screen and (min-width: 700px) {
  .newsletter .form {
    width: 35rem;
  }
}

@media screen and (min-width: 700px) {
  .newsletter-popup {
    width: 23.75rem;
    inset-inline-start: auto;
  }
}

.password {
  position: relative;
}

.password__inner {
  isolation: isolate;
  align-content: space-between;
  row-gap: 3rem;
  min-height: 100vh;
  padding-block: 1.6rem;
  display: grid;
}

@supports (height: 100dvh) {
  .password__inner {
    min-height: 100dvh;
  }
}

.password__header {
  justify-items: center;
  display: grid;
}

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

.password__password-button {
  margin-inline-start: auto;
}

.password__block-list {
  justify-self: center;
  row-gap: .625rem;
  width: min(100%, 30rem);
  display: grid;
}

.password__content, .password__social {
  padding: 1.25rem;
}

.password__social {
  display: grid;
}

.password__social .social-media {
  justify-content: center;
}

.password__footer {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  display: flex;
}

@media screen and (min-width: 700px) {
  .password__content {
    padding: 2.5rem;
  }

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

.prev-next-blog-posts {
  gap: 3.125rem;
  display: grid;
}

@media screen and (min-width: 700px) {
  .prev-next-blog-posts {
    grid: auto / auto-flow minmax(min-content, 31.25rem);
    justify-content: center;
    gap: 1.875rem;
  }
}

@media screen and (min-width: 1150px) {
  .prev-next-blog-posts {
    gap: 3.75rem;
  }
}

@media screen and (min-width: 700px) {
  .privacy-banner {
    width: 31.25rem;
  }
}

.shopify-section--main-product .section-spacing {
  padding-block-start: 0;
}

.product {
  grid: var(--product-grid, none);
  align-items: start;
  gap: var(--product-gap, 1.875rem);
  display: grid;
}

@media screen and (min-width: 1000px) {
  .shopify-section--main-product .section-spacing[allow-transparent-header] .container {
    --container-max-width: none;
  }

  .shopify-section--main-product .section-spacing[allow-transparent-header] .product {
    --product-gap: 0px;
  }

  .shopify-section--main-product .section-spacing[allow-transparent-header] .product-info {
    width: min(75%, 28.5rem);
    margin-inline: auto;
    padding-block-start: calc(var(--container-gutter) * var(--header-is-visible, 1));
    transition: padding-block-start .15s;
    inset-block-start: calc(var(--sticky-area-height)  + 20px - var(--container-gutter) * var(--header-is-visible, 1));
  }

  .shopify-section--main-product .section-spacing[allow-transparent-header] .product-gallery {
    margin-block-start: calc(var(--container-gutter) * -1);
  }

  .shopify-section--main-product .section-spacing {
    padding-block-start: var(--container-gutter);
  }

  .product {
    --product-gap: 3.5rem;
  }
}

@media screen and (min-width: 1150px) {
.desk-sign .product_grid_custom .product {
    --product-gap: 48px;
}
  .product {

    --product-gap: 5rem;
  }
}

.product-gallery {
  --product-gallery-gap: 1.5rem;
  --product-gallery-thumbnail-list-gap: 1rem .5rem;
  --product-gallery-thumbnail-size: 3.5rem;
  flex-direction: var(--product-gallery-flex-direction, column);
  align-items: start;
  gap: var(--product-gallery-gap) var(--product-gap, 0px);
  grid-area: product-gallery;
  display: flex;
  position: relative;
}

.product-gallery__zoom-button {
  z-index: 1;
  transition: opacity .2s, visibility .2s;
  position: absolute;
  inset-block-start: var(--product-gallery-zoom-button-inset-block-start, 1.25rem);
  inset-inline-end: 0;
}

.product-gallery__zoom-button--hidden {
  opacity: 0;
  visibility: hidden;
}

.product-gallery__image-list {
  row-gap: var(--product-gallery-gap);
  grid-auto-rows: max-content;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  display: grid;
}

.product-gallery__carousel {
  grid: var(--product-gallery-carousel-grid, auto / auto-flow 100%);
  align-items: start;
  gap: var(--product-gallery-carousel-gap, 1.5rem min(1.5rem, var(--container-gutter)));
  scroll-snap-type: var(--product-gallery-carousel-scroll-snap-type, x mandatory);
  display: grid;
  position: relative;
}

.product-gallery[allow-zoom] .product-gallery__media {
  cursor: var(--cursor-zoom-in-svg-url) 18 18, zoom-in;
}

.product-gallery__media > * {
  width: 100%;
}

.product-gallery__thumbnail-list {
  flex-shrink: 0;
  max-width: 100%;
  position: relative;
}

.product-gallery__thumbnail-scroller {
  grid-auto-columns: var(--product-gallery-thumbnail-size);
  grid-auto-flow: var(--product-gallery-thumbnail-list-grid-auto-flow, column);
  align-content: start;
  align-items: start;
  gap: var(--product-gallery-thumbnail-list-gap);
  max-height: var(--product-gallery-thumbnail-list-max-height, none);
  scroll-snap-type: both mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  grid-template-columns: none;
  display: grid;
  position: relative;
  overflow: auto;
}

.product-gallery__thumbnail-scroller::-webkit-scrollbar {
  display: none;
}

.product-gallery__thumbnail {
  border: 1px solid #0000;
  padding: 1px;
  transition: border-color .1s;
  position: relative;
}

.product-gallery__thumbnail[aria-current="true"] {
  border-color: currentColor;
}

.product-gallery__media-badge {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
}

[data-shopify-xr-hidden] {
  display: none;
}

@media screen and (max-width: 999px) {
  .product-gallery__carousel-with-arrows {
    align-items: center;
    display: flex;
  }

  .product-gallery__carousel-with-arrows .product-gallery__media {
    width: 45vw;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__thumbnail-list {
    position: sticky;
    /* inset-block-start: calc(var(--sticky-area-height)  + 20px); */
  }

  .product-gallery__media {
    scroll-margin-block-start: 1.25rem;
  }
}

.product-info {
  --product-info-gap: 1rem;
  z-index: 2;
  grid-area: product-info;
}

.product-info__block-list > :not(:nth-child(1 of :not(:empty))) {
  margin-block-start: var(--product-info-gap);
}

.product-info__block-list > :not(:last-child) {
  margin-block-end: var(--product-info-gap);
}

.product-info__block-item:empty {
  display: none;
}

.product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]) {
  --product-info-gap: .5rem;
}

.product-info__block-group:has(.product-info__block-item:is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"])) {
  --product-info-gap: .5rem;
}

.product-info__block-item:is([data-block-type="variant-picker"], [data-block-type="product-variations"], [data-block-type="separator"], [data-block-type="description"], [data-block-type="text"], [data-block-type="liquid"], [data-block-type="share-buttons"]) {
  --product-info-gap: 1.5rem;
}

.product-info__block-group:has(.product-info__block-item:is([data-block-type="variant-picker"], [data-block-type="product-variations"], [data-block-type="separator"], [data-block-type="description"], [data-block-type="text"], [data-block-type="liquid"], [data-block-type="share-buttons"])) {
  --product-info-gap: 1.5rem;
}

.product-info__block-item:is([data-block-type="inventory"], [data-block-type="buy-buttons"], [data-block-type="pickup-availability"], [data-block-type="more-information"], [data-block-type="offers"]) {
  --product-info-gap: 2rem;
}

.product-info__block-group:has(.product-info__block-item:is([data-block-type="inventory"], [data-block-type="buy-buttons"], [data-block-type="pickup-availability"], [data-block-type="more-information"], [data-block-type="offers"])) {
  --product-info-gap: 2rem;
}

.product-info__block-item[data-block-type="complementary-products"] {
  --product-info-gap: 3rem;
}

.product-info__block-group:has(.product-info__block-item[data-block-type="complementary-products"]) {
  --product-info-gap: 3rem;
}

@media screen and (max-width: 699px) {
  .product-info--center :is([data-block-type="vendor"], [data-block-type="title"], [data-block-type="sku"], [data-block-type="price"]) {
    text-align: center;
  }

  .product-info--center :is(.badge-list, .price-list, .rating-badge) {
    justify-content: center;
  }

  .product-info--center .text-with-rating {
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (min-width: 1000px) {
  .product-info {
    position: sticky;
    inset-block-start: calc(var(--sticky-area-height)  + 20px);
  }
}

.product-content-below-gallery {
  grid-area: product-content;
}

.product-content-below-gallery :is(product-recommendations:not(:first-child)) {
  margin-block-start: max(48px, var(--product-gap, 0px));
}

.product-content-below-gallery :is(product-recommendations:not(:last-child)) {
  margin-block-end: max(48px, var(--product-gap, 0px));
}

.product-content-below-gallery__description:not(:last-child) {
  margin-block-end: 1.25rem;
}

.product-info__more-info {
  border-block-width: 1px;
  justify-content: space-between;
  align-items: center;
  padding: .9375rem;
  display: flex;
}

.product-info__more-info > svg {
  transition: transform .2s ease-in-out;
}

@media screen and (pointer: fine) {
  .product-info__more-info:hover > svg {
    transform: translateX(5px);
  }
}

.variant-picker .popover {
  --popover-block-offset: .5rem;
  --popover-body-padding-inline: 1.25rem;
  width: 100%;
}

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

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

.buy-buttons {
  row-gap: 1rem;
  display: grid;
}

.pickup-location {
  align-items: start;
  gap: .25rem;
  display: grid;
}

.pickup-location + .pickup-location {
  padding-block-start: 1rem;
}

.product-offers .page-dots {
  padding-block-end: 1.5rem;
}

.product-offers__item {
  padding: 1.5rem;
}

.product-offers__list--carousel {
  grid: auto / auto-flow 100%;
  display: grid;
}

.complementary-products {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.875rem;
  max-width: 40rem;
  margin-inline: auto;
  display: grid;
}

.complementary-products__header {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.complementary-products__header--align-start {
  text-align: start;
  justify-content: space-between;
}

.complementary-products__product-list {
  gap: 1.25rem;
  display: grid;
  position: relative;
}

.complementary-products__product-list--carousel {
  grid: auto / auto-flow 100%;
}

@media screen and (max-width: 699px) {
  .complementary-products__product-list--carousel .product-card__figure {
    max-width: 11.25rem;
    margin-inline: auto;
  }
}

@media screen and (min-width: 700px) {
  .complementary-products {
    row-gap: 1rem;
  }

  .complementary-products__header {
    text-align: start;
    justify-content: space-between;
  }
}

.product-sticky-bar {
  width: 100%;
  padding: var(--container-gutter);
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  transition: opacity .2s, visibility .2s, inset-block .15s ease-in-out;
  display: block;
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
}

.product-sticky-bar.is-visible {
  opacity: 1;
  visibility: visible;
}

.product-sticky-bar__info img {
  width: 3.75rem;
}

@media screen and (min-width: 700px) {
  .product-sticky-bar {
    inset-block: var(--sticky-area-height) auto;
    background: rgb(var(--background));
    border-block-end-width: 1px;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    padding-block: 1.125rem;
    display: grid;
  }
}

@media screen and (max-width: 699px) {
  .quick-order-list__table {
    display: block;
  }

  .quick-order-list__table-head th:nth-child(2), .quick-order-list__table-head th:nth-child(3), .quick-order-list__table-body td:nth-child(2), .quick-order-list__table-body td:nth-child(3) {
    display: none;
  }

  .quick-order-list__table-foot {
    --table-foot-cell-padding-inline: 0px;
    display: block;
  }

  .quick-order-list__table-foot tr {
    flex-direction: column-reverse;
    display: flex;
  }

  .quick-order-list__table-foot td:first-child {
    padding-block: .125rem 0;
  }

  .quick-order-list__variant-image {
    align-self: start;
  }
}

@media screen and (min-width: 700px) {
  .quick-order-list__table {
    --table-cell-padding-block: .625rem;
    --table-foot-cell-padding-block: 1.5rem;
  }

  .quick-order-list__table-body tr:first-child {
    --table-cell-padding-block: .75rem;
  }

  .quick-order-list__table-body tr:not(:only-child):last-child td {
    padding-block-end: 1.5rem;
  }

  .quick-order-list__table-body tr:first-child + tr td {
    padding-block-start: 0;
  }

  .quick-order-list__table-body tr ~ tr td:first-child {
    padding-inline-start: 88px;
  }

  .quick-order-list__table-body tr ~ tr td:not(:has(img)):first-child {
    padding-inline-start: 20px;
  }

  .quick-order-list__table-foot {
    background: rgb(var(--background));
    box-shadow: 0 -.5px rgb(var(--border-color));
    position: sticky;
    inset-block-end: 0;
  }

  .quick-order-list__quantity-actions {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: .625rem;
    display: grid;
  }

  .quick-order-list__quantity-selector {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    row-gap: .5rem;
    display: grid;
  }

  .quick-order-list__remove-variant {
    justify-self: start;
    margin-inline-start: .625rem;
  }
}

.quantity-breaks-table {
  list-style: none;
}

.quantity-breaks-table li {
  padding-block: .5rem;
}

.quantity-breaks-table li:last-child {
  padding-block-end: 0;
}

@media screen and (min-width: 1000px) {
  .popover--quantity-breaks {
    inset-block-start: -1rem;
    inset-inline-end: 1.5rem;
  }
}

.scrolling-content {
  text-align: start;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.scrolling-content[direction="right"] {
  text-align: end;
}

.scrolling-content::part(scroller) {
  min-width: max-content;
  display: inline-flex;
  position: relative;
}

.scrolling-content__item {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.scrolling-content__item > * {
  margin-inline-start: calc(var(--scrolling-content-content-gap) / 2);
  margin-inline-end: calc(var(--scrolling-content-content-gap) / 2);
}

.scrolling-content__image > img {
  max-width: 1.5em;
}

.main-search-form {
  min-width: 18.75rem;
}

.main-search__linklist {
  text-align: center;
  max-width: 25rem;
  margin-inline: auto;
}

.shop-the-look__carousel {
  z-index: 2;
  grid: auto / auto-flow 100%;
  align-items: start;
  gap: .625rem;
  display: grid;
  position: relative;
  overflow: visible;
}

.shop-the-look__carousel.is-expanded {
  overflow: hidden;
}

.shop-the-look__image-wrapper {
  position: relative;
  overflow: hidden;
}

.shop-the-look__hot-spot-list {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.shop-the-look__hot-spot {
  --hot-spot-size: 1rem;
  top: calc(var(--shop-the-look-hot-spot-top)  - (var(--hot-spot-size) / 2));
  left: calc(var(--shop-the-look-hot-spot-left)  - (var(--hot-spot-size) / 2));
  width: var(--hot-spot-size);
  height: var(--hot-spot-size);
  border-radius: var(--rounded-full);
  transition: transform .2s ease-in-out;
  position: absolute;
}

.shop-the-look__hot-spot:after {
  --hot-spot-after-size: calc(var(--hot-spot-size) * 2.5);
  content: "";
  top: calc(50% - var(--hot-spot-after-size) / 2);
  left: calc(50% - var(--hot-spot-after-size) / 2);
  width: var(--hot-spot-after-size);
  height: var(--hot-spot-after-size);
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--background) / 0), rgb(var(--background) / .3));
  border-radius: var(--rounded-full);
  animation: 2s ease-in-out infinite alternate ping;
  position: absolute;
}

.shop-the-look__hot-spot[aria-current="true"] {
  transform: scale(1.3);
}

.shop-the-look__item-carousel {
  grid: auto / auto-flow 100%;
  justify-items: center;
  display: grid;
  position: relative;
}

.shop-the-look__item {
  position: relative;
}

.shop-the-look__popover .product-card__figure {
  width: 100%;
  max-width: 10rem;
  margin-inline: auto;
}

.shop-the-look__popover::part(base) {
  height: auto;
  inset: auto auto 0 0;
}

.shop-the-look__popover::part(overlay) {
  display: none;
}

@media screen and (max-width: 699px) {
  .shopify-section--shop-the-look:before {
    content: "";
    opacity: 0;
    pointer-events: none;
    background: rgb(var(--background));
    z-index: 2;
    width: 100%;
    height: 100%;
    transition: opacity .4s;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .shopify-section--shop-the-look:has(.shop-the-look__carousel.is-expanded):before {
    opacity: 1;
  }
}

@media screen and (min-width: 1000px) {
  .shop-the-look__carousel {
    grid: none;
    align-items: center;
  }

  .shop-the-look__item {
    max-width: var(--container-sm-max-width);
    grid: auto / min(550px, 60%) minmax(0, 1fr);
    grid-area: 1 / -1;
    align-items: center;
    gap: .3125rem;
    margin-inline: auto;
    display: grid;
  }

  .shop-the-look__item:not(.is-selected) {
    visibility: hidden;
  }

  .shop-the-look__item-product {
    grid-area: 1 / -1;
    max-width: 16.875rem;
  }

  .shop-the-look__item-product:not(.is-selected) {
    visibility: hidden;
  }

  .shop-the-look__item-content {
    opacity: 0;
    justify-items: center;
    gap: 1.5rem;
    display: grid;
  }
}

@media screen and (pointer: fine) {
  .shop-the-look__hot-spot:hover {
    transform: scale(1.3);
  }
}

@media screen and (pointer: fine) {
  .page-dots--shop-the-look-carousel-md {
    display: none;
  }
}

@media not screen and (pointer: fine) {
  .page-dots--shop-the-look-carousel-md {
    margin-block-start: 1rem;
    display: flex;
  }
}

.slideshow {
  --slideshow-controls-spacing: var(--container-gutter);
  background: rgb(var(--slideshow-background));
  display: block;
  position: relative;
}

.slideshow .page-dots {
  z-index: 1;
  position: absolute;
  inset-block-end: var(--slideshow-controls-spacing);
  inset-inline-end: var(--slideshow-controls-spacing);
}

.shopify-section--slideshow:first-child .slideshow[allow-transparent-header] {
  --content-over-media-row-gap: 4rem;
}

.slideshow:has(.page-dots, .slideshow__volume-control) {
  --content-over-media-row-gap: 4rem;
}

.slideshow__slide:not(.is-selected) {
  visibility: hidden;
  position: absolute;
  inset: 0;
}

.slideshow__slide-content--boxed {
  padding: 1.5rem;
}

.slideshow__slide-content--with-border {
  outline: 1px solid rgb(var(--border-color));
}

.slideshow__slide-content--with-border-offset {
  outline-offset: -.75rem;
  padding: 2.25rem;
}

.slideshow__volume-control {
  z-index: 1;
  display: grid;
  position: absolute;
  inset-block-end: var(--slideshow-controls-spacing);
  inset-inline-start: var(--slideshow-controls-spacing);
}

.slideshow__next-section-button {
  z-index: 2;
  position: absolute;
  inset-block-end: calc(-1 * var(--circle-button-size) / 2);
  inset-inline-start: calc(50% - var(--circle-button-size) / 2);
}

.shopify-section:has(.slideshow__next-section-button) + .shopify-section {
  --section-vertical-spacing-block-start-compensation: 1.5625rem;
}

@media screen and (min-width: 700px) {
  .slideshow:has(.page-dots, .slideshow__volume-control) {
    --content-over-media-row-gap: 5rem;
  }

  .slideshow__slide-content--boxed {
    padding: 3.5rem;
  }

  .slideshow__slide-content--with-border-offset {
    outline-offset: -1rem;
  }
}

.shopify-section--testimonials {
  --section-vertical-spacing-override: calc(var(--section-vertical-spacing)  + 20px);
}

.testimonial-list {
  gap: var(--section-stack-gap);
  justify-items: center;
  display: grid;
}

.testimonial-item {
  max-width: 34rem;
  font-size: var(--testimonials-font-size);
  grid-area: 1 / -1;
  align-content: start;
  justify-items: center;
  gap: 2rem;
  display: grid;
}

.testimonial-item:not(.is-selected) {
  opacity: 0;
  visibility: hidden;
}

.testimonial-carousel {
  display: grid;
}

.testimonial-list__thumbnail-scroller {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 5.625rem;
}

.testimonial-list__thumbnail {
  transition: opacity .2s ease-in-out;
}

.testimonial-list__thumbnail[aria-current="false"] {
  opacity: .25;
}

.testimonial-list__thumbnail img {
  max-width: var(--image-max-width);
}

.testimonial-list__thumbnail .placeholder {
  width: var(--image-max-width);
}

.shopify-challenge__container, .shopify-email-marketing-confirmation__container {
  max-width: 56.25rem;
  margin-block-start: var(--section-vertical-spacing);
  margin-block-end: var(--section-vertical-spacing);
}

.shopify-policy__container {
  gap: var(--section-stack-gap);
  max-width: 56.25rem;
  grid-auto-columns: minmax(0, 1fr);
  margin-block-start: var(--section-vertical-spacing-tight);
  margin-block-end: var(--section-vertical-spacing-tight);
  display: grid;
}

.shopify-challenge__container {
  gap: 1rem;
  display: grid;
}

.shopify-challenge__container > form {
  display: contents;
}

.shopify-email-marketing-confirmation__container {
  text-align: center;
}

.shopify-policy__title h1 {
  font: inherit;
}

.text-with-icons {
  --text-with-icons-items-per-row: 2;
  --text-with-icons-column-gap: 1.5rem;
  --text-with-icons-row-gap: 2rem;
  justify-content: center;
  gap: var(--text-with-icons-row-gap) var(--text-with-icons-column-gap);
  flex-wrap: wrap;
  display: flex;
}

.text-with-icons > * {
  flex-basis: min(18.75rem, calc(100% / var(--text-with-icons-items-per-row)  - var(--text-with-icons-column-gap, 0px) * (var(--text-with-icons-items-per-row)  - 1) / var(--text-with-icons-items-per-row)));
}

.text-with-icons > :only-child {
  flex-basis: min(18.75rem, 100%);
}

@media screen and (max-width: 699px) {
  .text-with-icons:not(.text-with-icons--stacked) {
    grid: auto / auto-flow 100%;
    gap: 0;
    display: grid;
  }

  .text-with-icons:not(.text-with-icons--stacked) > * {
    grid-area: 1 / -1;
    padding-inline: 2.5rem;
  }

  .text-with-icons:not(.text-with-icons--stacked) > :not(.is-selected) {
    visibility: hidden;
  }
}

@media screen and (min-width: 700px) {
  .text-with-icons {
    --text-with-icons-items-per-row: 3;
    --text-with-icons-row-gap: 2.5rem;
  }
}

@media screen and (min-width: 1000px) {
  .text-with-icons {
    --text-with-icons-items-per-row: 5;
  }

  .text-with-icons:not(:has( > :nth-child(5))) {
    --text-with-icons-items-per-row: 4;
    --text-with-icons-column-gap: 3.75rem;
  }
}

.timeline__carousel, .timeline__item {
  display: grid;
}

:is(.timeline__carousel, .timeline__item) > * {
  grid-area: 1 / -1;
}

.timeline__item:not(.is-selected) {
  visibility: hidden;
}

.timeline__item-image-wrapper {
  overflow: hidden;
}

.timeline__item-image-wrapper :is(img, svg) {
  scale: 1.05;
}

.timeline__item-content {
  padding: var(--container-gutter);
}

@media screen and (max-width: 699px) {
  .shopify-section--timeline {
    --section-vertical-spacing: 0;
    border-block-start-width: 0;
  }

  .timeline__carousel {
    position: relative;
  }

  .timeline__carousel:after {
    content: "";
    background: #0006;
    position: absolute;
    inset: 0;
  }

  .timeline__item {
    --text-color: var(--timeline-item-mobile-text-color);
    color: rgb(var(--text-color));
  }

  .timeline__item-content {
    text-align: center;
    z-index: 1;
    align-self: center;
    padding-block: 3.75rem;
  }
}

@media screen and (min-width: 700px) {
  .timeline__item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline__item > * {
    grid-area: unset;
  }

  .timeline__item-content {
    align-self: end;
  }
}

.timeline__nav {
  white-space: nowrap;
  grid-auto-flow: column;
  justify-content: safe center;
  align-items: center;
  column-gap: 2.5rem;
  display: grid;
}

.timeline__nav > button {
  height: var(--text-h4);
  line-height: 1;
  transition: opacity .25s ease-in-out, font-size .25s ease-in-out;
  position: relative;
}

.timeline__nav > button:after {
  content: "";
  width: calc(100% - var(--heading-letter-spacing));
  height: 3px;
  transform-origin: var(--transform-origin-start);
  background: currentColor;
  transition: transform .25s ease-in-out;
  position: absolute;
  inset-block-end: -1.25rem;
  inset-inline-start: 0;
  transform: scaleX(0);
}

.timeline__nav > [aria-current="false"] {
  opacity: .65;
}

.timeline__nav > [aria-current="true"] {
  font-size: var(--text-h4);
}

.timeline__nav > [aria-current="true"]:after {
  transform: scaleX(1);
}

@media screen and (max-width: 699px) {
  .timeline__nav {
    background: rgb(var(--timeline-nav-mobile-background));
    color: rgb(var(--timeline-nav-mobile-text-color));
    padding-block: 1.25rem;
    overflow: auto hidden;
  }
}

@media screen and (min-width: 700px) {
  .timeline__nav {
    margin-block-start: var(--section-stack-gap);
  }

  .timeline__nav > button:after {
    inset-block-end: -.5rem;
  }
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

:is(.sr-only[type="checkbox"]:focus-visible + label, .sr-only[type="radio"]:focus-visible + label) {
  outline: 2px solid highlight;
  outline: 2px solid -webkit-focus-ring-color;
}

.skip-to-content:focus-visible {
  z-index: 9999;
  clip: auto;
  color: #fff;
  background: #000;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-weight: bold;
  overflow: auto;
}

.tap-area {
  position: relative;
}

.tap-area:before {
  content: "";
  position: absolute;
  inset: -.5rem;
}

@media print {
  .print\:hidden {
    display: none;
  }
}

@keyframes ping {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(.8);
  }
}

@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .features--zoom-image .zoom-image {
    transform-origin: center;
    transition: scale 8s cubic-bezier(.25, .46, .45, .94);
  }

  .features--zoom-image .group:hover .group-hover\:zoom {
    scale: 1.2;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [reveal-on-scroll="true"] {
    opacity: 0;
  }
}

@media (scripting: none) {
  [reveal-on-scroll="true"] {
    opacity: 1;
  }
}

.border {
  border-width: 1px;
  border-color: rgb(var(--border-color));
}

.border-x {
  border-inline-width: 1px;
}

.border-y {
  border-block-width: 1px;
}

.border-t {
  border-block-start-width: 1px;
}

.border-b {
  border-block-end-width: 1px;
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  border-inline-start-width: 1px;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-block-start-width: 1px;
}

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

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

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

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

.text-subdued {
  color: rgb(var(--text-color) / .65);
}

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

.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.text-gradient {
  background-image: var(--gradient);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.text-stroke.text-gradient {
  color: rgb(var(--background));
  -webkit-text-stroke-color: transparent;
  -webkit-text-fill-color: unset;
}

.bg-error, .bg-success, .bg-warning {
  --border-color: var(--text-color) / .15;
}

.bg-error {
  background: rgb(var(--error-background));
}

.bg-success {
  background: rgb(var(--success-background));
}

.bg-warning {
  background: rgb(var(--warning-background));
}

.opacity-0 {
  opacity: 0;
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(var(--backdrop-blur, 0px));
  backdrop-filter: blur(var(--backdrop-blur, 0px));
}

.filter-invert {
  filter: invert();
}

.lock {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.scroll-area {
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  overflow: auto hidden;
}

.hide-scrollbar {
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-y {
  scroll-snap-type: y mandatory;
}

.snap-start {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-center {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.hidden, .empty\:hidden:empty {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

@media screen and (min-width: 700px) {
  .sm\:hidden {
    display: none;
  }

  .sm\:block {
    display: block;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table {
    display: table;
  }

  .sm\:table-cell {
    display: table-cell;
  }
}

@media screen and (min-width: 1000px) {
  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }

  .md\:grid {
    display: grid;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table {
    display: table;
  }

  .md\:table-cell {
    display: table-cell;
  }
}

@media screen and (min-width: 1150px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table {
    display: table;
  }

  .lg\:table-cell {
    display: table-cell;
  }
}

@media screen and (max-width: 699px) {
  .sm-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 999px) {
  .md-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1149px) {
  .lg-max\:hidden {
    display: none;
  }
}

@media screen and (max-width: 1399px) {
  .xl-max\:hidden {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:hidden {
    display: none;
  }

  .motion-reduce\:block {
    display: block;
  }
}

.visibility-hidden {
  visibility: hidden;
}

.relative {
  position: relative;
}

.wrap {
  flex-wrap: wrap;
}

.grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.text-start {
  text-align: start;
}

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

.text-end {
  text-align: end;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: safe center;
}

.justify-end {
  justify-content: end;
}

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

.justify-evenly {
  justify-content: space-evenly;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: safe center;
}

.justify-items-end {
  justify-items: end;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-end {
  justify-self: end;
}

.align-start {
  align-items: start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: end;
}

.align-baseline {
  align-items: baseline;
}

.align-self-start {
  align-self: start;
}

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

.align-self-end {
  align-self: end;
}

.place-self-start {
  place-self: start;
}

.place-self-start-center {
  place-self: start center;
}

.place-self-start-end {
  place-self: start end;
}

.place-self-center {
  place-self: center;
}

.place-self-center-start {
  place-self: center start;
}

.place-self-center-end {
  place-self: center end;
}

.place-self-end {
  place-self: end;
}

.place-self-end-start {
  place-self: end start;
}

.place-self-end-center {
  place-self: end center;
}

@media screen and (min-width: 700px) {
  .sm\:text-start {
    text-align: start;
  }

  .sm\:text-center {
    text-align: center;
  }

  .sm\:text-end {
    text-align: end;
  }

  .sm\:justify-start {
    justify-content: start;
  }

  .sm\:justify-center {
    justify-content: safe center;
  }

  .sm\:justify-end {
    justify-content: end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:justify-evenly {
    justify-content: space-evenly;
  }

  .sm\:justify-items-start {
    justify-items: start;
  }

  .sm\:justify-items-center {
    justify-items: safe center;
  }

  .sm\:justify-items-end {
    justify-items: end;
  }

  .sm\:justify-self-start {
    justify-self: start;
  }

  .sm\:justify-self-center {
    justify-self: center;
  }

  .sm\:justify-self-end {
    justify-self: end;
  }

  .sm\:align-start {
    align-items: start;
  }

  .sm\:align-center {
    align-items: center;
  }

  .sm\:align-end {
    align-items: end;
  }

  .sm\:align-baseline {
    align-items: baseline;
  }

  .sm\:align-self-start {
    align-self: start;
  }

  .sm\:align-self-center {
    align-self: center;
  }

  .sm\:align-self-end {
    align-self: end;
  }

  .sm\:place-self-start {
    place-self: start;
  }

  .sm\:place-self-start-center {
    place-self: start center;
  }

  .sm\:place-self-start-end {
    place-self: start end;
  }

  .sm\:place-self-center {
    place-self: center;
  }

  .sm\:place-self-center-start {
    place-self: center start;
  }

  .sm\:place-self-center-end {
    place-self: center end;
  }

  .sm\:place-self-end {
    place-self: end;
  }

  .sm\:place-self-end-start {
    place-self: end start;
  }

  .sm\:place-self-end-center {
    place-self: end center;
  }
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-0 {
  width: 0;
}

.min-w-full {
  min-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.mx-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

.aspect-short {
  aspect-ratio: 4 / 3;
}

.aspect-portrait {
  aspect-ratio: 4 / 5;
}

.aspect-tall {
  aspect-ratio: 2 / 3;
}

.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}
.gap-0\.5 {
  gap: .125rem;
}

.gap-1 {
  gap: .25rem;
}

.gap-1\.5 {
  gap: .375rem;
}

.gap-2 {
  gap: .5rem;
}
.variant-picker__option .variant-picker__option-values {
    gap: 10px;
}
.gap-2\.5 {
  gap: .625rem;
}

.gap-3 {
  gap: .75rem;
}

.gap-3\.5 {
  gap: .875rem;
}

.gap-4 {
  gap: 1rem;
}
.product-info__block-item .variant-picker.gap-4 {
  gap: 28px;
}
.gap-4\.5 {
  gap: 1.125rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-5\.5 {
  gap: 1.375rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-16 {
  gap: 4rem;
}

@media screen and (min-width: 700px) {
  .sm\:gap-0\.5 {
    gap: .125rem;
  }

  .sm\:gap-1 {
    gap: .25rem;
  }

  .sm\:gap-1\.5 {
    gap: .375rem;
  }

  .sm\:gap-2 {
    gap: .5rem;
  }

  .sm\:gap-2\.5 {
    gap: .625rem;
  }

  .sm\:gap-3 {
    gap: .75rem;
  }

  .sm\:gap-3\.5 {
    gap: .875rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-4\.5 {
    gap: 1.125rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-5\.5 {
    gap: 1.375rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-14 {
    gap: 3.5rem;
  }

  .sm\:gap-16 {
    gap: 4rem;
  }
}

.object-cover {
  object-fit: cover;
  object-position: center;
}

.object-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.image-background {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.placeholder {
  background: rgb(var(--background-without-opacity));
  fill: rgb(var(--text-color) / .5);
  color: rgb(var(--text-color) / .5);
  display: block;
}

.placeholder--invert {
  background: rgb(var(--text-color));
  fill: rgb(var(--background-without-opacity));
  color: rgb(var(--background-without-opacity));
}

.bold {
  font-weight: bold;
}

.smallcaps {
  text-transform: uppercase;
  letter-spacing: var(--heading-letter-spacing);
  font-size: .625rem;
}

.text-xxs {
  font-size: .6875rem;
}

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.heading, .h1, .h2, .h3, .h4, .h5, .h6, .prose :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  overflow-wrap: anywhere;
}

.h1, :where(.prose h1) {
  font-size: var(--text-h1);
  line-height: 1.5;
}

.h2, :where(.prose h2) {
  font-size: var(--text-h2);
  line-height: 1.5;
}

.h3, :where(.prose h3) {
  font-size: var(--text-h3);
  line-height: 1.6;
}

.h4, :where(.prose h4) {
  font-size: var(--text-h4);
  line-height: 1.6;
}

.h5, :where(.prose h5) {
  font-size: var(--text-h5);
  line-height: 1.7;
}

.h6, :where(.prose h6) {
  font-size: var(--text-h6);
  line-height: 1.7;
}

.prose blockquote {
  line-height: 1.75;
}

@media screen and (min-width: 700px) {
  .sm\:text-xs {
    font-size: var(--text-xs);
  }

  .sm\:text-sm {
    font-size: var(--text-sm);
  }

  .sm\:text-base {
    font-size: var(--text-base);
  }

  .sm\:text-lg {
    font-size: var(--text-lg);
  }

  .sm\:h1 {
    font-size: var(--text-h1);
    line-height: 1.5;
  }

  .sm\:h2 {
    font-size: var(--text-h2);
    line-height: 1.5;
  }

  .sm\:h3 {
    font-size: var(--text-h3);
    line-height: 1.6;
  }

  .sm\:h4 {
    font-size: var(--text-h4);
    line-height: 1.6;
  }

  .sm\:h5 {
    font-size: var(--text-h5);
    line-height: 1.7;
  }

  .sm\:h6 {
    font-size: var(--text-h6);
    line-height: 1.7;
  }
}

@media screen and (min-width: 1150px) {
  .h1, :where(.prose h1) {
    line-height: 1.3;
  }

  .h2, :where(.prose h2) {
    line-height: 1.4;
  }

  .h3, :where(.prose h3) {
    line-height: 1.5;
  }
}

ol {
  margin-inline-start: 2ch;
}

ul {
  margin-inline-start: 1em;
}

:where(ol, ul):not(.unstyled-list) li {
  padding-inline-start: .25rem;
  margin-block-start: 0 !important;
}

:where(.text-center, .text-end) :is(ol, ul) {
  margin-inline: 0;
  list-style-position: inside;
}

:where(.text-center, .text-end) :is(ol, ul) li {
  padding-inline-start: 0;
}



.variant-picker__option-values :checked + .block-swatch, .block-swatch.is-selected {
    color: #ffffff !important;
        background: #1f2f4a;
}

.variant-picker__option-values .block-swatch {
    color: #2b2e34 !important;
    padding: 10px 20px;
    border: 1.5px solid #ececec;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: #f7f8fa;
}
.variant-picker__option-values .block-swatch:hover {
    border-color: #b07a45;
}


.line-through {
  text-decoration: line-through;
}

.break-all {
  word-break: break-all;
}

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: var(--truncate-text-max-width, 100%);
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.announcement-bar {
    padding: 9px 20px;
}
.announcement-bar .prose.heading {
    font-size: 12px;
    color: rgb(var(--text-color));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.announcement-bar .prose.heading span {
    color: rgb(var(--text-color));
}

/* Clickable announcement messages (sections/announcement-bar.liquid) - the
   theme-wide `a { text-decoration: inherit }` reset already keeps these from
   looking like underlined body-text links at rest; an underline only on
   hover/focus is what signals they're clickable, using currentColor so it
   always matches whatever color scheme the bar is set to, never a new hue. */
.announcement-bar a.announcement-bar__message:hover,
.announcement-bar a.announcement-bar__message:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.announcement-bar a.announcement-bar__message:focus-visible,
.announcement-bar__nav-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

.announcement-bar__nav-button {
    opacity: .7;
    transition: opacity .18s ease;
}

.announcement-bar__nav-button:hover,
.announcement-bar__nav-button:focus-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__nav-button {
    transition: none;
  }
}
.shopify-section.shopify-section-group-header-group .cart-drawer_text {
    font-size: 13px;
    font-weight: 500;
}
.shopify-section.shopify-section-group-header-group height-observer.header-custom {
    background-color: #fff;
}
.shopify-section.shopify-section-group-header-group .header {
    /* Imperial Bathrooms: vertical sizing matches the prototype's .nav
       (min-height + symmetric vertical padding, logo optically centred).
       See the "Header parity" block lower in this file for the values and
       the breakpoint tiers - they are kept together there, not here. */
    max-width: 1220px;
    padding-inline-start: 20px;
    padding-inline-end: 20px;
    margin: auto;
}
.header__cart-link a {
    display: flex;
    gap: 6px;
    align-items: center;
}

.header__primary-nav-item a {
    position: relative;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: normal;
    color: #172033;
}
.header__primary-nav-item a:hover {
    color: #172033;
}

.shopify-section.shopify-section-group-header-group .header__cart-dot {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 2px rgb(var(--background));
    background-color: var(--ib-navy);
    border-radius: 100%;
    transition: transform .2s ease-in-out;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: none;
    top: -5px;
    color: #fff;
    right: -10px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.section-contact_custom .form-control .input::-webkit-input-placeholder {
   color: #666;} 

.section-contact_custom .form-control .textarea::-webkit-input-placeholder {
   color: #666;} 

.section-contact_custom .section-stack {
    gap: 36px;
}
.section-contact_custom .floating-label_custom.text-xs_custom {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(216, 194, 168, 0.7);
    margin-bottom: 0;
}
.section-contact_custom .prose h2.h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 0;
    text-transform: capitalize;
}
.section-contact_custom .form-control .input {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 14px;
    color: #fff;
}
.section-contact_custom .fieldset {
    gap: 16px;
    display: grid;
}
.section-contact_custom .form-control .textarea {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 14px;
    color: #fff;
}
.section-contact_custom .container {
    max-width: 760px;
}
.section-contact_custom .button {
    background: #b07a45;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    width: fit-content;
}
.section-label::before {
    content: '';
    width: 32px;
    height: 1.5px;
    background: #b07a45;
}
.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-contact_custom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.section-label span {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b07a45;
    font-weight: 500;
}
.section-contact_custom .button:hover {
    background-color: rgb(196, 138, 82);
    color: #000 !important;
}
.footer__block-list .link-faded {
    color: rgba(255,255,255,0.86);
    transition: color .2s ease-in-out;
    font-size: 14px;
        font-weight: 400;

}
.footer__inner strong {
    font-size: 13px;
        font-weight: 100;
    line-height: 1.8;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.55);
}
.footer .footer__block-list .text-subdued {
    color: rgba(255,255,255,0.3);
}
.footer__aside {
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
    padding-top: 56px;
}
.shopify-section-group-footer-group .footer {
    padding-bottom: 0;
}
span.pay-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
}
.footer-pay {
    display: flex;
    gap: 8px;
    align-items: center;
}
.footer__block p.h6 {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #AEB6D0;
    font-weight: 700;
    /* margin-bottom: 20px; */
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.footer__block-list .footer__block.footer__block--text .custom_footer p.h6 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    /* margin-bottom: 16px; */
    display: block;
    text-transform: none;
    letter-spacing: 0;
}
.footer__block-list .footer__block.footer__block--text .custom_footer p.h6 strong {
    background: linear-gradient(135deg, #B07A45 0%, #D8C2A8 50%, #9A6835 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0;
    font-size: 20px;
}

.footer__block-list .footer__block.footer__block--text p a[title="Contact"] {
    font-size: 12px;
    text-decoration: none !important;
    background: none;
}
.footer__block-list .footer__block.footer__block--text .custom_footer {
    gap: 16px;
}
.footer__block-list .footer__block.footer__block--text .custom_footer  p {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}
.footer__block.footer__block--text .prose.text-subdued p:nth-child(2) {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}
.footer__block.footer__block--text .prose.text-subdued p:first-child {
    color: #AEB6D0 !important;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 8px;
}
.footer__block-list .footer__block.footer__block--text p:nth-child(3) a {
    color: rgba(255,255,255,0.45);
    background: none;
}
.footer__block-list .footer__block.footer__block--text p:nth-child(4) {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.3);
}
p.heading.text-subdued.text-xxs {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-transform: capitalize;
}
p.heading.text-subdued.text-xxs a:hover {
    color: #d8c2a8;
}


.btn-custom {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}

.btn-custom a.btn-secondary {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1f2f4a;
    color: #ffffff;
    padding: 15px 34px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.25s, transform 0.15s;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.btn-custom a.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1f2f4a;
    color: #ffffff;
    padding: 15px 34px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.25s, transform 0.15s;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.btn-custom a.btn-primary:hover {
    background: #b07a45;
    transform: translateY(-1px);
}
.product-info .product-title.h3 {
    font-family: Cormorant, sans-serif;
    font-size: 35px;
    /* font-weight: 600; */
    font-weight:400;
    color: #1f2f4a;
    line-height: 1.2;
    text-transform: capitalize;
    letter-spacing: 0;
}
.desk-sign .product-info__block-list .product-info__block-item[data-block-type="title"] {
    margin-bottom: 10px !important;
    margin-block-start: 0 !important;
}
.desk-sign .product-info .product-title.h3 {
    /* font-family: 'Cormorant Garamond', Georgia, serif; */
    font-size: 35px;
    font-weight: 400;
    color: #1f2f4a;
    line-height: 1.2;
    text-transform: capitalize;
    letter-spacing: 0;
}
.desk-sign .product-info .product-info__block-item[data-block-type="liquid"] {
    margin: 0;
}
.product-info__block-item[data-block-id="separator"] {
    margin: 28px 0;
}
.product-info__block-item[data-block-type="image-style-selector"] {
    margin-bottom: 28px;
}
.product-info__block-item .prose .metafield-rich_text_field p {
    margin-bottom: 20px !important;
    font-size: 15px;
    color: #9B9FA8;
    line-height: 1.7;
}
.variant-picker__option-info .h-stack.gap-1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.variant-picker__option-info span {
    font-weight: 400;
    color: #b07a45;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}
.variant-picker__option-info legend {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2b2e34;
    font-weight: 600;
}
.stand-icon {
    width: 40px;
    height: 40px;
    background: #ececec;
    border-radius: 3px;
    flex-shrink: 0;
}
.stand-option-price {
    font-size: 12px;
    color: #b07a45;
}
.block-swatch_custom.block-swatch {
    display: flex;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
}
.picker__option_custom.variant-picker__option-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
}
.picker__option_custom :checked + .block-swatch, .block-swatch.is-selected{
  color: #1f2f4a !important;
    background: #fff;
    border-color: #1f2f4a;
}

.shopify-product-form .buy-buttons button {
    color: #fff;
}
sale-price.h4.text-subdued {
    font-size: 28px;
    color: #1f2f4a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    font-weight: 600;
}
.desk-sign sale-price.h4.text-subdued {
    font-size: 28px;
    letter-spacing: 0;
    font-weight: 600;
    color: #1f2f4a;
}

.litho-hero__right.litho-hero_custom {
    display: none;
}
.lithophane_show .litho-hero__right.litho-hero_custom {
    display: block;
}


.v-stack.price-title_custom {
    grid-template-columns: auto 1fr;
    display: grid;
    align-items: center;
    gap: 10px;
}
.v-stack.price-title_custom .metafield-rich_text_field p {
    font-size: 13px;
    color: #9a9da2;
}

.product-info__block-list .breadcrumb {
    font-size: 12px;
    color: #9B9FA8;
    display: flex;
    gap: 6px;
    align-items: center;
}
.product-info__block-list .breadcrumb a {
    color: #b07a45;
}
.product-info__block-item[data-block-type="breadcrumb"] {
    margin-bottom: 16px !important;
}
.product-info__block-list .product-info__block-item[data-block-type="text"] {
    margin-bottom: 20px !important;
    margin-block-start: 0;
}
.product-info__block-list .product-info__block-item[data-block-type="title"] {
    margin-bottom: 8px !important;
    margin-block-start: 0 !important;
}

.product_grid_custom.container {
    max-width: 1320px;
    padding: 0 20px;
}
.product-trust {
    display: flex;
    gap: 20px;
    margin-top: 0;
    flex-wrap: wrap;
}
.product-trust-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9B9FA8;
    letter-spacing: 0.05em;
}
.product-trust-chip svg path, .product-trust-chip svg circle {
    stroke: #b07a45;
}
a#more-payment-options-link {
    display: none;
}

.shopify-product-form .buy-buttons button {
    display: flex;
    background-color: #b07a45;
    justify-content: flex-start;
    border-radius: 4px;
}
.shopify-product-form .buy-buttons .button:hover {
    background: #9A6835;
    transform: translateY(-1px);
}
.product-info__block-item[data-block-type="trust-icon"] {
    margin: 0 !important;
}

.product-info__block-item[data-block-type="buy-buttons"] {
    margin-bottom: 20px !important;
      margin-top: 20px !important;
}
.v-stack.justify-items-start.gap-1 a.h6 {
    font-size: 14px;
    line-height: normal;
}
.cart-drawer .line-item-info price-list.price-list sale-price.h6.text-subdued {
    color: var(--ib-navy);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 0;
}
.cart-drawer p.h4[slot="header"] {
    color: var(--ib-navy);
    letter-spacing: 1px;
}

.cart-drawer .justify-items-start p.smallcaps.text-subdued {
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
    text-transform: capitalize;
    color: var(--ib-navy);
}
.cart-drawer .line-item-info .v-stack.justify-items-start.gap-1 a.h6 {
    font-size: 18px;
    line-height: normal;
     color: var(--ib-navy);
      letter-spacing: 2px;
}
.cart-drawer .justify-items-start ul.text-subdued li {
    color: var(--ib-navy);
}
.cart-drawer line-item-quantity.h-stack.gap-4 a.link.text-xs {
    color: var(--ib-navy);
}
.cart-drawer .justify-items-start ul.text-subdued li {
    color: var(--ib-navy);
    list-style: circle;
}

.cart-drawer p.h5 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 2px;
    text-transform: capitalize;
    color: var(--ib-navy);
}

  @media (max-width:750px) {
.picker__option_custom.variant-picker__option-values {
    grid-template-columns: repeat(1, 1fr);
}
  }

/* =========================================================================
   Imperial Bathrooms — prototype-matched additions
   Source of truth: imperial-bath-modern-prototype/styles.css
   ========================================================================= */

/* ============================================================
   Prototype typography baseline.

   The supplied prototype ships no CSS reset, so its <p>, <h1>-<h6>, <ul> and
   <ol> keep the browser's default margins wherever a rule does not override
   them. Prestige zeroes those (`blockquote, dl, dd, h1..h6, hr, figure, p, pre
   { margin: 0 }`), which flattened paragraph and heading rhythm across every
   ported section - e.g. the How-To subhero/intro paragraphs and the video
   section heading all sat tight against their neighbours.

   These rules restore the UA defaults inside the Imperial Bathrooms sections
   only. Specificity is deliberately (0,1,0): the attribute selector outranks
   Prestige's (0,0,1) element reset, while :where() keeps the inner selector at
   zero so every explicit per-component rule further down this file - which are
   (0,1,1) or higher - still wins. They are also placed BEFORE those component
   rules so any equal-specificity rule (e.g. .blog-cat) wins on source order.
   ============================================================ */
[class*="shopify-section--ib-"] :where(p, ul, ol, pre, blockquote, figure) {
  margin-block: 1em;
}

/* styles.css styles h1 globally, not just its margin. Kept at :where()
   specificity so .pagehero h1 / .subhero h1 / .product-summary h1 still
   override it, exactly as they do in the prototype. */
[class*="shopify-section--ib-"] :where(h1) {
  font-size: clamp(46px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
  margin: 18px 0 24px;
  color: var(--ib-navy);
  max-width: 770px;
}

[class*="shopify-section--ib-"] :where(h1 em) {
  font-style: normal;
  color: var(--ib-red);
}

@media (max-width: 600px) {
  [class*="shopify-section--ib-"] :where(h1) {
    font-size: 46px;
  }
}
[class*="shopify-section--ib-"] :where(h2) { margin-block: .83em; }
[class*="shopify-section--ib-"] :where(h3) { margin-block: 1em; }
[class*="shopify-section--ib-"] :where(h4) { margin-block: 1.33em; }

/* Prestige's .link draws a gradient underline that grows on hover. The
   prototype's .link is a small bold red label with no underline. */
[class*="shopify-section--ib-"] .link {
  background: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--ib-red);
}


/* Buttons matching the prototype's .btn / .btn-outline / .btn-red / .btn-navy exactly */
.ib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 750;
  font-size: 14px;
  border: 1px solid transparent;
  transition: .18s ease;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ib-btn:hover {
  transform: translateY(-1px);
}

.ib-btn--outline {
  border-color: #CED2DF;
  background: #fff;
  color: var(--ib-navy);
}

.ib-btn--red {
  background: var(--ib-red);
  color: #fff;
}

.ib-btn--navy {
  background: var(--ib-navy);
  color: #fff;
}

.ib-btn:focus-visible {
  outline: 2px solid var(--ib-navy);
  outline-offset: 2px;
}

.ib-btn--navy:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px var(--ib-navy);
}

.ib-btn--navy:active {
  background: color-mix(in srgb, var(--ib-navy) 85%, black);
  transform: translateY(0);
}

/* Retail cart-drawer checkout button (cart-drawer.liquid) showing the cart
   total inline - the dealer checkout button never carries a price, so this
   modifier only exists here, spacing the label and price to the button's
   opposite edges instead of centering them together. */
.ib-btn--with-price {
  justify-content: space-between;
}

/* Footer: reproduce the prototype's 5-column desktop layout (Brand | Shop | Help | Professionals | Company).
   Prestige's default .footer__block-list only defines 4 explicit grid tracks, so a 5th block block wraps
   to a new row — this overrides the column count at the same breakpoints Prestige already uses. */
@media screen and (min-width: 700px) {
  .footer__block-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1000px) {
  .footer__block-list {
    grid-template-columns: 1.35fr repeat(4, 1fr);
  }
}

/* Header cart link: match the prototype's bordered .cart-link pill (same visual weight as Dealer Login) */
.header__cart-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #CED2DF;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  color: var(--ib-navy);
  transition: .18s ease;
}

.header__cart-link a:hover {
  transform: translateY(-1px);
}

/* ============================================================
   Header parity (source: prototype styles.css `header` / `.nav` /
   `.brand` / `.brand-logo`, measured live off the prototype).

   Prototype desktop reference values:
     .nav          min-height 92px; padding 12px 0; gap 22px; align center
     .brand-logo   height 66px; width auto (logo is 4:3, so 88px wide)
     header        background rgba(255,255,255,.94); backdrop-filter blur(14px);
                   border-bottom 1px solid var(--line); sticky; z-index 20
     nav links     column-gap 18px
   => logo sits with ~13px of clear space above and below it.

   Native Prestige gave the header no min-height and no vertical padding, so
   it collapsed to exactly the logo's height and the logo sat flush against
   the announcement bar. The rules below restore the prototype's vertical
   rhythm and scale the logo up ~15% (66px -> ~76px tall) while preserving
   that same ~13px clear space above and below, and the logo's exact 4:3
   aspect ratio (never stretched or cropped - width is set, height is auto).

   Breakpoint tiers mirror the prototype's own (>1100 / 700-1100 / <700),
   scaled by the prototype's own ratios (66 -> 57 -> 50).
   ============================================================ */
.shopify-section.shopify-section-group-header-group .header {
  min-height: 102px;
  padding-top: 13px;
  padding-bottom: 13px;
  align-items: center;
  column-gap: 22px;
}

.header__logo-image {
  /* width comes from --header-logo-width (theme setting); height stays auto
     so the supplied logo is never distorted. */
  height: auto;
}

.header__primary-nav {
  column-gap: 18px;
}

/* Translucent, blurred, bottom-bordered header bar (prototype `header`).
   Prestige paints the bar on the height-observer wrapper, so the surface
   treatment belongs there rather than on .header itself. */
.shopify-section.shopify-section-group-header-group height-observer.header-custom {
  background-color: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ib-line);
}

/* Tablet + mobile tier: the prototype's `@media(max-width:1100px)` block sits
   AFTER its `@media(max-width:600px)` block, so at equal specificity the 1100px
   rule wins everywhere below 600px too - i.e. the prototype's 50px mobile logo
   rule is dead code and the logo is really 57px at every width <=1100px.
   Verified by measuring the prototype itself, not by reading the 600px block.
   The same single step is reproduced here (75px -> 64.5px, x0.864). */
@media screen and (max-width: 1100px) {
  .header__logo-image {
    width: 86px;
  }

  .shopify-section.shopify-section-group-header-group .header {
    min-height: 92px;
  }

  /* prototype: .nav nav{gap:13px;font-size:13px} */
  .header__primary-nav {
    column-gap: 13px;
  }

  .header__primary-nav-item a {
    font-size: 13px;
  }
}

/* Mobile tier: prototype .nav{min-height:74px;padding:10px 0} at <=600px. Its
   57px logo overflows that 54px content box, so the bar actually renders 77px
   tall. Scaled here to the 64.5px logo => 84px bar, same 10px padding. */
@media screen and (max-width: 600px) {
  .shopify-section.shopify-section-group-header-group .header {
    min-height: 84px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Footer brand-block fallback paragraph colour, kept in sync with the !important rule above */
.footer__block-list .footer__block.footer__block--text .custom_footer p {
    font-size: 13px;
    color: #AEB6D0;
}

/* Mobile sticky CTA bar (source: prototype .mobile-cta) */
.ib-mobile-cta {
  display: none;
}

@media (max-width: 600px) {
  .ib-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 14px;
    right: 14px;
    z-index: 50;
    background: #fff;
    padding: 8px;
    border: 1px solid var(--ib-line);
    box-shadow: 0 12px 40px rgba(23, 32, 51, .18);
    border-radius: 12px;
    gap: 8px;
  }

  .ib-mobile-cta .ib-btn {
    flex: 1;
    padding: 0 10px;
  }
}

/* Shared eyebrow label (source: prototype .eyebrow). margin-bottom here is
   the SINGLE source of truth for eyebrow-to-heading spacing site-wide -
   see the `.eyebrow + h1/h2/h3/h4` rule near the end of this file, which
   zeroes out each heading's own top margin so this value is the whole
   gap everywhere, never doubled up with a per-section heading margin. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ib-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.eyebrow:before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ib-red);
}

/* Shared section padding + "soft" background (source: prototype .section/.section.soft) */
.ib-section {
  padding: 88px 0;
}

.ib-section--soft {
  background: var(--ib-soft);
}

@media (max-width: 600px) {
  .ib-section {
    padding: 64px 0;
  }
}

/* Shared eyebrow+H2(+paragraph) header (source: prototype .section-head) */
.ib-section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  margin-bottom: 34px;
}

.ib-section-head h2 {
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ib-navy);
  margin: 0;
}

.ib-section-head p {
  max-width: 560px;
  color: var(--ib-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .ib-section-head {
    display: block;
  }

  .ib-section-head p {
    margin-top: 14px;
  }
}

@media (max-width: 600px) {
  .ib-section-head h2 {
    font-size: 34px;
  }
}

/* Stats strip (source: prototype .stats/.stats-grid/.stat) */
.ib-stats {
  border-bottom: 1px solid var(--ib-line);
  border-top: 1px solid var(--ib-line);
}

.ib-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ib-stat {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid var(--ib-line);
}

.ib-stat:last-child {
  border-right: 0;
}

.ib-stat b {
  display: block;
  color: var(--ib-navy);
  font-size: 30px;
  letter-spacing: -.03em;
}

.ib-stat span {
  font-size: 12px;
  color: var(--ib-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 750;
}

@media (max-width: 900px) {
  .ib-stats__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ib-stat:nth-child(2) {
    border-right: 0;
  }

  .ib-stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--ib-line);
  }
}

/* Two simple paths (source: prototype .choice-grid/.choice/.choice-dark/.choice-light) */
.ib-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ib-choice {
  border-radius: 22px;
  padding: 38px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ib-choice h3 {
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}

.ib-choice p {
  max-width: 500px;
  margin: 0 0 22px;
}

.ib-choice--dark {
  background: var(--ib-navy);
  color: #fff;
}

.ib-choice--light {
  background: #fff;
  border: 1px solid var(--ib-line);
  box-shadow: 0 20px 60px rgba(20, 31, 76, .10);
}

.ib-choice--light h3 {
  color: var(--ib-navy);
}

@media (max-width: 600px) {
  .ib-choice-grid {
    grid-template-columns: 1fr;
  }

  .ib-choice {
    min-height: 260px;
    padding: 28px;
  }
}

/* Benefit grid (source: prototype .features/.feature) */
.ib-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ib-feature {
  padding: 24px;
  border: 1px solid var(--ib-line);
  border-radius: 16px;
  background: #fff;
}

.ib-feature__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(196, 68, 85, .10);
  display: grid;
  place-items: center;
  color: var(--ib-red);
  font-weight: 900;
  margin-bottom: 18px;
}

.ib-feature h3 {
  font-size: 17px;
  color: var(--ib-navy);
  margin: 0 0 7px;
}

.ib-feature p {
  font-size: 14px;
  color: var(--ib-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .ib-features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .ib-features {
    grid-template-columns: 1fr;
  }
}

/* Homepage hero (source: prototype .hero/.hero-grid/.visual/.bathroom/
   .visual-tag - a custom section, contained in the same 1180px container
   as every other section, unlike native "Image with text" which makes
   its image column full-bleed to the viewport edge). */
.ib-hero {
  padding: 70px 0 62px;
  background: linear-gradient(180deg, #fff 0, #F8F9FC 100%);
}

.ib-hero__grid {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 62px;
}

.ib-hero__content h1 {
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
  margin: 18px 0 24px;
  color: var(--ib-navy);
  max-width: 770px;
}

.ib-hero__content h1 em {
  font-style: normal;
  color: var(--ib-red);
}

.ib-hero__copy {
  font-size: 18px;
  color: #4C556B;
  max-width: 610px;
  margin: 18px 0 28px;
}

.ib-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ib-hero__micro {
  list-style: none;
  display: flex;
  /* prototype .micro has no flex-wrap, i.e. nowrap - the items shrink and wrap
     their own text rather than dropping onto a second row. */
  gap: 24px;
  margin: 30px 0 0;
  padding: 0;
  color: #596176;
  font-size: 13px;
  font-weight: 650;
}

.ib-hero__micro li:before {
  content: "✓";
  color: var(--ib-red);
  font-weight: 900;
  margin-right: 7px;
}

.ib-hero__visual {
  min-height: 510px;
  border-radius: 24px;
  background: linear-gradient(135deg, #E9ECF4, #F9FAFC);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(20, 31, 76, .10);
}

.ib-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ib-hero__bathroom {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #e9edf4 0 53%, #d8dee9 53% 55%, #f7f8fa 55%);
}

.ib-hero__bathroom:before {
  content: "";
  position: absolute;
  width: 77%;
  height: 39%;
  left: 12%;
  bottom: 12%;
  background: white;
  border-radius: 18px 18px 40px 40px;
  box-shadow: 0 22px 40px rgba(39, 49, 77, .16);
}

.ib-hero__bathroom:after {
  content: "";
  position: absolute;
  width: 22%;
  height: 26%;
  left: 37%;
  bottom: 12%;
  background: var(--ib-navy);
  clip-path: polygon(0 48%, 100% 27%, 100% 100%, 0 100%);
  opacity: .95;
}

.ib-hero__visual-tag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 31, 76, .10);
  font-size: 13px;
  font-weight: 750;
}

.ib-hero__visual-tag b {
  display: block;
  color: var(--ib-navy);
  font-size: 15px;
}

@media (max-width: 900px) {
  .ib-hero {
    padding-top: 42px;
  }

  .ib-hero__grid {
    grid-template-columns: 1fr;
  }

  .ib-hero__visual {
    min-height: 380px;
  }
}

@media (max-width: 600px) {
  .ib-hero__content h1 {
    font-size: 46px;
  }

  .ib-hero__copy {
    font-size: 16px;
  }

  .ib-hero__visual {
    min-height: 310px;
  }

  .ib-hero__micro {
    display: block;
  }

  .ib-hero__micro li {
    display: block;
    margin: 7px 0;
  }
}

/* CTA banner (source: prototype .cta/.cta-actions) */
.ib-cta {
  background: var(--ib-navy);
  color: #fff;
  border-radius: 24px;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ib-cta__text h2 {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 10px;
  color: #fff;
}

.ib-cta__text p {
  margin: 0;
  color: #DCE1F3;
  max-width: 620px;
}

.ib-cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.ib-cta__actions .ib-btn {
  white-space: nowrap;
  min-width: 148px;
}

@media (max-width: 800px) {
  .ib-cta__actions {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .ib-cta {
    display: block;
    padding: 34px;
  }
}

/* Homepage video overview ("See How CleanCut Works in 60 Seconds"), source:
   sections/ib-video-overview.liquid. Play button and CTA use --ib-navy as
   the section's primary accent - the site has no separate blue token, and
   navy already reads as the brand's blue/purple-leaning accent everywhere
   else (buttons, headings); the eyebrow dash keeps the same restrained
   --ib-red touch every other section's eyebrow uses, rather than
   introducing a third accent color. */
.ib-video-overview__head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.ib-video-overview__head .eyebrow {
  justify-content: center;
}

.ib-video-overview__head h2 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--ib-navy);
  margin: 10px 0 14px;
}

.ib-video-overview__body {
  color: var(--ib-muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.ib-video-overview__frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ib-soft);
  box-shadow: 0 20px 50px rgb(28 41 109 / 0.16);
}

.ib-video-overview__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ib-video-overview__poster--placeholder {
  background: linear-gradient(135deg, var(--ib-soft), #E7E9F0);
}

.ib-video-overview__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ib-video-overview__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ib-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgb(28 41 109 / 0.35);
  transition: transform .18s ease, background-color .18s ease;
}

.ib-video-overview__play:hover,
.ib-video-overview__play:focus-visible {
  background: var(--ib-red);
  transform: translate(-50%, -50%) scale(1.06);
}

.ib-video-overview__play-icon {
  display: flex;
  margin-left: 4px;
}

.ib-video-overview__placeholder-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ib-muted);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

.ib-video-overview__cta {
  margin: 22px 0 0;
  text-align: center;
}

.ib-video-overview__cta-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  color: var(--ib-navy);
  cursor: pointer;
  border-bottom: 2px solid var(--ib-red);
  padding-bottom: 2px;
}

.ib-video-overview__cta-btn:hover {
  color: var(--ib-red);
}

@media (max-width: 700px) {
  .ib-video-overview__head {
    margin-bottom: 28px;
  }

  .ib-video-overview__head h2 {
    font-size: 30px;
  }

  .ib-video-overview__body {
    font-size: 16px;
  }

  .ib-video-overview__frame {
    border-radius: 18px;
  }

  .ib-video-overview__play {
    width: 68px;
    height: 68px;
  }

  .ib-video-overview__play-icon svg {
    width: 18px;
    height: 21px;
  }
}

/* Product highlight cards (source: prototype .cards/.card/.product-img/
   .card-body/.link, including the CSS-drawn placeholder shape - this is
   the prototype's actual current design, reproduced exactly rather than
   left blank until real photography exists). */
.ib-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ib-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ib-line);
  border-radius: 18px;
  overflow: hidden;
  transition: .2s ease;
  text-decoration: none;
  color: inherit;
}

.ib-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(23, 32, 51, .09);
}

.ib-card__img {
  height: 210px;
  background: linear-gradient(145deg, #eef1f6, #dfe4ee);
  position: relative;
  overflow: hidden;
}

.ib-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ib-card__img:before {
  content: "";
  position: absolute;
  width: 62%;
  height: 44%;
  left: 19%;
  bottom: 17%;
  background: #fff;
  border-radius: 10px 10px 26px 26px;
  box-shadow: 0 12px 30px rgba(20, 31, 76, .14);
}

.ib-card__img:after {
  content: "";
  position: absolute;
  width: 23%;
  height: 31%;
  left: 38%;
  bottom: 17%;
  background: var(--ib-navy);
  clip-path: polygon(0 45%, 100% 25%, 100% 100%, 0 100%);
}

.ib-card__img--has-image:before,
.ib-card__img--has-image:after {
  content: none;
}

.ib-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.ib-card__body h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--ib-navy);
}

.ib-card__body p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ib-muted);
  min-height: 44px;
}

.ib-card__link {
  display: block;
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ib-red);
}

@media (max-width: 900px) {
  .ib-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .ib-cards {
    grid-template-columns: 1fr;
  }

  .ib-card__img {
    height: 180px;
  }
}

/* "CleanCut Kit Reviews" homepage carousel (source: Loox product
   metafields, see sections/ib-reviews-carousel.liquid). Card width is set
   with calc() against the container, never a fixed pixel width, so the
   "N visible" counts below hold at any content length. */
.ib-reviews__count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ib-muted);
}

.ib-reviews__count .stars {
  font-size: 15px;
  letter-spacing: 1px;
}

.ib-reviews__track-wrap {
  container-type: inline-size;
  overflow: hidden;
  margin: 0 -4px;
  padding: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ib-reviews__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: ib-reviews-scroll var(--ib-reviews-duration, 70s) linear infinite;
}

.ib-reviews__track-wrap:hover .ib-reviews__track {
  animation-play-state: paused;
}

@keyframes ib-reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Card list is rendered twice back-to-back, so -50% is exactly one
       full set - the loop point is seamless with no jump. */
    transform: translateX(-50%);
  }
}

.ib-review-card {
  flex: 0 0 calc((100cqw - 36px) / 3);
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--ib-line);
  border-radius: 18px;
  padding: 22px;
}

.ib-review-card__stars {
  font-size: 14px;
  letter-spacing: 1px;
}

.ib-review-card__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ib-muted);
}

.ib-review-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ib-ink);
  flex: 1;
}

.ib-review-card__author {
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ib-navy);
}

@media (max-width: 900px) {
  .ib-review-card {
    flex-basis: calc((100cqw - 18px) / 2);
  }
}

@media (max-width: 600px) {
  .ib-review-card {
    flex-basis: 86cqw;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ib-reviews__track {
    animation: none;
  }

  .ib-reviews__track-wrap {
    overflow-x: auto;
  }
}

/* ============================================================
   Product pages (source: prototype cleancut-*.html / molded-tub-bar.html
   + styles.css "Prestige-style product" + "Visible CleanCut colour
   choices" + "Product checkout trust / reassurance" blocks).
   Class names are unprefixed, matching the prototype's own names 1:1
   (verified no collision with existing Prestige selectors). Real
   variant selection, price and Add to Cart wire into native Prestige
   <variant-picker>/<product-form>/price-list/quantity-selector
   components for genuine cart functionality; only their visual
   presentation is restyled to match the prototype.
   ============================================================ */
.product-hero {
  padding: 62px 0 54px;
  background: linear-gradient(180deg, #fff, #f7f8fc);
}

.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 68px;
  align-items: start;
}

.product-stage {
  background: #f2f3f8;
  border-radius: 24px;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 116px;
  overflow: hidden;
}

.product-visual {
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 56px;
}

.mock-tub {
  width: min(82%, 520px);
  height: 230px;
  background: #fff;
  border-radius: 26px 26px 62px 62px;
  box-shadow: 0 28px 55px rgba(28, 41, 109, .14);
  position: relative;
  border: 1px solid #e4e7ee;
}

.mock-tub:before,
.mock-tub:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 170px;
  bottom: 0;
  background: #fff;
}

.mock-tub:before {
  left: -1px;
  border-radius: 0 0 0 42px;
}

.mock-tub:after {
  right: -1px;
  border-radius: 0 0 42px 0;
}

.mock-opening {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 36%;
  height: 104px;
  background: #f2f3f8;
  border-radius: 20px 20px 0 0;
  border: 1px solid #e4e7ee;
  border-bottom: 0;
}

.deep .mock-opening {
  height: 130px;
}

.ultra .mock-opening {
  height: 170px;
}

.convertible .mock-opening {
  width: 31%;
  height: 104px;
}

.mock-plug {
  display: none;
}

.convertible .mock-plug {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15px;
  width: 27%;
  height: 72px;
  border-radius: 12px;
  background: #e5e8f0;
  border: 2px solid var(--ib-navy);
  opacity: .85;
}

.visual-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid #e2e5ee;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.visual-caption strong {
  color: var(--ib-navy);
}

.product-colour-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ib-muted);
  font-weight: 650;
  text-align: center;
}

/*
 * Product image gallery (snippets/ib-product-gallery.liquid). Reuses
 * Prestige's own .product-gallery__* rules for layout/carousel/scroll
 * behaviour; only the active-thumbnail colour and a couple of spacing
 * tweaks are overridden here, scoped to .ib-product-gallery so the rest of
 * the theme's own product-gallery instances (main-product.liquid etc.)
 * are untouched.
 */
.product-visual--gallery {
  display: block;
  min-height: 0;
  padding: 28px;
}

.product-stage--gallery .visual-caption {
  position: static;
  margin: 0 28px 28px;
}

.ib-product-gallery {
  width: 100%;
}

.ib-product-gallery .product-gallery__thumbnail-list {
  --product-gallery-thumbnail-size: 4.5rem;
  margin-top: .25rem;
}

.ib-product-gallery .product-gallery__thumbnail {
  border-radius: var(--button-border-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.ib-product-gallery .product-gallery__thumbnail[aria-current="true"] {
  border-color: var(--ib-navy);
  box-shadow: 0 0 0 1px var(--ib-navy);
}

.ib-product-gallery button.product-gallery__thumbnail:hover {
  border-color: var(--ib-navy);
}

/*
 * Placeholder for a product that has no Shopify media uploaded yet at all
 * (product.media.size == 0). Neutral/light, no fake product photography -
 * just an icon so the empty main image still looks intentional. As soon as
 * real media is added in Admin this is replaced by the real gallery - see
 * snippets/ib-product-gallery.liquid. There is no equivalent thumbnail
 * placeholder: the thumbnail row only ever renders real media and is
 * omitted entirely when there's nothing (yet) to switch between.
 */
.ib-product-gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--ib-soft);
  border: 1px solid var(--ib-line);
  color: var(--ib-muted);
}

.ib-product-gallery__placeholder--main {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--button-border-radius);
}

.ib-product-gallery__placeholder--main > svg {
  width: 48px;
  height: 48px;
}

.ib-product-gallery__placeholder-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}

.tubbar .mock-tub {
  width: 300px;
  height: 300px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tubbar .mock-tub:before {
  width: 95px;
  height: 290px;
  left: 102px;
  bottom: 0;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 55px 55px 24px 24px;
  box-shadow: 0 24px 50px rgba(28, 41, 109, .15);
}

.tubbar .mock-tub:after {
  width: 52px;
  height: 112px;
  left: 124px;
  top: 48px;
  right: auto;
  background: #f2f3f8;
  border-radius: 30px;
  border: 1px solid #e0e4ec;
}

.tubbar .mock-opening {
  display: none;
}

.mini .mock-tub,
.ultra-mini .mock-tub {
  width: 360px;
  height: 210px;
}

.mini .mock-opening {
  height: 85px;
}

.ultra-mini .mock-opening {
  height: 170px;
}

.product-visual.mini-card-holder {
  position: relative;
}

.product-visual.mini-card-holder:after {
  content: "BUSINESS CARD HOLDER";
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: 112px;
  height: 62px;
  border: 2px solid var(--ib-navy);
  border-radius: 6px;
  background: #fff;
  color: var(--ib-navy);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 8px 20px rgba(28, 41, 109, .12);
}

.dealer-only-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f1eff9;
  border: 1px solid #ded8f0;
  color: var(--ib-navy);
  margin: 18px 0;
}

.dealer-only-banner span {
  font-size: 13px;
  color: #626b80;
}

.product-summary h1 {
  font-size: clamp(42px, 4.6vw, 64px);
  margin: 14px 0 16px;
  /* inherited from the prototype's global h1 rule */
  line-height: .98;
  letter-spacing: -.055em;
  max-width: 770px;
  color: var(--ib-navy);
}

.product-lead {
  font-size: 18px;
  color: #515b71;
  line-height: 1.65;
}

/* ============================================================
   Judge.me, styled to the Imperial palette rather than its defaults.
   Only the development theme carries these; the live Keepsakes3D theme
   has no Judge.me integration of any kind.
   ============================================================ */

/* Judge.me replaces the contents of its own containers. On a product with
   no reviews it marks the widget "done" but leaves it empty, and its own
   stylesheet still sets display:block - which held open a dead 310px grid
   column beside the fallback. Its stylesheet loads after this one, so the
   guard needs both the extra specificity and !important to win. */
.review-widget .jdgm-widget:empty,
.rating-line .jdgm-widget:empty {
  display: none !important;
}

/* Once Judge.me has rendered, the prototype's empty state stands down. */
.review-widget .jdgm-widget:not(:empty) ~ .review-empty {
  display: none;
}

/* The widget spans both prototype columns; Judge.me draws its own
   summary/list split internally. */
.review-widget .jdgm-review-widget:not(:empty) {
  grid-column: 1 / -1;
}

/* Loox draws its own summary/list split internally too, so its widget spans
   both prototype columns the same way Judge.me's did. */
.review-widget #looxReviews {
  grid-column: 1 / -1;
}

/* Loox's own manual-embed default class (loox-reviews-default, from their
   own documented snippet - not ours) ships a conservative width: 300px;
   max-width: 1200px fallback via a stylesheet their script injects. Loox's
   review grid is documented as fully responsive to its container's width
   and drops to a single narrow column when that container is narrow, which
   is exactly what the 300px default caused here. This only widens the
   container to the width .review-widget already reserves for it (the
   normal page content width, via the grid-column rule above) - it does not
   touch Loox's own card design, columns, or spacing once it has that room.
   !important because Loox's injected stylesheet loads after theme.css and
   otherwise wins the tie on equal specificity. */
.review-widget .loox-reviews-default {
  width: 100% !important;
  max-width: 100% !important;
}

.jdgm-widget {
  --jdgm-primary-color: var(--ib-navy);
  --jdgm-star-color: var(--ib-navy);
  --jdgm-paginate-color: var(--ib-navy);
  --jdgm-secondary-color: var(--ib-red);
  font-family: inherit;
}

.jdgm-widget .jdgm-star {
  color: var(--ib-navy);
}

/* Judge.me's own stylesheet hardcodes a teal color on the rating-distribution
   histogram bars specifically (.jdgm-histogram__star), for both the filled
   and unfilled star segments - overriding the plain .jdgm-star rule above
   since it loads after this file. Match its specificity with !important:
   filled segments go navy like every other star; unfilled segments go a
   neutral muted grey (not navy, which would misread as "also filled"). */
.jdgm-widget .jdgm-histogram__star .jdgm-star.jdgm--on {
  color: var(--ib-navy) !important;
}

.jdgm-widget .jdgm-histogram__star .jdgm-star:not(.jdgm--on) {
  color: var(--ib-muted) !important;
}

.jdgm-widget .jdgm-write-rev-link,
.jdgm-widget .jdgm-btn {
  background: var(--ib-red);
  color: #fff;
  border-radius: 8px;
  font-weight: 750;
  font-size: 14px;
}

/* the badge sits in the prototype's .rating-line, so it must not add
   margins of its own */
.rating-line .jdgm-preview-badge {
  margin: 0;
}

.rating-line {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13px;
  color: var(--ib-muted);
  text-decoration: none;
}

/* Only one rating summary beside the title - the prototype's .rating-line,
   fed by real Judge.me figures. If Judge.me injects a preview badge of its own
   into the summary column, it stays hidden. The full widget lower down is
   untouched, since it lives in .reviews-section. */
.product-summary .jdgm-prev-badge,
.product-summary .jdgm-preview-badge {
  display: none !important;
}

/* unfilled stars keep the prototype geometry, muted rather than gold */
.stars .star--off {
  color: #d8dae2;
}

.stars {
  letter-spacing: 2px;
  color: var(--ib-navy);
}

/* Loox star rating widget - same compact slot beside the title that the
   Judge.me badge used to fill (.rating-line above). Loox hydrates its own
   markup inside .loox-rating from the data-* attributes on the div. */
.ib-loox-rating-link {
  display: inline-block;
  margin: 6px 0 12px;
  text-decoration: none;
}

/* #C44455 on every star Loox draws, on both the compact rating widget and
   the full reviews widget below - never Loox's default gold. Loox draws its
   stars as inline SVGs; covering both the svg and any inner path/use keeps
   the override intact regardless of which element actually carries the
   fill. The full reviews widget's interactive parts (review list, write-a-
   review form) render inside a cross-origin loox.io iframe that this CSS
   cannot reach - matching that widget's stars needs Loox's own Settings >
   Branding > Style > Star rating colour set to #C44455 on their side. */
.loox-rating svg,
.loox-rating svg *,
.loox-rating .loox-icon,
.loox-rating .loox-icon svg,
.loox-rating .loox-icon svg *,
#looxReviews svg,
#looxReviews svg *,
#looxReviews .loox-icon,
#looxReviews .loox-icon svg,
#looxReviews .loox-icon svg * {
  fill: #C44455 !important;
  color: #C44455 !important;
  stroke: #C44455 !important;
}

/* The rating number and "N Reviews" text data-pattern adds next to the
   compact widget's stars, plus the #reviews link wrapping the whole line -
   same #C44455, not Loox's default grey/black text. */
.ib-loox-rating-link,
.ib-loox-rating-link *,
.loox-rating,
.loox-rating * {
  color: #C44455 !important;
}

.product-bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-bullets li {
  border: 1px solid var(--ib-line);
  border-radius: 12px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
}

.product-bullets li:before {
  content: "\2713";
  margin-right: 7px;
  color: var(--ib-red);
  font-weight: 900;
}

.purchase-card {
  border: 1px solid var(--ib-line);
  border-radius: 18px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(28, 41, 109, .07);
}

.stock {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #426b4d;
}

.stock span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #6b9e75;
  margin-right: 6px;
}

/* The prototype only ever draws the in-stock pill. This keeps its geometry and
   swaps the green for the muted red already used elsewhere in the palette. */
.stock--out {
  color: #8a3a3a;
}

.stock--out span {
  background: #b46a6a;
}

.product-price,
.purchase-card .price-list--product {
  font-size: 34px;
  color: var(--ib-navy);
  font-weight: 850;
  letter-spacing: -.03em;
  margin: 8px 0;
}

.product-price span {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ib-muted);
}

.product-price s {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--ib-muted);
  margin-right: 8px;
}

/* Dealer-facing Silver/Tier 1 price range shown on CleanCut kit product
   pages in place of the DIY retail price. Display only - the custom
   dealer-checkout app still calculates the exact cart/checkout price. */
.dealer-range-price {
  font-size: 28px;
}

.dealer-price-kicker {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ib-muted);
  margin-bottom: 2px;
}

.dealer-price-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ib-muted);
}

.dealer-rank-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  border: 1px solid var(--ib-line);
  border-radius: 10px;
  background: #f6f7fb;
}

.dealer-rank-line strong {
  color: var(--ib-navy);
  font-size: 14px;
  font-weight: 850;
}

.dealer-rank-line span {
  font-size: 12px;
  color: var(--ib-muted);
}

/* Kit number shown beside each size choice, and standalone on products
   with a single variant. Matches .colour-availability's treatment. */
.kit-number-line {
  margin: 8px 0 12px;
  font-size: 14px;
  color: var(--ib-navy);
}

.kit-number-line strong {
  margin-right: 6px;
}

.purchase-card .select .kit-number,
.popover__value-list .kit-number {
  color: var(--ib-muted);
  font-weight: 650;
}

.colour-availability {
  margin: 8px 0 12px;
  font-size: 14px;
  color: var(--ib-navy);
}

.shipping-pill {
  display: inline-flex;
  background: #eef5ef;
  color: #356040;
  padding: 7px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 18px;
}

.qty-row {
  margin: 14px 0;
}

.purchase-card .qty-row .qty-label {
  display: block;
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ib-ink);
}

/* the prototype's .purchase-card input box. A single explicit height (rather
   than the base component's height + our own min-height fighting each other)
   is what keeps the minus/number/plus row perfectly centered - the grid's own
   align-items: center (see base .quantity-selector rule) does the rest. */
.purchase-card .qty-row .quantity-selector {
  --quantity-selector-height: 44px;
  border: 1px solid #d6dae4;
  border-radius: 9px;
  background: #fff;
}

.btn-wide {
  width: 100%;
  margin-top: 8px;
}

/* Prestige's .button is the Keepsakes3D gold pill (15px/400, 4px radius).
   The prototype's Add to Cart is .btn.btn-red.btn-wide. */
.purchase-card .buy-buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  height: auto;
  margin-top: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ib-red);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  transition: .18s ease;
}

/* Prestige/Keepsakes3D's gold hover (.shopify-product-form .buy-buttons
   .button:hover, above) matches this selector's specificity, so it must be
   re-asserted here at every interactive state or the gold leaks through on
   hover/focus/active - the resting color above is the only Add to Cart
   color IB uses, never a new accent. */
.purchase-card .buy-buttons .button:hover,
.purchase-card .buy-buttons .button:focus-visible,
.purchase-card .buy-buttons .button:active {
  background: var(--ib-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Native <variant-picker> restyled to match the prototype's .colour-field/
   .colour-swatches/.colour-swatch pill buttons (colour) and plain bordered
   select box (size). Real functionality (URL update, cart form binding)
   comes from Prestige's variant-picker.js - only presentation changes. */
.purchase-card .variant-picker {
  gap: 14px;
  margin: 14px 0;
}

.purchase-card .variant-picker__option {
  border: 0;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.purchase-card .variant-picker__option-info legend {
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--ib-ink);
  /* Prestige sets an uppercase, letter-spaced legend; the prototype's
     "Colour"/"Size" labels are plain sentence case. */
  text-transform: none;
  letter-spacing: normal;
}

/* Prestige echoes the selected option value beside the legend. The prototype
   has no such element - the swatch labels already name the selection - and the
   two Keepsakes3D leftovers (an empty <lable>, a stray .sdsd wrapper) render
   as blank inline boxes, so none of them should take up space here. */
.purchase-card .variant-picker__option-info > * > span,
.purchase-card .variant-picker__option-info lable {
  display: none;
}

.purchase-card .variant-picker__option-values:has(.color-swatch) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Prestige draws each colour option as a fixed 34px round chip
   (--swatch-size + border-radius:50% + display:grid + the colour painted onto
   the chip itself). The prototype uses a bordered button holding a 21px dot
   next to a visible label, so the chip geometry has to be unset rather than
   added to - otherwise the label overflows the 34px box and collides with the
   swatch beside it. */
.purchase-card .color-swatch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ccd2df;
  border-radius: 8px;
  background: #fff;
  color: var(--ib-navy);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* the prototype's .swatch-dot */
.purchase-card .color-swatch:before {
  content: "";
  position: static;
  inset: auto;
  margin: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid #c8ccd5;
  flex: 0 0 auto;
  background: var(--swatch-background, #fff);
}

.purchase-card .color-swatch[data-value="white"]:before {
  background: #ffffff;
}

.purchase-card .color-swatch[data-value="beige"]:before {
  background: #e6d5b8;
}

/* Prestige pops the chip with transform: scale(1.1); the prototype only
   darkens the border. */
.purchase-card .color-swatch:hover {
  transform: none;
  border-color: var(--ib-navy);
}

/* Prestige marks the selection with a double ring on the label that follows
   the checked radio. The prototype thickens the border and adds a soft halo,
   compensating the padding so the button does not change size. */
.purchase-card :checked + .color-swatch,
.purchase-card .color-swatch.is-selected {
  border: 2px solid var(--ib-navy);
  padding: 7px 13px;
  box-shadow: 0 0 0 2px rgba(28, 41, 109, .08);
}

/* Prestige keeps the option name screen-reader-only; the prototype shows it
   beside the dot. */
.purchase-card .color-swatch .sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
}

/* styles.css @media(max-width:600px): the swatches become two equal columns
   and centre their contents. */
@media (max-width: 600px) {
  .purchase-card .variant-picker__option-values:has(.color-swatch) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .purchase-card .color-swatch {
    justify-content: center;
  }
}

.purchase-card .variant-picker__option .select {
  width: 100%;
  border: 1px solid #d6dae4;
  border-radius: 9px;
  padding: 13px;
  background: #fff;
  font: inherit;
  color: var(--ib-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Checkout reassurance / trust badges (source: prototype .checkout-reassurance/.trust-grid) */
.checkout-reassurance {
  margin-top: 16px;
  border-top: 1px solid var(--ib-line);
  padding-top: 15px;
}

.secure-checkout-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #43506a;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 13px;
}

.secure-checkout-line svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: var(--ib-navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}

.secure-checkout-line strong {
  color: var(--ib-navy);
  font-size: 13px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid var(--ib-line);
  border-radius: 10px;
  background: #fafbfe;
}

.trust-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e2e6ef;
}

.trust-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ib-navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item strong {
  display: block;
  color: var(--ib-navy);
  font-size: 11px;
  line-height: 1.25;
}

.trust-item small {
  display: block;
  color: var(--ib-muted);
  font-size: 9.5px;
  line-height: 1.3;
  margin-top: 2px;
}

/* DIY sizing-confidence callout on the product page purchase card. Replaces
   the old "Prefer Professional Installation?" callout, which put Find an
   Installer front-and-center on a page whose whole point is the DIY
   purchase path. This keeps the shopper moving toward Add to Cart:
   confirm the kit fits, then buy - installer lookup is now just the small
   text link at the bottom, not a full-width primary button. */
.sizing-help-callout {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--ib-line);
  border-radius: 14px;
  background: #f7f8fb;
}

.sizing-help-callout .eyebrow {
  font-size: 10px;
}

.sizing-help-callout h3 {
  color: var(--ib-navy);
  font-size: 18px;
  line-height: 1.25;
  margin: 8px 0 7px;
}

.sizing-help-callout p {
  color: var(--ib-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.sizing-help-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sizing-help-callout__actions .ib-btn {
  flex: 1 1 200px;
}

.sizing-help-callout__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ib-red);
}

/* Mobile: explicit single-column stack, full-width buttons - no side-by-side
   text/button layout and no narrow squeezed column at any phone width
   (this stylesheet's narrowest breakpoint is 600px; nothing smaller is
   defined, so this rule is the true "mobile" state end to end). */
@media (max-width: 600px) {
  .sizing-help-callout__actions {
    flex-direction: column;
  }

  .sizing-help-callout__actions .ib-btn {
    flex: none;
    width: 100%;
  }
}

/* Product info grid + sidebar (source: prototype .product-content/.product-info-grid) */
.product-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: start;
}

.product-info-section {
  border-bottom: 1px solid var(--ib-line);
  padding: 0 0 34px;
  margin: 0 0 34px;
}

.product-info-section h2 {
  font-size: 30px;
  color: var(--ib-navy);
  margin: 0 0 14px;
}

.product-info-section p,
.product-info-section li {
  font-size: 16px;
  color: #444f64;
  line-height: 1.7;
}

.check-list {
  padding-left: 20px;
}

.spec-list p {
  margin: 9px 0;
}

.product-side {
  position: sticky;
  top: 116px;
  border: 1px solid var(--ib-line);
  border-radius: 18px;
  padding: 24px;
  background: #f8f9fc;
}

.product-side h3 {
  color: var(--ib-navy);
  font-size: 22px;
  /* prototype sets only margin-top here; the bottom margin comes from the prototype typography baseline above */
  margin-top: 0;
}

.product-side .ib-btn {
  margin-top: 10px;
}

/* Reviews (source: prototype .reviews-section - empty state only, no
   fabricated review data; Judge.me install is a later phase) */
.reviews-section {
  padding: 78px 0 10px;
  background: #f7f8fb;
  border-top: 1px solid var(--ib-line);
}

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
}

.reviews-head h2 {
  margin: 7px 0 0;
  color: var(--ib-navy);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.review-app-note {
  font-size: 12px;
  color: var(--ib-muted);
  white-space: nowrap;
}

.review-app-note strong {
  color: var(--ib-navy);
}

.review-widget {
  background: #fff;
  border: 1px solid var(--ib-line);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(28, 41, 109, .06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
}

@media (max-width: 800px) {
  .review-widget {
    grid-template-columns: 1fr;
  }
}

.review-empty {
  padding: 52px 20px;
  text-align: center;
  color: var(--ib-muted);
}

/* .review-widget is a 310px + 1fr grid for Judge.me's summary/list split.
   The empty state is a single full-width panel, so it spans both. */
.review-widget .review-empty {
  grid-column: 1 / -1;
}

.review-empty strong {
  display: block;
  color: var(--ib-navy);
  font-size: 21px;
  margin-bottom: 5px;
}

@media (max-width: 1100px) {
  .product-hero-grid {
    gap: 38px;
  }
}

@media (max-width: 900px) {
  .product-hero-grid,
  .product-info-grid {
    grid-template-columns: 1fr;
  }

  .product-stage,
  .product-side {
    position: static;
  }

  .product-stage {
    min-height: 430px;
  }
}

@media (max-width: 600px) {
  .product-hero {
    padding-top: 34px;
  }

  .product-stage {
    min-height: 350px;
  }

  .product-visual {
    min-height: 300px;
    padding: 30px;
  }

  .mock-tub {
    height: 160px;
  }

  .mock-opening {
    height: 76px;
  }

  .deep .mock-opening {
    height: 92px;
  }

  .ultra .mock-opening {
    height: 122px;
  }

  .product-bullets {
    grid-template-columns: 1fr;
  }

  .product-summary h1 {
    font-size: 42px;
  }

  .reviews-section {
    padding-top: 58px;
  }

  .reviews-head {
    display: block;
  }

  .review-app-note {
    margin-top: 10px;
  }

  .reviews-head h2 {
    font-size: 32px;
  }
}

/* ============================================================
   Core content pages (source: prototype products.html/faq.html/
   how-to.html/installer.html/about-us.html/contact-us.html/
   privacy-policy.html/terms-of-use.html). Unprefixed class names
   matching the prototype 1:1 (no collisions with Prestige core CSS).
   ============================================================ */
.content {
  padding: 70px 0;
}

/* styles.css declares .content{padding:70px 0} and then .product-content
   {padding-top:64px}, so only the top is tightened. This rule has to stay
   after .content to win at equal specificity. */
.product-content {
  padding-top: 64px;
}

/* ============================================================
   Prototype rules that the page ports missed. Found by diffing every
   selector in styles.css against this file and keeping the ones whose
   classes the ib-* sections actually render.
   ============================================================ */

/* The lead paragraph under each page heading. Without this it fell back to
   body type - 16px, full container width - on every page using .pagehero. */
.hero-copy {
  font-size: 18px;
  color: #4C556B;
  max-width: 610px;
  margin-bottom: 28px;
}

@media (max-width: 600px) {
  .hero-copy {
    font-size: 16px;
  }
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.product-list-hero {
  text-align: left;
}

.product-list-hero .hero-copy {
  margin-left: 0;
  margin-right: 0;
}

.notice {
  padding: 14px 16px;
  border-radius: 10px;
  background: #F8F2F3;
  color: #703541;
  font-size: 13px;
}

.chapter-grid a {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7f9fc;
  color: var(--ib-navy);
  font-weight: 800;
  text-decoration: none;
}

.visual-caption span {
  font-size: 12px;
  color: var(--ib-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-form-panel select {
  width: 100%;
  border: 1px solid #d6dae4;
  border-radius: 9px;
  padding: 13px;
  background: #fff;
  font: inherit;
}

.contact-form-panel h2 {
  margin-top: 0;
}

.resource-strip > div {
  padding: 28px;
  border-radius: 18px;
  background: #f6f7fb;
  border: 1px solid var(--ib-line);
}

.pagehero {
  padding: 68px 0;
  background: var(--ib-soft);
}

/* Prototype `.pagehero h1{font-size:54px}` inherits the rest from its global
   `h1` rule: line-height .98, letter-spacing -.055em, margin 18px 0 24px and
   max-width 770px. Prestige has no equivalent global h1, so the inherited
   values are spelled out here. */
.pagehero h1 {
  font-size: 54px;
  line-height: .98;
  letter-spacing: -.055em;
  color: var(--ib-navy);
  margin: 18px 0 24px;
  max-width: 770px;
}

.pagehero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

.pagehero-copy {
  font-size: 18px;
  color: var(--ib-muted);
  max-width: 720px;
  margin: 0;
}

/* Shop listing (source: prototype .shop-grid/.shop-card/.shop-thumb) */
/* DIY sizing-confidence banner on the Shop DIY Kits overview page. Replaces
   the old "Prefer Professional Installation?" banner, which encouraged
   shoppers to leave this DIY shopping page for an installer lookup. Text
   left / actions right on desktop (matching the .dealer-callout banner
   directly below it); see the max-width:900px/600px media queries further
   down for how both banners collapse to a single mobile column together. */
.shop-sizing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  margin: 0 0 34px;
  padding: 30px 32px;
  border: 1px solid var(--ib-line);
  border-radius: 20px;
  background: #f7f8fb;
}

.shop-sizing-banner h2 {
  margin: 8px 0 8px;
  color: var(--ib-navy);
  font-size: 28px;
  line-height: 1.1;
}

.shop-sizing-banner p {
  margin: 0;
  max-width: 720px;
  color: var(--ib-muted);
}

.shop-sizing-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
}

.shop-sizing-banner__link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ib-red);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ib-line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 34px rgba(28, 41, 109, .06);
  transition: .18s ease;
  text-decoration: none;
  color: inherit;
}

/* .dealer-card is a <button>, not an <a> (it opens the dealer-product
   modal rather than navigating) - reset the browser's default button
   chrome so it matches the .shop-card <a> cards exactly. */
button.shop-card {
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(28, 41, 109, .11);
}

.shop-thumb {
  flex: 0 0 auto;
  height: 240px;
  background: #f2f3f8;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-thumb .mock-tub {
  width: 72%;
  height: 120px;
  border-radius: 18px 18px 36px 36px;
}

.shop-thumb .mock-tub:before,
.shop-thumb .mock-tub:after {
  height: 84px;
  width: 20px;
}

.shop-thumb .mock-opening {
  height: 54px;
  border-radius: 10px 10px 0 0;
}

.shop-thumb.deep .mock-opening {
  height: 66px;
}

.shop-thumb.ultra .mock-opening {
  height: 88px;
}

.shop-thumb.convertible .mock-opening {
  height: 54px;
}

.shop-thumb.convertible .mock-plug {
  height: 39px;
  bottom: 7px;
}

.shop-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 23px;
}

.shop-card h2 {
  font-size: 21px;
  color: var(--ib-navy);
  margin: 5px 0 8px;
}

.shop-card p {
  color: var(--ib-muted);
  min-height: 48px;
  flex: 1 1 auto;
}

/* CTA block pinned to the bottom of every card, so price, note and button
   line up across a row no matter how long the title or description runs. */
.shop-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.shop-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 850;
  color: var(--ib-red);
}

.shop-price {
  font-size: 23px;
  font-weight: 850;
  color: var(--ib-navy);
  margin-top: 12px;
}

.free-ship {
  display: block;
  font-size: 12px;
  color: #426b4d;
  font-weight: 800;
  margin: 3px 0 16px;
}

.free-ship.price-note {
  color: var(--ib-muted);
}

.shop-card .ib-btn {
  width: 100%;
}

.tubbar-shape {
  width: 70px;
  height: 190px;
  border-radius: 40px 40px 18px 18px;
  background: #fff;
  border: 1px solid #dfe3ed;
  box-shadow: 0 20px 42px rgba(28, 41, 109, .13);
  position: relative;
}

.tubbar-shape:after {
  content: "";
  position: absolute;
  width: 36px;
  height: 70px;
  left: 16px;
  top: 30px;
  background: #f2f3f8;
  border-radius: 24px;
  border: 1px solid #e0e4ec;
}

.dealer-callout {
  margin-top: 48px;
  border-radius: 22px;
  background: var(--ib-navy);
  color: #fff;
  padding: 34px 38px;
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: center;
}

.dealer-callout .eyebrow {
  color: #fff;
}

.dealer-callout .eyebrow:before {
  background: #fff;
}

.dealer-callout h2 {
  margin: 7px 0;
  font-size: 30px;
}

.dealer-callout p {
  margin: 0;
  color: #dce1f3;
}

/* FAQ page (source: prototype .faq-layout/.faq-group/.faq-item) */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 54px;
  align-items: start;
}

.faq-group {
  margin-bottom: 46px;
}

.faq-group h2 {
  color: var(--ib-navy);
  font-size: 32px;
  margin: 0 0 18px;
}

.faq-item {
  border-top: 1px solid var(--ib-line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--ib-line);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 42px 20px 0;
  font-weight: 800;
  color: var(--ib-navy);
  font-size: 17px;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 24px;
  font-weight: 400;
}

.faq-item[open] summary:after {
  content: "\2013";
}

.faq-item div {
  padding: 0 44px 19px 0;
}

.faq-item p {
  margin: 0;
  color: #525c71;
  line-height: 1.68;
}

.faq-side {
  position: sticky;
  top: 116px;
  border-radius: 18px;
  background: #f6f7fb;
  padding: 26px;
  border: 1px solid var(--ib-line);
}

.faq-side h3 {
  font-size: 24px;
  color: var(--ib-navy);
  /* prototype sets only margin-top here; the bottom margin comes from the prototype typography baseline above */
  margin-top: 0;
}

.faq-side .ib-btn {
  margin-top: 10px;
}

/* How-To / Sizing page (source: prototype .subhero/.video-layout/.chapter-grid) */
.subhero {
  padding: 76px 0 42px;
  background: linear-gradient(180deg, #f7f9fc, white);
}

.subhero h1 {
  max-width: 850px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  /* inherited from the prototype's global h1 rule */
  letter-spacing: -.055em;
  margin: 10px 0 16px;
  color: var(--ib-navy);
}

.subhero p {
  max-width: 780px;
  font-size: 18px;
  color: var(--ib-muted);
}

.video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 30px;
  align-items: start;
}

.video-stack {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.video-box {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1c296d, #c44455);
  border-radius: 26px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(28, 41, 109, .18);
}

.video-box--media {
  background: #000;
  overflow: hidden;
  position: relative;
}

.video-box--media video,
.video-box--media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-box__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-box__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ib-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgb(28 41 109 / 0.35);
  transition: transform .18s ease, background-color .18s ease;
}

.video-box__play:hover,
.video-box__play:focus-visible {
  background: var(--ib-red);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-box__play-icon {
  display: flex;
  margin-left: 4px;
}

@media (max-width: 700px) {
  .video-box__play {
    width: 68px;
    height: 68px;
  }

  .video-box__play-icon svg {
    width: 18px;
    height: 21px;
  }
}

.video-main h2 {
  font-size: 36px;
  color: var(--ib-navy);
  margin-bottom: 8px;
}

.video-main p {
  font-size: 18px;
  color: var(--ib-muted);
  line-height: 1.6;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.chapter-grid span {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7f9fc;
  color: var(--ib-navy);
  font-weight: 800;
}

.video-side {
  border: 1px solid #e6eaf2;
  border-radius: 22px;
  padding: 24px;
  background: white;
  position: sticky;
  top: 90px;
}

.video-side .ib-btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.sizing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Installer page (source: prototype .two/.panel/.installer-benefits/.locator-note) */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}

/* Moved out of an inline style so the mobile-only size override below
   can win on normal cascade order instead of needing !important. */
.installer-hero__search-heading {
  color: var(--ib-navy);
  font-size: 36px;
}

.panel {
  border: 1px solid var(--ib-line);
  border-radius: 20px;
  padding: 30px;
  background: #fff;
}

.panel h2,
.panel h3 {
  /* prototype sets no margin here; both margins come from the typography baseline above */
  color: var(--ib-navy);
}

.panel hr {
  border: 0;
  border-top: 1px solid var(--ib-line);
  margin: 26px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.field input,
.field textarea,
.field select {
  border: 1px solid #D6DAE4;
  border-radius: 9px;
  padding: 13px;
  font: inherit;
}

.installer-benefits {
  padding-left: 20px;
  color: #445068;
}

.installer-benefits li {
  margin: 8px 0;
}

.locator-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f7f8fb;
  color: var(--ib-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Installer Lookup page, mobile only: the search box must be the first
   meaningful thing visible below the header, ahead of the hero intro
   copy - without touching the desktop layout or duplicating the locator
   markup. .pagehero/.content/.container/.two are shared classes used by
   many other pages, so nothing here changes their base rules; instead,
   scoped to .installer-hero-wrap only, those wrappers are collapsed with
   `display: contents` (removing their own box - including the .pagehero
   soft-background band and its 68px padding, which is what was pushing
   the search box below the fold) so their children become direct flex
   items that can be given an explicit order. Everything above 900px is
   completely unaffected - none of these rules apply there.

   IMPORTANT: `display: contents` on .container also discards ITS box -
   including the site-wide margin-inline that gives every page its
   left/right content gutter (var(--container-gutter), 20px at mobile
   widths). That's why an earlier version of this ran edge-to-edge. The
   fix is to put that same gutter back once, as padding-inline on
   .installer-hero-wrap itself (the one real box left in this chain) -
   every promoted child then shares the exact same left/right edge the
   rest of the site uses, including the search card. */
@media (max-width: 900px) {
  .installer-hero-wrap {
    display: flex;
    flex-direction: column;
    padding-inline: var(--container-gutter);
    padding-top: 14px;
  }

  .installer-hero-wrap .pagehero,
  .installer-hero-wrap .pagehero .container,
  .installer-hero-wrap .content,
  .installer-hero-wrap .content .container {
    display: contents;
  }

  .installer-hero-wrap .pagehero .eyebrow {
    order: 1;
    /* Site-wide, .eyebrow's own margin-bottom (18px, see its base rule)
       is what creates the eyebrow-to-heading gap now - but this page's
       whole point is a deliberately COMPACT gap so the search box clears
       the fold on a phone, so it's overridden back down to the original
       6px total here (paired with the h1 rule below, which zeroes its
       own top-margin component so the two don't add up to more than
       6px). This selector already beats the shared .eyebrow rule on
       specificity (2 classes vs. 1), so no !important is needed. */
    margin-bottom: 6px;
  }

  .installer-hero-wrap .pagehero h1.installer-hero__heading {
    order: 1;
    /* The shared .pagehero h1 sizing (46-54px + 18/24px margins) is
       tuned for a full hero band on other pages; here the goal is a
       compact title so the search box needs no scrolling. The extra
       ".pagehero h1" in this selector is required, not decorative -
       .pagehero h1's own specificity (a class + an element) otherwise
       beats a single-class override and this rule silently loses.
       Top margin is 0 (not 6px) because the eyebrow override above now
       supplies the whole 6px gap - keeping both would double it to 12px. */
    font-size: 27px;
    margin: 0 0 10px;
  }

  .installer-hero__searchcol {
    order: 2;
  }

  .installer-hero__searchbox {
    padding: 20px;
    /* The card is a flex item like everything else here, so it already
       shares the wrap's left/right gutter - this just keeps it from
       ever stretching a hair past the text above/below it at odd
       widths (rounding in the flex/contents chain). */
    max-width: 100%;
  }

  .installer-hero__search-heading {
    /* Overrides the shared 36px desktop size (see base rule above) -
       still one class each, so normal cascade order (this rule comes
       later) is enough here; no specificity fight like the h1 above. */
    font-size: 20px;
    margin: 0 0 6px;
  }

  .installer-hero__search-intro {
    /* Base <p> margin is 16px top/bottom (site-wide default), which
       double-stacks with the heading's own bottom margin and the card's
       implicit top gap. Tightened here without touching the shared p
       rule other pages rely on. */
    margin: 2px 0 12px;
  }

  .installer-hero__copy {
    order: 3;
    margin-top: 20px;
  }

  .installer-hero__whycol {
    order: 4;
    margin-top: 20px;
    margin-bottom: 8px;
  }
}

.cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* Installer search results (live lookup, replaces the old static placeholder) */
.installer-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f7f8fb;
  color: var(--ib-muted);
  font-size: 13px;
  line-height: 1.55;
}

.installer-status--error {
  background: #fdecec;
  color: var(--ib-red);
}

.installer-results {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.installer-card {
  border: 1px solid var(--ib-line);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}

.installer-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.installer-card__name {
  margin: 0;
  color: var(--ib-navy);
  font-size: 18px;
  font-weight: 800;
}

.installer-card__location {
  margin: 4px 0 0;
  color: var(--ib-muted);
  font-size: 14px;
}

.installer-card__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: #445068;
}

.installer-card__meta a {
  color: var(--ib-navy);
  font-weight: 700;
  text-decoration: none;
}

.installer-card__meta a:hover {
  text-decoration: underline;
}

.installer-explainer {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f7f8fb;
  font-size: 13px;
  line-height: 1.6;
  color: #445068;
}

.installer-explainer .dealer-badge {
  vertical-align: middle;
  margin-right: 4px;
}

.installer-explainer a {
  color: var(--ib-navy);
  font-weight: 700;
}

/* Legal / About pages (source: prototype .legal-card/.policy-grid/.info-card/.inline-cta) */
.legal-card {
  max-width: 980px;
  margin: auto;
  background: #fff;
  border: 1px solid var(--ib-line);
  border-radius: 22px;
  padding: 42px;
  box-shadow: 0 12px 34px rgba(28, 41, 109, .06);
}

.legal-card h2 {
  color: var(--ib-navy);
  font-size: 28px;
  line-height: 1.15;
  margin: 34px 0 12px;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card h3 {
  color: var(--ib-navy);
  margin: 0 0 8px;
}

/* In-body subtitle block (snippets/ib-legal.liquid "subtitle" block type).
   Same navy/Inter/700-weight look as the h3 rule directly above - it IS an
   h3, just with its own class for a bit of extra top spacing so it reads
   as "start of a new subtopic" rather than sitting flush under the
   preceding paragraph. Deliberately not larger than the page's own h2,
   and no new color/font is introduced. */
.legal-card h3.legal-card__subtitle {
  margin-top: 24px;
}

.legal-card p,
.legal-card li {
  font-size: 16px;
  line-height: 1.72;
  color: #384257;
}

.legal-card ul {
  padding-left: 24px;
}

.text-link {
  color: var(--ib-navy);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shopify's richtext setting strips class attributes from <a> tags, so
   editable legal-card body text can no longer carry .text-link directly.
   This reproduces the same look for any link inside .legal-card body
   content, without touching real .ib-btn CTA buttons. */
.legal-card a:not(.ib-btn) {
  color: var(--ib-navy);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.info-card {
  border: 1px solid var(--ib-line);
  border-radius: 16px;
  padding: 22px;
  background: #fafbfe;
}

.info-card p {
  margin-bottom: 0;
}

.inline-cta {
  margin: 36px 0 0;
  background: #f7f9fc;
  border-radius: 20px;
  padding: 26px;
  border-left: 5px solid var(--ib-red);
}

.inline-cta h3 {
  color: var(--ib-navy);
  font-size: 26px;
  /* prototype sets only margin-top here; the bottom margin comes from the prototype typography baseline above */
  margin-top: 0;
}

.inline-cta .ib-btn {
  margin-right: 10px;
  margin-top: 6px;
}

/* Contact page (source: prototype .contact-shell/.contact-grid/.contact-card) */
.contact-shell {
  max-width: 1050px;
  margin: auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: start;
}

.contact-card {
  background: var(--ib-navy);
  color: white;
  border-radius: 22px;
  padding: 34px;
}

.contact-card h2 {
  font-size: 32px;
  line-height: 1.08;
  /* prototype sets only margin-top here; the bottom margin comes from the prototype typography baseline above */
  margin-top: 0;
}

.contact-card p {
  color: #dce1f3;
}

.contact-card a {
  color: inherit;
}

.contact-detail {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.contact-detail span {
  display: block;
  color: #aeb6d0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 5px;
}

.contact-detail strong {
  font-size: 17px;
}

.contact-card .ib-btn {
  margin-top: 18px;
  background: white;
  color: var(--ib-navy);
}

.form-note {
  font-size: 12px;
  color: var(--ib-muted);
  margin-bottom: 0;
}

.form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-success {
  margin-top: 16px;
  padding: 13px 14px;
  background: #edf5ee;
  border: 1px solid #d1e4d4;
  color: #396043;
  border-radius: 9px;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1050px) {
  .pagehero-grid {
    grid-template-columns: 1fr 240px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .faq-layout,
  .two,
  .video-layout {
    grid-template-columns: 1fr;
  }

  .faq-side,
  .video-side {
    position: static;
  }

  .dealer-callout,
  .shop-sizing-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .pagehero-grid,
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .pagehero h1 {
    font-size: 46px;
  }

  .shop-grid,
  .dealer-grid {
    grid-template-columns: 1fr;
  }

  .dealer-callout,
  .shop-sizing-banner {
    display: block;
    padding: 28px;
  }

  .dealer-callout .ib-btn {
    margin-top: 18px;
  }

  .shop-sizing-banner__actions {
    margin-top: 18px;
    width: 100%;
  }

  .shop-sizing-banner__actions .ib-btn {
    width: 100%;
  }

  .form-two {
    grid-template-columns: 1fr;
  }

  .legal-card {
    padding: 24px;
  }

  .contact-card {
    padding: 26px;
  }
}

/* ============================================================
   Blog (source: prototype blog.html / article pages). Native
   Shopify blog + article resources, driven dynamically by
   blog.articles / article.content rather than hardcoded blocks,
   so it scales to any number of real articles.
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-card {
  display: block;
  border: 1px solid #e5e9f2;
  border-radius: 22px;
  overflow: hidden;
  background: white;
  text-decoration: none;
  color: inherit;
  transition: .2s ease;
  box-shadow: 0 10px 30px rgba(28, 41, 109, .06);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(28, 41, 109, .12);
}

.blog-thumb {
  height: 150px;
  background: linear-gradient(135deg, #1c296d, #eef2f8);
  display: flex;
  align-items: end;
  padding: 16px;
  overflow: hidden;
}

.blog-thumb span {
  background: white;
  color: var(--ib-navy);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
}

.blog-thumb--has-image {
  background: none;
  padding: 0;
}

.blog-thumb--has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-body {
  padding: 22px;
}

.blog-body h3 {
  font-size: 21px;
  line-height: 1.18;
  margin: 5px 0 10px;
  color: var(--ib-navy);
}

.blog-body p {
  color: var(--ib-muted);
  font-size: 15px;
  line-height: 1.55;
}

.blog-cat {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  color: var(--ib-red) !important;
  margin: 0 0 8px;
}

.article-hero {
  padding: 60px 0 34px;
  background: #f7f9fc;
}

.article-wrap {
  max-width: 920px;
}

.article-hero h1 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.02;
  /* inherited from the prototype's global h1 rule */
  letter-spacing: -.055em;
  max-width: 770px;
  color: var(--ib-navy);
  margin: 12px 0;
}

.article-hero p:not(.blog-cat) {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ib-muted);
}

.back {
  color: var(--ib-navy);
  font-weight: 800;
  text-decoration: none;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
  align-items: start;
}

.article-card {
  background: white;
  border: 1px solid #e6eaf2;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 12px 34px rgba(28, 41, 109, .07);
}

.article-image {
  height: 280px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eef2f8, #d7deed);
  display: grid;
  place-items: center;
  color: var(--ib-navy);
  font-weight: 800;
  margin-bottom: 26px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lead {
  font-size: 20px;
  line-height: 1.65;
  color: #29344d;
}

.article-card h2 {
  color: var(--ib-navy);
  font-size: 30px;
  /* prototype sets only margin-top here; the bottom margin comes from the prototype typography baseline above */
  margin-top: 30px;
}

.article-card p,
.article-card li {
  font-size: 17px;
  line-height: 1.7;
  color: #384257;
}

.article-side {
  position: sticky;
  top: 90px;
  border: 1px solid #e6eaf2;
  border-radius: 22px;
  padding: 24px;
  background: white;
}

.article-side h3 {
  color: var(--ib-navy);
  margin: 0 0 12px;
}

.article-side a {
  display: block;
  color: var(--ib-navy);
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f6;
}

.side-link {
  background: #f7f9fc;
  border-radius: 12px;
  padding: 12px !important;
  margin-bottom: 8px;
  border: 0 !important;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-side {
    position: static;
  }

  .article-card {
    padding: 24px;
  }

  .article-image {
    height: 190px;
  }
}

/* ============================================================
   Dealer portal (source: prototype dealer.html/dealer-products.html/
   dealer-marketing-materials.html). Real Shopify customer accounts +
   customer.tags gate access (checked in Liquid) rather than the
   prototype's fake localStorage login.
   ============================================================ */
.dealer-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dealer-entry-grid .panel {
  padding: 34px;
  display: flex;
  flex-direction: column;
}

/* Both entry-grid panels are equal height (grid row stretch); this pins
   each panel's button to the bottom so "Go to Dealer Home" and "Apply to
   Become a Dealer" line up regardless of body copy length. align-self
   keeps the button at its normal content width instead of stretching. */
.dealer-entry-grid .panel .ib-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* The "Dealer access is available..." note sits directly below the
   button, inside the login card, with a comfortable gap above it.
   ".dealer-login-note" (not the bare .form-note class, which the
   dealer application form's own note also uses) scopes this margin to
   just this text. Its own height pushes the login card's content taller
   than "Become a Dealer"'s, so grid row-stretch grows both cards to
   match - but that alone would leave the two buttons at different
   heights within their now-equal-height cards (nothing pushes "Apply to
   Become a Dealer" up to compensate). The invisible spacer below it
   (same classes/text, hidden - see the section file) reserves the exact
   same trailing space, so both buttons still land at the same height. */
.dealer-login-note {
  margin-top: 16px;
}

.dealer-login-note--spacer {
  visibility: hidden;
}

/* Apply to Become a Dealer panel/form - see
   sections/ib-dealer-landing.liquid. New, scoped classes only; nothing
   above this is touched. */
.dealer-application-panel {
  max-width: 640px;
  margin: 0 auto;
}

.dealer-application-panel select {
  width: 100%;
  background: #fff;
}

.resource-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.resource-strip > div {
  padding: 28px;
  border-radius: 18px;
  background: #f6f7fb;
  border: 1px solid var(--ib-line);
}

.resource-strip h3 {
  font-size: 23px;
  color: var(--ib-navy);
  margin: 0 0 7px;
}

/* Scoped to this page's section only (Dealer Home reuses the base
   .resource-strip class via .tier-resource-strip, which this selector
   does not match) - pins each card's link to the bottom so "Dealer
   Store" and "Marketing Resources" line up regardless of body copy
   length. */
.shopify-section--ib-dealer-landing .resource-strip > div {
  display: flex;
  flex-direction: column;
}

.shopify-section--ib-dealer-landing .resource-strip a {
  margin-top: auto;
}

.resource-strip a {
  font-weight: 850;
  color: var(--ib-red);
}

/* Quick Order - a compact wholesale-style order list (source: none in the
   prototype, built per the merchant's Quick Order spec). Desktop renders
   each .qo-row as a CSS Grid row that reads like a table; on mobile the
   grid collapses to one column and .qo-label text (hidden on desktop,
   where the header row already labels each column) becomes visible so a
   stacked row is still self-explanatory. No horizontal scrolling at any
   width - this is deliberately NOT the same "scroll on mobile" pattern
   used by .tier-table/.dealer-pricing-table, per the merchant's request
   that Quick Order reflow into compact cards instead. */
.qo-table {
  margin: 18px 0 40px;
  border: 1px solid var(--ib-line);
  border-radius: 14px;
  overflow: hidden;
}

.qo-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 110px 150px minmax(0, 1.4fr) 130px 150px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ib-line);
  background: #fff;
}

.qo-row:last-child {
  border-bottom: none;
}

.qo-row--head {
  background: #f7f8fb;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ib-muted);
}

.qo-cell {
  min-width: 0;
}

.qo-cell--name a,
.qo-cell--name span {
  font-weight: 750;
  color: var(--ib-navy);
}

.qo-cell--name a {
  text-decoration: none;
}

.qo-cell--name a:hover {
  text-decoration: underline;
}

.qo-label {
  display: none;
}

.qo-value {
  display: block;
  font-size: 14px;
  color: var(--ib-ink);
}

.qo-value--muted {
  color: var(--ib-muted);
}

.qo-cell--variant {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qo-price {
  font-weight: 800;
  color: var(--ib-navy);
}

.qo-price-note {
  display: block;
  font-size: 11px;
  color: var(--ib-muted);
  margin-top: 2px;
}

.qo-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #D6DAE4;
  border-radius: 9px;
  overflow: hidden;
  width: fit-content;
}

.qo-qty__btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: #f7f8fb;
  color: var(--ib-navy);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.qo-qty__btn:hover {
  background: #eeeaf8;
}

.qo-qty__input {
  width: 44px;
  height: 34px;
  border: 0;
  border-left: 1px solid #D6DAE4;
  border-right: 1px solid #D6DAE4;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--ib-ink);
  -moz-appearance: textfield;
}

.qo-qty__input::-webkit-outer-spin-button,
.qo-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qo-cell--action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.qo-add-btn {
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
  width: 100%;
  justify-content: center;
}

.qo-added-confirm {
  font-size: 12px;
  font-weight: 750;
  color: var(--ib-navy);
}

.qo-error {
  font-size: 12px;
  color: var(--ib-red);
}

.qo-section-note {
  color: var(--ib-muted);
  font-size: 13px;
  max-width: 760px;
  margin: 0 0 6px;
}

@media (max-width: 900px) {
  .qo-row--head {
    display: none;
  }

  .qo-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 16px;
  }

  .qo-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ib-muted);
    margin-right: 6px;
  }

  .qo-cell--variant {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .qo-cell--qty,
  .qo-cell--action {
    flex-direction: row;
    align-items: center;
  }

  .qo-cell--qty {
    display: flex;
    gap: 10px;
  }

  .qo-add-btn {
    width: auto;
  }
}

.dealer-bar {
  background: #eeeaf8;
  border-bottom: 1px solid #ddd6ef;
  color: var(--ib-navy);
  /* Sticks directly beneath the header/announcement bar, not the page top -
     --sticky-area-height is the theme's own running total of their actual
     height, already zeroed out for whichever of the two isn't set sticky,
     so this never needs a hardcoded offset or overlaps either one. */
  position: sticky;
  top: var(--sticky-area-height, 0px);
  z-index: 3;
}

.dealer-bar .container {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 0;
  font-size: 13px;
}

.dealer-bar span {
  color: #646e82;
}

.dealer-bar a {
  margin-left: auto;
  font-weight: 850;
}

/* Prominent way back to the dealer product grid from an individual dealer
   product page - jumps to #dealer-products on the Dealer Store page rather
   than its top, so the dealer never has to re-scroll past the hero/status
   strip. See ib-product.liquid. */
.dealer-back-link-wrap {
  padding: 16px 0 0;
}

.dealer-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ib-navy);
}

.dealer-back-link:hover {
  color: var(--ib-red);
}

.catalog-heading {
  font-size: 34px;
  color: var(--ib-navy);
  margin: 54px 0 22px;
}

/* First heading follows the status strip, which already carries its own gap. */
.dealer-status + .catalog-heading {
  margin-top: 0;
}

.dealer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Follow the same ladder as .shop-grid below 4-up, so dealer cards never get
   narrower than the public product cards at the same viewport. */
@media (max-width: 1100px) {
  .dealer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dealer-badge {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 999px;
  background: #eeeaf8;
  color: var(--ib-navy);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
}

/* "Preferred" installer badge (sections/ib-installer.liquid) - both the
   static legend in the explainer copy and the live search-result cards use
   this same modifier, so the two can never drift apart. Solid Imperial
   Bathrooms navy/purple with white text, replacing the base .dealer-badge's
   lavender tint - reuses --ib-navy (the same token every other "purple"
   surface in the theme is built from) rather than a new color, and keeps
   strong contrast (dark navy against white) on both desktop and mobile. */
.dealer-badge--preferred {
  background: var(--ib-navy);
  color: #fff;
  border: 1px solid var(--ib-navy);
}

.dealer-price {
  font-size: 26px;
  font-weight: 850;
  color: var(--ib-navy);
  margin: 9px 0 18px;
}

.mini-shape {
  width: 190px;
  height: 115px;
  border: 12px solid #fff;
  border-radius: 18px 18px 34px 34px;
  display: grid;
  place-items: center;
  color: var(--ib-navy);
  font-weight: 900;
  font-size: 34px;
  box-shadow: 0 20px 38px rgba(28, 41, 109, .12);
}

.shop-thumb.ultra-mini .mini-shape {
  height: 150px;
}

.caliper-shape {
  width: 180px;
  height: 14px;
  background: var(--ib-navy);
  position: relative;
  border-radius: 9px;
}

.caliper-shape:before,
.caliper-shape:after {
  content: "";
  position: absolute;
  top: -80px;
  width: 14px;
  height: 174px;
  background: var(--ib-navy);
  border-radius: 7px;
}

.caliper-shape:before {
  left: 8px;
}

.caliper-shape:after {
  right: 8px;
}

.shop-thumb.mini-card-holder {
  position: relative;
}

.shop-thumb.mini-card-holder:after {
  content: "BUSINESS CARDS";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 82px;
  height: 48px;
  border: 2px solid var(--ib-navy);
  border-radius: 5px;
  background: #fff;
  color: var(--ib-navy);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 8px 20px rgba(28, 41, 109, .12);
}

.resources-wrap {
  display: grid;
  gap: 62px;
}

.resource-section {
  padding-bottom: 58px;
  border-bottom: 1px solid var(--ib-line);
}

.resource-section:last-child {
  border-bottom: 0;
}

.resource-head {
  display: flex;
  justify-content: space-between;
  gap: 34px;
  align-items: end;
  margin-bottom: 24px;
}

.resource-head h2 {
  font-size: 34px;
  color: var(--ib-navy);
  margin: 5px 0 0;
}

.resource-head p {
  max-width: 430px;
  color: var(--ib-muted);
  margin: 0;
}

.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.download-card {
  border: 1px solid var(--ib-line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: #fff;
}

.download-card h3 {
  color: var(--ib-navy);
  margin: 0 0 5px;
  font-size: 16px;
}

.download-card p {
  margin: 0;
  color: var(--ib-muted);
  font-size: 13px;
}

.resource-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.resource-feature {
  border-radius: 18px;
  padding: 28px;
  background: #f6f7fb;
  border: 1px solid var(--ib-line);
  /* .resource-feature-grid is a 2-col grid, so both cards are already the
     same height (grid items stretch by default). This just lets the button
     sit at the bottom of that height instead of directly under its own
     paragraph, so it lines up with the other card's button regardless of
     which side's text happens to run longer. */
  display: flex;
  flex-direction: column;
}

.resource-feature .ib-btn {
  /* Anchor to the bottom of the card without stretching the button itself
     to the card's full width - inline-flex buttons become full-width flex
     items by default once their parent switches to flex-direction: column. */
  align-self: flex-start;
  margin-top: auto;
}

.resource-feature h3 {
  font-size: 24px;
  color: var(--ib-navy);
  margin: 0 0 8px;
}

.resource-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.resource-link {
  border: 1px solid var(--ib-line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.resource-link strong {
  font-size: 14px;
  color: var(--ib-navy);
}

.resource-link span {
  font-size: 12px;
  color: var(--ib-red);
  font-weight: 850;
  white-space: nowrap;
}

.resource-note {
  font-size: 13px;
  color: var(--ib-muted);
  margin-top: 14px;
}

/* Dealer tier display (custom - not in the prototype, per the Dealer
   Pricing Rules PDF: current tier + benefit + a static reference
   table). The table's Qualification column is reference copy for the
   calendar-year CleanCut-kit thresholds - still no live counts or
   progress bars; tier assignment stays fully manual via customer tags. */
.tier-banner {
  background: var(--ib-navy);
  color: #fff;
  border-radius: 22px;
  padding: 34px 38px;
  margin-bottom: 34px;
}

.tier-banner .eyebrow {
  color: #fff;
}

.tier-banner .eyebrow:before {
  background: #fff;
}

.tier-banner h2 {
  margin: 8px 0 8px;
  font-size: 28px;
}

.tier-banner p {
  margin: 0;
  color: #dce1f3;
  max-width: 640px;
}

/* Progress toward the next tier (completed calendar-year purchases only -
   never the cart). Lives inside .tier-banner, so it inherits that block's
   dark-purple background and uses the same light text tones as
   .tier-banner p rather than a separate white card. */
.tier-progress {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: 480px;
}

.tier-progress-loading {
  margin: 0;
  font-size: 13px;
  color: #dce1f3;
}

.tier-progress-numbers {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.tier-progress-total {
  font-size: 26px;
  font-weight: 850;
  color: #fff;
}

.tier-progress-next {
  font-size: 13px;
  font-weight: 700;
  color: #dce1f3;
}

.tier-progress-bar-track {
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}

.tier-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #fff;
  width: 0%;
}

.tier-progress-remaining {
  margin: 10px 0 0;
  font-size: 13px;
  color: #dce1f3;
}

.tier-table-wrap {
  margin-top: 10px;
}

.tier-table {
  width: 100%;
  border-collapse: collapse;
}

.tier-table th,
.tier-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ib-line);
  font-size: 14px;
}

.tier-table th {
  color: var(--ib-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}

.tier-table td {
  color: var(--ib-ink);
  font-weight: 650;
}

.tier-table tr.is-current-tier td {
  color: var(--ib-navy);
  font-weight: 850;
  background: #f5f6fa;
}

/* Tier name (Silver/Gold/Platinum/Elite) is the visually prominent part of
   the Tier cell; "Tier N" is a smaller secondary label underneath it. */
.tier-name {
  display: block;
  font-size: 17px;
  font-weight: 850;
  color: var(--ib-navy);
}

.tier-table tr.is-current-tier .tier-name {
  color: var(--ib-red);
}

.tier-number-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ib-muted);
  margin-top: 2px;
}

@media (max-width: 700px) {
  /* the tier table must scroll rather than squeeze its three columns
     unreadably narrow or push the page sideways */
  .tier-table-wrap {
    overflow-x: auto;
  }

  .tier-table {
    min-width: 560px;
  }
}

/* "Your Kit Purchases" - two simple stat cards, no charts/gauges. Same card
   language as .resource-strip (white, subtle border, 18px radius) so it
   reads as part of the existing dealer-home style, not a new component. */
.kit-purchases-heading {
  margin-bottom: 18px;
}

.kit-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 44px;
}

.kit-stat-card {
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ib-line);
}

.kit-stat-year {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ib-muted);
  margin-bottom: 10px;
}

.kit-stat-number {
  display: block;
  font-size: 40px;
  font-weight: 850;
  color: var(--ib-navy);
  line-height: 1.1;
}

.kit-stat-caption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ib-muted);
}

@media (max-width: 900px) {
  .kit-stats-grid {
    grid-template-columns: 1fr;
  }
}

.dealer-gate {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 20px;
}

/* Dealer-only product detail modal (snippets/dealer-product-catalog.liquid).
   One reusable modal shared by all 4 dealer-only accessories - content is
   swapped by JS, never four separate markup blocks. */
.dealer-product-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dealer-product-modal[hidden] {
  display: none;
}

.dealer-product-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 43, 0.55);
}

.dealer-product-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px;
}

.dealer-product-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid #D6DAE4;
  border-radius: 50%;
  background: #fff;
  color: var(--ib-navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dealer-product-modal__close:hover {
  background: #f7f8fb;
}

.dealer-product-modal__loading,
.dealer-product-modal__error {
  padding: 40px 10px;
  text-align: center;
  color: #6b6e73;
}

.dealer-product-modal__error {
  color: var(--ib-red);
}

.dealer-product-modal__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
}

@media (max-width: 640px) {
  .dealer-product-modal__body {
    grid-template-columns: 1fr;
  }
}

.dealer-product-modal__media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #f7f8fb;
}

.dealer-product-modal__details h2 {
  margin: 10px 0 6px;
  font-size: 24px;
}

.dealer-product-modal__sku {
  font-size: 13px;
  color: #6b6e73;
  margin-bottom: 12px;
}

.dealer-product-modal__description {
  font-size: 14.5px;
  color: #4a4e57;
  line-height: 1.7;
  margin-bottom: 16px;
}

.dealer-product-modal__price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ib-navy);
  margin-bottom: 16px;
}

.dealer-product-modal__details .qo-qty {
  margin-bottom: 14px;
}

.dealer-product-modal__details .button {
  width: 100%;
}

.dealer-product-modal__quick-order-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ib-red);
}

/* ============================================================
   Cart page (source: prototype cart.html / styles.css .cart-*).
   The prototype's cart is a localStorage mock; only its presentation
   is reproduced here - the section renders the real Shopify cart.
   ============================================================ */
.cart-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px;
  align-items: start;
}

.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 70px 120px;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--ib-line);
}

.cart-item-visual {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #f1f2f7;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-item-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* placeholder_svg_tag output (see snippets/dealer-catalog-client) - only
   used when a dealer-only accessory genuinely has no Shopify image yet */
.cart-item-visual svg {
  width: 100%;
  height: 100%;
}

/* stand-in for the prototype's drawn product shape until real photography */
.cart-item-mark {
  width: 30px;
  height: 18px;
  border-radius: 5px 5px 11px 11px;
  background: #fff;
  border: 1px solid #e4e7ee;
}

/* Free-shipping threshold message (source: snippets/free-shipping-bar.liquid).
   Same visual language as .shipping-pill on product pages. Starts hidden for
   a signed-in dealer until dealer-pricing JS confirms the real subtotal -
   see cart-drawer.liquid / ib-cart.liquid. */
.free-shipping-message {
  display: inline-flex;
  background: #eef5ef;
  color: #356040;
  padding: 7px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
}

.free-shipping-message[hidden] {
  display: none;
}

.cart-item-details {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cart-item-details > a {
  color: var(--ib-navy);
  font-weight: 800;
  font-size: 15px;
}

.cart-item-variant,
.cart-item-sku {
  font-size: 12px;
  color: var(--ib-muted);
}

.cart-remove {
  border: 0;
  background: transparent;
  color: var(--ib-red);
  padding: 5px 0;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  justify-self: start;
}

.cart-item-qty,
.cart-item-price {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.cart-item-visual span {
  font-size: 10px;
  font-weight: 900;
  color: var(--ib-navy);
  letter-spacing: .1em;
}

.cart-summary {
  position: sticky;
  top: 116px;
  border: 1px solid var(--ib-line);
  border-radius: 18px;
  padding: 24px;
  background: #f8f9fc;
}

.cart-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--ib-navy);
  font-weight: 800;
}

.cart-summary p {
  font-size: 12px;
  color: var(--ib-muted);
  line-height: 1.55;
}

/* Dealer pricing panel (source: sections/ib-cart.liquid, populated from the
   custom dealer-checkout app). It sits inside the same .cart-summary card as
   the public subtotal, so it must opt out of the ".cart-summary > div" flex
   row meant for that one-line subtotal, or its several lines of text get
   squeezed into a single overflowing row. */
.cart-summary > .dealer-summary {
  display: grid;
  gap: 10px;
  justify-content: unset;
  color: inherit;
  font-weight: inherit;
}

.dealer-summary-rank {
  color: var(--ib-navy);
  font-size: 13px;
}

.dealer-summary .dealer-summary-status {
  margin: 0;
}

.dealer-summary-lines {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ib-navy);
}

.dealer-summary-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--ib-line);
  color: var(--ib-navy);
  font-weight: 800;
}

.dealer-summary .dealer-summary-error {
  margin: 0;
  color: var(--ib-red);
  font-weight: 700;
}

/* Cart drawer (source: sections/cart-drawer.liquid). Small, unobtrusive
   dealer rank + subtotal note above the checkout button - deliberately
   quieter than the full cart page's summary card since drawer space is
   tight and this is a secondary confirmation, not the primary total (the
   checkout button's own price already carries that once loaded). */
.drawer-dealer-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ib-muted);
}

.drawer-dealer-rank {
  margin: 0;
  color: var(--ib-navy);
  font-weight: 700;
}

.drawer-dealer-status {
  margin: 0;
}

.drawer-dealer-unlock {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ib-red);
}

.drawer-dealer-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--ib-navy);
  font-weight: 700;
}

.drawer-dealer-error {
  margin: 0;
  color: var(--ib-red);
  font-weight: 700;
}

.cart-empty {
  border: 1px solid var(--ib-line);
  border-radius: 20px;
  padding: 54px;
  text-align: center;
  background: #f8f9fc;
}

.cart-empty h2 {
  color: var(--ib-navy);
  font-size: 30px;
}

.cart-empty .cart-installer-link {
  margin-left: 8px;
}

@media (max-width: 900px) {
  .cart-view {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }
}

@media (max-width: 800px) {
  .cart-empty .cart-installer-link {
    margin-left: 0;
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .cart-item {
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 12px;
  }

  .cart-item-visual {
    width: 55px;
    height: 55px;
  }

  .cart-item-qty,
  .cart-item-price {
    text-align: left;
    grid-column: 2;
  }
}

.tier-benefits-heading {
  color: var(--ib-navy);
  font-size: 28px;
  margin-bottom: 6px;
}

.tier-benefits-note {
  color: var(--ib-muted);
  margin: 0 0 18px;
}

.tier-resource-strip {
  margin-top: 34px;
  grid-template-columns: repeat(3, 1fr);
}

/* Dealer Home only (scoped via .tier-resource-strip, not the base
   .resource-strip also used on the Dealer Landing page): grid stretches
   all three cards to equal height, but the Quick Order card's extra
   "Fastest" badge and longer body text push its link lower than the
   other two cards' shorter content would on its own. Flex-column + a
   bottom margin-top:auto bottom-aligns every card's link to the same
   baseline regardless of how much text is above it, without touching
   card height, colors, or spacing. */
.tier-resource-strip > div {
  display: flex;
  flex-direction: column;
}

.tier-resource-strip > div a {
  margin-top: auto;
}

.resource-strip__featured {
  border-color: var(--ib-navy) !important;
  background: #eeeaf8 !important;
}

.resource-strip__featured .dealer-badge {
  margin-bottom: 10px;
}

/* Compact dealer status strip. Deliberately small - the tier is
   confirmation, not the point of the page; shopping is. */
.dealer-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 18px;
  margin-bottom: 26px;
  border: 1px solid var(--ib-line);
  border-radius: 12px;
  background: #f6f7fb;
}

.dealer-status strong {
  color: var(--ib-navy);
  font-size: 15px;
  font-weight: 850;
}

.dealer-status span {
  font-size: 13px;
  color: var(--ib-muted);
}

/* Tier-adjusted bracket pricing */
.dealer-pricing-wrap {
  margin-bottom: 34px;
}

.dealer-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dealer-pricing-table th,
.dealer-pricing-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ib-line);
}

.dealer-pricing-table th {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ib-muted);
}

.dealer-pricing-table td {
  color: var(--ib-navy);
  font-weight: 800;
}

.dealer-pricing-table td:first-child {
  font-weight: 650;
  color: var(--ib-ink);
}

.dealer-pricing-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ib-muted);
}

/* Dealer navigation inside the dealer bar */
.dealer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-left: auto;
}

.dealer-nav a {
  font-size: 13px;
  font-weight: 750;
  color: var(--ib-navy);
}

.dealer-nav a[aria-current="page"] {
  color: var(--ib-red);
}

@media (max-width: 700px) {
  /* Same "scroll, don't push the page sideways" treatment as the dealer
     pricing table below - a single compact row the dealer can swipe through,
     rather than wrapping into multiple rows that eat into the sticky bar's
     height while scrolling. */
  .dealer-nav {
    margin-left: 0;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dealer-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    /* Taller tap target without changing the visible link size. */
    padding-block: 8px;
  }

  /* the pricing table must scroll rather than push the page sideways */
  .dealer-pricing-wrap {
    overflow-x: auto;
  }

  .dealer-pricing-table {
    min-width: 460px;
  }
}

.dealer-gate h1,
.dealer-gate h2 {
  color: var(--ib-navy);
  font-size: 32px;
  margin: 10px 0 14px;
}

.dealer-gate p {
  color: var(--ib-muted);
  margin: 0 0 24px;
}

.dealer-gate .ib-btn {
  margin: 0 6px;
}

@media (max-width: 900px) {
  .dealer-entry-grid,
  .resource-strip,
  .resource-feature-grid {
    grid-template-columns: 1fr;
  }

  .dealer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .resource-head {
    display: block;
  }

  .resource-head p {
    margin-top: 10px;
  }

  .download-grid,
  .resource-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  /* Restated here because the unscoped .dealer-grid rule later in the file
     otherwise out-orders the shared .shop-grid/.dealer-grid mobile rule. */
  .dealer-grid {
    grid-template-columns: 1fr;
  }

  .dealer-bar .container {
    display: block;
    padding-block: 10px;
  }

  .dealer-bar strong {
    display: block;
    margin-bottom: 8px;
  }

  .download-card {
    display: block;
  }

  .download-card .ib-btn {
    margin-top: 12px;
  }
}

/* ============================================================
   Footer parity (source: prototype `footer` / `.footer-grid` /
   `.footer-copy` / `.copyright`, measured live off the prototype).

   Prototype reference values:
     footer          padding 50px 0 30px; margin-top 88px; bg #11182f
     .footer-grid    gap 34px; columns 1.35fr repeat(4,1fr)
     .footer-grid h4 13px; ls .1em; #AEB6D0; margin 0 0 14px; uppercase; 700
     .footer-grid a  14px; #fff at opacity .86; display block; margin 7px 0
     .footer-copy    13px; #AEB6D0; max-width 300px; margin 13px 0
     .copyright      12px; #9DA7C3; margin-top 36px; padding-top 20px;
                     border-top 1px solid rgba(255,255,255,.12)

   Prestige shipped 64px/0 padding, no top margin, a 56px grid gap and a 56px
   bare (border-less) aside, so the whole footer ran ~100px tall and the link
   columns had no vertical rhythm. These restore the prototype's values.
   ============================================================ */
.shopify-section-group-footer-group .footer {
  padding-top: 50px;
  padding-bottom: 30px;
  margin-top: 88px;
}

.footer__block-list {
  gap: 34px;
}

/* Link columns. Prestige nests these as grid `v-stack`s (20px gap around the
   heading, 10px between links) whose gaps would stack on top of any margin we
   set on the links, so the rhythm is driven purely by the gaps here.
   Prototype rhythm: heading margin-bottom 14px + 7px = 21px to the first link,
   then a 29px pitch (22px link box + 7px). */
.footer__block--links .v-stack,
.footer__block--links ul.v-stack {
  row-gap: 7px;
}

.footer__block-list .link-faded {
  display: block;
  margin: 0;
}

/* Column headings (SHOP / HELP / PROFESSIONALS / COMPANY). */
.footer__block--links p.h6 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #AEB6D0;
  margin: 0 0 14px;
  line-height: 1.55;
}

/* Brand wordmark. NOTE: the prototype declares .footer-wordmark{font-size:24px}
   but `.footer-grid a{font-size:14px}` outranks it (the rule only marks
   display/opacity/colour !important, not font-size), so the supplied prototype
   actually renders the wordmark at 14px/800. Matching the rendered prototype
   rather than the dead declaration - flagged for confirmation. */
.footer__block-list .footer__block.footer__block--text .custom_footer p.h6,
.footer__block--text p.h6 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: none;
  color: #fff;
  margin: 0 0 7px;
}

/* Brand tagline under the wordmark. The second selector outranks a leftover
   Keepsakes3D rule (`.footer__block.footer__block--text .prose.text-subdued
   p:first-child{line-height:1.8}`) that was stretching this paragraph. */
.footer__block--text .prose p,
.footer__block-list .footer__block.footer__block--text .prose.text-subdued p:first-child {
  font-size: 13px;
  color: #AEB6D0;
  max-width: 300px;
  margin: 13px 0;
  line-height: 1.55;
}

/* Copyright strip. Prestige's .footer__inner grid also puts a 48px row-gap
   between the link columns and this strip, which would stack on top of the
   prototype's 36px margin - zeroed so the 36px is the whole separation. */
.footer__inner {
  row-gap: 0;
}

.footer__aside {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  color: #9DA7C3;
}

.footer__aside .heading,
.footer__aside p {
  font-size: 12px;
  color: #9DA7C3;
}

/* ============================================================
   SITE-WIDE EYEBROW-TO-HEADING SPACING (audit fix)

   Every "small uppercase eyebrow label above a heading" pattern site-wide
   used the SAME .eyebrow class, but the gap beneath it was actually being
   created by whatever heading rule happened to follow (.pagehero h1's
   18px top margin, .ib-section-head h2's 0, .dealer-callout h2's 7px,
   .tier-banner h2's 8px, the generic [class*="shopify-section--ib-"]
   :where(h2) 0.83em fallback, etc.) - a different, inconsistent value in
   nearly every section, which is exactly why "Choose Your Solution" (via
   the shared ib-section-head snippet, 0px) read as crowded next to the
   homepage hero (18px).

   Fixed at the shared component level, not per-section: .eyebrow's own
   margin-bottom (set above, near its base rule) is now the ONE place
   this spacing is controlled, matching the homepage hero's existing
   18px exactly. This rule then zeroes out ONLY the top-margin half of
   whatever heading directly follows an eyebrow - using the adjacent-
   sibling combinator so it can never affect a heading that isn't
   preceded by an eyebrow, and never touches the heading's OWN bottom
   margin (its spacing to whatever comes after it, e.g. .pagehero h1's
   24px down to the hero-copy paragraph - untouched, per spec: only the
   eyebrow-to-heading gap was in scope).

   Specificity note: an adjacent-sibling selector with one class + one
   element (0,1,1) ties with most of the per-section heading rules above
   (.pagehero h1, .dealer-callout h2, .tier-banner h2, .pro-install-option
   h3 are all the same 0,1,1) - this block being LAST in the file is what
   lets it win those ties, not higher specificity. It also outranks the
   generic [class*="shopify-section--ib-"] :where(h2/h3/h4) fallback
   (:where() always contributes zero specificity) regardless of order.

   Deliberately NOT touched: .installer-hero-wrap .pagehero
   h1.installer-hero__heading (0,3,1) - the Installer Lookup page's
   mobile-only compact title. That page intentionally compresses this
   exact gap (6px) so the search box clears the fold without scrolling,
   a prior explicit requirement - its higher specificity already wins
   over this rule, preserving that intentional exception untouched. */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + h4 {
  margin-top: 0;
}