/* Custom content */
.grid {
    justify-content: center;
}

/* .grid centers its content when that content is narrower than the
   container (e.g. a short row of collection tiles) - intentional there.
   But any .grid that's ALSO a .slider (horizontally-scrollable, its content
   is expected to overflow) breaks under center-alignment: browsers
   distribute flex overflow symmetrically around centered content, so the
   unscrolled position already shows the middle of the row, and the true
   first item sits in the overflow direction scrolling can't reach. That's
   exactly what was happening to the mobile product gallery
   (.product__media-list is both .grid and .slider) - landing mid-scroll
   with no way back to the first image. Affects any other .grid.slider too,
   e.g. the recommendations carousel in product-recommendations.html. */
.grid.slider {
    justify-content: flex-start;
}

/* ── Buy More To Save ──────────────────────────────────────────── */

.bms-block {
    margin-top: 0;
}

.bms-block .accordion {
    margin-top: 0 !important;
}

.bms-wrapper {
    background: #fafafa;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 6px 6px 4px 10px;
    margin: 6px 0;
    /* Clip any internal absolute-positioned tick/price label spillover
       so the bar never causes horizontal page scroll. */
    overflow: hidden;
}

/* Scoped overrides for the Stack & Save accordion */
.bms {
    padding-top: 0;
    padding-bottom: 0;

}

/* Stack the summary row + message vertically instead of side-by-side.
   .accordion summary is `display: flex` in component-accordion.css, which
   loads after this file — so we boost specificity with .accordion.bms. */
.accordion.bms summary {
    display: block;
    padding: 6px 0 4px;
}

.bms-wrapper summary .form__label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #343434;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bms-limited-badge {
    display: inline-block;
    padding: 2px 7px;
    background: #d10505;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bms-wrapper .accordion__content {
    padding: 4px 0 6px;
    margin-bottom: 0;
}

/* PDP variant of the Stack & Save / free-ship bars — strip the outer card
   framing since .bms-wrapper already provides the container box.

   Free-ship snippet doesn't carry its own --pdp class, so the descendant
   selector on .bms-wrapper--shipping does the same job. */
.bms-cart-progress--pdp,
.bms-wrapper--shipping .bms-cart-progress {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Constrain only the bar track so the rightmost tick label (+10%, $100) at
   left:100% can't push past the wrapper edge. Applied to the track itself
   so the summary/chevron stay aligned to the full wrapper width — keeping
   the free-ship chevron in the same horizontal position as the BMS card's. */
.bms-cart-progress--pdp,
.bms-wrapper--shipping .bms-cart-progress__track {
    max-width: 98%;
}

/* PDP-only: free-ship chevron should match the BMS card's direction
   (down when closed, up when open). The shared .bms-cart-progress__arrow
   rule does the opposite (matches the drawer's open-direction convention),
   so flip it inside the PDP wrapper. */
.bms-wrapper--shipping .bms-cart-progress__arrow {
    transform: rotate(0deg);
}

.bms-wrapper--shipping details[open] .bms-cart-progress__arrow {
    transform: rotate(180deg);
}

/* Summary row: title/badge on the left, accordion chevron on the right */
.bms-wrapper summary .bms-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Unlock message tucked under the title, always visible (collapsed + expanded) */
.bms-wrapper summary .bms-summary-msg {
    font-size: 0.65rem;
    line-height: 1.3;
    color: #444;
    margin-top: 2px;
    font-weight: 400;
}

.bms-wrapper summary .bms-summary-msg strong {
    color: #0ba443;
    font-weight: 700;
    font-size: 0.70rem;
}

/* Per-tier prices under the progress bar — one price under each segment
   (positions match the section labels: 10/30/50/70/90%). */
.bms-pdp-tier-prices {
    position: relative;
    margin-top: 0px;
    height: 1.3rem;
}

.bms-pdp-tier-price {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.7rem;
    line-height: 1.2rem;
    color: #373c39;
    /* matches unachieved bar background = "not yet unlocked" */
    white-space: nowrap;
}

.bms-pdp-tier-price--passed {
    color: #0ba443;
    font-weight: 400;
    display: none;
}

.bms-pdp-tier-price--active {
    color: #0ba443;
    font-weight: 700;
    font-size: 0.78rem;
}

/* Right-align the rightmost tier price so it never spills past the card edge. */
.bms-pdp-tier-price--end {
    transform: translateX(-100%);
}

/* Tighten gap above the BMS accordion — wrapper div above .bms-wrapper
   keeps margin-bottom:12px from .product__info-container > * + *. */
.bms-block {
    margin-top: 0;
}

/* ── Stack & Save price under the default price (when unlocked) ─────
   Layout: "$34.96  STACK & SAVE PRICE" — price + label both black. */
.price .price__bms-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #bbf7d0;
    width: 100%;
}

