:root {
    /* 亮色 */
    --color-dark: #000000;
    /* 暗色 */
    --color-light: #FFFFFF;
}
:root {
    --white-hsl: 0, 0%, 100%;
    --black-hsl: 0, 0%, 0%;
    --safeLightAccent-hsl: 0, 0%, 100%;
    --safeDarkAccent-hsl: 0, 0%, 12.16%;
    --safeInverseAccent-hsl: 0, 0%, 100%;
    --safeInverseLightAccent-hsl: 0, 0%, 0%;
    --safeInverseDarkAccent-hsl: 0, 0%, 100%;
    --accent-hsl: 0, 0%, 12.16%;
    --lightAccent-hsl: 210, 3.23%, 87.84%;
    --darkAccent-hsl: 240, 2.61%, 22.55%;
}
:root {
    --course-item-nav-text-color: hsla(var(--black-hsl), 1);
    --tweak-blog-item-pagination-icon-color: hsla(var(--black-hsl), 1);
    --tweak-summary-block-read-more-color-on-background: hsla(var(--black-hsl), 1);
    --tweak-quote-block-source-color-on-background: hsla(var(--black-hsl), 1);
    --paragraphSmallColor: hsla(var(--black-hsl), 1);
    --list-section-simple-button-background-color: hsla(var(--safeDarkAccent-hsl), 1);
    --gradientHeaderBorderColor: hsla(var(--black-hsl), 1);
    --tweak-summary-block-header-text-color-on-background: hsla(var(--black-hsl), 1);
    --solidHeaderDropShadowColor: hsla(var(--black-hsl), 1);
    --tweak-blog-alternating-side-by-side-list-read-more-color: hsla(var(--safeDarkAccent-hsl), 1);
    --tweak-summary-block-background-color: hsla(var(--lightAccent-hsl), 1);
    --tweak-form-block-survey-title-color: hsla(var(--black-hsl), 1);
    --list-section-carousel-card-description-color: hsla(var(--black-hsl), 1);
    --image-block-card-inline-link-color: hsla(var(--black-hsl), 1);
    --paragraphLargeColor: hsla(var(--black-hsl), 1);
    --tweak-summary-block-primary-metadata-color-on-background: hsla(var(--black-hsl), 1);
    --tweak-blog-item-comment-text-color: hsla(var(--black-hsl), 1);
    --tweak-summary-block-read-more-color: hsla(var(--black-hsl), 1);
    --list-section-banner-slideshow-card-description-link-color: hsla(var(--safeDarkAccent-hsl), 1);
    --image-block-stack-inline-link-color: hsla(var(--black-hsl), 1);
    --tweak-menu-block-title-color: hsla(var(--black-hsl), 1);
    --list-section-carousel-card-button-text-color: hsla(var(--safeInverseDarkAccent-hsl), 1);
    --tweak-paragraph-medium-color-on-background: hsla(var(--black-hsl), 1);
    --portfolio-grid-overlay-title-color: hsla(var(--black-hsl), 1);
    --tweak-accordion-block-icon-color: hsla(var(--black-hsl), 1);
    --tweak-marquee-block-paragraph-color-on-background: hsla(var(--black-hsl), 1);
    --tweak-product-quick-view-button-color: hsla(var(--black-hsl), 1);
    --product-detail-subscription-price-text-color: hsla(var(--black-hsl), 1);
    --paragraphMediumColor: hsla(var(--black-hsl), 1);
    --siteTitleColor: hsla(var(--black-hsl), 1);
    --tweak-product-basic-item-title-color: hsla(var(--black-hsl), 1);
    --tweak-quote-block-text-color-on-background: hsla(var(--black-hsl), 1);
    --list-section-carousel-card-title-color: hsla(var(--black-hsl), 1);
    --tweak-gallery-icon-color: hsla(var(--black-hsl), 1);
    --image-block-overlap-image-title-bg-color: hsla(var(--white-hsl), 1);
    --tweak-newsletter-block-title-color: hsla(var(--black-hsl), 1);
    --image-block-collage-inline-link-color: hsla(var(--black-hsl), 1);
    --tweak-newsletter-block-button-background-color-on-background: hsla(var(--black-hsl), 1);
    --tweak-product-basic-item-breadcumb-nav-color: hsla(var(--black-hsl), 1);
    --tweak-product-basic-item-description-color: hsla(var(--black-hsl), 1);
    --tertiaryButtonBackgroundColor: hsla(var(--black-hsl), 1);
    --tweak-video-item-pagination-title-color: hsla(var(--black-hsl), 1);
    --course-list-grid-layout-course-item-border-color: hsla(var(--darkAccent-hsl), 1);
    --portfolio-grid-basic-title-color: hsla(var(--black-hsl), 1);
    --tweak-blog-alternating-side-by-side-list-title-color: hsla(var(--black-hsl), 1);
    --menuOverlayNavigationLinkColor: hsla(var(--black-hsl), 1);
    --product-detail-subscriptions-frequency-text-color: hsla(var(--black-hsl), 1);
    --tweak-quote-block-stroke-color: hsla(var(--black-hsl), 1);
    --tweak-portfolio-item-pagination-title-color: hsla(var(--black-hsl), 1);
    --tweak-form-block-title-color-on-background: hsla(var(--black-hsl), 1);
}
:root {
    --base-font-size: 16px;
    --heading-font-font-family: orpheus-pro;
    --heading-font-font-style: normal;
    --heading-font-font-weight: 400;
    --heading-font-text-transform: none;
    --heading-font-letter-spacing: 0em;
    --heading-font-line-height: 1.4em;
    --body-font-font-family: adobe-garamond-pro;
    --body-font-font-style: normal;
    --body-font-font-weight: 400;
    --body-font-text-transform: none;
    --body-font-letter-spacing: 0em;
    --body-font-line-height: 1.6em;
    --meta-font-font-family: adobe-garamond-pro;
    --meta-font-font-style: normal;
    --meta-font-font-weight: 400;
    --meta-font-text-transform: none;
    --meta-font-letter-spacing: .02em;
    --meta-font-line-height: 1.2em;
    --heading-1-size: 4rem;
    --heading-1-size-value: 4;
    --heading-2-size: 2.8rem;
    --heading-2-size-value: 2.8;
    --heading-3-size: 2.2rem;
    --heading-3-size-value: 2.2;
    --heading-4-size: 1.2rem;
    --heading-4-size-value: 1.2;
    --large-text-size: 1.5rem;
    --large-text-size-value: 1.5;
    --normal-text-size: 1.2rem;
    --normal-text-size-value: 1.2;
    --small-text-size: 1rem;
    --small-text-size-value: 1;
    --normal-meta-size: 1.2rem;
    --normal-meta-size-value: 1.2;
    --form-block-caption-text-font-font-family: var(--body-font-font-family);
    --form-block-caption-text-font-font-style: var(--body-font-font-style);
    --form-block-caption-text-font-font-weight: var(--body-font-font-weight);
    --form-block-caption-text-font-text-transform: var(--body-font-text-transform);
    --form-block-caption-text-font-letter-spacing: var(--body-font-letter-spacing);
    --form-block-caption-text-font-line-height: var(--body-font-line-height);
    --form-block-caption-text-font-font-size: var(--small-text-size);
    --form-block-caption-text-font-font-size-value: var(--small-text-size-value);
    --blog-alternating-side-by-side-list-title-font-font-family: var(--heading-font-font-family);
    --blog-alternating-side-by-side-list-title-font-font-style: var(--heading-font-font-style);
    --blog-alternating-side-by-side-list-title-font-font-weight: var(--heading-font-font-weight);
    --blog-alternating-side-by-side-list-title-font-text-transform: var(--heading-font-text-transform);
    --blog-alternating-side-by-side-list-title-font-letter-spacing: var(--heading-font-letter-spacing);
    --blog-alternating-side-by-side-list-title-font-line-height: var(--heading-font-line-height);
    --blog-alternating-side-by-side-list-title-font-font-size: var(--heading-2-size);
}
:root {
    --primary-button-rounded-border-top-left-radius: 6.4px;
    --primary-button-rounded-border-top-right-radius: 6.4px;
    --primary-button-rounded-border-bottom-left-radius: 6.4px;
    --primary-button-rounded-border-bottom-right-radius: 6.4px;
    --primaryButtonPadding: 1.2em;
    --primary-button-padding-x: 2.004em;
    --primary-button-padding-y: 1.2em;
    --primary-button-stroke: 0px;
    --secondary-button-rounded-border-top-left-radius: 6.4px;
    --secondary-button-rounded-border-top-right-radius: 6.4px;
    --secondary-button-rounded-border-bottom-left-radius: 6.4px;
    --secondary-button-rounded-border-bottom-right-radius: 6.4px;
    --secondary-button-padding-x: 2.004em;
    --secondary-button-padding-y: 1.2em;
    --secondary-button-stroke: 1px;
    --tertiary-button-rounded-border-top-left-radius: 6.4px;
    --tertiary-button-rounded-border-top-right-radius: 6.4px;
    --tertiary-button-rounded-border-bottom-left-radius: 6.4px;
    --tertiary-button-rounded-border-bottom-right-radius: 6.4px;
    --tertiary-button-padding-x: 2.004em;
    --tertiary-button-padding-y: 1.2em;
    --tertiary-button-stroke: 0px;
    --form-field-shape-border-top-left-radius: 5px;
    --form-field-shape-border-top-right-radius: 5px;
    --form-field-shape-border-bottom-left-radius: 5px;
    --form-field-shape-border-bottom-right-radius: 5px;
    --form-field-border-thickness: 1px;
    --form-field-padding-vertical: 10px;
    --form-field-padding-horizontal: 10px;
    --form-field-checkbox-shape-border-top-left-radius: 5px;
    --form-field-checkbox-shape-border-top-right-radius: 5px;
    --form-field-checkbox-shape-border-bottom-left-radius: 5px;
    --form-field-checkbox-shape-border-bottom-right-radius: 5px;
    --form-field-checkbox-border-thickness: 1px;
    --form-field-checkbox-size: 16px;
    --form-field-checkbox-space-between-icon-and-text: 11px;
    --form-field-checkbox-padding-vertical: 10px;
    --form-field-checkbox-padding-horizontal: 10px;
    --form-field-checkbox-row-gap: 12px;
    --form-field-checkbox-column-gap: 20px;
    --form-field-radio-shape-border-top-left-radius: 5px;
    --form-field-radio-shape-border-top-right-radius: 5px;
    --form-field-radio-shape-border-bottom-left-radius: 5px;
    --form-field-radio-shape-border-bottom-right-radius: 5px;
    --form-field-radio-border-thickness: 1px;
    --form-field-radio-size: 17px;
    --form-field-radio-space-between-icon-and-text: 11px;
    --form-field-radio-padding-vertical: 10px;
    --form-field-radio-padding-horizontal: 10px;
    --form-field-radio-row-gap: 12px;
}
:root {
    --previous-section-divider-offset: 0px;
}
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
    background-color: var(--color-light);
    color: var(--color-dark);
}
a {
    text-decoration: none;
    color: inherit;
}
*{
  margin: 0px;
}

