*,
 :before,
 :after {
    border-color: rgba(211, 211, 211);
}

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

body {
    margin: 0;
}

.product {
    display: grid;
    grid: var(--product-grid, none);
    gap: 2.25rem;
}

.product-gallery {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}


/* 主图样式 */

.product-gallery__media {
    position: relative;
    height: 500px;
    margin-bottom: 20px;
    overflow: hidden;
}

.main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.main-image.active {
    opacity: 1;
}


/* 缩略图容器样式 */

.thumbnail-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.thumbnail-container {
    display: flex;
    transition: transform 0.3s ease;
    gap: 10px;
    padding: 0 50%;
    /* 初始居中 */
}


/* 缩略图按钮样式 */

.product-gallery__thumbnail {
    width: 80px;
    height: 80px;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}

.product-gallery__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery__thumbnail.active {
    border-color: #ff5500;
}

.product-info {
    position: sticky;
    top: -20px;
    inset-block-start: calc(var(--sticky-area-height) + 20px);
}

.product-info__block-item {
    margin: 8px 0;
}

.product-info__block-item h1 {
    font-size: 1.375rem;
}

.variant-picker {
    display: grid;
    gap: .5rem;
}

.variant-picker__option-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
}

.block-swatch {
    border-style: solid;
    cursor: pointer;
    padding: var(--swatch-padding);
    border-width: var(--swatch-border-size);
    border-radius: var(--input-border-radius);
    color: rgb(var(--text-color) / .65);
    --swatch-border-size: 1px;
    --swatch-padding: calc( var(--input-padding-block) - var(--swatch-border-size) * 2) .875rem;
    --swatch-disabled-strike-color: rgb(var(--border-color));
    justify-content: center;
    align-items: center;
    column-gap: .875rem;
    min-width: 2.5rem;
    display: flex;
    position: relative;
}

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

:checked+.thumbnail-swatch,
.thumbnail-swatch.is-selected {
    --swatch-disabled-strike-color: currentColor;
    border-color: #000;
    border-width: 2px;
}

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

.quantity {
    width: 80px;
    padding: 7px 14px;
    display: flex;
    border-style: solid;
    border-width: 1px;
    justify-content: space-between;
}

.quantity input {
    all: initial;
    width: 10ch;
    min-width: 2ch;
    margin: 0 8px;
    font-size: 14px;
}

.quantity div {
    cursor: pointer;
}

.AddToCart {
    all: initial;
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border: 1px solid rgba(211, 211, 211, 1);
    overflow: hidden;
    transition: color 0.3s ease;
}

.AddToCart::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    /* 填充颜色 */
    z-index: -1;
    /* 放在按钮下方 */
    transform: translateX(-100%);
    /* 初始状态：完全隐藏（向左偏移100%） */
    transition: transform 0.3s ease;
    /* 动画过渡 */
}


/* 鼠标悬停时，黑色从左到右填充 */

.AddToCart:hover {
    color: white;
    /* 悬停时文字变白 */
}

.AddToCart:hover::before {
    transform: translateX(0);
    /* 黑色填充完全显示 */
}


/* 鼠标移开时，黑色从左到右消失 */

.AddToCart:not(:hover)::before {
    transform: translateX(-100%);
    /* 黑色填充向左滑出 */
}


/* 基础样式 */

.accordion {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.accordion-item {
    border-top: 1px solid #ddd;
    overflow: hidden;
}

.accordion-item:last-child {
    border-bottom: 1px solid #ddd;
}


/* 隐藏checkbox */

.accordion-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}


/* 标签样式 - 可点击区域 */

.accordion-label {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
}


/* 添加+图标 */

.accordion-label::after {
    content: "+";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.3s;
}


/* 选中时显示-图标 */

.accordion-input:checked+.accordion-label::after {
    content: "-";
}


/* 内容区域 - 初始隐藏 */

.accordion-content {
    max-height: 0;
    padding: 0 15px;
    background: white;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}


/* 选中时显示内容 */

.accordion-input:checked~.accordion-content {
    max-height: 1000px;
    padding: 15px;
}