.price .price__bms-line[hidden] {
    display: none;
}

.price__bms-unit {
    font-size: 0.92rem;
    font-weight: 600;
    color: #000;
    line-height: 1;
}

.price__bms-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* When BMS is unlocked, strike out the current sale price — the Stack &
   Save price below is now the effective one. */
.price.price--bms-active .price-item--sale {
    text-decoration: line-through;
    color: #a9a9a9;
    font-weight: 300;
}

.price.price--bms-active .price-item--you_save {
    color: #a9a9a9;
}

/* ────────────────────────────────────────────────────────────────── */
.product__details-wrapper {
    margin-top: 0;
}

.product__details-container summary {
    align-items: center;
}

.product__details-container summary .icon-accordion {
    width: 24px;
    height: 24px;
}

.product__details-container summary .icon-accordion svg {
    width: 20px;
    height: 24px;
}

.product__details-container summary .accordion__title {
    line-height: 24px;
    font-size: 13px;
}

/* Product info */
.product__info-container>*+* {
    margin: 12px 0;
}

.product__info-container .product__info-description {
    max-width: 100%;
    /* overflow-x: auto; */
}

#shopline-section-main-product-info.section-padding,
#shopline-section-main-product-info .section-padding {
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (min-width: 960px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        //top: 120px;
        z-index: 2;
        padding-top: 5px;
        border-top: 1px #000;
    }

    #ProductInfo-main-product-info {
        padding-top: 36px;
    }

    #shopline-section-main-product-info.section-padding,
    #shopline-section-main-product-info .section-padding {
        padding-top: 0px;
        padding-bottom: 20px;
    }

    /* product_image_pc_position */
    .product--left .product__info-wrapper {
        padding-left: 30px;
    }

    .product--left .product__media-wrapper {
        padding-right: 0px;
    }

    .product--right .product__info-wrapper {
        padding-right: 60px;
    }

    .product--right .product__media-wrapper {
        padding-left: 0px;
    }

    /* product_image_size */
    .product--large .product__media-wrapper {
        max-width: 55%;
        width: 55%;
    }

    .product--large .product__info-wrapper {
        max-width: 45%;
        width: 45%;
    }

    @media screen and (min-width:1080px) {
        .product--large .product__media-wrapper {
            --info-wrapper-max: 480px;
            max-width: calc(100% - var(--info-wrapper-max));
            width: calc(100% - var(--info-wrapper-max));
        }

        .product--large .product__info-wrapper {
            --info-wrapper-max: 480px;
            max-width: var(--info-wrapper-max); //34%;
            width: 40%;
        }
    }

    .product--medium .product__media-wrapper,
    .product--medium .product__info-wrapper {
        max-width: 50%;
        width: 50%;
    }

    .product--small .product__media-wrapper {
        max-width: 34%;
        width: 34%;
    }

    .product--small .product__info-wrapper {
        max-width: 66%;
        width: 66%;
    }
}

@media screen and (max-width: 959px) {
    .product__media-wrapper {
        padding: 0;
        /* margin: 0 -10px; */
        /* width: calc(100% + 20px); */
        /* max-width: calc(100% + 20px); */
        margin-top: 0;
    }
}

@media screen and (min-width: 1440px) {}

/* Product form */
.product-form {
    display: block;
}

