* {
    box-sizing: border-box;
    margin: 0
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 0
}

::selection {
    background: color-mix(in oklab, currentColor 16%, transparent)
}

html {
    font-size: 62.5%;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-background);
    scroll-behavior: smooth
}

html:has(dialog[scroll-lock][open]) {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px)
}

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body-family);
    color: var(--color-foreground);
    background: var(--color-background)
}

main {
    flex: 1 1 auto
}

slider-component {
    display: block
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

lazy-video {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

lazy-video>picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

lazy-video>picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

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

input,
textarea,
select {
    border-radius: var(--style-border-radius-inputs)
}

select {
    background-color: var(--color-background);
    color: currentcolor
}

a {
    color: inherit
}

p {
    text-wrap: pretty
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

p:empty {
    display: none
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child+:where(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6)+:has(+:empty:last-child) {
    margin-block-end: 0
}

.shopify-section {
    --content-width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100% - (var(--page-margin) * 2)));
    --content-margin: minmax(var(--page-margin), 1fr);
    --content-grid: var(--content-margin) var(--content-width) var(--content-margin);
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: var(--content-grid)
}

.shopify-section>* {
    grid-column: 2
}

.shopify-section>.full-width {
    grid-column: 1 / -1
}

.button,
.button-secondary,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-10);
    min-height: 4.8rem;
    padding: 1rem 1.6rem;
    border-radius: 0;
    border: 1px solid transparent;
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    font-weight: 700;
    text-transform: uppercase;
    text-box: trim-both cap alphabetic;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .18s ease
}

.button span,
.button-secondary span {
    text-box: trim-both cap alphabetic
}

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

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

.button-link {
    background: transparent;
    border: 0;
    min-height: 0;
    padding: 0;
    position: relative
}

.button-link:before {
    background: currentColor;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%
}

.button[type=submit]:hover,
.button[type=submit]:focus-visible,
.button[data-variant=submit]:hover,
.button[data-variant=submit]:focus-visible {
    opacity: .8
}

.button:not([type=submit]):not([data-variant=submit]):hover,
.button:not([type=submit]):not([data-variant=submit]):focus-visible {
    background: var(--color-primary-button-background-hover);
    color: var(--color-primary-button-text-hover);
    border-color: var(--color-primary-button-border-hover)
}

.button-secondary:hover,
.button-secondary:focus-visible {
    background: var(--color-secondary-button-background-hover);
    color: var(--color-secondary-button-text-hover);
    border-color: var(--color-secondary-button-border-hover)
}

.button:disabled:not([aria-busy=true]),
.button-secondary:disabled:not([aria-busy=true]) {
    opacity: .4;
    cursor: not-allowed
}

.button[aria-busy=true],
.button-secondary[aria-busy=true] {
    position: relative;
    color: transparent;
    pointer-events: none
}

.button[aria-busy=true]:after,
.button-secondary[aria-busy=true]:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid var(--color-primary-button-text);
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spinner .6s linear infinite
}

.button-secondary[aria-busy=true]:after {
    border-color: var(--color-secondary-button-text);
    border-top-color: transparent
}

@keyframes button-spinner {
    to {
        rotate: 360deg
    }
}

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

.button--with-price {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.button-unstyled {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1
}

.icon-button--close {
    font-size: 0
}

.icon-button svg {
    width: 20px;
    height: 20px;
    display: block
}

.icon-button--close svg {
    width: 15px;
    height: 15px
}

.header-section {
    position: sticky;
    top: calc(var(--header-height, 0px) * -1);
    transition: top var(--header-transition-duration) ease;
    will-change: top;
    z-index: 30
}

.header-section:has(sticky-header[data-sticky-state=visible]) {
    top: 0
}

@media screen and (max-width:749px) {
    .header-section:has(sticky-header[data-product-page]) .header {
        border-bottom: 0;
        background: transparent
    }
    .header-section:has(sticky-header[data-product-page][data-sticky-state=visible]:not(.at-top)) .header {
        background: var(--color-background)
    }
    body:has(sticky-header[data-product-page]) #MainContent {
        margin-block-start: calc(var(--header-height, 0px) * -1)
    }
}

sticky-header#sticky-header {
    display: block
}

