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

html {
    scroll-behavior: smooth
}

hr {
    border: none;
    height: .1rem;
    background-color: var(--theme-color-light);
    display: block;
    margin: 5rem 0
}

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

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

summary {
    cursor: pointer;
    list-style: none;
    position: relative
}

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

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

.disabled-link {
    pointer-events: none;
    cursor: default
}

.ge-hidden *.ge-hide {
    display: none !important
}

.hidden--mobile {
    display: none
}

@media screen and (min-width: 768px) {
    .hidden--mobile {
        display: block
    }

    .hidden--desktop {
        display: none
    }
}

@media print {

    .print\:hidden,
    .print-hidden {
        display: none
    }
}

html.is-changing .transition-fade {
    transition: opacity .25s;
    opacity: 1
}

html.is-animating .transition-fade {
    opacity: 0
}

.popup-force-hide {
    display: none !important
}

.hide-klaviyo-popup div[aria-label="POPUP Form"].needsclick {
    opacity: 0 !important;
    visibility: hidden !important
}

#md-form__select__country:focus {
    outline: var(--theme-color-focus) solid .1rem
}

*:focus-visible {
    outline: .2rem solid var(--theme-color-focus);
    outline-offset: var(--theme-focus-outline-offset, 0)
}

*:focus {
    outline: .2rem solid var(--theme-color-focus);
    outline-offset: var(--theme-focus-outline-offset, 0)
}

*:focus:not(:focus-visible) {
    outline: 0;
    border: 0;
    box-shadow: none
}

.focus-inset:focus-visible {
    outline: .2rem solid var(--theme-color-focus);
    outline-offset: var(--theme-focus-outline-offset, 0)
}

.focus-inset:focus {
    outline: .2rem solid var(--theme-color-focus);
    outline-offset: var(--theme-focus-outline-offset, 0)
}

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

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

.focus-none {
    box-shadow: none !important;
    outline: 0 !important
}

