/* Preserve 2-column layout on desktop down to 1024px */
@media only screen and (min-width: 1024px) {
    .checkout .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 30px !important;
        max-width: 1550px !important;
        margin: 0 auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .checkout .container .checkout__main {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .checkout .container .checkout__order_col {
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
        position: sticky !important;
        top: 110px !important;
        display: block !important;
        margin: 0 !important;
    }

    .checkout .container .checkout__order h2 {
        display: block !important;
    }
}

/* Stacked single column below 1024px */
@media only screen and (max-width: 1023px) {
    .checkout .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .checkout .container .checkout__main {
        width: 100% !important;
        padding-right: 0 !important;
        order: 1 !important;
    }

    .checkout .container .checkout__order_col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: static !important;
        margin: 0 !important;
        order: 2 !important;
    }

    #sample-credits-right-col {
        text-align: left !important;
    }

    .pricing-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .pricing-card {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}


/* Legacy mobile sticky footer bar — hidden at all widths */
.ftr__basket {
    display: none !important;
}

/* Global Card Box Padding & Container Containment */

/* Prevent FOUC: hide checkout until JS layout is applied.
   Safety fallback animation reveals it after 2s if JS fails. */
.checkout .container {
    opacity: 0;
    animation: checkout-reveal-fallback 0.3s ease 2s forwards;
}

@keyframes checkout-reveal-fallback {
    to {
        opacity: 1;
    }
}

/* Mobile/tablet: normal flow (checkout card sits BELOW basket rows) */
.checkout .container .checkout__order_col {
    position: static;
    z-index: auto;
}

/* Desktop only: sticky sidebar with elevation */
@media only screen and (min-width: 77.5rem) {
    .checkout .container .checkout__order_col {
        position: sticky !important;
        top: 110px !important;
        z-index: 100 !important;
    }
}

.checkout .container .checkout__order {
    position: relative !important;
    padding: 24px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

@media only screen and (min-width: 77.5rem) {
    .checkout .container .checkout__order {
        z-index: 100 !important;
    }
}


/* Ensure promo labels inside checkout__order ALWAYS remain 1 per row (Fixes 1239px float bug) */
.checkout .container .checkout__order .order__promos label {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.checkout .container .checkout__order .order__promos label input[type="text"],
.checkout .container .checkout__order .order__promos label input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.625rem 5.625rem 0.625rem 0.9375rem !important;
    height: 42px !important;
    border-radius: 2.5rem !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    cursor: text !important;
}

/* Dark mode: ensure #27313E bg on order inputs at ALL viewport widths */
html:not(.light-theme-active) .checkout .container .checkout__order .order__promos label input[type="text"],
html:not(.light-theme-active) .checkout .container .checkout__order .order__promos label input {
    background: #27313E !important;
    color: #ffffff !important;
}

.checkout .container .checkout__order .order__promos label a.promo-btn {
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    top: auto !important;
    transform: none !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    z-index: 2 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.checkout .container .checkout__order .order__promos label:nth-child(3n+1),
.checkout .container .checkout__order .order__promos label:nth-child(3n+2),
.checkout .container .checkout__order .order__promos label:nth-child(3n+3) {
    float: none !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* Ensure buttons and order summary totals sit neatly inside the card padding */
.checkout .container .checkout__order .ftr__order,
.checkout .container .checkout__order .order__promos,
.checkout .container .checkout__order #btn-payment-group,
.checkout .container .checkout__order #btn-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

.checkout .container .checkout__order #btn-container button {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* Subtotal / Credits / Discount / VAT / Total Right Alignment */
.ftr__order:empty {
    display: none !important;
}

.ftr__order {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ftr__order div,
.ftr__order .checkout-totals {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}

/* Dark mode: hide the two white ::before divider lines from main.css */
html:not(.light-theme-active) .checkout .container .checkout__order .order__promos::before,
html:not(.light-theme-active) .checkout .container .checkout__order .ftr__order::before {
    content: none !important;
    display: none !important;
}


/* Remove 50% width cap from main.css on ftr__order div spans so prices align to far right */
.checkout .container .checkout__order .ftr__order div span,
.checkout .container .checkout__order .ftr__order div span:first-child,
.checkout .container .checkout__order .ftr__order .checkout-totals>span:first-child {
    width: auto !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    text-align: left !important;
}

.checkout .container .checkout__order .ftr__order div span:last-child,
.checkout .container .checkout__order .ftr__order div span.checkout-totals,
.checkout .container .checkout__order .ftr__order div span.icon,
.checkout .container .checkout__order .ftr__order .checkout-totals>span:last-child,
#sub_total_val,
#total_applied_credits,
#discount_val,
#vat_amount_val,
#total_val {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Move Continue Secure Checkout button upwards (close vertical gap) */
#btn-payment-group {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/* ── Checkout Order Card: ensure background + shape at ALL widths ── */
/* At 1240px+ (side-by-side): add right margin so card doesn't touch the edge */
@media only screen and (min-width: 1240px) {
    .checkout .container .checkout__order {
        margin-right: 16px !important;
    }
}

/* Between 1024px and 1239px (still side-by-side but main.css drops the bg):
   restore the card appearance */
@media only screen and (min-width: 1024px) and (max-width: 1239px) {
    .checkout .container .checkout__order {
        background-color: #1b232e !important;
        border-radius: 15px !important;
        padding: 1.5rem !important;
    }
}

/* At <1024px (stacked layout): restore card appearance */
@media only screen and (max-width: 1023px) {
    .checkout .container .checkout__order {
        background-color: #1b232e !important;
        border-radius: 15px !important;
        padding: 1.5rem !important;
        margin: 20px 0 0 0 !important;
    }
}


#btn-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Top Wishlist & Basket Switcher Layout (Fixes 1057px overlap) */
#checkout-upper-btns-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

#wishlist-link-container {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Mobile Padding & Margins (Screen widths <= 600px) */
@media only screen and (max-width: 600px) {
    .checkout .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .checkout .container .checkout__order {
        padding: 16px 10px !important;
        margin-top: 20px !important;
    }

    #btn-container button,
    button[id^="proceed-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 0.95rem !important;
    }
}

/* Mobile / Stacked Checkout: only below 1024px (max-width: 1023px) */
@media only screen and (max-width: 1023px) {
    :root {
        --checkout-height: 707px;
    }

    .checkout .container {
        display: flex !important;
        flex-direction: column !important;
    }

    .checkout .container .checkout__main {
        display: contents !important;
        /* Exposes .basket_ajax & #checkout-upsell-container to flex order */
    }

    .basket_ajax {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout .container .checkout__order {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 30px 0 0 0 !important;
        box-sizing: border-box !important;
    }

    #checkout-upsell-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tbl__basket,
    .tbl__basket .tbody,
    .trow,
    .basket-row,
    .modern-cart-card,
    .freebie-offer-banner,
    .outer-freebie-row-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .purchase-credits-container {
        display: block !important;
    }

    #recommended-products {
        display: none !important;
    }

    .checkout-header {
        display: none;
    }

    .ftr__order {
        padding-bottom: 1.0625rem !important;
    }

    .ftr__order:last-of-type {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .ftr__basket {
        display: none !important;
    }


    #btn-container {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }

    #btn-payment-group {
        height: auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    #proceed-to-payment,
    #proceed-to-checkout,
    .proceed-to-payment-skeleton {
        margin-top: 15px;
    }

    #available-credits {
        display: none !important;
    }

    #available-credits-mob {
        display: flex !important;
    }

    #continue-shopping {
        display: none !important;
    }

    #pre-connection-error-text {
        padding-top: 0.6rem !important;
    }

    .load-notif-container {
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .price-span {
        flex-direction: column !important;
    }

    .tooltip {
        transform: scale(0.7) !important;
        transform-origin: right !important;
    }

    #wishlist-link-container a {
        padding: 10px 18px !important;
    }

    #wishlist-link-container a p {
        font-size: 16px !important;
    }

    #wishlist-link-container a svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media only screen and (max-width: 550px) {
    #wishlist-link-container {
        display: none !important;
    }
}