@media(prefers-reduced-motion:reduce) {
    .header-section {
        transition: none
    }
}

.header {
    transition: background .25s ease
}

.header__inner {
    align-items: center;
    display: grid;
    gap: var(--spacing-16);
    grid-template-areas: "logo actions menu";
    grid-template-columns: 1fr auto auto;
    padding-block: var(--spacing-12)
}

@media screen and (min-width:750px) {
    .header__inner {
        grid-template-areas: "menu logo actions";
        grid-template-columns: 1fr auto 1fr;
        padding-block: var(--spacing-16)
    }
}

.header__menu {
    grid-area: menu
}

.header__logo {
    grid-area: logo;
    max-height: 2.2rem;
    width: auto
}

.header__logo svg {
    display: block;
    height: auto;
    max-height: 2.2rem;
    width: auto
}

@media screen and (min-width:750px) {
    .header__logo {
        max-height: 3rem
    }
    .header__logo svg {
        max-height: 3rem
    }
}

.header__actions {
    align-items: center;
    display: flex;
    gap: var(--spacing-16);
    grid-area: actions
}

@media screen and (min-width:750px) {
    .header__actions {
        justify-content: flex-end;
        gap: var(--spacing-20)
    }
}

.header__actions .header-action-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    text-decoration: none
}

.header__actions .header-action-link svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block
}

@media screen and (max-width:749px) {
    .header__actions .header-action-link--hide-mobile {
        display: none
    }
}

.header__actions .cart-trigger [data-cart-count] {
    position: absolute;
    top: -8px;
    right: -8px;
    transform: none;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-foreground);
    color: var(--color-background);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums
}

.cart-count {
    font-size: 1rem
}

.section {
    padding-block-start: var(--section-padding-block-start-mobile, 0);
    padding-block-end: var(--section-padding-block-end-mobile, 0)
}

.section__inner {
    display: flex;
    flex-direction: var(--section-direction, column);
    gap: var(--section-gap-mobile, 0);
    align-items: var(--section-alignment, flex-start);
    justify-content: var(--section-justify, flex-start)
}

@media screen and (max-width:749px) {
    .section__inner[data-mobile-column=true] {
        flex-direction: column
    }
}

@media screen and (min-width:750px) {
    .section {
        padding-block-start: var(--section-padding-block-start-desktop, 8.2rem);
        padding-block-end: var(--section-padding-block-end-desktop, 8.2rem)
    }
    .section__inner {
        gap: var(--section-gap-desktop, 0)
    }
}

.visually-hidden {
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}

.hidden {
    display: none!important
}

.hover-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s ease-in-out
}

.hover-underline:hover {
    background-size: 100% 1px
}

form {
    --font-size-input: var(--body-2-font-size);
    --line-height-input: var(--body-2-line-height);
    --letter-spacing-input: var(--body-2-letter-spacing);
    --color-input-background: var(--color-background);
    --color-input-text: var(--color-foreground);
    --color-input-border: color-mix(in oklab, var(--color-input-text) 60%, transparent);
    --style-height-input: 44px
}

:root {
    --header-transition-duration: .25s;
    --headline-font-size: 5rem;
    --headline-line-height: .9;
    --headline-letter-spacing: -.04em;
    --heading-font-weight: 700;
    --h1-font-size: 2.8rem;
    --h1-line-height: 1.2;
    --h1-letter-spacing: -.03em;
    --h2-font-size: 2.2rem;
    --h2-line-height: 1.2;
    --h2-letter-spacing: -.02em;
    --h3-font-size: 1.8rem;
    --h3-line-height: 1.1;
    --h3-letter-spacing: -.02em;
    --h4-font-size: 1.2rem;
    --h4-line-height: 1.3;
    --h4-letter-spacing: -.02em;
    --button-font-size: 1.2rem;
    --button-line-height: 1.3;
    --button-letter-spacing: .02em;
    --link-font-size: 1.1rem;
    --link-line-height: 1.4;
    --link-letter-spacing: .02em;
    --body-1-font-size: 1.5rem;
    --body-1-line-height: 1.3;
    --body-1-letter-spacing: -.01em;
    --body-2-font-size: 1.2rem;
    --body-2-line-height: 1.3;
    --body-2-letter-spacing: -.01em;
    --body-3-font-size: 1.1rem;
    --body-3-line-height: 1.4;
    --body-3-letter-spacing: -.01em
}