html {
    font-size: 62.5%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.page-margin,
.shopify-challenge__container {
    margin: var(--hh-section-vertical-margin) auto
}

.spaced-section {
    margin-top: var(--hh-section-vertical-margin)
}

@media screen and (max-width: 749px) {
    .spaced-section--md {
        margin-top: 0
    }
}

.spaced-section:last-child {
    margin-bottom: var(--hh-section-vertical-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
}

.mha,
.mxa {
    margin-left: auto
}

.mha,
.mxa {
    margin-right: auto
}

.mva,
.mxa {
    margin-top: auto
}

.mva,
.mxa {
    margin-bottom: auto
}

.mt0,
.mv0,
.mx0 {
    margin-top: 0
}

.mb0,
.mv0,
.mx0 {
    margin-bottom: 0
}

.pt0,
.pv0,
.px0 {
    padding-top: 0
}

.pb0,
.pv0,
.px0 {
    padding-bottom: 0
}

.pr0,
.ph0,
.px0 {
    padding-right: 0
}

.pl0,
.ph0,
.px0 {
    padding-left: 0
}

.mt025,
.mv025,
.mx025 {
    margin-top: .25em
}

.mb025,
.mv025,
.mx025 {
    margin-bottom: .25em
}

.ml025,
.mh025,
.mx025 {
    margin-left: .25em
}

.mr025,
.mh025,
.mx025 {
    margin-right: .25em
}

.pt025,
.pv025,
.px025 {
    padding-top: .25em
}

.pb025,
.pv025,
.px025 {
    padding-bottom: .25em
}

.pl025,
.ph025,
.px025 {
    padding-left: .25em
}

.pr025,
.ph025,
.px025 {
    padding-right: .25em
}

.mt05,
.mv05,
.mx05 {
    margin-top: .5em
}

.mb05,
.mv05,
.mx05 {
    margin-bottom: .5em
}

.ml05,
.mh05,
.mx05 {
    margin-left: .5em
}

.mr05,
.mh05,
.mx05 {
    margin-right: .5em
}

.pt05,
.pv05,
.px05 {
    padding-top: .5em
}

.pb05,
.pv05,
.px05 {
    padding-bottom: .5em
}

.pl05,
.ph05,
.px05 {
    padding-left: .5em
}

.pr05,
.ph05,
.px05 {
    padding-right: .5em
}

.mt075,
.mv075,
.mx075 {
    margin-top: .75em
}

.mb075,
.mv075,
.mx075 {
    margin-bottom: .75em
}

.ml075,
.mh075,
.mx075 {
    margin-left: .75em
}

.mr075,
.mh075,
.mx075 {
    margin-right: .75em
}

.pt075,
.pv075,
.px075 {
    padding-top: .75em
}

.pb075,
.pv075,
.px075 {
    padding-bottom: .75em
}

.pl075,
.ph075,
.px075 {
    padding-left: .75em
}

.pr075,
.ph075,
.px075 {
    padding-right: .75em
}

.mt1,
.mv1,
.mx1 {
    margin-top: 1em
}

.mb1,
.mv1,
.mx1 {
    margin-bottom: 1em
}

.ml1,
.mh1,
.mx1 {
    margin-left: 1em
}

.mr1,
.mh1,
.mx1 {
    margin-right: 1em
}

.mln1 {
    margin-left: -1em
}

.mrn1 {
    margin-right: -1em
}

.mhn1 {
    margin-left: -1em;
    margin-right: -1em
}

.pt1,
.pv1,
.px1 {
    padding-top: 1em
}

.pb1,
.pv1,
.px1 {
    padding-bottom: 1em
}

.pl1,
.ph1,
.px1 {
    padding-left: 1em
}

.pr1,
.ph1,
.px1 {
    padding-right: 1em
}

.mt15,
.mv15,
.mx15 {
    margin-top: 1.5em
}

.mb15,
.mv15,
.mx15 {
    margin-bottom: 1.5em
}

.ml15,
.mh15,
.mx15 {
    margin-left: 1.5em
}

.mr15,
.mh15,
.mx15 {
    margin-right: 1.5em
}

.mln15 {
    margin-left: -1.5em
}

.mrn15 {
    margin-right: -1.5em
}

.mhn15 {
    margin-left: -1.5em;
    margin-right: -15em
}

.pt15,
.pv15,
.px15 {
    padding-top: 1.5em
}

.pb15,
.pv15,
.px15 {
    padding-bottom: 1.5em
}

.pl15,
.ph15,
.px15 {
    padding-left: 1.5em
}

.pr15,
.ph15,
.px15 {
    padding-right: 1.5em
}

.mt2,
.mv2,
.mx2 {
    margin-top: 2em
}

.mb2,
.mv2,
.mx2 {
    margin-bottom: 2em
}

.ml2,
.mh2,
.mx2 {
    margin-left: 2em
}

.mr2,
.mh2,
.mx2 {
    margin-right: 2em
}

.mln2 {
    margin-left: -2em
}

.mrn2 {
    margin-right: -2em
}

.mhn2 {
    margin-left: -2em;
    margin-right: -2em
}

.pt2,
.pv2,
.px2 {
    padding-top: 2em
}

.pb2,
.pv2,
.px2 {
    padding-bottom: 2em
}

.pl2,
.ph2,
.px2 {
    padding-left: 2em
}

.pr2,
.ph2,
.px2 {
    padding-right: 2em
}

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

::placeholder {
    color: var(--theme-color-subdued);
    opacity: 1
}

::-ms-input-placeholder {
    color: var(--theme-color-subdued)
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--theme-color-subdued);
    font-family: var(--theme-font-body), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%
}

hh-input-wrapper {
    font: var(--theme-body-font)
}

hh-input-wrapper[label=stacked] label {
    font: var(--theme-body-font);
    color: var(--theme-color-subdued);
    padding-left: 15px;
    width: auto;
    font-size: 1.6rem;
    line-height: 1.62;
    max-height: 2.6rem;
    top: 50%;
    transform: translateY(-50%)
}

hh-input-wrapper[label=stacked] label {
    position: absolute
}

hh-input-wrapper[label=stacked] label,
hh-input-wrapper[filled=true] label,
hh-input-wrapper[focused=true] label {
    font-size: 1.4rem;
    top: 0;
    transform: translateY(4.5px);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.07;
    max-height: 1.5rem;
    z-index: 3
}

hh-input-wrapper {
    border: none;
    height: calc(var(--hh-height, 48px) + 2px);
    background-color: var(--theme-color-reverse)
}

input,
select,
textarea {
    font: var(--theme-body-font);
    background-color: var(--theme-color-reverse);
    color: var(--theme-color-ink);
    border-width: 1px;
    border-style: solid;
    border-color: var(--theme-color-button-outlines);
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 12px 15px;
    border-radius: var(--theme-input-border-radius);
    height: auto;
    width: auto;
    text-indent: unset
}

hh-input-wrapper[label=stacked] select {
    position: absolute
}

hh-input-wrapper[label=stacked] [slot=icon] {
    height: 50px;
    width: 14px !important;
    right: 15px
}

hh-input-wrapper[label=stacked] select,
hh-input-wrapper[filled=true] input,
hh-input-wrapper[filled=true] textarea,
hh-input-wrapper[focused=true] input,
hh-input-wrapper[focused=true] textarea {
    padding: 19.5px 15px 4.5px
}

input:disabled,
select:disabled,
textarea:disabled,
input.disabled,
select.disabled,
textarea.disabled,
input[aria-disabled=true],
select[aria-disabled=true],
text-area[aria-disabled=true] {
    color: var(--theme-color-neutral);
    border-color: var(--theme-color-neutral);
    cursor: not-allowed;
    pointer-events: none
}

input:disabled~label,
select:disabled~label,
textarea:disabled~label,
input.disabled~label,
select.disabled~label,
textarea.disabled~label,
input[aria-disabled=true]~label,
select[aria-disabled=true]~label,
text-area[aria-disabled=true]~label,
select:disabled svg,
select[aria-disabled=true] svg {
    color: var(--theme-color-neutral);
    cursor: not-allowed;
    pointer-events: none
}

.has-error {
    border: 2px solid var(--theme-color-error);
    color: var(--theme-color-error);
    outline-color: transparent
}

select.custom-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml, %3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2L6 7L11 2' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) calc(100% - 7px)
}