@media only screen and (min-width: 1241px) {
    .ftr__order:last-of-type {
        margin-top: 15px !important;
    }

    body {
        background: #27313e;
    }
}

@media only screen and (max-width: 1440px) {
    body {
        background: #27313e;
    }
}

@media only screen and (max-width: 880px) {
    .checkout .container {
        padding-top: 160px;
    }
}

@media only screen and (max-width: 630px) {
    .outer-freebie-row-container {
        height: auto !important;
    }

    .inner-freebie-row-container,
    .inner-freebie-dropdown-row-container {
        height: auto !important;
        flex-direction: column !important;
    }

    .message-container {
        max-width: 100% !important;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
    }

    .freebie-btns,
    .dropdown-container {
        height: 71px !important;
    }
}

.checkout .container {
    padding-top: 130px;
}

.main-content {
    position: relative;
    height: auto !important;
}

#mob-show-hide,
#mob-show-hide-checkout {
    display: none;
}

#mob-btn-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

#checkout-back,
#mob-checkout-back {
    visibility: hidden;
}

#btns-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    margin-bottom: 1.3em;
}

.pay-method-btn {
    background-color: transparent;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    border-radius: 2.5rem;
    color: white;
}

.btn-selected {
    background-color: white;
    color: black;
}

.back-arrow {
    transition: all 0.3s ease;
}

#btn-container,
#checkout_email #btn-container,
#checkout_login #btn-container,
#checkout_register #btn-container,
#email-check-form #btn-container {
    position: relative;
    width: 100%;
    margin-top: 15px !important;
    box-sizing: border-box;
    overflow: hidden;
}


#proceed-to-checkout,
#proceed-to-continue,
#proceed-to-login,
#proceed-to-email,
#proceed-to-payment,
.proceed-to-payment-skeleton {
    position: relative !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 2.5rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
}

#proceed-to-checkout,
#proceed-to-continue {
    background-color: green !important;
    color: #ffffff !important;
}

#proceed-to-email,
#proceed-to-login {
    background-color: rgb(245, 105, 90) !important;
    color: #ffffff !important;
}

#proceed-to-payment {
    background-color: green !important;
    color: #ffffff !important;
}

#proceed-to-checkout.hover-scale:hover,
#proceed-to-continue.hover-scale:hover {
    background-color: #1a6e1a !important;
    transform: none !important;
}

#proceed-to-login.hover-scale:hover,
#proceed-to-email.hover-scale:hover {
    background-color: rgb(220, 85, 70) !important;
    transform: none !important;
}

#proceed-to-payment.hover-scale:hover {
    background-color: #1a6e1a !important;
    transform: none !important;
}

#proceed-reset {
    padding: 3px 10px;
    color: white;
    background-color: rgb(32, 121, 172);
    border-radius: 2.5rem;
    justify-content: center;
    z-index: 1;
    transition: all 0.2s ease-in-out;
}

#proceed-reset.hover-scale:hover {
    transform: scale(1.025);
}

.proceed-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.proceed-text.btn-text-hidden {
    opacity: 0;
}

#proceed-loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

#proceed-loader.btn-loader-visible {
    opacity: 1;
}

#proceed-loader .proceed-spinner-container {
    height: 32px;
    width: 32px;
}

#proceed-loader .proceed-spinner-container .lds-ring {
    transform: scale(0.4);
    transform-origin: top left;
}

#payment-container {
    display: none;
    height: auto;
}


.card__load {
    display: flex;
    justify-content: center;
    align-items: center;
}

#payment-form {
    position: relative;
    width: 400px;
    padding: 20px;
    background-color: #f7fafc;
    border-radius: 12px;
}

#payment-loader-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    border-radius: inherit;
    background: rgba(105, 115, 134, 0.3);
    z-index: 1;
}

#submit {
    width: 100%;
    background-color: black;
    color: white;
    padding: 10px;
    margin-top: 17px;
    border-radius: 0.8rem;
    height: 40px;
}

.checkout-header {
    margin-bottom: 0.35rem;
}

.inline-distribute {
    display: flex;
    justify-content: space-between;
}

.vertical-align {
    margin-top: auto;
    margin-bottom: auto;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.back-btn {
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.basket-header .back-btn {
    visibility: visible;
    opacity: 1;
}

.order__promos {
    margin-top: 0 !important;
}

#ready-btn-text {
    opacity: 0;
    color: white;
    transition: all 0.1s ease-in-out;
}

.divider-span {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    margin-bottom: 1em;
}

.divider-span p {
    white-space: nowrap;
    font-size: 0.8rem;
}

.divider {
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    opacity: 0.25;
    margin-top: auto;
    margin-bottom: auto;
}

.checkout-padding {
    padding-left: 0 !important;
}

.product_row {
    background-color: #1b232e;
    padding-bottom: 0 !important;
    border-radius: 15px;
    padding-left: 15px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    z-index: 1;
}

.delivery_row {
    background-color: #306134;
    padding-bottom: 0 !important;
    border-radius: 15px;
    padding-left: 15px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    margin-bottom: 40px !important;
    z-index: 1;
}

.tcol:not(.dcol) {
    display: flex;
    justify-content: flex-end !important;
    height: 100px;
    padding: 0 !important;
}

.dcol {
    display: flex;
    justify-content: flex-end !important;
    height: 40px;
    padding: 0 !important;
}

.link-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.link-container img,
.skeleton-img {
    position: relative !important;
    top: 0 !important;
    margin: auto 10px;
}

.title-conatiner {
    padding-left: 20px !important;
    width: 100% !important;
}

.horizontal-align {
    align-items: center;
}

.basket-header {
    margin-bottom: 1rem;
}

#continue-shopping {
    margin-right: 10px;
}

.checkout__main {
    display: flex;
    flex-direction: column;
    height: inherit;
    padding-top: 0;
    max-width: calc(100% - 400px);
}

#recommended-products {
    position: relative;
    display: flex;
    height: 4rem;
    width: 100%;
    align-self: flex-end;
    margin-top: auto;
    padding: 12px 20px;
    padding-bottom: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #1b232e;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    /* display: none; Temporary */
}

.tbl__basket {
    position: relative;
    height: auto;
    /* max-height: calc(100vh - 24rem); */
    min-height: 120px;
    margin-bottom: 0 !important;
    /*padding-right: 0.5625rem!important;*/
    overflow: visible !important;
    z-index: 1;
    /*min-width: 350px;*/
    transition: all 0.4s ease-in-out;
    transition-property: max-height, height;
}

/* @media screen and (max-width: 1240px) {
    .tbl__basket {
        max-height: 300px!important;
    }
} */
.container {
    padding-bottom: 0 !important;
    height: auto;
}

#recommended-show-hide {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 50%;
    background-color: #ff6457;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
    padding-right: 1px;
    transition: 0.2s ease-in-out;
}

#recommended-show-hide:hover {
    transform: translateX(-50%) scale(1.1);
}

#recommended-content-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#recommended-content-container h2 {
    position: relative;
    top: 5px;
    left: 5px;
    margin-bottom: 10px;
}

#expand-arrow {
    transform: rotate(180deg);
    transition: all 0.2s ease-in-out;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, rgba(39, 49, 62, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 999;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transition-property: opacity;
    pointer-events: none;
}

#all-rec-prods-container {
    position: relative;
    display: none;
    flex-direction: row;
    height: 300px;
    gap: 10px;
}

.rec-prod-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 20%;
    background-color: #27313E;
    border-radius: 7px;
    padding: 20px 16px;
    transition: all 0.2s ease-in-out;
}

.rec-prod-container:hover {
    transform: scale(1.015);
    /*background-color: #313d4d;*/
}

