/** Shopify CDN: Minification failed

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

**/
/* Color custom properties */

:root,
.color-background-1 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-1);
  --gradient-background: var(--gradient-base-background-1);
}

.color-background-2 {
  --color-background: var(--color-base-background-2);
  --gradient-background: var(--gradient-base-background-2);
}

.color-inverse {
  --color-foreground: var(--color-base-background-1);
  --color-background: var(--color-base-text);
  --gradient-background: rgb(var(--color-base-text));
}

.color-accent-1 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-1);
  --gradient-background: var(--gradient-base-accent-1);
}

.color-accent-2 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-2);
  --gradient-background: var(--gradient-base-accent-2);
}

.color-foreground-outline-button {
  --color-foreground: var(--color-base-outline-button-labels);
}

.color-foreground-accent-1 {
  --color-foreground: var(--color-base-accent-1);
}

.color-foreground-accent-2 {
  --color-foreground: var(--color-base-accent-2);
}

:root,
.color-background-1 {
  --color-link: var(--color-base-outline-button-labels);
  --alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-link: var(--color-foreground);
  --alpha-link: 0.7;
}

:root,
.color-background-1 {
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-solid-button-labels);
  --alpha-button-background: 1;
  --alpha-button-border: 1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-background);
}

.button--secondary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --alpha-button-background: 0;
}

.color-background-2 .button--secondary,
.color-inverse .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

.button--tertiary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.color-background-2 .button--tertiary,
.color-inverse .button--tertiary,
.color-accent-1 .button--tertiary,
.color-accent-2 .button--tertiary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

:root,
.color-background-1 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-foreground);
  --alpha-badge-border: 0.1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-background);
  --alpha-badge-border: 1;
}

:root,
.color-background-1,
.color-background-2 {
  --color-card-hover: var(--color-base-text);
}

.color-inverse {
  --color-card-hover: var(--color-base-background-1);
}

.color-accent-1,
.color-accent-2 {
  --color-card-hover: var(--color-base-solid-button-labels);
}

:root,
.color-icon-text {
  --color-icon: rgb(var(--color-base-text));
}

.color-icon-accent-1 {
  --color-icon: rgb(var(--color-base-accent-1));
}

.color-icon-accent-2 {
  --color-icon: rgb(var(--color-base-accent-2));
}

.color-icon-outline-button {
  --color-icon: rgb(var(--color-base-outline-button-labels));
}

/* base */

.no-js:not(html) {
  display: none !important;
}

html.no-js .no-js:not(html) {
  display: block !important;
}

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

html.no-js .no-js-inline {
  display: inline-block !important;
}

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

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.element-margin {
  margin-top: 5rem;
}

.spaced-section {
  margin-top: 5rem;
}
.spaced-section:first-child {
  margin-top: 0 !important;
}

#shopify-section-template--20869231542317__custom_liquid_i9UyrA {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#shopify-section-template--20869231542317__17732740201e85e263 {
  margin-top: 0 !important;
}

.spaced-section:last-child {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }

  .spaced-section {
    margin-top: calc(5rem + var(--page-width-margin));
  }

  .spaced-section:last-child {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.spaced-section--full-width + .spaced-section--full-width {
  margin-top: 0;
}

.spaced-section--full-width:first-child {
  margin-top: 0;
}

.spaced-section--full-width:last-child {
  margin-bottom: 0;
}

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
  padding: 4rem 0 5rem;
}

@media screen and (min-width: 750px) {
  .background-secondary {
    padding: calc(6rem + var(--page-width-margin)) 0
      calc(5rem + var(--page-width-margin));
  }
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.hidden {
  display: none !important;
}

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

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: .16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

.link[role="link"]:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

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

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link:hover,
.customer a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

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

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 4rem 0 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon svg {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  color: rgb(var(--color-link));
  margin-top: 0;
  flex-shrink: 0;
}

@media screen and (min-width: 990px) {
  .title-wrapper-with-link.title-wrapper-with-link--no-heading {
    display: none;
  }
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  margin-left: -0.5rem;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .grid {
    margin-left: -1rem;
  }
}

.grid__item {
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
  width: calc(25% - 0.5rem * 3 / 4);
  max-width: 50%;
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    padding-left: 1rem;
    padding-bottom: 1rem;
    width: calc(25% - 1rem * 3 / 4);
    max-width: 25%;
  }
}