option {
    border: 1px solid var(--theme-color-neutral);
    cursor: pointer;
    padding: 10px
}

.error-message {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.07;
    color: var(--theme-color-error);
    letter-spacing: .02em
}

[type=radio],
[type=checkbox] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--theme-color-reverse);
    border: 1px solid var(--theme-color-subdued) !important;
    border-radius: 1px;
    height: 16px;
    position: relative;
    vertical-align: text-bottom;
    width: 16px;
    padding: unset;
    margin: 0;
    margin-left: 1rem
}

[type=radio]+label,
[type=checkbox]+label {
    position: relative;
    padding-left: 6px
}

[type=radio]+label:before,
[type=checkbox]+label:before {
    border-color: transparent;
    content: "";
    inset: -1rem -1rem -1rem -2.6rem;
    position: absolute
}

[type=radio]:hover,
[type=checkbox]:hover {
    border: 1px solid var(--theme-color-ink) !important;
    box-shadow: none
}

[type=radio]:hover+label,
[type=checkbox]:hover+label {
    color: var(--theme-color-ink)
}

[type=radio]:checked,
[type=checkbox]:checked {
    border: 1px solid var(--theme-color-ink) !important
}

[type=radio]:checked+label,
[type=checkbox]:checked+label {
    color: var(--theme-color-ink)
}

[type=radio]:checked:before,
[type=checkbox]:checked:before {
    background: var(--theme-color-ink);
    border-color: var(--theme-color-ink);
    content: "";
    height: 10px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 10px
}

[type=checkbox]:checked:before {
    background-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    height: 6px;
    transform: rotate(-45deg)
}

[type=radio],
[type=radio]:checked:before {
    border-radius: 100%
}

[type=radio]:focus,
[type=radio]:focus-visible,
[type=checkbox]:focus,
[type=checkbox]:focus-visible {
    margin-left: 1rem;
    outline: none
}

[type=radio]:focus+label:before,
[type=checkbox]:focus+label:before,
[type=radio]:focus-visible+label:before,
[type=checkbox]:focus-visible+label:before {
    border: 2px solid var(--theme-color-focus) !important
}

.media {
    display: block;
    background-color: var(--hh-color-light);
    position: relative;
    overflow: hidden
}

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