.rec-prod-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.rec-prod-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rec-prod-info-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.rec-prod-info-container p {
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-prod-name {
    font-weight: 500;
}

.rec-prod-label-name {
    font-size: 14px;
}

.rec-prod-info-container p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-prod-price-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.rec-prod-price-buttons-container .divider {
    width: 1px;
    height: 75%;
    background-color: white;
    margin: auto 0;
}

.rec-prods-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rec-prods-price-container p {
    margin: 0;
    font-weight: 500;
}

.rec-prods-price-before {
    text-decoration: line-through;
}

#reroll-container,
#reroll-btn {
    justify-content: center;
    align-items: center;
}

#reroll-container {
    display: none;
}

#reroll-btn {
    display: flex;
    background-color: transparent;
    color: white;
}

.refresh {
    transition: all 0.5s ease-in-out;
}

.side-padding {
    padding: 0 5px;
}

.price-span {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    transition: all 0.2s ease-in-out;
}

.price {
    font-size: 20px;
    color: white;
}

.price-before {
    text-decoration: line-through;
    margin-right: 10px;
}

.price-after {
    color: #ff6457;
    margin: 0;
}

.price-after-countdown-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tooltip-all-container svg {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.tooltip-all-container svg path {
    fill: white !important;
}

.hidden {
    display: none;
}

#payment-message {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#pre-connection-error-text {
    font-size: 16px;
    text-align: center;
}

#pre-connection-error-text a {
    text-decoration: underline;
}

#paypal-button-overlay {
    background: rgba(105, 115, 134, 0.3);
    position: absolute;
    width: 100%;
    height: 45px;
    border-radius: 4px;
    z-index: 999;
    visibility: hidden;
    display: none !important;
    pointer-events: none !important;
}

.promo-btn {
    background-color: #1a8a2e;
    color: white;
    border-radius: 2.5rem;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 700;
}

.promo-btn:hover {
    background-color: #22b33c;
}

.promo-btn-remove {
    background-color: #ff6457;
    color: white;
}

.promo-btn-remove:hover {
    background-color: #ff8c7f;
}

.heading__align {
    margin-bottom: 0.5rem !important;
}

.sample__opts {
    margin-top: 1.2rem !important;
}

.price-span svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

.available-credits {
    display: flex;
    align-items: center;
    font-size: 18px;
}

.available-credits .salmon,
.available-credits span.salmon {
    color: #5dead9 !important;
}

.available-credits svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
    margin-right: 0.4rem;
}

#available-credits-mob {
    display: none;
    margin-bottom: 1rem;
}

.purchase-credits-container {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    background-color: transparent;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 0;
}

.credits-notice-span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(255, 100, 87, 0.1);
    border: 1px solid rgba(255, 100, 87, 0.25);
    border-radius: 8px;
    box-sizing: border-box;
}

.credits-notice-text {
    color: #ff6457;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-align: center;
}
}

.credit-option {
    width: 200px;
    height: 150px;
    border: #27313e 6px solid;
    border-radius: 20px;
    background-color: #1b232e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.credit-option:hover {
    background-color: #2f3742;
}

.credit-option-selected {
    border-color: #ff6457;
}

.credit-option p {
    width: 100%;
    text-align: center;
    margin: -3px;
}

.credit-option-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.opt-credits {
    font-size: 50px;
    font-weight: 600;
}

.save-notif {
    top: 0px;
    background-color: #ff6457;
    padding: 0.5rem 1rem;
    border-radius: 2.5rem;
}

.credits-amount-text,
#no-selection-notif {
    height: 22px;
    margin: 15px 0;
    line-height: 135%;
}

#sample-checkout-total {
    font-size: 18px;
}

.sample-count {
    display: flex;
    justify-content: center;
    align-items: center;
}

#redeem-samples-btn {
    padding: 0.85rem 1rem;
    width: 100%;
    color: white;
    background-color: #ff6457;
    border-radius: 2.5rem;
}

.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.span-align {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#rec-prods-help {
    cursor: default;
    opacity: 0.6;
}

.rec-prod-price-span {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rec-prod-price-span p {
    margin: 0;
}

.rec-prod-price-span p:nth-child(1) {
    margin-right: 0.5rem;
}

#rec-prods-loader-container {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.alert__modal {
    visibility: hidden !important;
}

/* Loader CSS */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.basket-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.buttons-price-container {
    width: unset !important;
    gap: 5px;
}

.remove-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ff6457;
    margin-right: 10px;
}

.remove-all svg {
    position: relative;
    width: 20px;
    height: 20px;
    top: 1px;
}

.remove-all svg path {
    fill: white;
}

.notif-container {
    z-index: 0;
    margin-bottom: 5px;
}

.freebie-notif {
    flex-direction: column;
    position: relative;
    display: flex;
    gap: 4px;
    width: 100%;
    height: fit-content;
    background-color: #43464E;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px 17px;
    z-index: 10;
}

.freebie-notif p {
    margin: 0;
}

.freebie-notif::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #43464E;
    top: -100%;
    left: 0px;
    z-index: 0;
}

#checkout-notif-text-container {
    background-color: #1B232E;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding: 15px 15px 15px 15px;
}

#checkout-notif-text {
    font-size: 12px;
    text-align: center;
}

.outer-freebie-row-container {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}

.inner-freebie-row-container,
.inner-freebie-dropdown-row-container {
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding: 15px;
    background-color: transparent;
    border-radius: 6px;
}

.inner-freebie-row-container p,
.inner-freebie-dropdown-row-container p {
    margin: 0;
}

.inner-freebie-dropdown-row-container {
    display: none;
}

.message-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 14px;
    min-width: 215px;
    max-width: 215px;
    gap: 2px;
}

.message-container p {
    width: 100%;
    text-align: center;
    font-size: 19px;
}

.message-container p:nth-child(1) {
    font-weight: 600;
}

.message-container p:nth-child(2) {
    font-size: 14px;
}

.additional-spend-message {
    font-weight: 400 !important;
}

.freebie-btns {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 10px;
}

.freebie-selection-btn,
.freebie-unclickable {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background-color: #2a2c38;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.freebie-selection-btn.defocus {
    opacity: 0.4;
}

.freebie-selection-btn:hover {
    transform: scale(1.025);
}

.freebie-selection-btn:hover:active {
    transform: scale(0.975);
}

.freebie-selection-btn img,
.freebie-unclickable img {
    position: relative;
    width: 100%;
    height: 100%;
    left: -10%;
    object-fit: cover;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.freebie-selection-btn::before,
.freebie-unclickable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(35, 37, 48);
    background: linear-gradient(90deg, rgba(35, 37, 48, 0.6) 35%, rgba(35, 37, 48, 0.95) 80%, rgba(35, 37, 48, 1) 100%);
    z-index: 1;
}

.freebie-unclickable .freebie-name,
.freebie-unclickable .freebie-label {
    padding-right: 15px;
}

.freebie-details-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 15px;
}

.freebie-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.freebie-title-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    text-align: left;
    color: white;
    z-index: 2;
}

.freebie-title-container p:nth-child(1) {
    font-weight: 600;
}

.freebie-title-container p:nth-child(2) {
    font-size: 12.5px;
}

.flex-start-container {
    display: flex;
    flex-direction: row;
    max-width: calc(100% - 100px);
}

.freebie-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: white;
    margin-left: -10px;
    transform: scale(0.75);
    z-index: 2;
}

.flex-end-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    max-width: 100px;
    width: 100px;
}

.vert-divider {
    width: 1px;
    height: 60%;
    background-color: white;
    margin: auto 15px;
    z-index: 2;
}

.price-before-notif-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.price-before-notif-container p {
    text-align: center;
    line-height: 110%;
    color: white;
}

.price-before-notif {
    text-decoration: line-through;
    opacity: 0.7;
}

.free-notif {
    font-size: 24px;
    font-weight: 600;
}

.overlay-container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.overlay-container.overlay-shown {
    opacity: 1;
}