.product-form .product-form__error-message-wrapper:not([hidden]) {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: rgb(var(--color-discount-tag-background));
}

.product-form .product-form__error-message-wrapper:not([hidden]) .icon-error {
    margin-right: 5px;
}

.product-form .product-form__buttons>* {
    margin-bottom: 10px;
}

.product-form .product-form__buttons .pay-button-buy-now {
    overflow: unset;
}

.quantity-input-label {
    margin-bottom: 10px;
    color: #676767;
}

/* Form Elements */
.product-form__input {
    flex: 0 0 100%;
    padding: 0;
    margin: 0 0 20px 0;
    max-width: 100%;
    min-width: fit-content;
    border: none;
}

variant-radios .product-form__input {
    margin-bottom: 10px;
}

variant-radios,
variant-selects {
    display: block;
}

fieldset.product-form__input .form__label {
    margin-bottom: 10px;
}

/* variant-radios */
.product-form__input input[type="radio"] {
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
}

.product-form__input input[type="radio"]+label {
    /*border: var(--sku-selector-border-thickness) solid*/
    /*rgba(var(--color-text), var(--sku-selector-border-opacity));*/
    /*background-color: rgb(var(--color-page-background));*/
    border: 1.1px solid #ddd;
    background-color: #f9f8f5;
    color: rgba(var(--color-text));
    border-radius: var(--sku-selector-border-radius);
    display: inline-block;
    margin-right: 4px;
    padding: 9px 16px;
    text-align: center;
    cursor: pointer;
    position: relative;
    min-width: 52px;
    font-size: 0.86rem !important;
    font-weight: 600;
}

.product-form__input input[type="radio"][disabled]+label,
.product-form__input select option[disabled] {
    border: 1px #c5c5c5 solid;
    font-weight: 300 !important;
}

.product-form__input input[type="radio"]+label::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: var(--sku-selector-border-radius);
    box-shadow: var(--sku-selector-shadow-offset-x) var(--sku-selector-shadow-offset-y) var(--sku-selector-shadow-blur) rgba(var(--color-text), var(--sku-selector-shadow-opacity));
    z-index: -1;
}

.product-form__input input[type="radio"]+label::after {
    content: "";
    width: calc(100% + 2px + var(--sku-selector-border-thickness) * 2);
    height: calc(100% + 2px + var(--sku-selector-border-thickness) * 2);
    position: absolute;
    top: calc(var(--sku-selector-border-thickness) * -1 - 1px);
    left: calc(var(--sku-selector-border-thickness) * -1 - 1px);
    border: 1px solid transparent;
    border-radius: var(--sku-selector-border-radius-outset);
}

.product-form__input input[type="radio"]+label:hover::after {
    border-color: rgba(var(--color-text), var(--sku-selector-border-opacity));
}

.product-form__input input[type="radio"]:checked+label {
    background-color: rgba(var(--color-button-background));
    color: rgba(var(--color-button-text));
}

.product-form__input input[type="radio"]:checked+label:hover::after {
    border-color: transparent;
}

/* variant-selects */
variant-selects .field::after,
variant-selects .field:hover::after,
variant-selects .field:focus::after,
variant-selects .field:focus-within::after {
    border-color: rgba(var(--color-text));
}

.product-sell-info {
    margin-bottom: 0 !important;
}

.product-sell-info .product-sell-box {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.product-sell-info .product-sell-box:last-child {
    margin-bottom: 0;
}

.product-sell-info .product-sell-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    color: var(--color-text);
    stroke: currentColor;
    line-height: 1;
}

.product-sell-info .product-sell-icon svg {
    width: 100%;
}

@media screen and (max-width: 959px) {
    .product-sell-info .product-sell-icon {
        width: 20px;
        height: 20px;
    }
}

.product-sell-info .product-sell-text {
    margin-left: 16px;
    color: var(--color-text);
}

/* Product popup */
.product-popup-modal {
    box-sizing: border-box;
    opacity: 0;
    position: fixed;
    visibility: hidden;
    z-index: -1;
    margin: 0 auto;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    background-color: rgba(var(--color-text), 0.3);
    height: 100%;
}