.media>img:not(.zoom) {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    transition: opacity .4s cubic-bezier(.25, .46, .45, .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
}

.c-primary {
    color: var(--theme-color-brand-primary)
}

.c-secondary {
    color: var(--theme-color-brand-secondary)
}

.c-tertiary {
    color: var(--theme-color-brand-tertiary)
}

.c-night {
    color: var(--theme-color-night)
}

.c-day {
    color: var(--theme-color-day)
}

.c-subdued {
    color: var(--theme-color-subdued)
}

.c-neutral {
    color: var(--theme-color-neutral)
}

.c-success {
    color: var(--theme-color-success)
}

.c-danger {
    color: var(--theme-color-danger)
}

.c-light {
    color: var(--theme-color-light)
}

.c-foreground {
    color: var(--theme-color-foreground)
}

.c-text {
    color: var(--theme-color-ink)
}

.c-white {
    color: var(--theme-color-reverse)
}

.c-inherit {
    color: inherit
}

.bg-primary {
    background-color: var(--hh-color-brand-primary)
}

.bg-secondary {
    background-color: var(--hh-color-brand-secondary)
}

.bg-tertiary {
    background-color: var(--hh-color-brand-tertiary)
}

.bg-day {
    background-color: var(--hh-color-day)
}

.bg-night {
    background-color: var(--hh-color-night)
}

.bg-subdued {
    background-color: var(--hh-color-subdued)
}

.bg-neutral {
    background-color: var(--hh-color-neutral)
}

.bg-light {
    background-color: var(--hh-color-light)
}

.bg-background {
    background-color: var(--hh-color-background)
}

.flex {
    display: flex
}

.fw {
    flex-wrap: wrap
}

.ais {
    align-items: flex-start
}

.aie {
    align-items: flex-end
}

.aic {
    align-items: center
}

.aib {
    align-items: baseline
}

.jcs {
    justify-content: flex-start
}

.jce {
    justify-content: flex-end
}

.jcc {
    justify-content: center
}

.jcb {
    justify-content: space-between
}

.jca {
    justify-content: space-around
}

.fa {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0
}

.ff {
    flex-shrink: 0
}

.fdc {
    flex-direction: column
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.rte {
    display: flex;
    flex-direction: column;
    gap: 4rem
}

.rte:after {
    clear: both;
    content: "";
    display: block
}

.rte * {
    color: var(--theme-color-subdued)
}

.rte h1,
.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6,
.rte strong,
.rte var {
    color: var(--theme-color-ink)
}

.rte p,
.rte span,
.rte var,
.rte li {
    font: var(--theme-body-large-font)
}

.rte>p:first-child {
    margin-top: 0
}

.rte>p:last-child {
    margin-bottom: 0
}

.rte strong {
    font-weight: 600
}

.rte table {
    table-layout: fixed
}

@media screen and (min-width: 750px) {
    .rte table td {
        padding-left: 1.2rem;
        padding-right: 1.2rem
    }
}

.rte img {
    width: 100%;
    height: auto;
    max-width: 100%
}

.rte ul {
    padding-left: 2rem
}

.rte li {
    list-style: inherit
}

.rte li:last-child {
    margin-bottom: 0
}

.rte a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem
}

.rte a:hover {
    color: var(--theme-color-ink)
}

.rte blockquote {
    display: inline-flex;
    margin: 0
}

.rte blockquote>* {
    margin: -.5rem 0
}

.rte u {
    text-decoration: none
}

.rte ol,
.rte ul {
    margin: 0;
    padding-inline-start: 0;
    padding-left: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.rte ul {
    list-style-type: disc
}

.rte var {
    font-style: italic
}

@media screen and (max-width: 749px) {
    .rte {
        gap: 1.5rem
    }

    .rte h1,
    .rte h2,
    .rte h3,
    .rte h4,
    .rte h5,
    .rte h6 {
        padding-top: 1.5rem
    }

    .rte>*:first-of-type {
        padding-top: 0
    }
}

.block {
    display: block
}

.hidden {
    display: none !important
}

@media screen and (max-width: 749px) {
    .hidden--sm {
        display: none !important
    }
}

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

@media screen and (min-width: 990px) {
    .hidden--lg {
        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
}

.visibility-hidden {
    visibility: hidden
}

.overflow-hidden,
.overflow-hidden--sm,
.overflow-hidden--md {
    overflow: hidden
}

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

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

.relative {
    position: relative
}

.border-top {
    border-top: 1px solid currentColor
}

.border-bottom {
    border-bottom: 1px solid currentColor
}

.pointer {
    cursor: pointer
}

.zoom-in {
    cursor: zoom-in
}

.pointer-none {
    pointer-events: none
}

.rounded {
    border-radius: var(--hh-rounded, 5px)
}

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

.cover {
    object-fit: cover
}

.contain {
    object-fit: contain
}

.badge {
    font: var(--hh-body-font);
    border: 1px solid transparent;
    border-radius: 4rem;
    display: inline-block;
    padding: .6rem 1.3rem;
    text-align: center;
    background-color: var(--hh-color-background);
    color: var(--hh-color-foreground);
    word-break: break-word
}

.img img {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover
}

.no-margin {
    margin: 0
}

.fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

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

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

.full-width-link {
    position: absolute;
    inset: 0;
    z-index: 2
}

table:not([class]) {
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 1.4rem;
    border-style: hidden;
    box-shadow: 0 0 0 .1rem var(--hh-color-light)
}

table:not([class]) td,
table:not([class]) th {
    padding: 1em;
    border: .1rem solid var(--hh-color-light)
}

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

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

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

.placeholder {
    background-color: var(--hh-color-light);
    color: var(--hh-color-neutral);
    fill: var(--hh-color-neutral)
}

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

.underlined-link {
    color: var(--hh-color-text);
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem;
    transition: text-decoration-thickness ease .1s
}

.underlined-link:hover {
    color: var(--hh-color-text);
    text-decoration-thickness: .2rem
}

.animate-arrow .icon-arrow path {
    transform: translate(-.25rem);
    transition: transform var(--hh-duration-short) ease
}

.animate-arrow:hover .icon-arrow path {
    transform: translate(-.05rem)
}

.disclosure-has-popup {
    position: relative
}

.disclosure-has-popup[open]>summary:before {
    position: fixed;
    inset: 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
}

.w1 {
    width: 100%;
    max-width: 100%
}

.w1--important {
    width: 100% !important;
    max-width: 100% !important
}

@media screen and (max-width: 766px) {
    .w1--sm {
        width: 100%;
        max-width: 100%
    }
}

.w12 {
    width: 50%
}

.h-full {
    height: 100%
}

[data-shopify-xr]>svg {
    width: 1.4rem;
    margin-right: 1rem
}

[data-shopify-xr][data-shopify-xr-hidden] {
    visibility: hidden
}

model-viewer {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.shopify-payment-button__button {
    font-size: 1.5rem;
    letter-spacing: .1rem;
    border-radius: 0;
    min-height: 4.6rem;
    overflow: hidden
}

.shopify-payment-button__button--unbranded {
    padding: 0;
    background-color: var(--hh-color-text);
    box-shadow: 0 0 0 .1rem var(--hh-color-text);
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: .07rem
}

.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background-color: var(--hh-color-text);
    box-shadow: 0 0 0 .2rem var(--hh-color-text)
}

.shopify-payment-button__button--unbranded:focus {
    outline: .3rem solid var(--hh-color-foreground);
    outline-offset: .3rem
}

.shopify-payment-button__button--unbranded:focus-visible {
    outline: .3rem solid var(--hh-color-foreground);
    outline-offset: .3rem
}

.shopify-payment-button__button--unbranded:focus:not(:focus-visible) {
    outline: 0
}

.shopify-payment-button__more-options {
    color: var(--hh-color-foreground);
    margin: 1.6rem 0 1rem;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: .05rem;
    text-decoration: underline;
    text-underline-offset: .3rem
}

hh-button {
    --hh-border-bottom-offset: -2px
}

hh-button[theme=tertiary] {
    --theme-padding: 0
}

hh-details-modal {
    --hh-top: calc(100% - 1px);
    --hh-modal-height: 100%;
    --hh-modal-background: var(--hh-color-background)
}

hh-details-modal[ctx=filters] {
    --hh-position: fixed;
    --hh-top: 0;
    --hh-z-index-inner: 100
}

hh-quantity-input {
    --hh-button-width: 1.4rem;
    --hh-height: 4rem;
    --theme-padding: .5rem 1.5rem;
    --hh-color: var(--hh-color-subdued)
}

hh-input-wrapper {
    --hh-font: var(--hh-body-font)
}

hh-input-wrapper[label=stacked] {
    --hh-label-font: var(--hh-body-font);
    --hh-label-margin: 0 0 .25em
}

hh-modal {
    --theme-padding: 0 1rem;
    --hh-background: var(--hh-color-day);
    --hh-border-color: var(--hh-color-neutral)
}

hh-modal[ctx=product] {
    --hh-slotted-width: calc(100% - 2rem);
    --hh-slotted-margin: 1rem 0 0
}

hh-slider {
    --hh-background: var(--hh-color-light);
    --hh-button-background: var(--hh-color-day);
    --hh-button-border: 1px solid var(--hh-color-neutral);
    --hh-cell-width: calc(100% - 3rem)
}

hh-slider:not([open="true"]) {
    --hh-container-flex: flex;
    --hh-container-flex-wrap: wrap
}

hh-badge-wrapper {
    --hh-font: var(--hh-body-utility);
    --hh-color-primary: var(--hh-color-day);
    --hh-color-secondary: var(--hh-color-night);
    --hh-background-primary: var(--hh-color-brand-primary);
    --hh-background-secondary: var(--hh-color-brand-secondary)
}

hh-tabs:not(:defined),
hh-modal:not(:defined),
hh-button:not(:defined),
hh-button-wrapper:not(:defined),
hh-details-modal:not(:defined),
hh-quantity-input:not(:defined),
hh-input-wrapper:not(:defined),
hh-custom-select:not(:defined),
hh-badge-wrapper:not(:defined) {
    opacity: 0
}

[hh-cloak]:not(:defined),
hh-modal:not(:defined) {
    display: none
}

hh-details-modal:not(:defined) {
    visibility: hidden;
    opacity: 0;
    max-width: 0;
    max-height: 0
}

*:not(:defined) .hidden-slot {
    display: none
}

hh-accordion button {
    line-height: 1.495;
    position: relative;
    text-align: left;
    width: 100%;
    display: block;
    border: none;
    background: unset;
    border-width: unset;
    padding: unset;
    border-radius: unset
}

hh-accordion button:focus,
hh-accordion button:focus:not(:focus-visible) {
    border-width: 0
}

hh-accordion button:hover {
    border: none
}

hh-accordion button>svg {
    position: absolute;
    right: 0;
    top: 50%;
    height: .6rem;
    margin-top: -.3rem
}

hh-accordion button.active svg {
    transform: rotate(180deg)
}

hh-accordion .footer__menu-child {
    visibility: hidden
}

hh-accordion button.active+.footer__menu-child {
    margin-top: 1.7rem;
    visibility: visible
}

hh-accordion .panel,
hh-accordion>div {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease-out
}

.breadcrumbs__items {
    display: flex;
    flex-flow: row wrap
}

.breadcrumbs__item {
    color: var(--breadcrumb-item-text-color, var(--theme-color-subdued))
}

.breadcrumbs__item:not(:last-of-type):after {
    color: var(--breadcrumb-item-slash-color, var(--breadcrumb-item-text-color, var(--theme-color-ink)));
    content: "/";
    margin: 0 5px 0 2px;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .12px
}

.load-more__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.load-more__progress-wrapper {
    margin-top: 20px;
    width: 100%;
    max-width: 280px
}

.load-more__progress-bar {
    background-color: var(--theme-color-neutral);
    height: 1px;
    width: 100%;
    overflow: hidden
}

.load-more__progress-indicator {
    display: block;
    height: 100%;
    background-color: var(--theme-color-ink)
}

.load-more__progress-count {
    margin-top: 12px;
    color: var(--theme-color-subdued)
}

.load-more__button:not(.is-loading) .icon-loading {
    display: none
}

.load-more__button.is-loading .icon-arrow {
    display: none
}

.load-more__button .icon-loading {
    display: block;
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.slider {
    display: block
}

.slider__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

.slider__list {
    display: flex;
    gap: var(--slider-gap, 0);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 51px;
    scroll-snap-type: x mandatory;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin
}

.slider__slide {
    flex: 1 0 var(--slide-width, 100%);
    scroll-snap-align: start
}

.slider__list.custom-scrollbar::-webkit-scrollbar {
    height: 1.6rem;
    background-color: var(--theme-color-reverse)
}

.slider__list.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--theme-color-reverse)
}

.slider__list.custom-scrollbar::-webkit-scrollbar-track:hover {
    background: var(--theme-color-background-grey)
}

.slider__list.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--theme-color-transparent);
    border-radius: 1.6rem;
    border: .5rem solid var(--theme-color-transparent)
}

.slider__list.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-color-transparent);
    border: .4rem solid var(--theme-color-transparent)
}

.slider__list.custom-scrollbar::-webkit-scrollbar-button {
    display: none
}

.slider__list.custom-scrollbar.custom-scrollbar-visible::-webkit-scrollbar-thumb {
    background-color: var(--theme-color-background-scrollbar);
    border: .5rem solid var(--theme-color-reverse)
}

.slider__list.custom-scrollbar.custom-scrollbar-visible::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-color-background-scrollbar-hover);
    border: .4rem solid var(--theme-color-background-grey)
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}