.freebie-loader {
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.65);
    transform-origin: center;
}

.success-checkmark {
    display: none;
    position: absolute;
    fill: #96ffa0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.65);
    transform-origin: center;
    transition: transform 0.2s ease-in-out;
    z-index: 5;
}

.success-checkmark.checkmark-shown {
    transform: translate(-50%, -50%) scale(1);
}

.dropdown-option {
    width: 100%;
    border: none;
    border-radius: 0px;
}

.dropdown-option:hover,
.dropdown-option:hover:active {
    transform: scale(1) !important;
}

.dropdown-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.dropdown-trigger {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: pointer;
}

.dropdown-overlay-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 15px;
    transition: background-color 0.2s ease-in-out;
    z-index: 4;
}

.dropdown-overlay-container.dropdown-overlay-shown {
    background-color: rgba(0, 0, 0, 0.3);
}

.dropdown-overlay-container>* {
    padding-top: 3px;
}

.dropdown-options-container {
    position: absolute;
    display: none;
    flex-direction: column;
    top: calc(100% - 55px);
    width: 100%;
    padding-top: 25px;
    background-color: #2a2c38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 6px 6px;
    opacity: 0;
    overflow: hidden;
    z-index: 2;
    transition: all 0.2s ease-in-out;
}

.dropdown-options-container .dropdown-option {
    height: 70px;
}

.dropdown-options-container .dropdown-option:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-options-container.dropdown-open {
    top: calc(100% - 27px);
    opacity: 1;
}

.selected-option-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: #2a2c38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    z-index: 3;
    transition: all 0.2s ease-in-out;
}

.selected-option-container svg {
    margin-right: 10px;
    width: 40px;
    height: 40px;
}

.selected-option-container svg path {
    fill: white;
}

.selected-option-container.dropdown-open {
    border-radius: 6px 6px 0 0;
}

.dropdown-prompt {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
}

.drop-z-index {
    z-index: 1;
}

#empty-notif-text {
    text-align: center;
    margin-top: 22px;
}

.basket_ajax {
    height: 100%;
}

.load-notif-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 48px;
}

.load-notif-container p {
    font-size: 18px;
    margin-top: 18px;
}

#basket-freebies-container {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.skeleton-img {
    width: 60px;
    height: 60px;
    border-radius: 7px;
}

.skeleton-title,
.skeleton-label,
.skeleton-price,
.skeleton-selection-text {
    height: 20px;
    border-radius: 7px;
}

.skeleton-title {
    width: 190px;
    margin-bottom: 10px;
}

.skeleton-label {
    width: 100px;
    height: 15px;
}

.skeleton-price {
    width: 60px;
}

.skeleton-selection-text {
    width: 180px;
}

#sample-order-row-skeleton {
    display: none;
}

.skeleton-message-main,
.skeleton-message-sub,
.skeleton-btn {
    border-radius: 7px;
    background-color: #f39f98;
}

.skeleton-message-main {
    width: 80%;
    height: 20px;
    margin-bottom: 10px;
}

.skeleton-message-sub {
    width: 60%;
    height: 15px;
}

.skeleton-btn {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.skeleton-total {
    width: 45px;
    height: 16px;
    border-radius: 7px;
}

.skeleton-total.credits {
    margin: 3px 0;
}

.skeleton-total.total {
    margin: 0 !important;
    height: 18px;
}

#checkout-upper-btns-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 10px);
    margin-bottom: 16px;
}

.checkout__btns {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
}

#wishlist-link-container .notification {
    top: 3px !important;
    z-index: 1;
}

#wishlist-link-container a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #1B232E;
    padding: 14px 23px;
    border-radius: 2.5rem;
    gap: 10px;
    transition: all 0.15s ease-in-out;
}

#wishlist-link-container a:hover {
    transform: scale(1.025);
}

#wishlist-link-container p {
    margin: 0;
    font-size: 18px;
}

#wishlist-link-container svg {
    width: 20px;
    height: 20px;
}

#wishlist-link-container svg path {
    fill: white !important;
}


/* secure checkout */
.error {
    display: inline-block;
    margin-top: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
    display: none;
}

.checkboxes-container {
    flex: 1;
}

.checkbox-col {
    width: 100% !important;
    max-width: 100% !important;
    gap: 15px;
}

.terms-alert,
.credits-alert {
    text-align: center;
    left: 50% !important;
    transform: translateX(-50%);
    pointer-events: none;
}

.terms-alert {
    width: 282px;
    top: -40px !important;
}

.checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.checkbox-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #27313e;
    margin: 0;
    font: inherit;
    color: white;
    min-width: 17px;
    min-height: 17px;
    border: 3px solid white;
    border-radius: 4px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 4px;
    width: 10px;
    height: 9px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox-row input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.checkbox-row label {
    padding: 0 !important;
    margin: 0 !important;
}

.checkbox-row label p,
.checkbox-row label a {
    font-size: 16px !important;
    margin: 0 !important;
}

.checkbox-row a {
    text-decoration: underline;
}

.credits-notif-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.checkbox-col .checkbox-row label .credits-notif-container .credits-notif-text {
    font-size: 14px !important;
    font-weight: 600;
    color: #5DEAD9;
}

.credits-info-alert-container {
    position: relative;
    display: flex;
    align-items: center;
}