.grid--gapless .grid__item {
  padding-left: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid--one-third-max.grid--3-col-tablet .grid__item {
    max-width: 33.33%;
  }
}

@media screen and (min-width: 990px) {
  .grid--quarter-max.grid--4-col-desktop .grid__item {
    max-width: 25%;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - 0.5rem * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - 0.5rem / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - 1rem / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - 1rem / 2);
  }
}

@media screen and (min-width: 990px) {
  .grid--4-col-desktop .grid__item {
    width: calc(25% - 1rem * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - 1rem * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - 1rem / 2);
  }
}

.grid__item--vertical-align {
  align-self: center;
}

.grid__item--full-width {
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    width: calc(50% - 3.75rem / 2);
  }

  .grid--peek .grid__item:first-of-type {
    padding-left: 1.5rem;
  }

  .grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - 4rem * 3 / 4);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - 4rem * 2 / 3);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
    width: calc(50% - 4rem / 2);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    padding-left: 1.5rem;
  }

  .slider--tablet.grid--peek .grid__item:last-of-type {
    padding-right: 1.5rem;
  }
}

@media screen and (max-width: 989px) {
  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button,
.shopify-challenge__button,
.customer button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  padding: 0.9rem 3rem 1.1rem;
  text-decoration: none;
  border: 0.1rem solid transparent;
  border-radius: 0;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
  color: rgb(var(--color-button-text));
  min-width: 12rem;
  min-height: 4.5rem;
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
}

.button:focus-visible {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible) {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: 9rem;
  min-height: 3.5rem;
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Button - hover */

.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), var(--alpha-button-border));
}

/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

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

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  width: 1.3rem;
}

.share-button__fallback {
  background: rgb(var(--color-background));
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0.1rem solid transparent;
  border-radius: 0;
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  height: 4.5rem;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field__input:hover,
.select__select:hover,
.customer .field input:hover,
.customer select:hover,
.localization-form__select:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  outline: transparent;
}

.text-area,
.select {
  display: inline-block;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 1.5rem;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 4rem 0 1.5rem;
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
}

.customer .field {
  display: block;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: 1.5rem;
  top: 1rem;
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: 0.3em;
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem;
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > svg {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  padding: 1.2rem;
  min-height: 10rem;
  resize: none;
}

.text-area--resize-vertical {
  resize: vertical;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  border: 0.1rem solid rgba(var(--color-base-text), 0.08);
  position: relative;
  height: 4.5rem;
  width: calc(14rem / var(--font-body-scale));
  display: flex;
}

.quantity__input {
  color: currentColor;
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button svg {
  width: 1rem;
  pointer-events: none;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 5;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* section-announcement-bar */
#shopify-section-announcement-bar {
  z-index: 4;
}

.announcement-bar {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
}

.announcement-bar__link {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  text-decoration: none;
}

.announcement-bar__link:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-card-hover), 0.06);
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__link .announcement-bar__message {
  padding: 0;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 2rem;
  margin: 0;
  letter-spacing: 0.1rem;
}

/* section-header */
#shopify-section-header {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

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

#shopify-section-header.animate {
  transition: transform 0.15s ease-out;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icon heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .header--has-menu:not(.header--middle-left) {
    padding-bottom: 0;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--top-center {
    grid-template-areas:
      'left-icon heading icons'
      'navigation navigation navigation';
  }

  .header:not(.header--middle-left) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }
}

@media screen and (min-width: 990px) {
  .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

@media screen and (max-width: 989px) {
  menu-drawer ~ .header__icons .header__icon--account {
    display: none;
  }
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icon;
  justify-self: start;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

.no-js .predictive-search {
  display: none;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 47.8rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.header__inline-menu details[open] > .header__submenu {
  opacity: 1;
  transform: translateY(0);
  animation: animateMenuOpen var(--duration-default) ease;
  z-index: 1;
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease,
    transform var(--duration-default) ease;
}

.header__submenu.list-menu {
  padding: 2rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  padding: 0.95rem 3.5rem 0.95rem 2rem;
}

.header__submenu .header__submenu .header__menu-item {
  padding-left: 3rem;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  right: 2rem;
}

details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

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

.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: 4rem;
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-foreground));
  word-break: break-word;
}

