/* 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%;
}

/* 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: 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. */
.product__social-ugc .video-wall__heading {
    font-size: 15px;
}

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

/* Bigger tap targets. The chip is the visible colour; the button is the hit
   area, so both grow. */
.product__info-container .pdp-color-swatches {
    column-gap: 10px;
    row-gap: 10px;
}

.product__info-container .pdp-color-swatch {
    padding: 4px;
    border-radius: 50%;
}

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

.product__info-container .pdp-color-swatch[aria-selected="true"] {
    outline: 1.5px solid #15140F;
    outline-offset: 1px;
    background: transparent;
    padding: 4px;
}

@media screen and (max-width: 959px) {
    .product__info-container .pdp-color-swatch .swatch-chip {
        width: 32px;
        height: 32px;
    }
}

/* ── 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: 3px 9px;
    border-radius: 999px;
    border: 0;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    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;
}