/* 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: var(--fs-micro);
    font-weight: 600;
    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: var(--fs-micro);
    font-weight: 600;
    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%;
}

/* The two .bms-wrapper--shipping chevron rules that used to live here are gone:
   cart-shipping-progress.html no longer renders a <details> or a chevron, and
   .bms-wrapper--shipping wraps only that snippet, so they could never match. */

/* 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: var(--fs-micro);
    line-height: 1.3;
    color: #444;
    margin-top: 2px;
    font-weight: 300;
}

.bms-wrapper summary .bms-summary-msg strong {
    color: #0ba443;
    font-weight: 600;
    font-size: var(--fs-small);
}

/* 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: var(--fs-small);
    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: 300;
    display: none;
}

.bms-pdp-tier-price--active {
    color: #0ba443;
    font-weight: 600;
    font-size: var(--fs-small);
}

/* 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: var(--fs-lead);
    font-weight: 600;
    color: #000;
    line-height: 1;
}

.price__bms-label {
    font-size: var(--fs-micro);
    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;
}

/* Logo picked as a file (or one of the .svg icons in assets/) comes through
   as an <img> rather than an inline <svg>, so it needs the same box. */
.product__details-container summary .icon-accordion img {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    object-fit: contain;
}

/* The social UGC block sits in the info column, which is much narrower than
   a full-width section — pull the heading down to body scale so it does not
   compete with the product title. */
/* Social UGC heading — matched to the bundle app's "COMPLETE THE LOOK".
   On mobile the two stack directly on top of each other, so they have to read as
   the same kind of heading. Values mirror .sales-bundle-root .bundle-product-title
   in component-3p-overrides.css; keep the two in step if either changes.
   (Previously this was pinned to 15px here and letter-spacing:0 via a per-template
   custom_css rule on ARC_Model — both removed.) */
.product__social-ugc .video-wall__heading {
    font-family: var(--title-font), "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: #15140F;
}

/* On desktop this heading lives inside the ~260px product info column, not in a
   full-width section like COMPLETE THE LOOK, so it is capped smaller — at the
   card-title step, since in that column it is labelling a card-sized module.
   Mobile is where the two stack adjacently and must match exactly, so the
   clamp above is left alone. */
@media screen and (min-width: 960px) {
    .product__social-ugc .video-wall__heading {
        font-size: var(--t-card);
    }
}

.product__social-ugc .video-wall__header {
    margin-bottom: 12px;
}

.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: var(--fs-base) !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: var(--fs-small);
    font-weight: 300;
}

.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__content {
    font-weight: 300;
    line-height: 1.4;
    font-size: var(--fs-small);
    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: var(--fs-base);
    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: var(--t-page);
    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: var(--t-card);
        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: var(--fs-lead);
    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: 300;
    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 {
    /* Option names read as labels, not shouts: sentence case, semibold, and the
       softer ink rather than pure black. */
    margin-bottom: 10px;
    color: #4E4A40;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    text-transform: none;
    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: var(--fs-small);
}

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

.size-btn .size-btn__title {
    font-size: var(--t-label) !important;
    font-weight: 400;
    line-height: 16px;
}


@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: 300 !important;
    font-size: var(--fs-base) !important;
}

.parduct-size__table__title {
    font-weight: 500 !important;
    line-height: 28px;
    font-size: var(--t-sub);
}

.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: var(--fs-base) !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.product-section-title {
    font-size: var(--t-card) !important;
}

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

.recommend-product-item-title {
    font-size: var(--fs-base) !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: var(--fs-base) !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;
}

/* Payment icon strip inside a Product information accordion. The base
   .payment-methods rules centre the strip for the cart drawer; in an accordion
   it should read as part of the left-aligned body copy. */
.accordion__content .accordion__payment-methods {
    margin-top: 12px;
}

