.page {
    padding: 32px 0 0;
}
.page h1.title {
    font-weight: 600;
    margin-bottom: 24px;
}
.page .container {
    max-width: 1720px;
}
.tab-buttons {
    background-color: #F3F3F3;
    border-radius: 32px 32px 0 0;
    padding: 16px 16px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.subcart-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    padding: 14px 16px;
    background: #f0fff5;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}
.subcart-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.subcart-note span {
    font-size: 15px;
    line-height: 22px;
    color: #454B54;
}
/* Third-party seller disclosure.
   Same shape as .subcart-note above, in amber rather than the brand green: this
   one is a legal notice about who the buyer is contracting with, and it has to
   read as distinct from the neighbouring green "how subcarts work" explainer
   sitting inches away. */
.seller-disclosure-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    padding: 14px 16px;
    background: #FFF8EC;
    border-left: 4px solid #B26B00;
    border-radius: 8px;
}
.seller-disclosure-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.seller-disclosure-note span {
    font-size: 15px;
    line-height: 22px;
    color: #454B54;
}
.seller-disclosure-note strong { color: #7A4A00; }
.seller-disclosure-open {
    color: #B26B00;
    text-decoration: underline;
    white-space: nowrap;
}
.seller-disclosure-open:hover { color: #7A4A00; }

/* Per-line seller attribution under the SKU. */
.item-sold-by {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #7A4A00;
}

/* The consent gate above "Proceed to Payment". Inherits .checkbox-wrapper's
   layout; the box is deliberately given room to breathe because the sentence is
   long and legal, and a cramped one reads as fine print. */
.seller-disclosure-checkbox {
    margin: 16px 0;
    padding: 14px 16px;
    background: #FFF8EC;
    border: 1px solid #F0D9AF;
    border-radius: 8px;
    align-items: flex-start;
    /* Without wrap the .help-block becomes a THIRD flex item and the error text
       lands beside the consent sentence instead of under it. */
    flex-wrap: wrap;
}
.seller-disclosure-checkbox p {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: #454B54;
    /* Claim the row so the help-block below is forced onto its own line. */
    width: calc(100% - 36px);
}
/* The box is a flex item next to a long paragraph, so without flex-shrink:0 it
   is squeezed to a sliver — invisible, and the gate looks broken rather than
   unticked. The global rule sizes it 24x24 but does not defend that width. */
.seller-disclosure-checkbox input {
    margin-top: 2px !important;
    flex-shrink: 0;
}
.seller-disclosure-checkbox .required { color: #D0021B; }
.seller-disclosure-checkbox .seller-disclosure-open { margin-left: 4px; }
.seller-disclosure-checkbox .help-block {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 13px;
    color: #D0021B;
}
.seller-disclosure-checkbox.has-error {
    border-color: #D0021B;
    background: #FFF5F5;
}

/* Full-text popup. .popup-title / .popup-scroll / .popup-footer / .btn.light-green
   all come from cart.css + global.css, both loaded here — only the readable
   measure and the body typography are page-specific. */
.seller-disclosure-popup .popup-inner { max-width: 640px; }
.seller-disclosure-popup .popup-content {
    text-align: left;
    /* Breathing room above the footer — without it the last clause sits flush
       against the Accept button and reads as part of it. */
    padding-bottom: 8px;
}
.seller-disclosure-body p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 21px;
    color: #454B54;
}
.seller-disclosure-body p:last-child { margin-bottom: 0; }
/* font-weight is explicit: the page's reset flattens <strong>, so the paragraph
   leads ("Your contract.", "Returns, refunds and claims.") lost their emphasis
   and the notice read as one undifferentiated wall of text. */
.seller-disclosure-body strong {
    font-weight: 600;
    color: #2c3e50;
}

.tab-contents {
    border: 1px solid #F3F3F3;
    border-radius: 0 0 32px 32px;
}
.cart-item-headings {
    padding: 16px;
    background-color: #f3f3f3;
}
.cart-item {
    padding: 15px;
}
.tab-buttons .tab-btn {
    background-color: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 40px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s all ease;
    min-height: 44px;
}
/* The country-flag background belongs to the region switcher (US/UK/EU) ONLY.
   It used to sit on the base .tab-btn, which leaked a US flag onto the document
   detail tab bars (Details / Connected Documents) that reuse the same class.
   Scope it to the *-region tabs so non-region tabs render with no flag. */
.tab-buttons .tab-btn.us-region,
.tab-buttons .tab-btn.uk-region,
.tab-buttons .tab-btn.eu-region {
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 42px;
}
.tab-buttons .tab-btn.us-region {
    background-image: url(/assets/img/us-square-flag.svg);
}
.tab-buttons .tab-btn.uk-region {
    background-image: url(/assets/img/gb-square-flag.svg);
}
.tab-buttons .tab-btn.eu-region {
    background-image: url(/assets/img/eu-square-flag.svg);
}
.bag-items-number {
    background-color: var(--primary);
    min-width: 20px;
    height: 24px;
    text-align: center;
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: 0.3s all ease;
}
.tab-buttons .tab-btn.active, .tab-buttons .tab-btn:hover {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}
.tab-buttons .tab-btn.active span, .tab-buttons .tab-btn:hover span {
    color: #fff;
}
.tab-buttons .tab-btn.active .bag-items-number, .tab-buttons .tab-btn:hover .bag-items-number {
    background-color: var(--primary-light);
    color: var(--primary);
}
.cart-item-headings, .cart-item {
    grid-template-columns: 220px 1fr 150px 140px 60px;
    position: relative;
    display: grid;
    gap: 20px;
}
.cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
    height: 220px;
    display: block;
}
.cart-item {
    border-bottom: 1px solid #F3F3F3;
    align-items: flex-start;
}
.tab-contents .content, .cart-main-bottom, .cart-wrapper .order-summary-wrapper {
    display: none;
}
.tab-contents .content.show, .cart-main-bottom.show, .cart-wrapper .order-summary-wrapper.show {
    display: block;
}
.cart-item-wrapper .cart-item:last-child {
    border: 0;
}
.cart-item-headings div {
    color: #454B54;
    font-size: 14px;
    line-height: 16px;
}
.cart-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.cart-wrapper .cart-main {
    width: calc(70% - 20px);
}
.cart-wrapper .page-sidebar {
    width: 30%;
}
.region .details, .region-address {
    font-size: 14px;
    font-weight: 600;
}
.sku-stock {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 20px;
}
/* "Upgraded by <company>" pill on a cart line whose item is a selected
   Item Partner Variant (the price is already the variant's). */
.variant-line-badge {
    display: inline-block;
    margin: 6px 0 4px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--primary-light);
    border-radius: 40px;
}
.product-sku, .product-stock, .ask-question-btn {
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #878D99;
    position: relative;
}
.product-stock:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #878D99;
    left: -13px;
}
.cart-item .image {
    border-radius: 12px;
    overflow: hidden;
}
/*slider arrow*/
.slider-arrows {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    transform: translateY(-50%);
}
.slider-arrows span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 16px;
    font-size: 16px;
    color: #878D99;
    transition: 0.3s all;
    cursor: pointer;
}
.slider-arrows span:hover {
    background-color: var(--primary);
}
.slider-arrows span:hover svg path {
    stroke: #fff;
}
.slider-arrows span.prev {
    margin-left: 8px;
}
.slider-arrows span.next {
    margin-right: 8px;
}
.slider-number {
    display: inline-block;
    background: #000;
    border-radius: 16px;
    padding: 0px 8px 1px;
    opacity: 60%;
    position: absolute;
    bottom: 8px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    line-height: 19px;
}
.slider-number span {
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    font-weight: 600;
    margin: 0;
}
.slider-number .total-number {
    color: #CDCFD4;
}
.slider-number .separator {
    width: 10px;
    display: inline-flex;
    position: relative;
    margin: 0 1px;
}
.slider-number .separator:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #878D99;
    position: relative;
    top: -4px;
}
.cart-item .media {
    position: relative;
}
.name a {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    display: block;
}
.name a, .sku-stock {
    margin-bottom: 20px;
}
.name .text-icon-badge {
    padding: 4px 7px;
}
.cart-item .name .region {
    margin-bottom: 20px;
}
.qty-box {
    display: flex;
}
.qty-box .quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: 0px;
    border-width: 1px 0px 1px 1px;
    border-style: solid solid solid;
    border-image: initial;
    background: no-repeat;
    border-right: 0px;
    border-color: var(--primary-border);
    width: 40px;
    height: 40px;
    background-color: var(--primary-light);
}
.qty-box .quantity-btn.plus {
    border-radius: 0 32px 32px 0;
    border: 1px solid var(--primary-border);
    border-left: 0;
}
.qty-box .quantity-btn.min {
    border-radius: 32px 0 0 32px;
}
.qty-box input {
    font-size: 16px;
    height: 40px;
    text-align: center;
    width: 52px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--primary-border);
    border-image: initial;
    padding: 4px 2px;
    border-radius: 0px;
    font-weight: 700;
    -moz-appearance: textfield;
}
/* Hide the native number spinner — the +/- buttons already adjust qty, and the
   spinner was clipping two-digit values inside the 40px box. */