.gradient {
  background: var(--color-background);
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}


/* FAQ Section */
.faq_page {
width: 100%;
margin-top: 20px;
margin-bottom: 50px  
}
.faq_page_subheader {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
letter-spacing: 0;
text-transform: inherit;
font-size: 24px;
}
.faq_page details {
padding-top: 20px;
}
.faq_page details p {
padding-left: 20px;
}
.faq_page summary {
padding: 10px;
background: inherit; /*= Change this to change the background color of your FAQ element =*/
border-radius: 1px;
outline: none;
position: relative;
border: 1px solid #000; /*= Change this to change the border color & thickness of your FAQ element =*/
}
.faq_page details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
.faq_page details[open] ~ * {
animation: inherit;
}
.faq_page summary::after {
content: ' ❮';
transform: translateY(-50%) rotate(180deg);
position: absolute;
right: 5%;
color: #000; /*= Change this to change the color of your arrow of the FAQ element =*/
top: 50%;
}
.faq_page details[open] summary:after {
content: " ❯";
transform: translateY(-50%) rotate(90deg);  
}

  
@media screen and (min-width: 750px) {
#shopify-section-template--15348385710315__1636022514427fa5df .image-with-text .grid__item {
    width: 70%;
}
#shopify-section-template--15348385710315__1636022514427fa5df .image-with-text .grid__item:first-child {
    width: 30%;
}
.image-with-text__media img {
    object-fit: contain;
}
}  

.collection > .center {
    position: relative;
    z-index: 2;
}

/* ── GREEN GLOW — Judge.me Testimonials Carousel Overrides (Final) ── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&display=swap');

/* Outer section — full forest green background */
#shopify-section-apps,
.shopify-section.spaced-section:has(.jdgm-testimonials-carousel),
div:has(.jdgm-testimonials-carousel) {
  background-color: #0d2a1a !important;
}

/* Carousel wrapper */
.jdgm-testimonials-carousel,
.jdgm-widget.jdgm-testimonials-carousel {
  background-color: #0d2a1a !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 4vw, 56px) !important;
}

/* Eyebrow header — show and style */
.jdgm-header {
  display: block !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #d4c5a0 !important;
  opacity: 0.65 !important;
  text-align: center !important;
  margin-bottom: 52px !important;
}

/* Hide rating number inside header */
.jdgm-header .jdgm-all-reviews-rating,
.jdgm-header [class*="rating"] {
  display: none !important;
}