.header{
    position: sticky;  
    top: 0px;
}

.header .header-announcement-bar-wrapper{
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 3vw;
    padding-right: 3vw;
    pointer-events: auto;
}

.header .header-announcement-bar-wrapper {
    transition: padding 140ms ease-in-out;
}

.header .header-announcement-bar-wrapper {
    background: linear-gradient(89.87deg, #060807 35.41%, #080b0a 121.72%);
}
.header-display-desktop {
    position: relative;
    display: flex;
    width: 67%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
}
.header-nav-list {
    display: inline-flex;
    flex-wrap: wrap;
    flex:1 0 33%;
}

.header-nav-list .header-nav-item:not(:last-child) {
    margin-right: 2.4vw;
}


.header-nav-list>div {
    white-space: nowrap;
}

.header-nav-item{
    font-family: var(--site-navigation-font-font-family);
    font-style: var(--site-navigation-font-font-style);
    font-weight: var(--site-navigation-font-font-weight);
    line-height: var(--site-navigation-font-line-height);
    letter-spacing: var(--site-navigation-font-letter-spacing);
}

.header-nav-item.header-nav-item--collection a, .header-nav-item.header-nav-item--collection.header-nav-item--active a {
    color: white;
    cursor: pointer;
}
.header-nav-list .header-nav-item--active{
    border-bottom: 1px solid #fff;
}
.header .header-nav-list .header-nav-item{
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}
.header-title-logo {
    width: 34%;
    text-align: center;
    flex: 1 1 34%;
}
.header-title-logo img{
    width: auto;
    max-width: 100%;
    max-height: 7rem !important
}

/*主体*/
.site-wrapper .container{
    width: 100%;
    padding-bottom: 90px;
}

.n-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    font-weight: 700;
}