.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.price span {
    font-size: 16px;
    line-height: 24px;
    color: #2F2F2F;
    font-weight: 600;
    min-height: 40px;
    display: flex;
    align-items: center;
}
.delete-btn, .continue-shopping-btn {
    border: 2px solid var(--primary);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    padding: 6px 15px;
    gap: 8px;
    cursor: pointer;
    background-color: transparent;
    transition: 0.3s all;
}
.delete-btn {
    width: 56px;
    height: 40px;
    border: 2px solid rgba(245, 98, 98, 0.2);
}
.continue-shopping-btn:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
}
.delete-btn:hover {
    border: 2px solid rgba(245, 98, 98, 1);
    color: #fff;
    background-color: rgba(245, 98, 98, 1);
}
.delete-btn:hover svg path {
    stroke: #fff;
}
.cart-main-bottom {
    border: 1px solid #F3F3F3;
    border-radius: 32px;
    padding: 22px;
}
.cart-main-bottom .block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.cart-main-bottom .block .term-and-condition {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    color: #454B54;
}
.cart-main-bottom .block .price-row {
    display: flex;
    align-items: center;
    gap: 22px;
}
.cart-main-bottom .block .price-row div {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    padding: 0;
}
.cart-main-bottom .block .price-row div.title {
    color: #454B54;
    font-weight: 500;
}
.order-summary {
    border: 1px solid #F3F3F3;
    border-radius: 32px;
    padding: 20px;
    position: relative;
}
.order-summary h2.title, .block .heading-wrapper .title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}
.order-summary .price-box {
    margin: 24px 0 0;
}
.price-row:last-child {
    margin: 0;
}
.price-row {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 5px;
}
.price-row div {
    font-size: 16px;
    line-height: 24px;
    color: #3C3F45;
    background-color: #fff;
}
.price-row div.title {
    padding-right: 8px;
}
.price-row div.price {
    padding-left: 8px;
}
.price-row:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px dashed #454B54;
    bottom: 1px;
    z-index: -1;
}
.checkout-btn .btn, .checkout-punchout-btn .btn{
    width: 100%;
    justify-content: center;
    font-size: 16px;
    margin: 0;
}
.promocode-input input {
    width: calc(100% - 122px);
    border-radius: 16px;
    border: 1px solid #CDCFD4;
    padding: 8px 15px;
    min-height: 56px;
}
.promocode-input {
    display: flex;
    gap: 15px;
}
.coupon-massage {
    margin-top: 6px;
    display: inline-block;
}
.promocode-wrapper .btn-light {
    background-color: var(--primary-light);
    border: 0;
    border-radius: 12px;
    width: 107px;
    color: var(--primary);
    cursor: pointer;
    transition: 0.3s all ease;
}
.promocode-wrapper .btn-light:hover {
    background-color: var(--primary);
    color: #fff;
}
.promocode-wrapper .price-row div {
    color: #878D99;
}
.cart-main-bottom .price-row:before {
    display: none;
}
.price-row.ot_subtotal div {
    font-weight: 700;
}
.sku-region-wrapper {
    display: none;
}
.cart-item .image .media, .cart-item .image .media>a {
    height: 220px;
}