/* Each card — transparent */
.jdgm-card,
.jdgm-testimonial {
  background: transparent !important;
  --card-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Card content */
.jdgm-card-content {
  background: transparent !important;
  text-align: center !important;
  padding: 0 clamp(16px, 4vw, 48px) !important;
}

/* Stars */
.jdgm-star,
.jdgm-stars {
  color: #FBBC04 !important;
  font-size: 12px !important;
  letter-spacing: 5px !important;
}

/* Quote / review body */

.jdgm-text,
.jdgm-testimonials-carousel .jdgm-text,
.jdgm-testimonial__text,
.jdgm-review__body {
  --text-size: clamp(18px, 2vw, 26px) !important;
  --text-color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.005em !important;
}

/* Reviewer name */
.jdgm-testimonial__author,
.jdgm-reviewer-name,
[class*="author"],
[class*="reviewer"] {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #d4c5a0 !important;
  opacity: 1 !important;
}

/* Verified badge — bronze, inline with name */
.jdgm-verified-buyer,
[class*="verified"],
.jdgm-testimonial__verification-badge {
  color: #8a6d3b !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 8px !important;
}

/* Verified tick icon */
.jdgm-verified-buyer svg,
[class*="verified"] svg {
  width: 12px !important;
  height: 12px !important;
  fill: #8a6d3b !important;
  stroke: #8a6d3b !important;
}

/* Hide product name link */
.jdgm-testimonial__product,
[class*="product-name"],
[class*="product_name"] {
  display: none !important;
}

/* Hide quote mark icons */
[class*="quote-icon"],
[class*="quote_icon"] {
  display: none !important;
}

/* Hide arrows */
.jdgm-tcr__arrow,
.jdgm-carousel-arrow,
svg[class*="arrow"],
button[class*="arrow"],
[data-direction] {
  display: none !important;
}

/* Navigation dots */
.jdgm-carousel-dots,
[class*="dots"] {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 52px !important;
}

[class*="dot"]:not(.dot) {
  width: 6px !important;
  height: 6px !important;
  background: rgba(212, 197, 160, 0.22) !important;
  border-radius: 0 !important;
  border: none !important;
  transition: background 0.3s, width 0.3s !important;
}

[class*="dot"][class*="active"],
[class*="dot"].active {
  background: #8a6d3b !important;
  width: 28px !important;
}

/* Mobile */
@media (max-width: 767px) {
  .jdgm-testimonial__text,
  [class*="body"], [class*="quote"] {
    font-size: clamp(16px, 2.8vw, 20px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GREEN GLOW — Complete Custom CSS
   Paste the entire contents of this file into:
   Online Store → Themes → Customize → Theme Settings → Custom CSS
   Replace everything that is currently there.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR
   ───────────────────────────────────────────────────────────────── */

.announcement-bar.color-accent-1 {
  background: #0d2a1a !important;
}

.announcement-bar.color-accent-1 .announcement-bar__message {
  color: #f1ead7 !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────────────────────────
   HEADER NAV
   ───────────────────────────────────────────────────────────────── */

.header__menu-item,
.header__menu-item span,
.header__active-menu-item {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #14120e !important;
}


/* ─────────────────────────────────────────────────────────────────
   MOBILE MENU DRAWER
   ───────────────────────────────────────────────────────────────── */

.menu-drawer {
  background: #0d2a1a !important;
}

/* Prevent carousel animation bleed when mobile menu opens */
body:has(.menu-drawer[open]) .gg-carousel .gg-slide,
body:has(.menu-drawer[open]) .gg-carousel .gg-tint,
body:has(.menu-drawer[open]) .gg-carousel .gg-track {
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — BACKGROUND
   Consolidated from your existing rules + variable-level override
   ───────────────────────────────────────────────────────────────── */

body:has(.product-section) {
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 255, 255, 255;
  background-color: #ffffff !important;
}

.product-section,
.product-section .product,
.product__info-wrapper,
.product__media-wrapper,
body:has(.product-section) .product__info-container,
body:has(.product-section) .page-width {
  background-color: #ffffff !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — TITLE
   Cormorant Garamond, light weight, forest green
   ───────────────────────────────────────────────────────────────── */

.product__title {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  color: #0d2a1a !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — SUBTITLE / TEXT BLOCK
   "Morning and Night" line — italic bronze
   ───────────────────────────────────────────────────────────────── */

.product__text {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  color: #8a6d3b !important;
  letter-spacing: 0.01em !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — PRICE
   JetBrains Mono, near-black, letter-spaced
   ───────────────────────────────────────────────────────────────── */

.price--large .price__regular .price-item,
.price--large .price__sale .price-item,
.price-item--regular,
.price-item--sale {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: #14120e !important;
}

.product__tax {
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  color: rgba(20, 18, 14, 0.5) !important;
  letter-spacing: 0.02em !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — FORM LABELS (Size, Quantity)
   ───────────────────────────────────────────────────────────────── */

.product-form__input .form__label,
.product-form__quantity .form__label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #14120e !important;
  opacity: 0.6 !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — SIZE / VARIANT DROPDOWN
   Remove blue focus ring, replace with forest green
   ───────────────────────────────────────────────────────────────── */

.product-form__input .select__select,
.product-form__input .field__input {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #14120e !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(20, 18, 14, 0.25) !important;
  background-color: transparent !important;
}

.product-form__input .select__select:focus,
.product-form__input .select__select:hover {
  box-shadow: 0 0 0 1.5px #0d2a1a !important;
  outline: none !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — QUANTITY SELECTOR
   ───────────────────────────────────────────────────────────────── */

.product-form__quantity .quantity {
  border: 1px solid rgba(20, 18, 14, 0.2) !important;
  border-radius: 0 !important;
}

.product-form__quantity .quantity__button {
  color: #0d2a1a !important;
}

.product-form__quantity .quantity__input {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #14120e !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — ADD TO CART BUTTON
   Font only — Shopify controls the logic and background colour
   ───────────────────────────────────────────────────────────────── */

.product-form__submit {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — ADD TO WISHLIST / SECONDARY BUTTON
   ───────────────────────────────────────────────────────────────── */

.product-form__buttons [name="add-to-wishlist"],
.product-form__buttons .button--secondary {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid rgba(20, 18, 14, 0.25) !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — DESCRIPTION BODY TEXT
   ───────────────────────────────────────────────────────────────── */

.product__description {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(20, 18, 14, 0.75) !important;
  letter-spacing: 0.01em !important;
}

.product__description p {
  margin-bottom: 1.2em !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — ACCORDION TABS
   Ingredients, How to Use, Shipping etc.
   ───────────────────────────────────────────────────────────────── */

.product__accordion .accordion__title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #14120e !important;
}

.product__accordion details {
  border-top: 1px solid rgba(20, 18, 14, 0.1) !important;
  border-radius: 0 !important;
}

.product__accordion details:last-child {
  border-bottom: 1px solid rgba(20, 18, 14, 0.1) !important;
}

.product__accordion summary {
  padding: 16px 0 !important;
}

.product__accordion .accordion__content {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: rgba(20, 18, 14, 0.7) !important;
  padding: 0 0 16px !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — STOCK / URGENCY MESSAGE
   ───────────────────────────────────────────────────────────────── */

.product__inventory {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — PURCHASE OPTIONS (One-time / Subscribe)
   ───────────────────────────────────────────────────────────────── */

.selling-plan-group__title,
.selling-plan-group-option__label {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: #14120e !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — BREADCRUMB
   ───────────────────────────────────────────────────────────────── */

.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"] {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important; /* was 9px, bronze: unreadable (Pooja, 17 Sep 2026) */
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #14120e !important;
}


/* ─────────────────────────────────────────────────────────────────
   PRODUCT PAGE — FOCUS RING
   Replace default blue with forest green
   ───────────────────────────────────────────────────────────────── */

body:has(.product-section) *:focus-visible {
  outline-color: rgba(13, 42, 26, 0.5) !important;
  box-shadow: 0 0 0 0.3rem rgb(255, 255, 255),
              0 0 0.5rem 0.4rem rgba(13, 42, 26, 0.2) !important;
}


/* ─────────────────────────────────────────────────────────────────
   REVIEWS CAROUSEL (Judge.me)
   ───────────────────────────────────────────────────────────────── */

#shopify-section-apps,
.shopify-section.spaced-section:has(.jdgm-testimonials-carousel),
div:has(.jdgm-testimonials-carousel) {
  background-color: #0d2a1a !important;
}

.jdgm-testimonials-carousel,
.jdgm-widget.jdgm-testimonials-carousel {
  background-color: #0d2a1a !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 4vw, 56px) !important;
}

.jdgm-header {
  display: block !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #d4c5a0 !important;
  opacity: 0.65 !important;
  text-align: center !important;
  margin-bottom: 52px !important;
}

.jdgm-header .jdgm-all-reviews-rating,
.jdgm-header [class*="rating"] {
  display: none !important;
}

.jdgm-card,
.jdgm-testimonial {
  background: transparent !important;
  --card-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.jdgm-card-content {
  background: transparent !important;
  text-align: center !important;
  padding: 0 clamp(16px, 4vw, 48px) !important;
}

.jdgm-star,
.jdgm-stars {
  color: #FBBC04 !important;
  font-size: 12px !important;
  letter-spacing: 5px !important;
}

.jdgm-text,
.jdgm-testimonials-carousel .jdgm-text,
.jdgm-testimonial__text,
.jdgm-review__body {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.005em !important;
}

.jdgm-testimonial__author,
.jdgm-reviewer-name,
[class*="author"],
[class*="reviewer"] {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #d4c5a0 !important;
  opacity: 1 !important;
}

.jdgm-verified-buyer,
[class*="verified"],
.jdgm-testimonial__verification-badge {
  color: #8a6d3b !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 8px !important;
}

.jdgm-verified-buyer svg,
[class*="verified"] svg {
  width: 12px !important;
  height: 12px !important;
  fill: #8a6d3b !important;
  stroke: #8a6d3b !important;
}

.jdgm-testimonial__product,
[class*="product-name"],
[class*="product_name"] {
  display: none !important;
}

[class*="quote-icon"],
[class*="quote_icon"] {
  display: none !important;
}

.jdgm-tcr__arrow,
.jdgm-carousel-arrow,
svg[class*="arrow"],
button[class*="arrow"],
[data-direction] {
  display: none !important;
}

.jdgm-carousel-dots,
[class*="dots"] {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 52px !important;
}

[class*="dot"]:not(.dot) {
  width: 6px !important;
  height: 6px !important;
  background: rgba(212, 197, 160, 0.22) !important;
  border-radius: 0 !important;
  border: none !important;
  transition: background 0.3s, width 0.3s !important;
}

[class*="dot"][class*="active"],
[class*="dot"].active {
  background: #8a6d3b !important;
  width: 28px !important;
}

@media (max-width: 767px) {
  .jdgm-testimonial__text,
  [class*="body"],
  [class*="quote"] {
    font-size: clamp(16px, 2.8vw, 20px) !important;
  }
}
/* ── COLLECTION PAGE — PRODUCT CARD TITLES */
.card__heading,
.card__heading a,
.card-information__text {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif !important;
  font-size: clamp(16px, 2.5vw, 22px) !important;
  font-weight: 300 !important;
  color: #14120e !important;
  letter-spacing: 0.01em !important;
}

/* ── COLLECTION PAGE — PRICE (scope it away from cards) */
.card-information .price-item--regular,
.card-information .price-item--sale {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: #14120e !important;
}

/* ═══════════════════════════════════════════════════════════════
   JUDGE.ME "WRITE A REVIEW" MODAL — SMALL-SCREEN FIX (v2)
   Prepared 14 Aug 2026. Applies to ALL products, Android + iPhone.

   v2, 28 Sep 2026: v1 was NEVER INSTALLED (checked live 28 Sep:
   modal still overflow:hidden, stars still 12px). An Android
   customer could not submit a review on Face Oil & Balm Duo.
   Measured live at 412x760: content 828px in a 760px box, no
   scroll. v2 adds section 6: hide the Shopify Inbox "Chat" bubble
   and the 15%-off Shopify Forms popup while the form is open.
   Both sat on top of the form.

   Preferred install: Judge.me admin → Settings → Widget → Custom CSS.
   Alternative: paste at the bottom of Assets → base.css (theme).

   ───────────────────────────────────────────────────────────────
   WHAT WAS BROKEN (measured live at 393x659, iPhone 14 Pro)

   1. THE REVIEW COULD NOT BE SUBMITTED AT ALL.
      Judge.me sizes the modal to the full viewport with
      overflow:hidden, and only switches scrolling on below
      max-height:640px. The modal's content is ~711px tall. Phones
      with 640-790px of usable height fall in a dead zone: content
      is clipped and there is no way to scroll to it.
        - Step 1: star row sat at 679-727px, below a 659px fold.
        - Step 2: Next button sat at 736-781px, 122px off screen.
      192px of the modal was unreachable. Pro Max screens are tall
      enough to escape it, which is why it only showed on smaller
      phones.

   2. THE STARS WERE TINY — AND THAT ONE WAS OURS.
      base.css line ~2492 and ~2984 set
        .jdgm-star, .jdgm-stars { font-size: 12px !important }
      for the homepage testimonials carousel. It leaks into this
      modal and overrides Judge.me's intended 48px, giving 21x48px
      tap targets, well under the 44px touch minimum.

   3. The bottom button sat under the iOS Safari address bar,
      because nothing reserved the safe-area inset.

   ───────────────────────────────────────────────────────────────
   VERIFIED AFTER (live, CSS injected, two products)

   Viewport      star row      all action pages fit?
   320x548       visible 58%   yes (intro scrolls 17px, stars in view)
   375x629       visible 46%   yes
   390x644       visible 45%   yes
   393x659       visible 44%   yes   <- Pooja's phone
   430x739       visible 39%   yes   <- Pro Max, unchanged
   1280x800      n/a           desktop layout untouched

   Stars: 21x48 -> 44x52. Star row: off-screen -> ~44% down.
   Stars outside the modal (preview badge, homepage carousel)
   still render at 12px, unchanged.
   ═══════════════════════════════════════════════════════════════ */


/* ── PHONES ONLY (<= 767px) ───────────────────────────────────── */
@media only screen and (max-width: 767px) {

  /* 1. Always allow scrolling, at any phone height.
        Judge.me does this below 640px; we widen it to every phone.
        100dvh tracks the iOS toolbar as it collapses, so the modal
        is never taller than what is actually visible.
        !important throughout: the Judge.me app stylesheet loads
        after base.css, so equal-specificity rules would lose. */
  .jdgm-write-review-modal .jdgm-write-review-modal__content {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 52px 20px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: flex-start !important;
  }

  /* 2. Let the flex children shrink instead of being forced to
        height:100%. min-height:0 is what actually lets the scroll
        container engage. */
  .jdgm-write-review-modal .jdgm-write-review-modal__sections,
  .jdgm-write-review-modal .jdgm-write-review-modal__section,
  .jdgm-write-review-modal .jdgm-write-review-modal__page {
    min-height: 0 !important;
    height: auto !important;
  }

  .jdgm-write-review-modal .jdgm-write-review-modal__form {
    height: auto !important;
    min-height: 0 !important;
    gap: 22px !important;              /* was 40px */
    justify-content: flex-start !important;
  }

  .jdgm-write-review-modal .jdgm-write-review-modal__form-group {
    gap: 16px !important;              /* was 20px */
  }

  /* 3. Trim the vertical bulk so the stars land mid-screen. */
  .jdgm-write-review-modal .jdgm-write-review-modal__product-image {
    width: 96px !important;            /* was 160px */
    height: 96px !important;
  }

  .jdgm-write-review-modal .jdgm-write-review-modal__title {
    font-size: 20px !important;        /* was 24px */
    line-height: 1.35 !important;
  }

  .jdgm-write-review-modal .jdgm-write-review-modal__intro {
    font-size: 14px !important;        /* was 16px */
    line-height: 1.45 !important;
  }

  /* 4. Reorder step 1 so the stars sit in the middle, not last.
        Original order: coupon banner (123px), image, title, stars.
        New order: image, title, stars, coupon banner.
        The customer sees what they are reviewing, then the stars
        at eye level, with the $10 offer as a reward underneath. */
  .jdgm-write-review-modal .jdgm-write-review-modal__page--review-form-intro .jdgm-write-review-modal__product-image { order: 1 !important; }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--review-form-intro .jdgm-write-review-modal__product-title { order: 2 !important; }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--review-form-intro .jdgm-write-review-modal__stars        { order: 3 !important; margin-bottom: 22px !important; }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--review-form-intro .jdgm-coupon-banner-container          { order: 4 !important; margin: 0 !important; }

  /* 5. Comfortable tap target on Next / Back / Close. */
  .jdgm-write-review-modal .jdgm-write-review-modal__nav-btn {
    min-height: 48px !important;
  }
}


/* ── THE STARS, ALL SCREEN SIZES ──────────────────────────────────
   Restores Judge.me's intended star size inside this modal only,
   undoing our carousel rule from base.css. Scoped to
   .jdgm-write-review-modal, so the homepage testimonials carousel,
   the product-page preview badge and the review list all keep
   their existing 12px treatment. Nothing else moves. */

.jdgm-write-review-modal .jdgm-write-review-modal__stars {
  gap: 4px !important;
  justify-content: center !important;
}

.jdgm-write-review-modal .jdgm-write-review-modal__stars .jdgm-star {
  font-size: 44px !important;          /* was forced to 12px */
  line-height: 52px !important;
  letter-spacing: normal !important;   /* was forced to 5px */
  display: inline-flex !important;     /* was inline, so width was ignored */
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;          /* 44x52 tap target */
  padding: 0 !important;
  margin: 0 !important;
}

/* The "Poor" / "Great" labels sit under the row. Judge.me pins them
   at top:108%, which collides once the stars are full size. */
.jdgm-write-review-modal .jdgm-write-review-modal__stars::before,
.jdgm-write-review-modal .jdgm-write-review-modal__stars::after {
  top: 100% !important;
}


/* ── 6. NOTHING ON TOP OF THE REVIEW FORM (added v2) ──────────────
   While the modal is open (Judge.me sets style="display: block"
   on it), hide the Shopify Inbox chat bubble and the Shopify Forms
   signup popup. Both come back the moment the modal closes.
   :has() works in Chrome/Android 105+, Samsung Internet 20+ and
   Safari/iOS 15.4+. Older browsers just keep the bubble showing. */
body:has(> .jdgm-write-review-modal[style*="display: block"]) shopify-chat,
body:has(> .jdgm-write-review-modal[style*="display: block"]) shopify-forms-embed {
  display: none !important;
}

/* The form scrolls, not the page behind it. */
body:has(> .jdgm-write-review-modal[style*="display: block"]) {
  overflow: hidden !important;
}
.jdgm-write-review-modal .jdgm-write-review-modal__content {
  overscroll-behavior: contain;
}


/* ── 7. BUTTONS ALWAYS ON SCREEN (added v3, 28 Sep 2026) ──────────
   Pooja's iPhone test: Next sat too low and the thank-you page's
   store-review step was cut off under the bottom toolbar. Pin the
   Back/Next bar and the thank-you Close bar to the bottom of the
   visible form, and leave extra room below so nothing hides under
   a browser toolbar. Also stop sideways scrolling into the other
   (off-screen) steps, and hide Shopify's preview bar while the form
   is open (it only exists in theme preview, never for customers). */
@media only screen and (max-width: 767px) {
  .jdgm-write-review-modal .jdgm-write-review-modal__content {
    overflow-x: hidden !important;
    /* 0, not 24px: Chrome and Safari pin a sticky bar INSIDE the
       scroll box padding, so padding here made the Close bar sit on
       top of the last line of content. The bars carry their own
       safe-area padding instead. */
    padding-bottom: 0 !important;
  }
  /* The thank-you page is its own overflow:auto box, which traps
     the sticky Close bar. Let the whole form scroll instead. */
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you {
    overflow: visible !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__navigation,
  .jdgm-write-review-modal .jdgm-write-review-modal__thank-you-nav {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    margin-top: 16px !important;
    padding: 10px 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.12);
  }
}
body:has(> .jdgm-write-review-modal[style*="display: block"]) #PBarNextFrameWrapper {
  display: none !important;
}


/* ── 8. THANK-YOU PAGE FITS ON ONE SCREEN (added v4, 28 Sep 2026) ──
   Pooja's iPhone test: the store-review stars' Poor / Great labels
   were hidden under the Close bar. The labels are absolutely
   positioned, so nothing reserved space for them; and the thank-you
   step was taller than its slider row, so the form could not scroll
   far enough. Reserve the label space, let each step keep its own
   height, and tighten the thank-you page. Measured at 375x667: stars,
   labels and Close all visible with no scrolling. At 360x600 a short
   scroll reveals everything. */
@media only screen and (max-width: 767px) {
  .jdgm-write-review-modal .jdgm-write-review-modal__sections {
    align-items: flex-start !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__stars {
    margin-bottom: 30px !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-write-review-modal__form {
    gap: 12px !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-coupon-banner {
    padding: 10px 14px !important;
    gap: 4px !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-coupon-banner__number,
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-coupon-banner__value {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-write-review-modal__title {
    font-size: 18px !important;
  }
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-write-review-modal__text,
  .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you .jdgm-write-review-modal__intro {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}