.accordion__content .payment-methods {
    margin: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.accordion__content .payment-methods li {
    display: inline-flex;
}

.accordion__content .payment-methods li svg {
    width: 34px;
    height: auto;
    display: block;
}

/* ==========================================================================
   PDP info column — tidy-up
   Everything here is scoped under .product__info-container (or .price-product
   inside it) because the price and swatch markup is shared with the PLP cards
   and the quick-add modal.
   ========================================================================== */

/* ── Breadcrumb ───────────────────────────────────────────────────────────
   Two copies exist, one per column; each breakpoint shows one. */
/* One line, always. Collection names here run long ("Mens ARC - Pants &
   Joggers - Black Pants (Sub)"), so the row never wraps — the collection
   truncates first and the product title, which repeats the h1 directly below,
   truncates after it. */
.pdp-breadcrumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;
}

.pdp-breadcrumb__item:nth-child(2) {
    min-width: 0;
    flex: 0 1 auto;
}

.pdp-breadcrumb__item:nth-child(2) .pdp-breadcrumb__link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.pdp-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    color: rgba(41, 37, 44, 0.6);
    min-width: 0;
}

.pdp-breadcrumb__item + .pdp-breadcrumb__item::before {
    content: "/";
    color: rgba(41, 37, 44, 0.35);
}

.pdp-breadcrumb__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.pdp-breadcrumb__link:hover {
    color: #15140F;
    border-bottom-color: rgba(21, 20, 15, 0.35);
}

/* The product title repeats the <h1> below it, so it stays quiet and is the
   first thing to drop when the row runs out of room. */