@media screen and (min-width:750px) {
     :root {
        --headline-font-size: 7rem;
        --headline-line-height: .8;
        --headline-letter-spacing: -.03em;
        --h1-font-size: 3.6rem;
        --h1-line-height: 1.1;
        --h1-letter-spacing: -.03em;
        --h2-font-size: 2.6rem;
        --h2-line-height: 1.2;
        --h2-letter-spacing: -.02em;
        --h3-font-size: 2rem;
        --h3-line-height: 1.1;
        --h3-letter-spacing: -.02em;
        --h4-font-size: 1.4rem;
        --h4-line-height: 1.3;
        --h4-letter-spacing: -.02em;
        --button-font-size: 1.3rem;
        --button-line-height: 1.2;
        --button-letter-spacing: .08em;
        --link-font-size: 1.2rem;
        --link-line-height: 1.3;
        --link-letter-spacing: .02em;
        --body-1-font-size: 1.6rem;
        --body-1-line-height: 1.3;
        --body-1-letter-spacing: -.01em;
        --body-2-font-size: 1.3rem;
        --body-2-line-height: 1.3;
        --body-2-letter-spacing: -.01em;
        --body-3-font-size: 1.2rem;
        --body-3-line-height: 1.3;
        --body-3-letter-spacing: -.01em
    }
}

body {
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
    letter-spacing: var(--body-1-letter-spacing)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0;
    font-family: var(--font-heading-family);
    line-height: var(--line-tight);
    font-weight: var(--heading-font-weight)
}

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing)
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing)
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing)
}

h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing)
}

h5 {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    letter-spacing: var(--body-2-letter-spacing)
}

h6 {
    font-size: var(--body-3-font-size);
    line-height: var(--body-3-line-height);
    letter-spacing: var(--body-3-letter-spacing)
}

p,
li,
small,
ul,
ol {
    margin-block: 0
}

small {
    font-size: var(--body-3-font-size);
    line-height: var(--body-3-line-height);
    letter-spacing: var(--body-3-letter-spacing)
}

.headline {
    font-family: var(--font-heading-family);
    font-size: var(--headline-font-size);
    line-height: var(--headline-line-height);
    letter-spacing: var(--headline-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h1 {
    font-family: var(--font-heading-family);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h2 {
    font-family: var(--font-heading-family);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h3 {
    font-family: var(--font-heading-family);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h4 {
    font-family: var(--font-heading-family);
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h5 {
    font-family: var(--font-heading-family);
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    letter-spacing: var(--body-2-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.h6 {
    font-family: var(--font-heading-family);
    font-size: var(--body-3-font-size);
    line-height: var(--body-3-line-height);
    letter-spacing: var(--body-3-letter-spacing);
    font-weight: var(--heading-font-weight)
}

.body-1 {
    font-family: var(--font-body-family);
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
    letter-spacing: var(--body-1-letter-spacing)
}

.body-2 {
    font-family: var(--font-body-family);
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
    letter-spacing: var(--body-2-letter-spacing)
}

.body-3 {
    font-family: var(--font-body-family);
    font-size: var(--body-3-font-size);
    line-height: var(--body-3-line-height);
    letter-spacing: var(--body-3-letter-spacing)
}

.button-text {
    font-family: var(--font-body-family);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing)
}

.link-text {
    font-family: var(--font-body-family);
    font-size: var(--link-font-size);
    line-height: var(--link-line-height);
    letter-spacing: var(--link-letter-spacing)
}

:where(.rte, .text-block) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .metafield-rich_text_field, .metafield-single_line_text_field-array) {
    margin-block: 0 1em
}

:where(.rte, .text-block) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote):last-child {
    margin-block-end: 0
}

:where(.rte, .text-block) :is(ul, ol) {
    padding-inline-start: 1.6em
}

:where(.rte, .text-block) li+li {
    margin-block-start: .35em
}


/*# sourceMappingURL=/cdn/shop/t/115/assets/base.css.map?v=95259710602524533131776677790 */