.product-popup-modal[open] {
    opacity: 1;
    visibility: visible;
    z-index: 101;
}

.product-popup-modal__content {
    border-radius: var(--menu-modal-border-radius);
    background-color: rgb(var(--color-page-background));
    overflow: auto;
    height: calc(100% - 120px);
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    padding: 40px 60px 40px 40px;
    border-color: rgba(var(--color-text), var(--menu-modal-border-opacity));
    border-style: solid;
    border-width: var(--menu-modal-border-thickness);
    box-shadow: var(--menu-modal-shadow-offset-x) var(--menu-modal-shadow-offset-y) var(--menu-modal-shadow-blur) rgba(var(--color-text), var(--menu-modal-shadow-opacity));
}

@media screen and (max-width: 959px) {
    .product-popup-modal__content {
        padding: 20px 40px 20px 20px;
        width: 335px;
        height: 60%;
        max-height: 380px;
    }
}

.product-popup-modal__content img {
    max-width: 100%;
}

@media screen and (max-width: 959px) {
    .product-popup-modal__content table {
        display: block;
        max-width: fit-content;
        overflow-x: auto;
        white-space: nowrap;
        margin: 0;
    }
}

.product-popup-modal__content-info>* {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

@media screen and (max-width: 959px) {
    .product-popup-modal__content-info>* {
        max-height: 100%;
    }
}

.product-popup-modal__toggle {
    background-color: rgb(var(--color-page-background));
    border: 1px solid rgba(var(--color-text), 0.05);
    border-radius: 50%;
    color: rgba(var(--color-text), 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    padding: 14px;
    width: 40px;
}

@media screen and (max-width: 959px) {
    .product-popup-modal__toggle {
        top: 10px;
        right: 10px;
        padding: 9px;
        width: 30px;
    }
}

.product-popup-modal__toggle:hover {
    color: rgba(var(--color-text), 0.75);
}

.product__inventory {
    margin-top: 5px;
}

.product__inventory .low-stock,
.product__inventory .in-stock,
.product__inventory .out-stock {
    display: inline-flex;
    align-items: flex-start;
    font-size: 0.7rem;
    font-weight: 200;
}

.product__inventory .low-stock::before,
.product__inventory .in-stock::before,
.product__inventory .out-stock::before {
    --icon-size: 8px;
    content: "";
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background-color: currentColor;
    margin: calc((1em * var(--body-line-height) - var(--icon-size)) / 2) 0;
    margin-right: 5px;
    flex-shrink: 0;
}

.product__inventory .low-stock::before {
    background-color: #ffb13c;
}

.product__inventory .in-stock::before {
    background-color: #35c08e;
}

.product__inventory .out-stock {
    color: #f86140;
}

/* The ipad end responds to the mobile end in vertical screen */
/* @custom-media --tablet (max-width: 959px); */
/* @custom-media --gt-mobile (min-width: 751px); */
/* detectingScreen need to consider the configuration of the tablet */

.attribute-table>* {
    font-size: 12px !important;
}

.attribute-table>tbody>tr>td {
    padding: 4px 8px !important;
}

.accordion {}

.accordion summary {
    padding: 8px 8px;
}

.accordion__content {
    font-weight: 300;
    line-height: 1.25rem;
    font-size: 0.85rem;
    padding: 10px 5px 10px 10px;
}

.product__details-container summary .accordion__title {
    font-weight: 500;
}

.product-detail-page {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media screen and (min-width: 960px) {
    .product-detail-page {
        max-width: 1024px;
    }
}

@media screen and (max-width: 959px) {
    .product-detail-page {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.product-detail-page .product__info-container {
    /* top: calc(50% + 70px);
  transform: translateY(-50%); */
}

.product-detail-page .product__info-container>* {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 16px;
    color: #000000;
}

.product-detail-page .product__info-container .title-product {
    margin: 0;
    display: block;
    width: 90%;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

@media screen and (max-width: 959px) {
    .product-detail-page .product__info-container .title-product {
        font-size: 1.12rem;
        line-height: 1.28rem;
        display: inline-block;
        width: 75%;
    }
}


.product__info-container .price-product {
    margin: 0;
    display: block;
    width: 100%;
    padding: 0 0 0;
    text-align: left;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 300;
}

.product-detail-page .product__info-container .in-partner {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #676767;
}

.product-detail-page .product__info-container .product-variant-picker .body3,
.product-detail-page .product__info-container .product-variant-picker .field__input--classic {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.product-detail-page .product__info-container .product-variant-picker .field__input--classic {
    text-align: center;
    padding: 0 40px;
}

.product-detail-page .product__info-container .product-variant-picker .form__label {
    margin-bottom: 5px;
    color: #000;
    font-weight: 400;
    display: inline-block;
}

.product-form__input .form__label {
    font-size: 13px;
    text-transform: uppercase;
}

.product-detail-page .product__info-container .product-variant-picker .field__input--classic {
    color: #676767;
    height: 42px;
}

.product-detail-page .product__info-container .product-variant-picker .field__suffix {
    color: #676767;
}

.product-detail-page .product__info-container .product-variant-picker .field:after {
    border-color: #838383;
}

.product-detail-page .product__info-container .product__collection {
    padding-bottom: 12px;
}

@media screen and (max-width: 959px) {
    .product-detail-page {
        padding: 5px 0px;
    }
}

.product__info-wrapper {
    padding: 5px 10px;
}

.size-btn {
    color: #000 !important;
    text-decoration: underline;
    font-size: 0.7rem;
}

.size-btn .size-btn__icon {
    //display: none;
}

.size-btn .size-btn__title {
    font-size: 11px !important;
    font-weight: 400;
    line-height: 16px;
}

h2.title6 {
    font-size: 1.36rem;
    margin-bottom: 12px;
}

@media screen and (min-width: 960px) {
    .product-form__buttons .payment-methods li svg {
        width: 32px;
    }
}

div#member_vip_price {
    display: inline-block;
}

.seed-bottom-add-margin {
    margin-top: -14px !important;
    margin-bottom: 5px !important;
}

@media screen and (max-width: 749px) {
    .ruler-modal__wrapper .ruler-modal__container {
        bottom: none;
        //top:0px !important;
    }

    .size--modal__title {
        padding: 11px 10px 12px !important;
    }

    .size--modal__body__main {
        padding: 10px !important;
    }
}

.size--modal__title__icon svg path {
    stroke-width: 1px !important;
}

.size--modal__title__text {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

.parduct-size__table__title {
    font-weight: 500 !important;
    line-height: 28px;
    font-size: 16px;
}

.parduct-size__item ul {
    padding-left: 20px;
}

.card .card__badge:not(:empty) {
    bottom: 10px;
    left: 10px;
}

.wishlist-collect-block-btn {
    padding: 9.5px 20px !important;
}

.wishlist-collect-block-btn>svg {
    width: 16px !important;
    height: 14px !important;
}

.wishlist-collect-block-btn>div {
    font-size: 0.8rem !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.product-section-title {
    font-size: 1.2rem !important;
}

.recommed-section-page-width {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.recommend-product-item-title {
    font-size: 0.82rem !important;
    font-weight: 600;
    line-height: 1rem !important;
    color: #000000;
}

.recommend-product-item-info .recommend-product-item-title {
    line-height: 1rem !important;
    text-align: left !important;
}

.recommend-product-item-info .recommend-product-item-price {
    font-size: 0.82rem !important;
    justify-content: left;
}

.origin-price {
    font-size: 11px;
    color: #949494;
}

.product-recommend .product-item-swiper-list .swiper-box .swiper-container .swiper-slide {
    margin-left: calc(var(--grid-horizontal-space) * 0.5) !important;
    margin-right: calc(var(--grid-horizontal-space) * 0.5) !important;
}

/* Manually remove <div id="member_vip_price"></div> */
#member_vip_price {
    display: none !important;
}

.d-md-block {
    display: none !important;
}