.pdp-breadcrumb__item--current {
    color: rgba(41, 37, 44, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The media column is full-bleed on mobile, so the breadcrumb supplies its own
   gutter to line up with the product title below it. */
.pdp-breadcrumb--media {
    display: block;
    margin: 0 0 10px;
    padding: 0 10px;
}

.pdp-breadcrumb--info {
    display: none;
    margin: 0 0 10px;
}

@media screen and (min-width: 960px) {
    .pdp-breadcrumb--media { display: none; }
    .pdp-breadcrumb--info { display: block; }
}

/* ── Price ────────────────────────────────────────────────────────────────
   The shared snippet lays the parts out as inline-blocks, so the gaps came
   from HTML whitespace, and .price__compare carries a fixed 50px width with a
   1.1rem size — which rendered the struck-through compare-at LARGER than the
   selling price. Both are corrected here, PDP-only. */
.product__info-container .price-product .price {
    margin-top: 0;
}

.product__info-container .price-product .price__container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 9px;
}

.product__info-container .price-product .price__sale,
.product__info-container .price-product .price__compare {
    display: inline-flex;
    align-items: baseline;
    width: auto;
    line-height: 1.1;
}

/* The compare-at is deliberately LARGER than the selling price — it is doing
   the anchoring work, so it should dominate. Weight and spacing stay as they
   are; only the two sizes swap emphasis. */
.product__info-container .price-product .price-item--sale {
    font-size: 18px;
    font-weight: 600;
    color: #15140F;
}

.product__info-container .price-product .price__compare,
.product__info-container .price-product .price__compare .price-item--regular {
    font-size: 20px;
    line-height: 1.1;
}

.product__info-container .price-product .price__badge {
    margin-top: 0;
    align-self: center;
}

/* ── Title / rating / price cluster ───────────────────────────────────────
   These three read as one unit, so they sit tighter than the 12px rhythm the
   rest of the column uses. */
.product__info-container .title-product {
    margin-bottom: 0;
    color: #15140F;
}

.product__info-container .price-product {
    margin-top: 6px;
}

.product__info-container .product__inventory {
    margin-top: 8px;
}

/* ── Variant options ──────────────────────────────────────────────────────
   Option names were uppercased at 300 weight in pure black. Sentence case at
   600 in the softer ink reads as a label rather than a shout. */
.product-detail-page .product__info-container .product-variant-picker .form__label .selected-color-name {
    font-weight: 400 !important;
    color: #6E6A61 !important;
}

/* Chip geometry follows bold.shop (34px circle, ~8px between chips); the ring
   weights follow gohaus (1px selection ring, 1px inset hairline on the chip).
   The ring is a BORDER that is transparent until selected, not an outline
   applied on selection — a border reserves its space at all times, so the row
   does not shift by 2px when the selection moves. 34 + 3px padding + 1px ring
   = a 42px hit area at both breakpoints. */
.product__info-container .pdp-color-swatches {
    column-gap: 2px;
    row-gap: 6px;
}

.product__info-container .pdp-color-swatch {
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
}

.product__info-container .pdp-color-swatch .swatch-chip {
    width: 34px;
    height: 34px;
    box-shadow: inset 0 0 0 1px rgba(21, 20, 15, 0.10);
}

.product__info-container .pdp-color-swatch[aria-selected="true"] {
    border-color: #15140F;
    outline: none;
    background: transparent;
    padding: 3px;
}

/* ── Rating stars ─────────────────────────────────────────────────────────
   The review app renders its star row into a bare .shopline-block, which picks
   up the generic 12px `.product__info-container > * + *` margin. The stars are
   part of the title cluster, so they sit tight under it. Matched on the app's
   own class rather than position, because block order is editor-controlled.

   The app's star row also carries margin:10px 0 as an INLINE style, and since
   the wrapper has no border or padding that margin collapses through it and
   wins. So both have to be set, and the star row needs !important — an inline
   declaration outranks every selector, importance is the only lever. */
.product__info-container > .shopline-block:has(.product-plugin-comment-rate-star) {
    margin-top: 4px;
}

.product__info-container .product-plugin-comment-rate-star {
    margin-top: 0 !important;
}

/* ── Variant option groups ────────────────────────────────────────────────
   Colour and size sat 10px apart, which on mobile read as one control. Adding
   the gap on the leading edge of each subsequent group rather than raising
   every group's margin-bottom keeps the space before ADD TO CART unchanged. */
@media screen and (max-width: 959px) {
    /* Collapses with the preceding group's 10px margin-bottom, so the gap is
       max(10, 20) = 20px — not the sum. */
    .product__info-container .product-variant-picker .product-form__input + .product-form__input {
        margin-top: 20px;
    }
}

/* ── Savings badges ───────────────────────────────────────────────────────
   Same palette as the Transparent Pricing section: --tp-accent-deep #3E3552
   for the dollar saving, --tp-accent #6F6191 for the percentage. */
.product__info-container .price-product .price__badge--save,
.product__info-container .price-product .price__badge--off {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 0;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 300;
    /* 0.06em was tracking for uppercase; on sentence case it reads loose. */
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
}

.product__info-container .price-product .price__badge--save {
    background-color: #3E3552;
}

.product__info-container .price-product .price__badge--off {
    background-color: #6F6191;
}

/* ── Stock line ───────────────────────────────────────────────────────────
   Two words were taking 41px of column. It now sits tight under the price as
   part of that cluster rather than as its own band. A true same-line merge
   would mean combining the price and inventory blocks in markup, which would
   change the theme-editor block structure. */
.product__info-container .product__inventory {
    margin-top: 5px;
    margin-bottom: 14px;
    font-size: var(--fs-micro);
}

/* ── Size row ─────────────────────────────────────────────────────────────
   The size-chart plugin renders its "Size" legend and "Size Chart" link as one
   space-between row ABOVE the buttons. Moving the link below them was tried via
   display:contents on that wrapper plus flex on the fieldset — it dissolved the
   wrapper as intended but also made the hidden radio inputs flex items, which
   broke the button row. Doing it properly needs the plugin's markup to change,
   so the link stays where the plugin puts it and is just given room and an
   underline so it reads as a link rather than a stray label. */
.product__info-container .seed-size-chart-lable-warper {
    gap: 12px;
    margin-bottom: 4px;
}

.product__info-container .seed-size-chart-lable-warper > .plugin-ruler__entry {
    text-decoration: underline;
    text-underline-offset: 3px;
    flex: none;
}