.credits-alert {
    display: block;
    width: 300px;
    top: -71px !important;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.credits-info-alert-container:hover .credits-alert {
    top: -81px !important;
    opacity: 1;
}

.credits-notif-container svg {
    fill: white !important;
    width: 16px;
    height: 16px;
}

/*login / register form css override */
.form.form__lined_override input[type=text],
.form.form__lined_override input[type=password],
.form.form__lined_override input[type=search],
.form.form__lined_override input[type=email],
.form.form__lined_override select {
    font-size: 0.875rem !important;
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    background: #27313E !important;
    color: #FFFFFF !important;
    color-scheme: dark;
    font-weight: 500 !important;
    border-radius: 2.5rem !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Ensure native dropdown option list items also render with correct dark-theme colours */
.form.form__lined_override select option {
    background: #27313E;
    color: #FFFFFF;
}

/* Extra right padding ONLY for password fields with eye toggle icon */
.form.form__lined_override label.pw__preview input,
.form.form__lined label.pw__preview input {
    padding-right: 3rem !important;
}

/* Side-by-side column layout for First Name & Surname */
.form.form__lined_override .form__columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.625rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form.form__lined_override .form__columns label:not(.form__cb) {
    width: 50% !important;
    flex: 1 1 50% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.form.form__lined_override label.pw__preview a,
label.pw__preview a {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    right: 1rem !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.form.form__lined_override label.pw__preview a svg,
label.pw__preview a svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

.form.form__lined_override label.pw__preview a svg path,
label.pw__preview a svg path {
    fill: #94a3b8 !important;
    transition: fill 0.2s ease;
}

.form.form__lined_override label.pw__preview a:hover svg path,
label.pw__preview a:hover svg path {
    fill: #00d2c4 !important;
}

/* Prevent Chrome/Edge autofill/focus from turning dark mode inputs white and hiding text/icons */
.form.form__lined_override input:-webkit-autofill,
.form.form__lined_override input:-webkit-autofill:hover,
.form.form__lined_override input:-webkit-autofill:focus,
.form.form__lined_override input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #27313E inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* cater for samples checkout bg colour shift */
@media only screen and (max-width: 1240px) {

    .form.form__dark input[type=text],
    .form.form__dark input[type=password],
    .form.form__dark input[type=search],
    .form.form__dark input[type=email],
    .form.form__dark select {
        background: #1b232e !important;
    }
}

.tbody .multibutton-container {
    margin-right: 10px;
}

.tbody .multibutton-container .quantity-container {
    position: relative;
    top: 0;
    left: 0;
    width: unset !important;
    transform: scale(1);
    padding: 0 10px;
}

.tbody .multibutton-container .quantity-container button {
    opacity: 1;
}

@media only screen and (max-width: 431px) {
    .link-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: unset;
        padding: 15px 0px 15px 0px;
    }

    .product_row .delivery_row {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .tcol {
        height: fit-content !important;
    }

    .tbl.tbl__basket .tbody .trow .tcol:nth-child(4n+4) span {
        padding: 0px 0px 0px 3px;
    }

    .tbody .multibutton-container {
        margin: 0px 3px 0px 0px !important;
    }

    .link-container img {
        margin: 0px 0px 7px 0px !important;
    }

    .buttons-price-container {
        height: unset !important;
    }

    /* samples */
    .price-span {
        flex-direction: row !important;
        justify-content: center;
        font-size: 1.1rem;
    }

    .price-span svg {
        margin-right: 0.2rem !important;
    }

    .tbl.tbl__basket .tbody .trow .tcol:nth-child(4n+2) {
        width: 100%;
    }

    .available-credits {
        font-size: unset;
    }

    h1,
    h2 {
        font-size: 1.25rem;
    }

    .delivery_row {
        margin-bottom: 10px !important;
    }
}

@media only screen and (max-width: 359px) {
    .tbl.tbl__basket .tbody .trow .tcol:nth-child(4n+4):not(.tcol-samples) {
        flex-direction: column;
        padding: 10px 0px 5px 0px !important;
    }
}

@media only screen and (max-width: 770px) {
    .price-span {
        flex-direction: row !important;
        justify-content: center;
        font-size: 1.1rem;
    }

    .price-span svg {
        margin-right: 0.2rem !important;
    }

    h1,
    h2 {
        font-size: 1.25rem;
    }

    .tcol.tcol-samples {
        width: fit-content !important;
    }
}

.creditsearned {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    margin-bottom: 4px;
}

.creditsearned svg {
    margin-left: 0.2rem;
    width: 1.4rem;
    height: 1.4rem;
    fill: turquoise;
    opacity: 1 !important;
}

.credits-notif {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-left: 0.1rem;
    transition: all 0.2s ease-in-out;
}

.credits-notif:hover {
    transform: scale(1.05);
}

.credits-notif:active {
    transform: scale(0.95);
}

.credits-notif svg {
    opacity: 1 !important;
}

.credits-notif svg path {
    fill: white !important;
}

.paymenttype-notif {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-left: 0.1rem;
    transition: all 0.2s ease-in-out;
}

.paymenttype-notif:hover {
    transform: scale(1.05);
}

.paymenttype-notif:active {
    transform: scale(0.95);
}

.paymenttype-notif svg {
    opacity: 1 !important;
    height: 20px;
    width: auto;
}

.paymenttype-notif svg path {
    fill: white !important;
}

.modal-outer {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#credits-modal-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #1b232e;
    border-radius: 10px;
    padding: 28px 36px;
    border: 3px solid white;
    gap: 12px;
}

.modal-title {
    font-size: 22px;
    font-weight: 500;
    color: white;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 25px;
    height: 25px;
    background: transparent;
}

.modal-close svg {
    transform: translate(-12px, -12px) scale(0.7);
}

.modal-close svg path {
    fill: white !important;
}

#credits-container {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    color: white;
    gap: 9px;
}

/* --- Subtle Freebie Banner Styles --- */
.freebie-offer-banner.subtle-dark {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1b232e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #ffd700;
    border-radius: 6px;
    cursor: pointer;
    margin: 8px 0;
    transition: all 0.2s ease;
}

.freebie-offer-banner.subtle-dark:hover {
    background: #222b38;
    border-color: rgba(255, 215, 0, 0.4);
}

.freebie-icon-badge {
    font-size: 18px;
    opacity: 0.9;
}

.freebie-icon-badge.locked {
    filter: grayscale(100%);
    opacity: 0.5;
}

.freebie-offer-title {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

.freebie-offer-subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin: 5px 0 0 !important;
}

.freebie-offer-arrow {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.freebie-offer-arrow.expanded {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .freebie-offer-banner.subtle-dark {
        padding: 10px 12px;
        gap: 8px;
    }

    .freebie-offer-title {
        font-size: 12px;
    }
}

/* CSS-Only Responsive Freebie Layout Adjustments */
.inner-freebie-row-container {
    display: flex !important;
}

.inner-freebie-dropdown-row-container {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    .freebie-btns {
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
    }

    .inner-freebie-row-container {
        padding: 10px 0 !important;
    }
}

/* Card-based Cart Items Design */
.modern-cart-card {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #1b232e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid green !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin-bottom: 5px !important;
    height: auto !important;
    width: 100% !important;
    min-height: 94px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.modern-cart-card::before,
.modern-cart-card::after {
    display: none !important;
    /* Remove legacy grid column floats */
}

.cart-card-meta {
    flex: 1 !important;
    min-width: 0 !important;
}

.cart-card-meta a {
    text-decoration: none !important;
}

.cart-card-meta .link-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
}

.cart-card-meta .link-container img {
    margin: 0 !important;
}

.cart-card-thumb {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

.cart-card-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.cart-card-label {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: 5px !important;
    display: block !important;
}

.cart-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

/* Quantity Pill Style */
.quantity-pill-container {
    position: relative !important;
    transform: scale(1) !important;
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f05c5c !important;
    /* Salmon pink accent */
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 32px !important;
    padding: 0 !important;
    width: auto !important;
}

.quantity-pill-btn {
    background: transparent !important;
    border: none !important;
    color: white !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    line-height: 32px !important;
    height: 100% !important;
}

.quantity-pill-btn:hover {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

.quantity-pill-value {
    color: white !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    min-width: 14px !important;
    text-align: center !important;
    display: inline-block !important;
}

.quantity-plus-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Rounded square wishlist card button */
.card-wishlist-btn {
    width: 36px !important;
    height: 36px !important;
    background: #2a2c38 !important;
    /* Premium dark background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.card-wishlist-btn:hover {
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.card-wishlist-btn svg {
    fill: currentColor !important;
    stroke: currentColor !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 auto !important;
}

.card-wishlist-btn.added {
    color: #f05c5c !important;
    /* Heart is salmon pink when added */
}

.card-wishlist-btn.added svg {
    fill: #f05c5c !important;
}

.cart-card-price {
    min-width: 80px !important;
    text-align: right !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.cart-card-price .price-span {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.cart-card-price .price {
    font-size: 17px !important;
    margin: 0 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.cart-card-price .price-before {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: line-through !important;
    margin: 0 8px 0 0 !important;
    line-height: 1.2 !important;
}

.cart-card-price .price-after {
    font-size: 17px !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.remove-all-trash {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.2s !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.remove-all-trash:hover {
    color: #ff6b6b !important;
}

.remove-all-trash svg {
    fill: currentColor !important;
    width: 18px !important;
    height: 18px !important;
}

/* Mobile responsive fixes */
@media only screen and (max-width: 630px) {
    .modern-cart-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .cart-card-meta {
        width: 100% !important;
    }

    .cart-card-actions {
        width: 100% !important;
        justify-content: space-between !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-top: 12px !important;
    }

    .cart-card-price {
        text-align: left !important;
        min-width: 60px !important;
    }
}

/* Checkout Upsell Module Styling */
#checkout-upsell-container {
    padding: 16px 0;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.checkout-upsell-header h3 {
    font-size: 18px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0.5px !important;
}

.checkout-upsell-slider {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    box-sizing: border-box;
}

@media only screen and (max-width: 1440px) {
    .checkout-upsell-slider {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 1100px) {
    .checkout-upsell-slider {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.upsell-card {
    background-color: #1b232e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, border-color 0.2s;
    min-height: 180px;
    box-sizing: border-box;
    min-width: 0;
}

.upsell-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.upsell-card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upsell-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    background-color: #1b232e;
}

.upsell-card-info {
    min-width: 0;
}

.upsell-card-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4 !important;
}

.upsell-card-label {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: 5px !important;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upsell-card-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.upsell-card-price {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: center;
}

.upsell-price {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
}

.upsell-price-before {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
    margin-bottom: 1px;
}

.upsell-price-discounted {
    font-size: 13px;
    color: #f05c5c;
    font-weight: 600;
}

.upsell-add-btn {
    background-color: #2a2c38;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    width: 100%;
    text-align: center;
}

.upsell-add-btn:hover {
    background-color: #373a4a;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Horizontal slider on mobile */
@media only screen and (max-width: 800px) {
    .checkout-upsell-slider {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 8px !important;
        gap: 12px !important;
    }

    .upsell-card {
        flex: 0 0 160px !important;
        scroll-snap-align: start !important;
        min-height: 200px !important;
    }

    .upsell-card-thumb {
        width: 136px !important;
        height: 136px !important;
    }
}

/* Disabled state for checkout upsell module when payment is active */
#checkout-upsell-container.upsell-disabled,
.checkout-upsell-slider.upsell-disabled {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(40%) !important;
    user-select: none !important;
}

#checkout-upsell-container.upsell-disabled button,
#checkout-upsell-container.upsell-disabled a,
.upsell-add-btn:disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Recommended Products Card (Upsell Cards) Light Mode Overrides */
html.light-theme-active #checkout-upsell-container,
html.light-theme-active .checkout-upsell-slider,
html.light-theme-active #rec-prods-outer-container,
html.light-theme-active #all-rec-prods-container,
html.light-theme-active .rec-prods-container,
html.light-theme-active .checkout__recommendations {
    background: transparent !important;
}

html.light-theme-active #rec-prods-title,
html.light-theme-active .rec-prods-header,
html.light-theme-active .checkout-upsell-title,
html.light-theme-active .checkout__recommendations h2,
html.light-theme-active .checkout__recommendations h3 {
    color: #0f172a !important;
}

html.light-theme-active .upsell-card,
html.light-theme-active .rec-prod-container,
html.light-theme-active #all-rec-prods-container .rec-prod-container {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html.light-theme-active .upsell-card:hover,
html.light-theme-active .rec-prod-container:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

html.light-theme-active .upsell-card-thumb {
    background-color: #f1f5f9 !important;
    border-radius: 6px !important;
}

html.light-theme-active .upsell-card-title,
html.light-theme-active .rec-prod-name {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light-theme-active .upsell-card-label,
html.light-theme-active .rec-prod-label-name {
    color: #64748b !important;
    font-weight: 500 !important;
}

html.light-theme-active .upsell-card-action {
    border-top: 1px solid #e2e8f0 !important;
}

html.light-theme-active .upsell-price,
html.light-theme-active .rec-prods-price {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light-theme-active .upsell-price-before,
html.light-theme-active .rec-prods-price-before {
    color: #94a3b8 !important;
}

html.light-theme-active .upsell-price-discounted {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

html.light-theme-active .upsell-add-btn,
html.light-theme-active .rec-prod-container .small-basket-button,
html.light-theme-active .rec-prod-container .multibutton {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light-theme-active .upsell-add-btn:hover,
html.light-theme-active .rec-prod-container .small-basket-button:hover,
html.light-theme-active .rec-prod-container .multibutton:hover {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
}

/* =========================================================
   Checkout Page Light Mode Polish & Overrides
   ========================================================= */

/* 1. Wishlist Button Light Mode Styling */
html.light-theme-active #wishlist-link-container a {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme-active #wishlist-link-container a:hover {
    background-color: #fff1f2 !important;
    border-color: #f43f5e !important;
    transform: scale(1.025) !important;
}

html.light-theme-active #wishlist-link-container p {
    color: #0f172a !important;
    font-weight: 600 !important;
}

html.light-theme-active #wishlist-link-container svg path {
    fill: #f43f5e !important;
}

html.light-theme-active #wishlist-link-container .notification {
    background: #f43f5e !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* 2. Basket Items - Product Subtitles & Brand Labels */
html.light-theme-active .cart-card-title {
    color: #0f172a !important;
}

html.light-theme-active .cart-card-label,
html.light-theme-active .trow .title-container span,
html.light-theme-active .trow .title-container .opaque,
html.light-theme-active .trow .title-container p {
    color: #475569 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* 3. Checkout Right Sidebar Card - Labels, Inputs, & Totals */
html.light-theme-active .checkout-header h2,
html.light-theme-active .checkout .container .checkout__order .checkout-header h2 {
    color: #0f172a !important;
}

html.light-theme-active .checkout-header a,
html.light-theme-active .checkout .container .checkout__order .checkout-header a {
    color: #475569 !important;
}

html.light-theme-active .order__promos label span,
html.light-theme-active .order__promos label span.opaque,
html.light-theme-active .order__promos label p.creditsearned span,
html.light-theme-active .order__promos label p.creditsearned span.opaque {
    color: #334155 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

html.light-theme-active .order__promos input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-theme-active .order__promos input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

html.light-theme-active .checkout-totals span,
html.light-theme-active .checkout-totals {
    color: #0f172a !important;
}

html.light-theme-active .checkout-totals.credits-total span,
html.light-theme-active .checkout-totals.credits-total p {
    color: #0d9488 !important;
}

html.light-theme-active .checkout-totals.discount-total span {
    color: #e11d48 !important;
}

html.light-theme-active .checkout-totals#sub_total_val,
html.light-theme-active .checkout-totals#vat_amount_val,
html.light-theme-active span.checkout-totals {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Remove 1px border on basket rows container */
#basket-rows-container,
html.light-theme-active #basket-rows-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure inter-card gaps in basket match page background in Light Mode */
html.light-theme-active .content.main-content,
html.light-theme-active .tbl.tbl__basket,
html.light-theme-active .tbl.tbl__basket .tbody,
html.light-theme-active #basket-rows-container,
html.light-theme-active .basket_ajax,
html.light-theme-active .gradient-overlay,
html.light-theme-active .tbody.row,
html.light-theme-active .basket-row {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Unify Payment Button Shape in Dark Mode & Light Mode */
#proceed-to-payment,
#proceed-reset,
.proceed-to-payment-skeleton,
#proceed-to-checkout,
.payment-btn-container {
    border-radius: 12px !important;
}

/* Dark Mode Page Background (unlinked from toggle background) */
html:not(.light-theme-active) body,
html:not(.light-theme-active) main.checkout,
html:not(.light-theme-active) .checkout {
    background-color: #27313E !important;
    background: #27313E !important;
}

/* Unify Basket / Samples Basket Tab Switcher (Original generous size, zero-shift between Dark & Light Modes) */
html:not(.light-theme-active) .checkout__btns {
    background-color: #3c4353 !important;
    background: #3c4353 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 2.5rem !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
}

.checkout__btns .btn {
    border-radius: 2rem !important;
    padding: 12px 26px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

html:not(.light-theme-active) .checkout__btns .btn.active {
    background-color: #1b232e !important;
    background: #1b232e !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.checkout__btns .btn:not(.active) {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

.checkout__btns .btn:not(.active):hover {
    color: #ffffff !important;
}

/* Light Mode Overrides for Basket / Samples Basket Switcher */
html.light-theme-active .checkout__btns {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
}

html.light-theme-active .checkout__btns .btn.active {
    background-color: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme-active .checkout__btns .btn:not(.active) {
    background-color: transparent !important;
    color: #475569 !important;
}

html.light-theme-active .checkout__btns .btn:not(.active):hover {
    color: #0f172a !important;
}

/* Light Mode Overrides for Modals (Credits, Multibuy, Share) */
html.light-theme-active #credits-modal-inner,
html.light-theme-active #multibuy-modal-inner,
html.light-theme-active #share-modal-inner,
body.light-theme #credits-modal-inner,
body.light-theme #multibuy-modal-inner,
body.light-theme #share-modal-inner {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25) !important;
    color: #0f172a !important;
}

html.light-theme-active #credits-modal-inner .modal-title,
html.light-theme-active #multibuy-modal-inner .modal-title,
html.light-theme-active #share-modal-inner .modal-title,
html.light-theme-active .modal-title,
body.light-theme .modal-title {
    color: #0f172a !important;
}

html.light-theme-active #credits-container,
html.light-theme-active #credits-container p,
body.light-theme #credits-container,
body.light-theme #credits-container p {
    color: #334155 !important;
}

html.light-theme-active #credits-container span[style*="color"],
html.light-theme-active #credits-container font[color],
body.light-theme #credits-container span[style*="color"],
body.light-theme #credits-container font[color] {
    filter: brightness(0.8) contrast(1.2) !important;
}

html.light-theme-active #credits-container span[style*="#00e5ff"],
html.light-theme-active #credits-container span[style*="cyan"],
html.light-theme-active #credits-container .cyan,
body.light-theme #credits-container span[style*="#00e5ff"] {
    color: #0284c7 !important;
}

html.light-theme-active #credits-container span[style*="#ff6457"],
html.light-theme-active #credits-container span[style*="salmon"],
html.light-theme-active #credits-container .salmon,
body.light-theme #credits-container span[style*="#ff6457"] {
    color: #ea580c !important;
}

html.light-theme-active .modal-close,
body.light-theme .modal-close {
    background: transparent !important;
}

html.light-theme-active .modal-close svg path,
body.light-theme .modal-close svg path {
    fill: #0f172a !important;
}

/* =========================================================
   Light Mode: Free Product (Freebie) Banner Rows
   ========================================================= */
html.light-theme-active .freebie-offer-banner.subtle-dark {
    background: #fffbeb !important;
    border-color: rgba(180, 130, 0, 0.25) !important;
    border-left-color: #d97706 !important;
}

html.light-theme-active .freebie-offer-banner.subtle-dark:hover {
    background: #fef3c7 !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}

html.light-theme-active .freebie-offer-title {
    color: #1e293b !important;
}

html.light-theme-active .freebie-offer-subtitle {
    color: #64748b !important;
}

html.light-theme-active .freebie-offer-arrow {
    color: #94a3b8 !important;
}

/* Expanded inner freebie row container */
html.light-theme-active .inner-freebie-row-container,
html.light-theme-active .inner-freebie-dropdown-row-container {
    background-color: transparent !important;
}

/* =========================================================
   Light Mode: Basket Cart Card (product rows)
   ========================================================= */
html.light-theme-active .modern-cart-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-left-color: #10b981 !important;
}

html.light-theme-active .cart-card-title {
    color: #0f172a !important;
}

html.light-theme-active .cart-card-price,
html.light-theme-active .cart-card-price .price {
    color: #0f172a !important;
}

html.light-theme-active .cart-card-price .price-before {
    color: #94a3b8 !important;
}

/* =========================================================
   Light Mode: Wishlist Heart Button
   ========================================================= */
html.light-theme-active .card-wishlist-btn {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    /* idle: neutral grey heart */
}

html.light-theme-active .card-wishlist-btn:hover {
    background: #fff1f2 !important;
    border-color: #fda4af !important;
    color: #f43f5e !important;
    /* hover: show heart pink */
}

html.light-theme-active .card-wishlist-btn.added {
    background: #fff1f2 !important;
    border-color: #fda4af !important;
    color: #f05c5c !important;
    /* added: keep salmon/heart colour */
}

html.light-theme-active .card-wishlist-btn svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* =========================================================
   Light Mode: Remove outer basket container box (the white
   bg + grey border wrapping all rows together)
   ========================================================= */
html.light-theme-active .basket_ajax,
html.light-theme-active #basket-rows-container,
html.light-theme-active #basket-freebies-container,
html.light-theme-active .basket_ajax>div:not(.trow):not(.modern-cart-card):not(.freebie-row):not(.basket-row) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   Light Mode: Freebie product cards keep white text
   (They have a dark gradient overlay regardless of theme,
   so their text must always stay white/light)
   ========================================================= */
html.light-theme-active .freebie-selection-btn .freebie-title-container p,
html.light-theme-active .freebie-unclickable .freebie-title-container p,
html.light-theme-active .freebie-selection-btn .freebie-name,
html.light-theme-active .freebie-unclickable .freebie-name,
html.light-theme-active .freebie-selection-btn .freebie-label,
html.light-theme-active .freebie-unclickable .freebie-label {
    color: #ffffff !important;
}

html.light-theme-active .freebie-selection-btn .price-before-notif-container p,
html.light-theme-active .freebie-unclickable .price-before-notif-container p,
html.light-theme-active .freebie-selection-btn .price-before-notif,
html.light-theme-active .freebie-unclickable .price-before-notif,
html.light-theme-active .freebie-selection-btn .free-notif,
html.light-theme-active .freebie-unclickable .free-notif {
    color: #ffffff !important;
}

html.light-theme-active .freebie-selection-btn .vert-divider,
html.light-theme-active .freebie-unclickable .vert-divider {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

html.light-theme-active .freebie-notif,
html.light-theme-active .freebie-notif::before {
    background-color: #e2e8f0 !important;
}

html.light-theme-active .freebie-notif p {
    color: #334155 !important;
}

/* =========================================================
   Sample Credit Package Pricing Grid (Checkout)
   ========================================================= */
.purchase-credits-container {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px;
}

.credits-notice-span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 100, 87, 0.1);
    border: 1px solid rgba(255, 100, 87, 0.25);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    padding: 13px 18px;
    background: #2b1d22;
    border: 1px solid #ff6457;
    border-radius: 8px;
    box-sizing: border-box;
}

.credits-notice-text {
    color: #ff8a80;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.pricing-card {
    background: #18202c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.pricing-card.premium {
    border: 2px solid #ff6457;
    background: linear-gradient(180deg, #271d22 0%, #1a1e27 100%);
    box-shadow: 0 4px 25px rgba(255, 100, 87, 0.2);
}

.pricing-card.credit-option-selected {
    border-color: #ff6457 !important;
    box-shadow: 0 0 25px rgba(255, 100, 87, 0.5) !important;
}

.pricing-card.credit-option-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pricing-tier {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.pricing-card.premium .pricing-tier {
    color: #ff7a6e;
}

.pricing-amount {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.pricing-save {
    display: inline-block;
    align-self: center;
    background: #ff6457;
    color: #ffffff;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(255, 100, 87, 0.4);
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    text-align: left;
    flex-grow: 1;
}

.pricing-card ul li {
    font-size: 13.5px;
    color: #cbd5e1;
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
    line-height: 1.4;
}

.pricing-card ul li.pricing-credits-highlight {
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
}

.pricing-card ul li.pricing-credits-highlight strong {
    font-size: 15.5px;
    font-weight: 800;
    color: #10b981;
}

.pricing-card.premium ul li.pricing-credits-highlight strong {
    color: #ff7a6e;
}

.pricing-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 15px;
}

.pricing-card-btn,
.pricing-card .btn {
    width: 100%;
    display: block;
    padding: 13px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.pricing-card.premium .pricing-card-btn,
.pricing-card.premium .btn {
    background: #ff6457;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 100, 87, 0.4);
}

.pricing-card:hover .pricing-card-btn,
.pricing-card:hover .btn {
    background: #10b981;
    color: #ffffff;
}

.pricing-card.premium:hover .pricing-card-btn,
.pricing-card.premium:hover .btn {
    background: #ff4d3d;
    color: #ffffff;
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Light Theme Overrides for Pricing Grid */
html.light-theme-active .credits-notice-span {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
}

html.light-theme-active .credits-notice-text {
    color: #c2410c !important;
}

html.light-theme-active .pricing-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

html.light-theme-active .pricing-card:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

html.light-theme-active .pricing-card.premium {
    border-color: #f87171 !important;
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%) !important;
}

html.light-theme-active .pricing-card.credit-option-selected {
    border-color: #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25) !important;
}

html.light-theme-active .pricing-tier {
    color: #64748b !important;
}

html.light-theme-active .pricing-card.premium .pricing-tier {
    color: #ef4444 !important;
}

html.light-theme-active .pricing-amount {
    color: #0f172a !important;
}

html.light-theme-active .pricing-save {
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25) !important;
}

html.light-theme-active .pricing-card ul li {
    color: #475569 !important;
}

html.light-theme-active .pricing-card ul li.pricing-credits-highlight {
    color: #0f172a !important;
}

html.light-theme-active .pricing-card ul li.pricing-credits-highlight strong {
    color: #0d9488 !important;
}

html.light-theme-active .pricing-card.premium ul li.pricing-credits-highlight strong {
    color: #ef4444 !important;
}

html.light-theme-active .pricing-card ul li::before {
    color: #0d9488 !important;
}

html.light-theme-active .pricing-card-btn,
html.light-theme-active .pricing-card .btn {
    background: #0f172a !important;
    color: #ffffff !important;
}

html.light-theme-active .pricing-card.premium .pricing-card-btn,
html.light-theme-active .pricing-card.premium .btn {
    background: #ef4444 !important;
    color: #ffffff !important;
}

html.light-theme-active .pricing-card:hover .pricing-card-btn,
html.light-theme-active .pricing-card:hover .btn {
    background: #0d9488 !important;
    color: #ffffff !important;
}

/* =========================================================
   Light Mode: Checkout Email & Login Form Inputs
   ========================================================= */
html.light-theme-active .form.form__lined_override input[type=text],
html.light-theme-active .form.form__lined_override input[type=password],
html.light-theme-active .form.form__lined_override input[type=search],
html.light-theme-active .form.form__lined_override input[type=email],
html.light-theme-active .form.form__lined_override select,
html.light-theme-active #check__email,
html.light-theme-active #login__email,
html.light-theme-active #login__pw {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* color-scheme: light forces the browser's native dropdown popup to use light-mode OS colors.
   CSS on <option> elements is ignored in Chrome/WebKit — this is the only reliable fix. */
html.light-theme-active .form.form__lined_override select {
    color-scheme: light;
}

/* Fix native dropdown option list in light mode — options don't inherit colour from the select element */
html.light-theme-active .form.form__lined_override select option {
    background: #ffffff;
    color: #0f172a;
}

html.light-theme-active .form.form__lined_override input::placeholder,
html.light-theme-active #check__email::placeholder,
html.light-theme-active #login__email::placeholder,
html.light-theme-active #login__pw::placeholder {
    color: #94a3b8 !important;
}

html.light-theme-active .form.form__lined_override label.pw__preview a svg,
html.light-theme-active label.pw__preview a svg {
    fill: #475569 !important;
}

html.light-theme-active .form.form__lined_override label.pw__preview a svg path,
html.light-theme-active label.pw__preview a svg path {
    fill: #475569 !important;
}

html.light-theme-active #checkout_email p:not(.proceed-text),
html.light-theme-active #checkout_login p:not(.proceed-text),
html.light-theme-active #checkout_email label,
html.light-theme-active #checkout_login label {
    color: #0f172a !important;
}

/* Force white text and white icon on all checkout proceed buttons */
html.light-theme-active .proceed-text,
html.light-theme-active .proceed-text p,
html.light-theme-active .proceed-text i,
html.light-theme-active button[id^="proceed-"],
html.light-theme-active button[id^="proceed-"] p,
html.light-theme-active button[id^="proceed-"] i,
html.light-theme-active #proceed-to-email,
html.light-theme-active #proceed-to-login,
html.light-theme-active #proceed-to-register,
html.light-theme-active #proceed-to-continue,
html.light-theme-active #proceed-to-payment {
    color: #ffffff !important;
}

/* =========================================================
   Light Mode: Checkout Order Card, Totals, Promos & Container
   ========================================================= */
html.light-theme-active body {
    background: #f8fafc !important;
}

html.light-theme-active .checkout .container .checkout__order {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light-theme-active #btn-payment-group,
html.light-theme-active .ftr__order,
html.light-theme-active .order__promos {
    background: transparent !important;
    color: #0f172a !important;
}

html.light-theme-active .ftr__order div,
html.light-theme-active .checkout-totals span,
html.light-theme-active .checkout-totals b,
html.light-theme-active #total-cost-span {
    color: #0f172a !important;
}

html.light-theme-active .checkout-totals.subtotal span,
html.light-theme-active .checkout-totals.vat-total span,
html.light-theme-active .checkout-totals.total span {
    color: #0f172a !important;
}

html.light-theme-active .checkout-totals.credits-total,
html.light-theme-active .checkout-totals.credits-total span,
html.light-theme-active .checkout-totals.credits-total p {
    color: #0d9488 !important;
}

html.light-theme-active .checkout-totals.discount-total,
html.light-theme-active .checkout-totals.discount-total span {
    color: #ef4444 !important;
}

html.light-theme-active .order__promos label span,
html.light-theme-active .order__promos label .opaque {
    color: #475569 !important;
    font-weight: 600 !important;
}

html.light-theme-active .order__promos input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-theme-active .order__promos input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

html.light-theme-active .order__promos .promo-btn,
html.light-theme-active .order__promos label a.promo-btn,
html.light-theme-active #add_promo,
html.light-theme-active #add_credits,
html.light-theme-active #vat_check {
    background-color: green !important;
    background: green !important;
    color: #ffffff !important;
}

html.light-theme-active .order__promos .promo-btn:hover,
html.light-theme-active .order__promos label a.promo-btn:hover,
html.light-theme-active #add_promo:hover,
html.light-theme-active #add_credits:hover,
html.light-theme-active #vat_check:hover {
    background-color: #1a6e1a !important;
    background: #1a6e1a !important;
}

/* Light Mode: Info (i) icon dark visibility */
html.light-theme-active .credits-notif svg path,
html.light-theme-active button.credits-notif svg path,
html.light-theme-active .creditsearned button.credits-notif svg path {
    fill: #0f172a !important;
}

/* Light Mode: Dark Credits text */
html.light-theme-active #sample-credits-right-col .available-credits,
html.light-theme-active .available-credits,
html.light-theme-active .available-credits .salmon,
html.light-theme-active .available-credits span.salmon,
html.light-theme-active .available-credits b,
html.light-theme-active .creditsearned span[style*="color"],
html.light-theme-active .creditsearned span:not(.opaque) {
    color: #0f172a !important;
}

/* Light Mode: Dark crisp Credits SVG icon */
html.light-theme-active .available-credits svg path,
html.light-theme-active #sample-credits-right-col svg path,
html.light-theme-active .creditsearned svg path,
html.light-theme-active .order__promos svg path,
html.light-theme-active .credits-total svg path,
html.light-theme-active .checkout-totals.credits-total svg path {
    fill: #0f172a !important;
}

html.light-theme-active #sample-checkout-total {
    color: #0f172a !important;
}

html.light-theme-active #checkout-upsell-container h3,
html.light-theme-active .checkout-upsell-header h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* =========================================================
   Samples Basket: transparent outer container + row gaps
   ========================================================= */

/* Strip all visual decoration from the outer basket container */
.checkout .tbl.tbl__basket {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.checkout .tbl.tbl__basket .tbody {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Hide the gradient overlay — not needed without a container */
.checkout .tbl.tbl__basket .gradient-overlay {
    display: none !important;
}

/* 5px gap between each sound row */
.sl-order-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Belt-and-braces: nuke any inherited background/border on the wrap regardless of theme */
.tbl__basket .tbody .sl-order-card-wrap,
html.light-theme-active .tbl__basket .tbody .sl-order-card-wrap,
html:not(.light-theme-active) .tbl__basket .tbody .sl-order-card-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}