.progress-bar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 15px;
    margin-bottom: 16px;
}
.progress-bar-text {
    font-size: 18px;
    line-height: 20px;
    color: #3C3F45;
}
.progress-bar {
    display: flex;
    align-items: center;
    width: calc(100% - 208px);
    gap: 4px;
}
.progress-bar .dot {
    width: 11px;
    height: 11px;
    display: block;
    background-color: var(--primary);
    border-radius: 20px;
}
.progress-bar .line {
    width: calc(100% - 30px);
    height: 3px;
    background-color: var(--primary);
    border-radius: 40px;
}
.order-details-in-progress .progress-bar-end, .payment-in-progress .progress-bar-start {
    color: #878D99;
}
.order-details-in-progress .dot-end, .payment-in-progress .dot-start {
    background-color: #CDCFD4;
}
.page-sidebar-main .block {
    border: 1px solid #F3F3F3;
    border-radius: 32px;
    padding: 20px;
}
.block .btn.light-btn {
    margin: 0;
    background-color: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-light);
    font-size: 16px;
    line-height: 20px;
    height: auto;
    padding: 7px 16px;
    gap: 8px;
}
.block .heading-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.block .block-content {
    margin-top: 24px;
}
.buyer-info .block-content {
    margin-top: 0;
}
.select {
    position: relative;
}
.select:after {
    position: absolute;
    content: '';
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(/assets/img/down-arrow-new.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
}
.block select {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #CDCFD4;
    padding: 8px 15px;
    min-height: 56px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.block select {
    padding-right: 32px;
}
.shipping-price-row .item {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
}
.shipping-price-row-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inner-block-content {
    margin-top: 16px;
}
.shipping-price-row div, .address p {
    font-size: 18px;
    line-height: 24px;
    color: #3C3F45;
}
.shipping-price-row .input-title {
    margin: 0 3px 0 8px;
}
.inner-block:not(:first-child) {
    padding: 24px 0 0;
    margin-top: 24px;
    border-top: 1px solid #F3F3F3;
}
.punchout-shipping-methods {
    margin-top: 24px;
}
.checkbox-wrapper {
    display: flex;
    gap: 12px;
}
.checkbox-wrapper label {
    margin-bottom: 0;
    color: #3C3F45;
    width: calc(100% - 36px);
}
.inner-block .address {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.inner-block .address p {
    margin: 0;
}
.shipping-add-icon svg {
    vertical-align: bottom;
}
.checkbox-wrapper input {
    margin: 0 !important;
}
.block .btn.light-btn:hover {
    background-color: var(--primary);
    color: #fff;
}
.block .btn.light-btn:hover svg path {
    fill: #fff;
}
/*popup start*/
.popup-main {
    display: none;
    opacity: 0;
    visibility: hidden;
}
.popup-main.active {
    display: block;
    opacity: 1;
    visibility: visible;
}
.popup-wrapper {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #17181a96;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
    transition-duration: inherit;
    transition-property: opacity;
    z-index: 99994;
}
.popup-inner {
    background-color: #fff;
    width: 90%;
    max-width: 710px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    position: relative;
    text-align: center;
    border-radius: 24px;
}
.close-btn {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 0;
    background-color: #F3F3F3;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
}
.row.fieldset {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.row.fieldset .col.w-50 {
    width: 50%;
}
.row.fieldset input::placeholder {
    color: #454B54;
}
.popup-main .row.fieldset .col-6 {
    width: calc(50% - 10px);
}
.popup-main .row.fieldset .col {
    width: 100%;
}
.popup-main .popup-title {
    margin-bottom: 0;
    font-weight: 500;
    color: #454B54;
}
.popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 16px 24px;
}
.popup-content {
    padding: 0 24px 24px;
}
.close-btn:hover {
    background-color: var(--primary);
}
.close-btn:hover svg path {
    stroke: #fff;
}
.btn.btn-small {
    height: auto;
    line-height: 24px;
    font-size: 16px;
    gap: 8px;
    max-width: 200px;
    width: 100%;
    justify-content: center;
    padding: 7px 15px; 
}
.btn.btn-small:hover svg path {
    stroke: var(--primary);
}
.popup-main .btn-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-top: 32px;
}
.popup-main .btn-wrapper .btn {
    margin: 0;
    height: 50px;
}
.checkout-btn, .checkout-punchout-btn {
    padding: 20px 20px 0;
}
.checkout-btn a.btn, .checkout-punchout-btn a.btn {
    margin: 0;
}
.tbd-request-note {
    font-size: 13px;
    color: #878D99;
    text-align: center;
    line-height: 1.5;
    margin: 12px 0 0;
    padding: 0 4px;
}
.cart-wrapper .page-sidebar>form {
    position: sticky;
    top: 20px;
}
/*end popup*/
.payment-method-option {
    padding: 16px 0;
    border-top: 1px solid #F3F3F3;
}
.payment-method-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.payment-method-title label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.payment-method-title label span {
    font-size: 18px;
    line-height: 24px;
    color: #454B54;
    width: calc(100% - 24px);
}
.payment-method-content {
    height: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.3s all ease;
}
.payment-method-option.show-payment-method .payment-method-content {
    padding-top: 16px;
    overflow: visible;
    margin-bottom: 16px;
}
.payment-method-option.show-payment-method .payment-method-title label span {
    color: var(--primary);
}
.payment-method-content .row.fieldset {
    gap: 12px;
}
.payment-method-content .row.fieldset .col.w-50 {
    width: calc(50% - 6px);
}
.card .row.fieldset .col {
    width: 100%;
}
.card .row.fieldset .col.month, .card .row.fieldset .col.cvv {
    width: calc(50% - 10px);
}
.bank-account .row.fieldset .col.w-100 {
    width: 100%;
}
.bank-account .row.fieldset .col {
    width: calc(50% - 6px);
}
.bank-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.bank-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F3F3F3;
    border-radius: 8px;
    min-height: 100px;
    padding: 10px;
    width: calc(33.33% - 4px);
    cursor: pointer;
}
.payment-method-option:last-child {
    padding-bottom: 0;
}
.delivery-options {
    display: none;
}
.delivery-options.show {
    display: block;
}
.shipping-add-btn, .billing-add-btn {
    cursor: pointer;
}
/*Fancy Input*/
.fancy-input {
    position: relative;
}
.fancy-input input,
.fancy-input select {
    width: 100%;
    padding: 20px 16px 6px 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
}
.fancy-input label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    padding: 0 4px;
    color: #454b54;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
}
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
.fancy-input select:not([value=""]) + label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.fancy-input input:placeholder-shown + label,
.fancy-input select + label {
    top: 50%;
    font-size: 16px;
    transform: translateY(-50%);
}
/*End Fancy Input*/
.bank-account-search input {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #CDCFD4;
    padding: 8px 15px;
    min-height: 56px;
}
.bank-account-search label {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
    display: block;
}
.btn.manage-card {
    width: 100%;
    padding: 6px 16px;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    height: 50px;
}
.tab-buttons .tab-btn span {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}
.continue-shopping-btn {
    height: 40px;
    line-height: 24px;
}
.payment-method-title:has(>input:checked)+.payment-method-content {
    height: auto;
    padding-top: 16px;
}
.skeleton-price-box {
    margin: 24px 0 0;
}
.skeleton-price-row {
    width: 100%;
    height: 24px;
    margin-bottom: 5px;
}
.skeleton-price-row:last-child {
    margin: 0;
}
.price-row div.title {
    display: flex;
    align-items: center;
}
.price-row .help {
    width: 20px;
    height: 20px;
    border: 0;
    background: 0;
    box-shadow: none;
    outline: 0;
    padding: 0;
    background-image: url(/assets/image/help.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: bottom;
    position: relative;
    top: 0;
    cursor: pointer;
    display: inline-flex;
}
.price-row .new-popup-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 4px;
    top: 1px;
}
.price-row .new-popup {
    left: inherit;
    right: -18px;
    top: 36px;
    text-align: left;
    z-index: 99;
    width: 500px;
}
.price-row .new-popup-wrapper:has(.new-popup.show):after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9;
}
.price-row .new-popup .polygon-shape {
    left: inherit;
    right: 18px;
}
.price-row .new-popup-heading {
    justify-content: end;
}
.cart-wrapper .page-sidebar>form {
    position: initial;
}
/*fancy input textarea*/
.order-company-details .fancy-input textarea {
    width: 100%;
    padding: 22px 16px 6px 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
    min-height: 80px;
}
.order-company-details .fancy-input textarea:disabled+label {
    opacity: .6;
    color: #808080;
}
.order-company-details .fancy-input textarea:disabled {
    color: #b5b4b4;
}
.order-company-details .fancy-input label {
    position: absolute;
    top: 24px;
    left: 14px;
    transform: translateY(-50%);
    padding: 0 4px;
    color: #454b54;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
    background-color: transparent;
}
.order-company-details .fancy-input textarea:focus + label,
.order-company-details .fancy-input textarea:not(:placeholder-shown) + label,
.order-company-details .fancy-input textarea:-webkit-autofill + label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.block .btn.shipping-add-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    line-height: 24px;
    font-size: 16px;
    gap: 8px;
}
.guest-checkout-btn {
    padding: 20px 20px 0;
}
.guest-checkout-btn .btn {
    margin: 0;
    justify-content: center;
    padding: 6px 16px;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    height: 50px;
    width: 100%;
}
.registration-popup-cart .popup-inner {
    max-height: 96vh;
}
.registration-popup-cart .popup-content {
    max-height: calc(96vh - 88px);
    overflow: auto;
}
.login-popup.registration-popup-cart .show-address {
    margin: 8px 0;
}
.registration-popup-cart .terms-and-policy {
    margin: 10px 0 0;
} 
.guest-delivery-options
 +.inner-block {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.promocode-wrapper {
    margin-top: 24px;
}
.fancy-input:has(.fancy-input-icon) input {
    padding-right: 40px;
}

.tbd-condition .checkbox-icon-label {
    display: flex;
    gap: 2px;
}
.tbd-condition .checkbox-icon-label-inner {
    width: calc(100% - 30px);
    cursor: pointer;
}
.tbd-condition .checkbox-icon-label-text {
    display: flex;
}
.tbd-condition .help {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: block;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    outline: 0;
    padding: 0;
    background-image: url(/assets/img/tool-tip-gray.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
}
.tbd-condition > .block {
    display: flex;
    align-items: start;
    gap: 8px;
}
.tbd-condition .new-popup-wrapper {
    display: inline-block;
    position: relative;
}
.tbd-condition .new-popup-wrapper .new-popup {
    z-index: 99;
    top: 30px;
    width: 490px;
    right: -16px;
    left: inherit;
}
.tbd-condition .polygon-shape {
    left: inherit;
    right: 18px;
}
.tbd-condition .new-popup-content p:last-child {
    margin-bottom: 0;
}
.tbd-condition .new-popup-wrapper:has(.new-popup.show):after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9;
}
.product-weight {
    font-size: 16px;
    line-height: 24px;
    color: #878D99;
}

.popup-main.add-card-popup .popup-title {
    font-size: 24px;
    line-height: 32px;
}
.popup-main.add-card-popup .popup-head {
    border-bottom: 1px solid #ececec;
    margin-bottom: 16px;
    padding: 16px 20px 16px 24px;
} 
.add-card-popup .StripeElement {
    border: 1px solid #CDCFD4;
    padding: 16px;
    min-height: 50px;
    border-radius: 16px;
    width: 100%;
    width: calc(100% - 168px);
} 
.add-card-popup .add-card-wrapper form {
    display: flex;
    align-items: center;
    gap: 14px;
} 
.add-card-popup .add_item svg {
    width: 20px;
    height: 20px;
}
.add-card-popup .add_item .btn {
    font-size: 16px;
    margin: 0;
}
.add-card-popup .secure-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 32px 0 16px;
}
.add-card-popup .secure-message-text {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.add-card-popup .stripe-badge {
    background-color: rgb(51 54 80);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.add-card-popup .stripe-badge strong {
    font-size: 18px;
    font-weight: 800;
}
.popup-main.add-card-popup .popup-inner {
    max-width: 600px;
}
.add-card-popup .payment-methods img {
    max-width: 400px;
    width: 100%;
}
.buyer-info .btn {
    margin: 0;
    padding: 6px 16px;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    height: 50px;
    width: 100%;
}
.buyer-info .btn-light {
    background-color: var(--primary-light);
    color: var(--primary);
    border: 0;
}
.buyer-info .btn-light:hover {
    background-color: var(--primary);
    color: #fff;
}
.buyer-info .login-block-title {
    margin-bottom: 16px;
}
.or-block {
    position: relative;
}
.or-block hr {
    border: none;
    height: 1px;
    background-color: #F3F3F3; 
    margin: 28px 0;
}
.or-block .text {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    background: #fff;
    text-transform: uppercase;
}
.buyer-info .registration-form-wrapper-cart {
    margin-top: 24px;
}
.registration-form-wrapper-cart .col-6 {
    width: calc(50% - 6px);
}
.registration-form-wrapper-cart .row.fieldset {
    gap: 12px;
}
.registration-form-wrapper-cart .col {
    width: 100%;
}
.registration-form-wrapper-cart .row.fieldset:not(:first-child) {
    margin-top: 12px;
}
.registration-form-wrapper-cart .checkbox-wrapper p {
    margin: 0;
    line-height: 20px;
    width: calc(100% - 36px);
}
.registration-form-wrapper-cart .checkbox-wrapper {
    margin-top: 10px;
    align-items: center;
}
.show-address {
    color: #878D99;
    text-align: left;
    font-size: 14px;
    width: 100%;
    margin: 8px 0;
}
.show-address .value {
    color: #17181A;
    display: block;
    padding-top: 2px;
}
.amount-block .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}
.amount-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.donate-block p a {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 3px;
    font-weight: 600;
}
.donate-block p {
    color: #3C3F45;
}
.amount-item {
    width: calc(25% - 8px);
    display: inline-flex;
    background-color: var(--primary-light);
    padding: 11px 8px;
    border-radius: 16px;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s all;
    min-height: 50px;
}
.amount-item:hover, .amount-item.active {
    background-color: var(--primary);
    color: #fff;
}
.amount-item span {
    font-weight: 500;
}
.amount-block:not(:last-child) {
    margin-bottom: 16px;
}
.donate-block .fancy-input .currency {
    position: absolute;
    left: 16px;
    top: 16px;
    display: flex;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}
.donate-block .fancy-input input {
    padding: 8px 16px 8px 30px;
    height: 50px;
    border-radius: 16px;
}
.custom-amount {
    flex: 1;
}
.progress-bar-start {
    cursor: pointer;
}
.container:has(.tab-btn[content-id*="Pickup Request"].active) .order-address-details .inner-block:not(.billing-address),
.container:has(.tab-btn[content-id*="Pickup Request"].active) .order-summary .price-row.shipping-cost {
  display: none;
}
.container:has(.tab-btn[content-id*="Pickup Request"].active) .inner-block:not(:first-child) {
    padding: 0;
    margin-top: 0;
    border-top: 0;
}
.help-block.show-address-error {
    text-align: left;
    font-size: 16px;
    padding: 0 0 10px;
}
.cart-item .btn.view-details {
    margin-bottom: 0;
    margin: 0;
    padding: 6px 16px;
    height: auto;
    display: none;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
    border-radius: 12px;
    height: 40px;
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.cart-item .btn.view-details:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.cart-item .btn.view-details svg {
    width: 20px;
    height: 20px;
}
.cart-item .btn.view-details:hover svg path {
    fill: #fff;
}
.container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item .btn.view-details {
    display: inline-flex;
}
.container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-wrapper .remove,
.container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-wrapper .qty {
    display: none;
}
.container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
.container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
    grid-template-columns: 220px 1fr 160px;
}
.regular-price.line-through{
    text-decoration: line-through;
    font-weight: 600;
    font-size: 13px !important;
}
/*new d r*/
/* @media only screen and (max-width: 1450px) {
    .cart-wrapper .cart-main {
        width: calc(100% - 440px);
    }
    .cart-wrapper .page-sidebar {
        width: 420px;
    }
} */
/* @media only screen and (min-width: 1025px) and (max-width: 1380px) {
    .cart-item-headings, .cart-item {
        grid-template-columns: 142px 1fr 126px 122px;
        position: relative;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 142px;
    }
    .cart-item .remove {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .head.remove {
        display: none;
    }
    .sku-stock {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .product-sku:after {
        display: none;
    }
} */
/* @media only screen and (min-width: 1025px) and (max-width: 1180px) {
    .cart-item-headings, .cart-item {
        grid-template-columns: 142px 1fr 126px 122px;
        position: relative;
    }
    .cart-item .remove {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .head.remove {
        display: none;
    }
    .sku-stock, .cart-item .name .region {
        white-space: initial;
    }
    .sku-stock {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .product-sku:after {
        display: none;
    }
} */
@media only screen and (max-width: 1199px) {
    .cart-item-headings {
        display: none;
    }
    .cart-item-headings, .cart-item {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 220px;
    }
    .cart-item-headings {
        display: none;
    }
    .qty {
        grid-area: 2 / 2;
    }
    .cart-item .remove {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .price span {
        font-size: 18px;
    }
    .cart-main-bottom .block .price-row div {
        font-size: 18px;
        line-height: 20px;
    }
    .promocode-wrapper .btn-light {
        height: 40px;
    }
    .promocode-input input {
        min-height: 40px;
    }
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
        grid-template-columns: 220px 1fr;
    }
}
@media only screen and (max-width: 1023px) {
    .cart-item-headings, .cart-item {
        grid-template-columns: 142px 1fr;
        gap: 15px;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 142px;
    }
    /* .promocode-input {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .promocode-input input, .promocode-wrapper .btn-light {
        width: 100%;
    } */
    .cart-wrapper {
        gap: 15px;
    }
    .cart-wrapper .cart-main {
        width: calc(100% - 400px);
    }
    .cart-wrapper .page-sidebar {
        width: 385px;
    }
    .page {
        padding: 24px 0 0;
    }
    .punchout-shipping-methods {
        margin-top: 0;
    }
    .shipping-price-row div, .address p {
        font-size: 16px;
        line-height: 24px;
    }
    .inner-block:not(:first-child) {
        padding: 16px 0 0;
        margin-top: 16px;
    }
    .block .btn.light-btn {
        font-size: 0;
        gap: 0;
        padding: 7px 15px;
    }
    .inner-block .address {
        gap: 8px;
    }
    .inner-block .address {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .inner-block .address p {
        width: calc(100% - 64px);
    }
    .shipping-add-icon, .billing-add-icon {
        background-color: var(--primary-light);
        color: var(--primary);
        border: 1px solid var(--primary-light);
        width: 56px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }
    .block .block-content {
        margin-top: 16px;
    }
    .buyer-info .block-content {
        margin-top: 0;
    }
    .buyer-info .registration-form-wrapper-cart {
        margin-top: 16px;
    }
    .page h1.title {
        margin-bottom: 32px;
    }
    .block .btn.shipping-add-btn {
        font-size: 16px;
        gap: 8px;
    }
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
        grid-template-columns: 142px 1fr;
        gap: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .sku-region-wrapper {
        display: block;
    }
    .name .sku-stock, .name .region, .name .weight {
        display: none;
    }
    .cart-item .image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .cart-item .name {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .cart-item .sku-region-wrapper {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .cart-item .qty {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .cart-item .price {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .name a, .sku-stock {
        margin-bottom: 8px;
    }
    .cart-item .name .region {
        margin-bottom: 14px;
    }
    .cart-item .remove {
        position: absolute;
        bottom: inherit;
        right: inherit;
        top: 10px;
        left: 10px;
        background: #fff;
        padding: 4px;
        border-radius: 16px;
    }
    .delete-btn {
        width: 36px;
        height: 36px;
        padding: 2px 8px;
        background-color: #FCE5E2;
        border: 0;
    }
    .delete-btn:hover {
        border: initial;
    }
    .qty {
        grid-area: 2 / 1;
    }
    .cart-item .price span {
        justify-content: flex-end;
        font-size: 20px;
        line-height: 24px;
    }
}
@media only screen and (max-width: 850px) {
    .cart-wrapper .cart-main {
        width: calc(100% - 355px);
    }
    .cart-wrapper .page-sidebar {
        width: 340px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 850px) {
.amount-item span {
    font-size: 14px;
}
}
@media only screen and (max-width: 767px) {
    .page {
        padding: 24px 0 0;
    }
    .page h1.title {
        margin-bottom: 18px;
        font-size: 20px;
        line-height: 24px;
    }
    .cart-wrapper .cart-main, .cart-wrapper .page-sidebar {
        width: 100%;
    }
    .tab-buttons {
        background: transparent;
        padding: 0;
        margin-bottom: 24px;
        border-radius: 0;
    }
    .cart-item, .cart-item-wrapper .cart-item:last-child {
        border-radius: 24px;
        border: 1px solid #F3F3F3;
    }
    .cart-item {
        grid-template-columns: 220px 1fr;
        gap: 15px;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 220px;
    }
    .cart-main-bottom .block .term-and-condition {
        font-size: 16px;
        line-height: 18px;
    }
    .promocode-input input {
        width: calc(100% - 122px);
    }
    .promocode-wrapper .btn-light {
        width: 107px;
    }
    .promocode-input {
        flex-direction: row;
        gap: 15px;
    }
    .checkout-btn .btn, .checkout-punchout-btn .btn {
        height: 50px;
    }
    .tab-contents {
        border: 0;
        border-radius: 0;
    }
    .cart-main-bottom, .order-summary {
        border-radius: 24px;
    }
    .cart-wrapper {
        gap: 40px;
    }
    .row.fieldset {
        overflow: auto;
        gap: 8px;
    }
    .popup-content {
        padding: 0 20px 20px;
    }
    .popup-main .btn-wrapper {
        justify-content: center;
        margin-top: 24px;
    }
    .checkout-btn, .checkout-punchout-btn {
        padding: 20px 0 0; 
    }
    .popup-main .btn-wrapper .btn {
        height: 50px;
        width: 100%;
        max-width: 100%;
    }
    .popup-main .row.fieldset .col-6 {
        width: 100%;
    }
    .price-row .new-popup-wrapper {
        position: initial;
    }
    .price-row .new-popup {
        width: 100%;
        left: 0;
        right: 0;
        top: initial;
        margin-top: 4px;
    }
    .price-row:has(.new-popup.show) {
        position: initial;
    }
    .price-row .new-popup .polygon-shape {
        display: none;
    }
    .guest-checkout-btn {
        padding: 20px 0 0;
    }
    .registration-popup-cart .row.fieldset .col-6 {
        width: calc(50% - 4px) !important;
    }
    .tbd-condition .polygon-shape {
        left: inherit;
        right: 18px;
    }
    .tbd-condition .new-popup-wrapper .new-popup {
        right: 0;
        left: 0;
        top: initial;
        bottom: initial;
        width: 100%;
        margin-top: 6px;
    }
    .tbd-condition .new-popup-wrapper {
        position: initial;
    }
    .tbd-condition > .block {
        position: relative;
    }
    .tbd-condition .polygon-shape {
        display: none;
    }
    .popup-main.add-card-popup .popup-title {
        font-size: 20px;
        line-height: 26px;
    }
    .add-card-popup .add-card-wrapper form {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .add-card-popup .StripeElement {
        width: 100%;
    }

    .add-card-popup .add_item {
        width: 100%;
    }

    .add-card-popup .add_item .btn {
        width: 100%;
        justify-content: center;
        height: 50px;
    }
    .add-card-popup .secure-message {
        margin: 40px 0 16px;
    }
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
        grid-template-columns: 220px 1fr;
    }
}
@media only screen and (max-width: 539px) {
    .page h1.title {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .tab-buttons {
        flex-wrap: nowrap;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-right: -20px;
    }
    .tab-buttons::-webkit-scrollbar {
        display: none;
      }
    .tab-buttons .tab-btn * {
        white-space: nowrap;
    }
    .cart-item {
        grid-template-columns: 142px 1fr;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 142px;
    }
    .name a {
        font-size: 16px;
        line-height: 20px;
    }
    .cart-main-bottom {
        padding: 24px 15px;
    }
    .cart-main-bottom .block {
        flex-direction: column-reverse;
        gap: 20px;
        margin-bottom: 16px;
    }
    .cart-main-bottom .block .term-and-condition {
        justify-content: center;
    }
    .continue-shopping-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .order-summary .price-box {
        margin: 16px 0 0;
    }
    .order-summary h2.title, .block .heading-wrapper .title {
        margin-bottom: 0;
    }
    .add-card-popup .secure-message {
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }
    .add-card-popup .payment-methods {
        text-align: left;
    }
    .cart-item .btn.view-details {
        font-size: 14px;
        height: 36px;
        padding: 6px 12px;
    }
    .cart-item .btn.view-details svg {
        width: 16px;
        height: 16px;
    }
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
        grid-template-columns: 142px 1fr;
    }
}
@media only screen and (max-width: 479px) {
    .payment-method-content .row.fieldset .col.w-50, .bank-account .row.fieldset .col {
        width: 100%;
    }
    .bank-list li {
        width: calc(50% - 3px);
    }
    .guest-checkout-btn {
        display: flex;
        flex-direction: column;
    }
    .guest-checkout-btn .btn {
        width: 100%;
    }
    .login-popup.registration-popup-cart .sign-btn {
        margin-top: 26px;
    }
    .add-card-popup .stripe-badge {
        width: 135px;
    }
    .add-card-popup .stripe-badge strong {
        font-size: 16px;
    }
    .registration-form-wrapper-cart .col-6 {
        width: 100%;
    }
    .amount-items {
        gap: 10px;
    }
    .amount-item {
        width: calc(50% - 5px);
    }
}
@media only screen and (max-width: 400px) {
    .promocode-input {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .promocode-input input, .promocode-wrapper .btn-light {
        width: 100%;
    }
    .cart-item {
        grid-template-columns: 122px 1fr;
        gap: 12px;
    }
    .cart-item .image, .cart-item .image .media, .cart-item .image .media>a {
        height: 122px;
    }
    .name a {
        font-size: 15px;
        line-height: 18px;
    }
    .slider-arrows span {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    .slider-arrows span.prev {
        margin-left: 4px;
    }
    .slider-arrows span.next {
        margin-right: 4px;
    }
    .sku-stock {
        gap: 22px;
    }
    .product-sku:after {
        height: 14px;
        right: -11px;
    }
    .product-sku, .product-stock, .ask-question-btn {
        font-size: 15px;
        line-height: 22px;
    }
    .cart-item .price span {
        font-size: 18px;
        line-height: 22px;
    }
    .progress-bar-wrapper {
        padding: 0 10px;
        gap: 8px;
    }
    .progress-bar {
        width: calc(100% - 194px);
        gap: 4px;
    }
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item-headings,
    .container:has(.tab-btn[content-id*="Pickup Request"].active) .cart-item {
        grid-template-columns: 122px 1fr;
    }
}
@media only screen and (max-width: 360px) {
    .payment-method-title label span {
        font-size: 16px;
        line-height: 20px;
    }
    .registration-popup-cart .row.fieldset .col-6 {
        width: 100% !important;
    }
    .cart-item .btn.view-details {
        font-size: 13px;
        padding: 6px 8px;
    }
}
.shipping-instruction.hide, 
.shipping-address.hide {
    display: none ;
}
.shipping-instruction.show,
.shipping-address.show  {
    display: block ;
}
/*@media only screen and (max-width: 479px) {
    .shipping-tbd-message-popup .popup-wrapper {
        align-items: center !important;
    }
}
.shipping-tbd-message-popup .popup-inner {
    text-align: left !important;
}
.shipping-tbd-message-popup .btn-wrapper {
    justify-content: center !important;
}
.shipping-tbd-message-popup .popup-inner{
    max-width:550px !important;
}*/

/* Request Shipping Quote popup carries more copy than the standard 460px
   info popup (the "does not reserve this item" notice), so it is wider, with
   a smaller icon, tighter spacing and the two buttons side by side, so the
   whole popup fits on a laptop screen without scrolling. Phones keep the
   shared full-width bottom sheet with stacked buttons. */
.shipping-tbd-message-popup.info-poppup .popup-inner {
    max-width: 680px;
}
.shipping-tbd-message-popup.info-poppup .popup-img {
    width: 88px;
    height: 88px;
}
.shipping-tbd-message-popup.info-poppup .popup-img img {
    width: 88px;
    height: 88px;
}
.shipping-tbd-message-popup.info-poppup .popup-text {
    margin: 12px 0 20px;
    /* Body copy reads left-aligned; the title and the short call-to-action /
       contact lines (.tbd-center) stay centred. */
    text-align: left;
}
.shipping-tbd-message-popup.info-poppup .popup-text .title,
.shipping-tbd-message-popup.info-poppup .popup-text .tbd-center {
    text-align: center;
}
.shipping-tbd-message-popup.info-poppup .popup-text p,
.shipping-tbd-message-popup.info-poppup .popup-text ul {
    margin-bottom: 8px;
}
@media (min-width: 768px) {
    .shipping-tbd-message-popup.info-poppup .action-buttons {
        flex-direction: row;
    }
    .shipping-tbd-message-popup.info-poppup .action-buttons .btn {
        flex: 1 1 0;
    }
}

/* New Quote / Quote Detail: items heading & total block hidden initially */
#items-headings,
#items-total-block { display: none; }

/* New Quote: bottom action bar layout */
.cart-main-bottom--new-quote {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-main-bottom--new-quote .continue-shopping-btn { margin-left: auto; }

/* Cart Add-Address popup — cap height at 90vh so a long form (shipping +
   billing panels when "Billing same as shipping" is unchecked) scrolls
   inside the popup rather than pushing the Apply button off-screen. The
   inner scrollbar only appears when content actually overflows; short
   forms still render without one. The shared .edit-address-* and
   #address-verify-popup styles now live in global.css so they apply on
   every page the partial renders on — only the cart-specific popup
   sizing stays here. */
#add-address-popup .popup-inner {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#add-address-popup .popup-head {
    flex-shrink: 0;
}
#add-address-popup .popup-content {
    overflow-y: auto;
    flex: 1 1 auto;
}
.shipping-estimate-summary {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #f6f8fa;
    border: 1px solid #e3e6eb;
    border-radius: 8px;
}
.shipping-estimate-summary-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2b3038;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.shipping-estimate-summary-line {
    margin: 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #444b54;
}
.shipping-estimate-summary-line:first-of-type {
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 6px;
}