.n-columns-2 a {
    text-align: center;
}

.login, .login-button {
    background: linear-gradient(to bottom, #070000 0%, #070707 100%);
    border: 2px solid #ffd700;
    box-shadow: 0px 0px 3px #f00;
}

.login, .register {
    color: #fff;
    padding: 13px 10px;
}
.register, .register-button {
    background: linear-gradient(to bottom, #070000 0%, #070707 100%);
    border: 2px solid #ffd700;
    box-shadow: 0px 0px 3px #f00;
}
.login, .register {
    color: #fff;
    padding: 13px 10px;
}

.site-wrapper .container .products{
    max-width: 1800px;
    padding-left: 6vw;
    padding-right: 6vw;
    margin: 0 auto;
    padding-top: calc(3vw + 60px);
    padding-bottom: 0vw;
    width: 100%;
    box-sizing: border-box;
}

.ProductItem-summary{
    width: 100%;
    display: flex;
}

.ProductItem-summary .product-details{
    flex: 60%;
    padding-top: 60px;
    padding-right: 10vw;
  
}



.product-details .ProductItem-details-title,.ProductItem-details-excerpt,.product-price{
    font-family: exo;
    color: #000;
    order: 1;
    margin: 0 0 25px;
}
.product-details .quantity-label {
    font-family: exo;
    color: #000;
    order: 1;
    margin: 0 0 10px;
}
.product-details .product-quantity-input input {
    text-align: left;
    box-sizing: border-box;
    padding: 1.5rem;
    line-height: normal;
    color: inherit;
}
.product-details .product-quantity-input {
 margin-bottom: 40px;
}

.product-details .sqs-add-to-cart-button-wrapper {
    color: #fff;
    background-color: #000;
    border-color: #fff;
    margin-bottom: 25px;
    order: 4;
}
.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 0;
    cursor: pointer;
    padding: 1.2rem 2.004rem;
}

.ProductItem-summary .ProductItem-gallery{
    flex: 40%;
    padding-bottom: 26%;
    padding-right: 18%;
}

.ProductItem-gallery .product-image-zoom-duplicate img{
    overflow-clip-margin: content-box;
    overflow: clip;

}

.footer-sections{
    background: linear-gradient(89.87deg, #060807 35.41%, #080b0a 121.72%);
    color: white;
    font-family: arial;
    text-align: center;
    padding: 30px 0px 30px 0px;
    position: fixed;
    bottom: 0;
    width: 100%;
}


@media screen and (min-width: 768px), screen and (max-width: calc(1907px)) and (orientation: landscape) {
    .product-details .ProductItem-details-title{
        font-size: calc((2.8 - 1)* 1.2vw + 1rem);
    }
}

@media screen and (min-width: 768px) {
    .tweak-product-basic-item-gallery-placement-right .ProductItem .ProductItem-summary {
        flex-flow: row-reverse;
    }
}

@media screen and (min-width: 768px), screen and (max-width: calc(1907px)) and (orientation: landscape) {
    .header-nav-item,.n-columns-2,.footer-sections,.sqs-add-to-cart-button-wrapper,.product-price,.quantity-label, .user-accounts-text-link,.ProductItem-details-excerpt, .cart-style-text, .icon-cart-quantity:not(.legacy-cart), .language-picker {
        font-size: calc((1.2 - 1)* 1.2vw + 1rem);
    }
}

@media screen and (max-width: 768px){
    .header-nav-list {
        flex:1 0 0%;
        display: none;
    }
    .header-title-logo {
        width: 34%;
        text-align: center;
        flex: 1 1 100%;
    }
    .header .header-announcement-bar-wrapper{
        justify-content: center;
    }

    .ProductItem-summary{
        flex-direction: column-reverse;
        
    }
    .ProductItem-summary .product-details{
        flex: 60%;
        padding-top: 60px;
        padding-right: 0px;
      
    }
    .ProductItem{
        padding: 0px 3vw;
    }
    .ProductItem-summary .ProductItem-gallery{
        flex: 40%;
        padding-bottom: 0;
        padding-right: 0;
        display: flex;
        justify-content: center;
    }

    .site-wrapper .container .products{
        padding-top: calc(3vw + 30px);
    }

    .ProductItem-details-title{
        font-size: calc((2.8 - 1)* calc(.012* min(100vh, 900px)) + 1rem) !important;
    }
    .product-details,.footer-sections,.product-price,.ProductItem-details-excerpt,.sqs-add-to-cart-button-inner,.quantity-label {
        font-size: calc((1.2 - 1)* calc(.012* min(100vh, 900px)) + 1rem);
    }
}