.text-subdued {
    color: rgba(28, 28, 28, 0.28);
}

.product-gallery__media img {
    border: 1.5px solid #dddddd;
}

.product-gallery__thumbnail {
    border: 1px solid #dddddd;
    padding: 1px;
    transition: border-color .1s;
    position: relative;
}

.horizontal-product-card {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
}

.horizontal-product-card_img {
    flex: 1;
}

.horizontal-product-card button {
    width: 200px;
}

.horizontal-product-card__info {
    width: 80%;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.horizontal-product-card__info_item {
    display: flex;
    flex-direction: column;
    justify-items: start;
    gap: .25rem;
}

.base {
    position: fixed;
    display: none;
}

.mask {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.content {
    position: absolute;
    width: 500px;
    height: 100vh;
    background-color: white;
    top: 0;
    right: 0px;
    display: flex;
    flex-direction: column;
}

.content header {
    display: flex;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-width: 1px;
    border-style: solid;
    height: 24px;
}

.content main {
    padding: 1.25rem 2rem;
    border-width: 1px;
    border-style: solid;
    flex: 1;
}

.cart-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cart-drawer__item {
    display: flex;
}

.line-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.line-item-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-quantity {
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.remove {
    padding-bottom: 4px;
    cursor: pointer;
    border-bottom: 1px solid black;
}

.content footer {
    padding: 1.25rem 2rem;
    height: 350px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

footer input {
    text-align: start;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    color: rgb(28, 28, 28);
    padding: 0.65rem 0.8rem;
    border-width: 1px;
    border-color: #DDDDDD;
}

.smallcaps {
    font-size: 0.625rem;
    color: #1C1C1CA6;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#closeDialog {
    cursor: pointer;
}

.button-grup-item {
    all: initial;
    width: 100%;
    background-color: #1C1C1C;
    color: white;
    text-align: center;
    padding: 0.85rem 0;
}

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

.object-contain {
    object-fit: contain;
    object-position: center;
}

:root {
    --container-max-width: 1440px;
    --container-xxs-max-width: 27.5rem;
    --container-xs-max-width: 42.5rem;
    --container-sm-max-width: 61.25rem;
    --container-md-max-width: 71.875rem;
    --container-lg-max-width: 78.75rem;
    --container-xl-max-width: 85rem;
    --container-gutter: 1.25rem;
    --section-vertical-spacing: 2.5rem;
    --section-vertical-spacing-tight: 2.5rem;
    --section-stack-gap: 2.25rem;
    --section-stack-gap-tight: 2.25rem;
    --form-gap: 1.25rem;
    --fieldset-gap: 1rem;
    --form-control-gap: 0.625rem;
    --checkbox-control-gap: 0.75rem;
    --input-padding-block: 0.65rem;
    --input-padding-inline: 0.8rem;
    --checkbox-size: 0.875rem;
    --sticky-area-height: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px) + var(--header-is-sticky, 0) * var(--header-is-visible, 1) * var(--header-height, 0px));
    --transform-logical-flip: 1;
    --transform-origin-start: left;
    --transform-origin-end: right;
    --heading-font-family: Poppins, sans-serif;
    --heading-font-weight: 500;
    --heading-font-style: normal;
    --heading-text-transform: normal;
    --heading-letter-spacing: 0.0em;
    --text-font-family: Poppins, sans-serif;
    --text-font-weight: 400;
    --text-font-style: normal;
    --text-letter-spacing: 0.0em;
    --button-font: var(--heading-font-style) var(--heading-font-weight) var(--text-sm) / 1.65 var(--heading-font-family);
    --button-text-transform: uppercase;
    --button-letter-spacing: 0.0em;
    --text-heading-size-factor: 1;
    --text-h1: max(0.6875rem, clamp(1.375rem, 1.146341463414634rem + 0.975609756097561vw, 2rem) * var(--text-heading-size-factor));
    --text-h2: max(0.6875rem, clamp(1.25rem, 1.0670731707317074rem + 0.7804878048780488vw, 1.75rem) * var(--text-heading-size-factor));
    --text-h3: max(0.6875rem, clamp(1.125rem, 1.0335365853658536rem + 0.3902439024390244vw, 1.375rem) * var(--text-heading-size-factor));
    --text-h4: max(0.6875rem, clamp(1rem, 0.9542682926829268rem + 0.1951219512195122vw, 1.125rem) * var(--text-heading-size-factor));
    --text-h5: calc(0.875rem * var(--text-heading-size-factor));
    --text-h6: calc(0.75rem * var(--text-heading-size-factor));
    --text-xs: 0.875rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --rounded-full: 9999px;
    --button-border-radius: 0.0rem;
    --input-border-radius: 0.0rem;
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
    --shadow: 0 5px 15px rgb(0 0 0 / 0.05);
    --shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);
    --shadow-block: px px px rgb(var(--text-primary) / 0.0);
    --checkmark-svg-url: url(//cdn.shopify.com/s/files/1/0687/2776/7277/t/19/assets/checkmark.svg?v=77552481021870063511742541665);
    --cursor-zoom-in-svg-url: url(//cdn.shopify.com/s/files/1/0687/2776/7277/t/19/assets/cursor-zoom-in.svg?v=112480252220988712521742541665);
}

:root {
    --page-overlay: 0 0 0 / 0.4;
    --page-background: ;
    --on-sale-text: 227 44 43;
    --on-sale-badge-background: 227 44 43;
    --on-sale-badge-text: 255 255 255;
    --sold-out-badge-background: 239 239 239;
    --sold-out-badge-text: 0 0 0 / 0.65;
    --custom-badge-background: 28 28 28;
    --custom-badge-text: 255 255 255;
    --star-color: 28 28 28;
    --success-background: 212 227 203;
    --success-text: 48 122 7;
    --warning-background: 253 241 224;
    --warning-text: 237 138 0;
    --error-background: 243 204 204;
    --error-text: 203 43 43;
}

.color-scheme--scheme-1 {
    --accent: 28 28 28;
    --text-color: 28 28 28;
    --background: 255 255 255 / 1.0;
    --background-without-opacity: 255 255 255;
    --background-gradient: ;
    --border-color: 221 221 221;
    --button-background: 28 28 28;
    --button-text-color: 255 255 255;
    --circle-button-background: 255 255 255;
    --circle-button-text-color: 28 28 28;
}

@media screen and (min-width: 1000px) {
     :root {
        --container-gutter: 3rem;
        --section-vertical-spacing: 4rem;
        --section-vertical-spacing-tight: 4rem;
        --section-stack-gap: 3rem;
        --section-stack-gap-tight: 3rem;
        --product-grid: "product-gallery product-info" auto "product-content product-info" minmax(0, 1fr) / minmax(0, 0.5fr) minmax(0, 0.5fr);
    }
}

@media screen and (min-width: 700px) {
     :root {
        --text-xs: 0.875rem;
        --text-sm: 0.9375rem;
        --text-base: 1.0rem;
        --text-lg: 1.125rem;
        --text-xl: 1.375rem;
        --container-gutter: 2rem;
    }
    .thumbnail-swatch {
        --swatch-size: 4.25rem;
    }
}

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

.carts-container {
    max-width: 980px;
    margin: 0 auto;
}

.carts-title {
    text-align: center;
}

.carts-table th {
    color: #1C1C1C;
    line-height: 1.7;
    opacity: 0.6;
    font-size: 0.75rem;
}

.carts-table table {
    border-collapse: collapse;
}

.carts-table tr th {
    padding: 8px 0;
}

.carts-table tr {
    border-style: solid;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: none;
    border-right: none;
}

.carts-table tr:nth-child(1) {
    border-top: none;
}

.carts-table td {
    width: 24%;
}

.carts-table td:nth-child(1) {
    width: 75%;
}

.carts-container footer {
    gap: .85rem;
    margin-top: 16px;
}

.u-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.u-flex-col {
    display: flex;
    flex-direction: column;
}

.u-row-center {
    justify-content: center;
}

.u-col-center {
    align-items: center;
}

.u-row-right {
    justify-content: flex-end;
}

.u-col-bottom {
    align-items: flex-end;
}

.u-text-right {
    text-align: right;
}