/* The cart, the payment page and the order pages' item list: items, shipping and totals, the address
   form, shipping options, promo code, guarantees and the Stripe form. Tokens and fonts: base.css. */

.cart-item {
    background: var(--ink-2-glass);
    box-sizing: border-box;
    border: 0;
    border-radius: 8px;
}

.cart-item-images {
    margin-right: 15px;
    width: 400px;
    position: relative;
    text-align: center;
}

.cart-item-image-small {
    margin-right: 15px;
    width: 250px;
}

.cart-item-image-small img {
    width: 250px;
    height: auto;
}

.cart-item-image-buttons {
    pointer-events: none;
}

.cart-item-image-buttons, .cart-item-image-list {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.cart-item-image-list {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    scrollbar-height: none; /* Firefox */
}

.cart-item-image-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.cart-item-image {
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    cursor: zoom-in;
}

.cart-image-illusration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.cart-item-image-left, .cart-item-image-right {
    top: 0;
    bottom: 0;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 50px;
    cursor: pointer;
    position: absolute;
    pointer-events: all;
    transition: opacity 0.25s;
}

.cart-item-image-left:hover, .cart-item-image-right:hover {
    background-color: rgba(0,0,0,0.25);
}

.cart-item-image-left:active, .cart-item-image-right:active {
    background-color: transparent;
}

.cart-item-image-left.hidden, .cart-item-image-right.hidden {
    opacity: 0;
    pointer-events: none;
}

.cart-item-image-left {
    left: 0;
    background-image: url("../img/carousel-left-p1IDYxG.svg");
}

.cart-item-image-right {
    right: 0;
    background-image: url("../img/carousel-right-0kSAJxf.svg");
}

.cart-subitem-description {
    line-height: 24px;
    margin-right: 10px;
    flex: 1;
}

.cart-subitem-header .cart-subitem-price {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
    font-weight: 400;
}

.cart-subitem-review-summary {
    margin-top: 5px;
    display: flex;
    align-items: center;
    color: var(--ink-200);
    font-size: 14px;
}

.cart-subitem-review-summary img {
    height: 16px;
    width: 96.4px;
    flex: 0;
}

.cart-subitem-review-summary a, .cart-subitem-review-summary span {
    padding-left: 10px;
    font-size: 16px;
    color: var(--star);
    flex: 1;
}

.cart-subitem-description ul.cart-benefits {
    border-radius: 10px;
}

.cart-subitem-description ul.no-bullet {
    list-style: none;
}

.cart-subitems {
    flex: 1;
}

.cart-subitem {
    display: flex;
}

.cart-subitem-custom {
    margin: 15px 0;
}

.cart-subitem-old-price {
    text-decoration: line-through;
    color: var(--ink-300);
    margin-right: 8px;
    font-weight: 400;
}

.free-upgrade-badge {
    color: var(--gold);
    padding: 4px 8px;
    border-radius: 2px;
    margin-top: 4px;
    display: block;
    width: fit-content;
    margin-left: auto;
    letter-spacing: .06em;
    font: 600 12px var(--font-body);
    background: var(--gold-soft);
}

.secondary-actions {
    display: flex;
}

.secondary-actions form {
    display: inline-block;
    flex-basis: content;
    flex-grow: 1;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 0.25rem;
}

.secondary-actions form:last-child {
    margin-right: 0;
}

.secondary-actions form input[type="submit"], .secondary-actions a, .secondary-actions form button[type="submit"] {
    background: transparent !important;
    color: var(--star) !important;
    padding: 0.25rem 0.5rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    min-height: 44px;
}

.cart-item-actions {
    margin: 0.5rem 0;
    width: 100%;
}

.remove-frame-form {
    display: inline-block;
}

.address-actions {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
}

.order-type-form fieldset {
    margin: 0;
    padding: 0;
}

.order-type-form fieldset > div {
    display: grid;
    margin-bottom: 16px;
    flex-flow: row wrap;
    align-items: center;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 8px 16px;
}

.order-type-form fieldset > div > label {
    flex: 1 100px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-100);
    grid-column: 1;
    padding: 0;
    font: 600 12px/1.3 var(--font-body);
}

.order-type-form fieldset > div > input {
    flex-grow: 2;
}

.order-type-form fieldset > div > select {
    text-overflow: ellipsis;
    flex-grow: 2;
}

.order-type-form fieldset > div > ul, .consent-box > div > ul {
    order: 3;
    flex: 1 100%;
    list-style-type: none;
    margin: 5px 0 10px;
    color: #FF9A90;
    padding: 0;
}

.order-type-form fieldset > div > ul {
    text-align: right;
}

.consent-box > div > ul {
    text-align: left !important;
}

#shipping_visible_div
{
    display: none;
}

#order-form-column {
    flex: 1;
    padding: 32px 24px;
    box-sizing: border-box;
    margin-top: 0;
}

#order-form-column em {
    font-size: 12px;
    text-align: center;
    display: block;
    margin: 25px 0;
    color: var(--mute);
}

.order-type-form .button, #apple-pay-button, #pay-with-card-button {
    width: 100%;
    margin-top: 20px;
}

#shipping.no-shipping {
    display: none;
}

#expensive-shipping {
    font-weight: 400;
}

#checkoutform .button, #payment-form-submit, #shopify-checkout-button {
    margin-top: 20px;
}

#payment-form-submit, #shopify-checkout-button {
    width: 100%;
}

#payment-form-submit:disabled, #shopify-checkout-button:disabled, #pay-now:disabled {
    background: var(--ink-2);
    box-shadow: none;
}

#shipping_details, #billing_details {
    margin-bottom: 0.8em;
}

.add-frame-button, .customize-now-button {
    text-decoration: none;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

.customize-now-button {
    background-color: var(--gold);
    color: var(--ink);
    padding: 0.25rem 0.5rem;
    display: inline-block;
    border: 0;
    border-radius: 0.4rem !important;
}

.add-frame-button:active, .add-frame-button.pressed, .customize-now-button:active, .customize-now-button.pressed {
    box-shadow: none;
}

.add-frame-button.pressed, .customize-now-button:active, .customize-now-button.pressed {
    transform: translateY(0.4rem);
}

.frame-modal-layover {
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1000;
    opacity: 0;
    display: none;
}

.frame-modal-layover.shown {
    z-index: 1000000;
    visibility: visible;
    opacity: 1;
    display: flex;
}

.frame-modal {
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.frame-modal h1 {
    text-align: center;
}

.frame-modal form {
    display: flex;
    justify-content: center;
}

.frame-button {
    text-align: center;
    max-width: 185px;
    font-size: 18px;
    margin: 0 10px;
}

.frame-button button {
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

.frame-button img {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.frame-modal .price {
    font-weight: 400;
}

.frame-disclaimer {
    font-size: 12px;
    text-align: center;
    margin-top: 12px;
    color: var(--mute);
    font-style: italic;
}

.frame-modal input[type=image] {
    width: 100%;
    height: auto;
}

#promo-code-section {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
}

#promo-code-section form {
    display: flex;
    gap: 12px;
    max-width: 420px;
    margin: 8px auto 0;
    align-items: stretch;
}

#promo-code-section button[type=submit] {
    padding: 3px 15px;
    background-color: var(--gold);
    color: var(--ink);
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.help-tip {
    text-align: center;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 15px;
    cursor: default;
    display: inline-block;
    vertical-align: 1px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--ink-400);
    box-sizing: border-box;
}

.help-tip:before {
    content:'?';
    font-weight: 600;
    color: var(--mute);
}

.help-tip:hover p {
    display: block;
    transform-origin: 100% 0%;
    animation: fadein 0.3s ease-in-out;
}

.help-tip p {
    display: none;
    text-align: left;
    padding: 15px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: var(--star);
    background: var(--ink-3);
    border: 1px solid var(--line);
    z-index: 30;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

.empty-warning {
    background-color: var(--gold-tint);
}

#zoom, #digital-modal {
    position: fixed;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition-property: z-index, visibility, transform, opacity;
    transition-duration: 0s, 0s, 0.25s, 0.25s;
    transition-delay: 0.5s, 0.5s, 0s, 0s;
}

#digital-modal {
    background-color: rgba(11, 16, 38, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#zoom.shown, #digital-modal.shown {
    z-index: 1000000;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0s, 0s, 0s, 0s;
}

#zoom-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    scrollbar-width: none;
}

#digital-modal-container h1 {
    margin: 0.67em 0;
}

#zoom {
    touch-action: none;
    background: rgba(8, 12, 30, .96);
}

#zoom-container > img {
    display: block;
    transform-origin: center center;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

#zoom.zoomed #zoom-container > img {
    cursor: grab;
}

#zoom-close-button, #digital-modal-close-button {
    background-image: url("../img/close-icon-hL167n-.svg");
    position: absolute;
    background-color: transparent;
    border: 0;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

#order-form-section.hidden {
    display: none;
}

#compliment span {
    flex: 1;
}

input[type=text], input[type=email], input[type=tel], select {
    padding: 5px !important;
    background: transparent !important;
    height: initial !important;
    line-height: initial !important;
}

#shipping-options {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
    cursor: pointer;
    background: transparent;
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#shipping-options .no-xmas {
    color: #FF9A90;
    font-weight: 400;
    display: none;
}

.selected .no-xmas {
    display: block !important;
}

#shipping-options .selected .checkbox {
    visibility: visible;
    filter: brightness(0) saturate(100%) invert(84%) sepia(37%) saturate(679%) hue-rotate(347deg) brightness(99%);
}

#shipping-options > li {
    position: relative;
}

#shipping-options .shipping-type {
    flex-grow: 0;
    flex-shrink: 0;
    text-align: left;
    font: 600 16px/1.3 var(--font-body);
}

#shipping-options .shipping-price {
    align-items: center;
    color: var(--gold-400);
    flex-grow: 0;
    flex-shrink: 0;
    text-align: right;
    font: 600 18px/1.2 var(--font-body);
    font-variant-numeric: tabular-nums;
}

#shipping-options-warning {
    display: none;
    border: none;
    border-radius: 10px;
    padding: 1em;
    background-color: var(--gold-tint);
    margin: 1em 0;
}

#shipping-options-warning.shown {
    display: block;
    background: var(--gold-soft);
    border: 1px solid var(--gold-800);
    border-radius: 8px;
    font-size: 14px;
    color: var(--star);
}

.consent-box {
    font-size: 0.8em;
    color: var(--mute);
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: var(--ink-2);
}

.consent-box.hidden {
    display: none;
}

.trustpilot {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    height: auto;
}

.digital-cross-sell-text {
    z-index: 0;
    position: relative;
    display: block;
}

.digital-cross-sell-text-payment {
    background: var(--ink-2);
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    display: block;
    max-width: 880px;
    box-sizing: border-box;
}

#digital-modal-link {
    cursor: pointer;
}

#digital-modal-content {
    display: flex;
    align-items: center;
}

#digital-modal-content > img {
    flex-grow: 0;
    height: auto;
}

#digital-modal-cta-button {
    width: 100%;
    padding: 0;
    cursor: pointer;
}

#digital-modal-cta-button:active {
    transform: translateY(2px);
    box-shadow: none;
}

#apple-pay-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: check-out;
    -apple-pay-button-style: black;
}

#apple-pay-button-section {
    display: none;
    margin-bottom: 0.5em;
}

#apple-pay-button-section small {
    font-size: 14px;
    text-align: center;
    display: block;
    margin-top: 0.5em;
}

#apple-pay-button-section.enabled {
    display: block;
}

#payment-options-section {
    display: none;
    margin-bottom: 1.5em;
}

#payment-options-section.shown {
    display: block;
}

#payment-options-section.disabled {
    opacity: 0.5;
    pointer-events: none;
}

#consent-box-warning {
    color: #FF9A90;
    margin-top: 0.5em;
    display: none;
}

#consent-box-warning.shown {
    display: block;
}

#submit-warning {
    color: #FF9A90;
    margin-top: 0.5em;
    display: none;
    text-align: center;
}

#submit-warning.shown {
    display: block;
}

#address-details {
    display: grid;
    align-content: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

/* Payment: the edit button sits in its own column, clear of the text */

#address-details > div {
    flex: 1;
    display: grid;
    flex-direction: column;
    margin: 0;
    position: relative;
    padding: 16px 24px;
    background: var(--ink-2-glass);
    border: 0;
    border-radius: 8px;
    column-gap: 16px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
}

#address-details > div:last-child {
    margin-right: 0;
}

#address-details > div > div:first-child {
    flex-grow: 1;
    flex-shrink: 0;
}

.state-hidden {
    display: none !important;
}

.cart-page-review {
    margin: 1.5rem 0;
}

.cart-page-review .stars {
    color: var(--gold);
}

.cart-page-review .profile {
    display: flex;
    align-items: center;
}

.cart-page-review .profile-photo img {
    border-radius: 50%;
    width: 2rem;
    height: auto;
}

.cart-page-review .profile-photo {
    margin-right: 1rem;
}

.cart-page-review .text {
    margin-top: 0.5rem;
}

.cart-page-review .review-provider {
    height: 24px;
    width: auto;
}

.cart-page-review .profile-text {
    flex: 1;
}

.cart-page-review-title {
    margin-top: 48px;
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    border-top: 1px solid var(--line);
    padding-top: 48px;
    font: 600 14px/1.2 var(--font-body);
    letter-spacing: .06em;
    color: var(--ink-100);
}

@media (min-width: 768px) {
    .cart-page-review {
        width: 750px;
        /* Owner review 2026-10-14 12:10: at 768px the 750px rows ran past the page's side padding, and
           the Trustpilot mark off-screen. */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--line);
    }

    .cart-page-review:last-child {
        border-bottom: none;
    }
}

@media only screen and (min-width : 1000px) {
    #zoom-close-button, #digital-modal-close-button {
        width: 35px;
        height: 35px;
        background-size: 35px 35px;
    }

    #digital-modal-close-button {
        top: -20px;
        right: -20px;
    }

    input[type=text], input[type=email], input[type=tel], select {
        border: 0 !important;
        border-bottom: 1px solid #BCBCBC !important;
    }

    label {
        padding: 5px;
    }

    #shipping-options .checkbox {
        margin-right: 20px;
    }

    #shipping-options .shipping-type {
        flex-basis: 150px;
    }

    #shipping-options .shipping-price {
        flex-basis: 100px;
    }

    #shipping-options .no-xmas {
        padding-left: 70px;
        padding-bottom: 20px;
        padding-right: 20px;
    }

    #digital-modal-container {
        width: 1000px;
        box-shadow: 0 2px 25px rgba(0, 0, 0, 0.50);
        position: relative;
        margin-right: 10px;
    }

    #digital-modal-container img {
        width: 500px;
    }

    #digital-modal-content {
        border-bottom: 1px solid var(--line);
    }

    #digital-modal-description {
        padding: 0 15px;
    }

    #digital-modal-cta-button {
        margin: 15px;
        width: calc(100% - 30px);
    }

    .frame-modal {
        max-width: 1260px;
    }

    .frame-button {
        flex: 1;
    }

    .close-frame-modal-section-mobile {
        display: none !important;
    }
}

@media only screen and (max-width : 999px) {

    .cart-item-images {
        width: calc(90vw - 2px);
    }

    .cart-item-image-small {
        width: 90vw;
    }

    .cart-item-image-small img {
        width: 90vw;
        height: auto;
    }

    .cart-item-image-left, .cart-item-image-right {
        width: 7vw;
    }

    #zoom-close-button, #digital-modal-close-button {
        top: 3vw;
        width: 8vw;
        height: 8vw;
        right: 3vw;
        background-size: 8vw 8vw;
    }

    input[type=text], input[type=email], input[type=tel], select {
        border: 0 !important;
        border-bottom: 2px solid var(--gold) !important;
        margin-top: 10px !important;
    }

    label {
        margin-top: 10px;
        padding-left: 5px;
    }

    #shipping-options .checkbox {
        margin-right: 1.7vw;
    }

    #shipping-options .no-xmas {
        padding-left: 6.3vw;
        padding-bottom: 1.7vw;
        padding-right: 1.7vw;
    }

    #digital-modal-container {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        overflow-y: scroll;
    }

    #digital-modal-content > img {
        width: 100%;
        border-bottom: 1px solid var(--line);
    }

    #digital-modal-content {
        flex-direction: column;
    }

    #digital-modal-description {
        flex: 1;
        padding: 0 3vw;
    }

    #digital-modal-cta-button {
        margin: 3vw;
        width: calc(100% - 6vw);
    }

    #digital-modal-close-button {
        position: fixed;
    }

    .help-tip p {
        position: absolute;
        left: 5vw;
        right: 5vw;
        width: initial;
    }

    .frame-modal {
        box-shadow: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;
        padding-bottom: 120px;
    }

    .frame-modal-layover.shown .frame-modal {
        -webkit-overflow-scrolling: touch;
    }

    .frame-modal form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .frame-button {
        margin: 10px 0;
        max-width: 85vw;
    }

    .close-frame-modal-section {
        display: none;
    }

    .close-frame-modal-section-mobile {
        z-index: 1000001;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--ink-2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
        display: none;
    }

    .close-frame-modal-section-mobile.shown {
        display: block;
    }

    .cart-subitem, .cart-item {
        align-items: stretch;
        flex-flow: row wrap;
    }

    .cart-subitem > div, .cart-item > div {
        flex: 1 100%;
        margin: 10px 0 0 0;
    }

    .cart-subitem-frame .cart-subitem-description, .cart-subitem-custom .cart-subitem-description, .cart-item-gift {
        flex: 1 auto !important;
    }

    .order-type-form fieldset div > label {
        flex: 1 100%;
    }

    .order-type-form fieldset > div > input {
        flex: 1 100%;
    }

    .order-type-form fieldset > div > ul {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .cart-item-image-left, .cart-item-image-right {
        width: 15vw;
    }

    #shipping-options .checkbox {
        margin-right: 3.57vw;
    }

    #shipping-options .no-xmas {
        padding-left: 12.9vw;
        padding-bottom: 3.57vw;
        padding-right: 3.57vw;
    }

    #address-details {
        flex-direction: column;
    }

    #address-details > div {
        flex-grow: 0;
    }

    .digital-cross-sell-text-payment {
        padding: 10px;
    }
}

.new2 .cart-subitem-description li {
    margin-bottom: 0.25em;
}

#benefits li a {
    color: var(--star);
    text-decoration: none;
    flex: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font: 600 16px var(--font-body);
    pointer-events: none;
    cursor: default;
}

#benefits li img {
    flex-grow: 0;
    width: 20px;
    margin-right: 10px;
    height: auto;
    display: none;
}

#benefits li .benefit-more {
    flex-basis: 100%;
    padding-left: 30px;
    margin: 10px 0;
    display: block;
}

#benefits li .benefit-more.shown {
    display: block;
}

#cart-reviews-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--ink-2);
    z-index: 1000000;
    display: none;
}

#cart-reviews-overlay.shown {
    display: block;
}

#cart-reviews {
    color: var(--star);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0vh;
    overflow-y: scroll;
}

#cart-reviews-close {
    position: absolute;
    left: 2.5vh;
    right: 2.5vh;
    bottom: 5vh;
    height: 5vh;
    display: block;
    background: var(--gold);
    color: var(--ink);
    border-radius: 1vh;
    line-height: 5vh;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    font-size: 2.2vh;
    padding: 0 4vh;
    margin-top: 2.5vh;
    text-shadow: none;
}

#cart-reviews-close:active {
    transform: translateY(0.8vh);
    box-shadow: none;
}

.cart-review {
    color: var(--star);
    font-size: 2vh;
    line-height: 3vh;
    font-weight: 300;
    padding: 4vw;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-2) 85%, var(--ink-2) 100%);
}

.cart-review-details {
    display: flex;
    margin-top: 4vw;
    align-items: flex-start;
}

.cart-review-photo {
    width: 10vw;
    height: 10vw;
    border-radius: 5vw;
    border-width: 0;
    overflow: hidden;
    margin-right: 2vw;
    flex-shrink: 1;
}

.cart-review-photo img {
    width: 100%;
    height: 100%;
}

.cart-review-source {
    font-size: 1.5vh;
    color: rgba(0,0,0,0.5);
}

.cart-review-name-and-source {
    flex-grow: 1;
}

.cart-review-stars {
    margin-left: 2vw;
    flex-shrink: 1;
}

.cart-review-stars img {
    width: 18vw;
    height: 3.08vw;
}

#scroll-up-hint {
    position: fixed;
    background: var(--gold);
    color: var(--ink);
    display: flex;
    text-transform: uppercase;
    text-decoration: none;
    top: 0;
    left: 0;
    right: 0;
    z-index:  999999;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transform: translateY(-18vw);
    transition: all 0.8s ease-in-out;
    letter-spacing: .06em;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    font: 600 14px var(--font-body);
    height: auto;
}

#scroll-up-hint.shown {
    transform: none;
}

@media (min-width: 1000px) {
    #cart-reviews-overlay {
        background: rgba(0, 0, 0, 0.5);
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #cart-reviews-overlay.shown {
        display: flex;
    }

    #cart-reviews {
        position: static;
        width: 750px;
        height: 80vh;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .cart-review {
        font-size: 20px;
        line-height: 30px;
        padding: 30px;
    }

    .cart-review-details {
        margin-top: 30px;
        font-size: 16px;
        line-height: 24px;
    }

    .cart-review-photo {
        width: 45px;
        height: 45px;
        border-radius: 23px;
        margin-right: 15px;
    }

    .cart-review-source {
        font-size: 15px;
    }

    .cart-review-stars {
        margin-left: 15px;
    }

    .cart-review-stars img {
        width: 100px;
        height: 17px;
    }

    #cart-reviews-close {
        position: static;
        width: 750px;
        border-radius: 10px;
        line-height: 50px;
        height: 50px;
        font-size: 22px;
        padding: 0 40px;
        margin-top: 25px;
        box-sizing: border-box;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 768px) {
    #scroll-up-hint {
        transform: translateY(-70px);
    }

    .secondary-actions form button[type="submit"] img {
        width: 14px;
        margin-right: 0.5rem;
    }
}

/* Checkout progress row (cart: step 1, payment: step 2) */
.obs-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 4px 0 0;
    text-transform: none;
    color: var(--ink-200);
    padding: 16px 0 4px;
    gap: 24px;
    font: 400 14px/1.2 var(--font-body);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.obs-progress__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.obs-progress__n {
    font: 300 20px/1 var(--font-body);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.obs-progress__step.is-active {
    color: var(--ink-100);
}

.obs-progress__rule {
    height: 1px;
    background: var(--ink-400);
    width: 40px;
}

.obs-progress__secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Each item's price: sans, gold, set apart from the serif title */
.cart-subitem-price {
    color: var(--gold-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font: 600 18px/1.2 var(--font-body);
}

.secondary-actions form input[type="submit"]:hover, .secondary-actions a:hover, .secondary-actions form button[type="submit"]:hover {
    border-color: var(--ink-400) !important;
}

/* Add Professional Framing: a gold ghost button, as drawn */
.add-frame-button, .change-frame-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px !important;
    background: transparent !important;
    color: var(--ink-100) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: 0 !important;
    font: 600 16px/1.2 var(--font-body) !important;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .15s ease;
    border: 1px solid var(--ink-400) !important;
}

.add-frame-button:active, .change-frame-button:active {
    transform: none;
}

.add-frame-button:hover, .change-frame-button:hover {
    background: transparent !important;
    border-color: var(--ink-100) !important;
}

/* Benefits: gold four-point stars as bullets */
.cart-subitem-description ul.cart-benefits,
.cart-benefits, #benefits {
    list-style: none;
    border: 0;
    flex-direction: column;
}
/* Benefits: condensed */
.cart-subitem-description ul.cart-benefits,
.cart-benefits {
    background: transparent !important;
    padding: 4px 0 0;
    margin: 16px 0 0;
    display: flex;
    gap: 4px;
}

/* Benefits: 14px secondary text, small white four-point stars */

.cart-benefits li, #benefits li {
    position: relative;
    color: var(--ink-200);
}

.cart-benefits li {
    padding-left: 24px;
    line-height: 1.4;
}

/* The guarantees in one panel, one per row under a hairline */

#benefits li {
    display: block;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 16px 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.cart-benefits li::before, #benefits li::before {
    position: absolute;
    left: 0;
    width: 11px;
    height: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 7.4 4.6 11.4 12 12-7.4.6-11.4 4.6-12 12-.6-7.4-4.6-11.4-12-12 7.4-.6 11.4-4.6 12-12z' fill='%23F0C66A'/%3E%3C/svg%3E") no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 7.4 4.6 11.4 12 12-7.4.6-11.4 4.6-12 12-.6-7.4-4.6-11.4-12-12 7.4-.6 11.4-4.6 12-12z' fill='%23EBECF5'/%3E%3C/svg%3E");
}

.cart-benefits li::before {
    content: "";
    top: 4px;
}

/* Payment: the guarantee panels drew two stars (li and link) */

#benefits li::before {
    top: 5px;
    content: none;
}

/* Shipping and total rows */
#shipping, #total, #discount, #expensive-shipping {
    border-color: var(--line) !important;
}

/* Summary rows: label left, amount right, one typeface */
#shipping, #discount, #total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
    font: 400 16px/1.4 var(--font-body);
    text-align: left;
}

.obs-sum__label {
    color: var(--mute);
}

.obs-sum__value {
    font-weight: 600;
    color: var(--star);
    font-variant-numeric: tabular-nums;
}

/* "2 items" under the total */
#total #expensive-shipping,
#shipping #expensive-shipping {
    flex-basis: 100%;
    margin: 0;
    text-align: right;
    font-size: 14px;
    color: var(--mute);
}

/* Address form: boxed inputs on dark */
#orderform input[type=text], #orderform input[type=email], #orderform input[type=tel], #orderform select {
    background: var(--ink) !important;
    color: var(--star);
    border: 1px solid var(--ink-500) !important;
    border-radius: 4px;
    min-height: 48px !important;
    padding: 0 16px !important;
    font: 400 16px var(--font-body);
    height: 48px !important;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
}

#orderform input[type=text]:hover, #orderform input[type=email]:hover, #orderform input[type=tel]:hover, #orderform select:hover {
    border-color: var(--ink-400) !important;
}

#orderform input.invalid, #orderform select.invalid {
    border-color: #FF9A90 !important;
}

#orderform select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50% !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
}

#cart-form-header,
#order-form-column h2 {
    letter-spacing: -.01em;
}

#order-form-column h2 {
    font: 500 30px/1.15 var(--font-display);
}

/* Shipping options: one bordered 56px row per option (the li), gold when selected; the list itself
   is unframed */
#shipping-options > li,
#shipping-options > li:last-child {
    background: transparent;
    color: var(--star);
    border: 1px solid var(--ink-500);
    border-radius: 4px;
}

#shipping-options > li:hover:not(.selected) {
    border-color: var(--ink-200);
}

#shipping-options .shipping-estimate {
    flex: 1;
    text-align: center;
    color: var(--ink-200);
    letter-spacing: 0;
    text-transform: none;
    font: 400 14px/1.3 var(--font-body);
    font-variant-numeric: tabular-nums;
}

#pay-now {
    min-height: 56px;
}

/* Frame chooser and modals */
.frame-modal,
#digital-modal-container {
    background: var(--ink-2) !important;
    color: var(--star);
    border: 0;
    border-radius: 8px;
}

.frame-modal h1,
#digital-modal-description h1 {
    font: 500 36px/1.1 var(--font-display);
}

.frame-button-details .price {
    color: var(--gold);
}

.consent-box label {
    line-height: 1.5;
}

.secondary-actions img,
.cart-item-actions img {
    filter: invert(1);
}

/* Payment page: the card that holds Stripe's embedded form (coloured to match its branding further down). */

#form-loading {
    color: var(--ink-200);
    margin: 8px 0 0 !important;
    padding: 40px 24px;
    background: var(--ink-800);
    border-radius: 8px 8px 0 0;
    font: 400 16px var(--font-body);
    box-shadow: 0 0 0 1px var(--ink-400);
}

#payment > h2,
#payment h2 {
    letter-spacing: -.01em;
}

#payment > h2 {
    font: 500 30px/1.15 var(--font-display);
}

#promo-code-section a {
    color: var(--gold);
}

section#cart, section#payment {
    box-sizing: border-box;
    width: auto;
    margin: 0 auto 64px;
    padding: 0 24px;
}

section#cart {
    max-width: 880px;
}

/* Title row: "Looks fantastic!" with a ghost Pay Now (it only scrolls to the form) */
#compliment {
    letter-spacing: -.01em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font: 500 clamp(36px, 4vw, 48px)/1.05 var(--font-display);
}

#compliment #pay-now {
    width: auto !important;
    min-width: 200px;
    min-height: 48px;
    line-height: 46px;
    padding: 0 24px;
    background: transparent;
    color: var(--star);
    border: 1px solid var(--ink-400);
    outline: 0;
    font-size: 16px;
    font-weight: 600;
}

#compliment #pay-now:hover {
    background: transparent;
    border-color: var(--star);
    color: var(--star);
}

/* Item card */
.cart-item, .cart-item.new2 {
    display: flex;
    flex-wrap: wrap;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}

.cart-item .cart-item-images {
    flex: 0 1 240px;
    min-width: 200px;
}

.cart-item .cart-item-image img {
    box-shadow: 0 0 0 1px var(--line-soft);
}

.cart-item .cart-subitems {
    flex: 1 1 340px;
    min-width: 0;
}

.cart-subitem-header h2,
.cart-subitem h2 {
    font: 600 30px/1.05 var(--font-display);
}

.cart-subitem-description ul:not(.cart-benefits):not(.no-bullet) li,
.cart-subitem-description ul.no-bullet li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Totals panel */
.obs-sum {
    margin-top: 24px;
    padding: 16px 24px 24px;
}

.obs-sum #shipping, .obs-sum #discount, .obs-sum #total {
    margin: 0;
    font-size: 16px;
}

.obs-sum #total {
    padding: 16px 0 0;
    border-bottom: 0;
    margin-top: 8px;
    border-top: 1px solid var(--ink-500);
}

.obs-sum .obs-sum__label {
    font-weight: 400;
    color: var(--ink-200);
}

.obs-sum .obs-sum__value--gold {
    font-weight: 600;
}

.obs-sum #total #expensive-shipping {
    margin-top: 4px;
}

/* Address card */

#cart-form-header {
    margin-bottom: 16px;
    font: 500 30px/1.05 var(--font-display);
}

.order-type-form fieldset > div > input,
.order-type-form fieldset > div > select,
.order-type-form fieldset > div > ul {
    grid-column: 2;
    width: 100%;
}

#shipping-options .checkbox {
    visibility: hidden;
    filter: invert(1);
    width: 18px;
    height: 18px;
}

.consent-box, .consent-box label {
    cursor: pointer;
}

.consent-box.needs-attention {
    border-color: #FF9A90;
    box-shadow: 0 0 0 1px #FF9A90;
}

.field-hint {
    grid-column: 2;
    color: var(--mute);
}

.cart-subitem-review-summary .help-tip {
    flex: none;
    padding-left: 0;
    margin-left: 6px;
    font-size: 14px;
    vertical-align: middle;
}

#orderform .consent-box label {
    font-size: 16px;
    font-weight: 600;
    color: var(--star);
}

#content-wrapper > section .consent-legal {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mute);
}

.consent-box input[type=checkbox] {
    width: 18px;
    height: 18px;
}

#cart-form-submit {
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    font: 600 18px/54px var(--font-body);
}

@media only screen and (max-width: 767px) {
    section#cart, section#payment {
        padding: 0 16px;
    }

    .cart-item .cart-item-images {
        flex: 1 1 100%;
    }

    #compliment #pay-now {
        width: 100% !important;
    }

    .order-type-form fieldset > div > label,
    .order-type-form fieldset > div > input,
    .order-type-form fieldset > div > select,
    .order-type-form fieldset > div > ul,
    .field-hint {
        grid-column: 1;
    }
}

/* Name left, price right, on one line */
.cart-subitem-header {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.01em;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    row-gap: 4px;
    display: flex !important;
}

.cart-subitem-header h2 {
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto !important;
}
@media only screen and (max-width: 767px) {
    .cart-item .cart-item-image img {
        max-height: 360px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 479px) {
    .obs-progress {
        flex-wrap: nowrap;
        gap: 16px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .obs-progress__secure {
        display: none;
    }
}

/* ============================================
   Payment page (designer spec payment-page-spec, 2026-10-08)
   ============================================ */

section#payment {
    max-width: 760px;
}

#payment p.stripe-width,
#payment .digital-cross-sell-text-payment {
    width: auto;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mute);
    margin: 0 0 24px;
}

#payment .obs-progress + p.stripe-width {
    margin-top: 24px;
}

/* Notices */
#payment .cart-promo,
.cart-promo {
    background: var(--gold-soft);
    font-size: 16px;
    line-height: 1.6;
}

#payment .cart-promo {
    border: 1px solid var(--gold-800);
    border-radius: 8px;
    padding: 16px 16px;
    color: var(--star);
    margin: 0 0 16px;
}

.cart-promo a {
    color: var(--star);
    text-decoration: underline;
}

/* Stripe: one white card from "Loading payment form..." until the form mounts */

#payment-form,
#payment-form:empty {
    background: var(--ink-800);
    border-radius: 8px;
    padding: 24px;
    margin: 8px 0 24px !important;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--ink-400);
}

#form-loading + #payment-form {
    margin-top: 0 !important;
    border-radius: 0 0 8px 8px;
    min-height: 240px;
    box-sizing: border-box;
}

#form-loading[style*="none"] + #payment-form {
    margin-top: 8px !important;
    border-radius: 8px;
    min-height: 0;
}

#checkoutform .button {
    width: 100%;
    min-height: 60px;
    line-height: 58px;
}

/* Promo code */

#promo-code-section a#promo-code-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 500 16px var(--font-body);
    color: var(--star);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#promo-code-section input[type=text] {
    flex: 1;
    background: var(--ink) !important;
    border: 1px solid var(--ink-500) !important;
    border-radius: 4px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--star);
    min-width: 0;
}

#promo-code-section input[type=submit], #promo-code-section button {
    border-radius: 4px;
    font-weight: 600;
    flex: 0 0 auto;
    line-height: 46px;
}

#promo-code-section button {
    padding: 0 24px;
    background: transparent;
    color: var(--star);
    border: 1px solid var(--ink-400);
}

#promo-code-section strong {
    color: var(--gold);
    font-weight: 600;
}

/* Guarantees */
#benefits {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: 0;
    margin: 32px 0;
    padding: 4px 24px;
    background: var(--ink-2-glass) !important;
    border-radius: 8px;
}

#benefits li a::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    transform: translateY(2px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 7.4 4.6 11.4 12 12-7.4.6-11.4 4.6-12 12-.6-7.4-4.6-11.4-12-12 7.4-.6 11.4-4.6 12-12z' fill='%23F0C66A'/%3E%3C/svg%3E") no-repeat center / contain;
}

#benefits .benefit-more {
    font: 400 14px/1.6 var(--font-body);
    color: var(--mute);
    margin-top: 8px;
}

#benefits .benefit-more a {
    display: inline;
    font: inherit;
    color: var(--gold);
    pointer-events: auto;
    cursor: pointer;
}

#benefits .benefit-more a::before {
    content: none;
}

/* The NASA logo stands in for the gold star */
#benefits li.benefit-nasa {
    position: relative;
}

#benefits li.benefit-nasa a::before {
    visibility: hidden;
}

#benefits li.benefit-nasa img {
    display: block;
    position: absolute;
    width: 22px;
    margin: 0;
    left: -4px;
    top: 17px;
}

#benefits .benefit-stars {
    color: var(--gold);
    letter-spacing: 1px;
    font-size: 13px;
    white-space: nowrap;
}

#benefits .benefit-review-breakdown {
    display: grid;
    grid-template-columns: max-content;
    gap: 2px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

#benefits .benefit-review-breakdown li {
    padding: 0;
    border: 0;
    font-size: 14px;
    color: var(--mute);
}

#benefits .benefit-review-breakdown li::before {
    content: none;
}

#benefits .benefit-review-breakdown span {
    display: inline-block;
    min-width: 88px;
    color: var(--star);
}

#benefits .benefit-review-breakdown em {
    font-style: normal;
    opacity: .7;
}

/* Items and totals */
#payment h2,
#payment .paragraph > h2 {
    font: 500 24px/1.15 var(--font-display);
    margin: 32px 0 12px;
}

#payment #cart-items .cart-item,
#cart-items .cart-item {
    padding: 16px;
    gap: 24px;
    margin-bottom: 16px;
}

#payment #cart-items .cart-item .cart-item-images,
#cart-items .cart-item .cart-item-images {
    flex: 0 0 120px;
    min-width: 0;
}

#cart-items .cart-subitem-header h2 {
    font: 600 24px/1.15 var(--font-display);
    margin: 0;
}

#cart-items .cart-subitem-price {
    font-size: 20px;
}

#cart-items .cart-subitem-old-price {
    font-size: 14px;
}

#shipping-and-total .obs-sum {
    margin-top: 16px;
}

/* Addresses */

#address-details h2 {
    font: 600 14px var(--font-body) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--star);
    margin: 0 0 8px !important;
}

#address-details p {
    font-size: 14px;
    color: var(--mute);
    margin: 0 0 12px;
}

#address-details #shipping_details > div,
#address-details #billing_details > div {
    font: 400 16px/1.6 var(--font-body);
    color: var(--star);
}

#address-details .address-actions {
    position: static;
    top: 14px;
    right: 14px;
}

#address-details .address-actions input[type="submit"],
#address-details .address-actions button,
#address-details .address-actions a {
    min-height: 36px !important;
    height: 36px;
    padding: 0 12px !important;
    font-size: 14px;
}

#payment p > em {
    font-size: 14px;
    color: var(--mute);
}

/* Scroll-up hint */

#scroll-up-hint::before {
    content: "\2191";
    margin-right: 8px;
    font-weight: 400;
}

/* ============================================
   Confirmation page (designer spec order-status-and-confirmation-spec)
   ============================================ */

.email-address-confirmed {
    color: var(--star);
}

#carbon-neutral.block {
    padding: 16px 16px;
    background: var(--ink-2-glass);
    border: 0;
    border-radius: 8px;
}

#carbon-neutral img {
    filter: grayscale(1) brightness(1.6);
}

#attribution-survey-overlay {
    background: rgba(8, 12, 30, .85);
}

#attribution-survey-modal {
    background: var(--ink-2) !important;
    color: var(--star);
    border: 0;
    border-radius: 8px;
}

#attribution-survey-modal h1 {
    font: 500 24px/1.15 var(--font-display);
    color: var(--star);
}

#attribution-survey-modal label,
#attribution-survey-modal button {
    min-height: 44px;
}

#attribution-survey-modal input[type=radio] {
    accent-color: var(--gold);
    width: 18px;
    height: 18px;
}
#payment .obs-progress {
    margin-bottom: 24px;
}

#promo-code-section .button,
#promo-code-section input[type=submit] {
    background: transparent !important;
    color: var(--star) !important;
    border: 1px solid var(--ink-400) !important;
    outline: 0 !important;
    padding: 0 24px;
    width: auto;
}

#promo-code-section .button {
    height: 48px;
    line-height: 46px;
}

/* Address panels: keep the corner "edit address" button clear of the text */
#address-details > div > div:first-child > h2,
#address-details > div > div:first-child > p {
    padding-right: 0;
}

/* "Trip Around the Sun" app promo (order status and confirmation) as a panel */
#tats-promo {
    background: var(--ink-2-glass) !important;
    border: 0 !important;
    border-radius: 8px;
    color: var(--star) !important;
}

#tats-promo .tats-promo-subtitle {
    color: var(--star) !important;
    letter-spacing: .06em;
}

#tats-promo h3 {
    font: 600 24px/1.2 var(--font-display) !important;
    color: var(--star) !important;
}

#tats-promo p {
    color: var(--mute) !important;
    font-size: 16px;
    line-height: 1.6;
}

#tats-promo strong {
    color: var(--star);
}

#tats-promo .tats-promo-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    background: transparent !important;
    color: var(--star) !important;
    border: 1px solid var(--ink-400);
    border-radius: 4px;
    font-weight: 600;
}

.large-action a,
#tats-promo .tats-promo-cta,
#promo-code-section a.button {
    text-decoration: none !important;
}

/* Compact item panels (confirmation, order status): a real 120px image column, no carousel arrows */
section:not(#cart):not(#payment) #cart-items .cart-item .cart-item-images {
    flex: 0 0 120px;
    width: 120px;
}

section:not(#cart):not(#payment) #cart-items .cart-item .cart-item-image-buttons {
    display: none;
}

section:not(#cart):not(#payment) #cart-items .cart-item .cart-item-image img {
    aspect-ratio: 321 / 411;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--ink-400);
}

@media only screen and (max-width: 767px) {
    #tats-promo,
    #tats-promo .tats-promo-content,
    #tats-promo .tats-promo-text {
        text-align: left !important;
    }

    #tats-promo .tats-promo-content {
        flex-direction: column;
        align-items: flex-start !important;
    }

    #tats-promo .tats-promo-icon img {
        width: 56px;
        height: 56px;
    }
}

/* One 1200px column for the progress row, the title row and the content, with the cart's own
   spacing rather than the content column's (main.css #content-wrapper > section and its h2 outrank
   section#cart and #compliment): the progress row's 16px, then 24px above the title. */
#content-wrapper > section#cart {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 0;
}

@media only screen and (min-width: 1000px) {
    #content-wrapper > section#cart:has(#shipping-and-total) {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 32px;
        align-items: start;
    }

    section#cart > * {
        grid-column: 1 / -1;
    }

    section#cart > #dynamic-container {
        display: block;
    }

    section#cart #cart-items,
    section#cart > #payment-form-start-to-scroll,
    section#cart > #payment-options-section,
    section#cart > #order-form-section {
        grid-column: 1;
    }

    section#cart #shipping-and-total {
        grid-column: 2;
        grid-row: span 4;
        align-self: stretch;
    }

    section#cart #shipping-and-total .obs-sum {
        position: static;
        top: 24px;
        margin-top: 16px;
    }
}

/* Panels: solid, borderless */
section#cart .cart-item, section#cart .cart-item.new2,
#order-form-column,
.obs-sum {
    background: var(--ink-800);
    border: 0;
    border-radius: 8px;
}

section#cart .cart-item, section#cart .cart-item.new2 {
    padding: 24px;
    margin-bottom: 24px;
}

/* The render cropped 321:411 with a hairline ring */
section#cart .cart-item .cart-item-images {
    flex: 0 1 240px;
    min-width: 200px;
}

/* Edit / Remove / Add another as text links */
section#cart .secondary-actions {
    gap: 24px;
}

section#cart .secondary-actions form input[type="submit"],
section#cart .secondary-actions a,
section#cart .secondary-actions form button[type="submit"] {
    min-height: 44px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-200) !important;
    font: 600 14px/1 var(--font-body) !important;
    text-transform: capitalize;
    text-decoration: underline !important;
    text-decoration-color: var(--ink-400) !important;
    text-underline-offset: 3px;
}

/* Title case is English only ("Ajouter Plus", "Neu Erstellen" are wrong); other languages keep the translation's own casing. */
html:not([lang="en"]) section#cart .secondary-actions form input[type="submit"],
html:not([lang="en"]) section#cart .secondary-actions a,
html:not([lang="en"]) section#cart .secondary-actions form button[type="submit"] {
    text-transform: none;
}

section#cart .secondary-actions form input[type="submit"]:hover,
section#cart .secondary-actions a:hover,
section#cart .secondary-actions form button[type="submit"]:hover {
    color: var(--ink-100) !important;
}

section#cart .secondary-actions img {
    display: none;
}

/* Totals panel: Shipping / Discount rows, a rule, the Total */

.obs-sum #shipping, .obs-sum #discount {
    padding: 8px 0;
    border-bottom: 0;
}

.obs-sum .obs-sum__value {
    color: var(--ink-100);
    font-weight: 600;
}

.obs-sum .obs-sum__value--gold {
    color: var(--gold-400);
}

#total .obs-sum__label,
.obs-sum #total .obs-sum__label {
    font: 600 14px/1.2 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-100);
}

#total .obs-sum__value,
.obs-sum #total .obs-sum__value {
    font: 600 30px/1.1 var(--font-body);
    color: var(--gold-400);
}

/* Address panel */

#orderform input[type=text], #orderform input[type=email], #orderform input[type=tel], #orderform select {
    border-color: var(--ink-500) !important;
}

#orderform input:focus, #orderform select:focus {
    outline: 2px solid var(--gold-400);
    outline-offset: 1px;
}

#orderform input[type=checkbox] {
    accent-color: var(--ink-100);
    width: 18px;
    height: 18px;
}

#orderform h2 {
    font: 500 24px/1.05 var(--font-display) !important;
    margin: 24px 0 16px !important;
}

#shipping-options > li.selected {
    background: var(--gold-soft);
    border-color: var(--gold-400);
}

#shipping-options .shipping-option {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    border: 0;
    background: transparent;
    min-height: 56px;
    padding: 12px 16px !important;
    gap: 16px;
    grid-template-columns: 24px 1fr auto auto;
    display: grid;
}

/* "Do you need it even faster?" stays directly under the options, as plain secondary text */
#order-form-column .digital-cross-sell-text {
    margin: 16px 0 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    color: var(--ink-200);
}

#order-form-column .digital-cross-sell-text a {
    color: var(--ink-100);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Empty cart: a hairline circle with a white star over the line, centred */
#cart-items > p:first-child:not(:has(~ .cart-item)) {
    display: block;
    max-width: 760px;
    margin: 64px auto 96px;
    font: 500 36px/1.1 var(--font-display);
    text-align: center;
    color: var(--ink-100);
}

#cart-items > p:first-child:not(:has(~ .cart-item))::before {
    content: "";
    width: 96px;
    height: 96px;
    border: 1px solid var(--ink-400);
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 7.4 4.6 11.4 12 12-7.4.6-11.4 4.6-12 12-.6-7.4-4.6-11.4-12-12 7.4-.6 11.4-4.6 12-12z' fill='%23EBECF5'/%3E%3C/svg%3E") no-repeat center / 32px 32px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 24px;
}

#cart-items > p:first-child:not(:has(~ .cart-item)) a {
    color: var(--ink-100);
    text-decoration: underline;
    text-decoration-color: var(--ink-400);
    text-underline-offset: 6px;
}

@media only screen and (max-width: 999px) {
    #shipping-and-total {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    #content-wrapper > section#cart {
        padding-left: 16px;
        padding-right: 16px;
    }

    section#cart .cart-item, section#cart .cart-item.new2 {
        padding: 16px;
    }

    .order-type-form fieldset > div {
        grid-template-columns: minmax(0, 1fr);
    }

    #total .obs-sum__value,
    .obs-sum #total .obs-sum__value {
        font-size: 30px;
    }

    #cart-items > p:first-child:not(:has(~ .cart-item)) {
        font-size: 30px;
    }
}

/* Item images: each slide fills a 321:411 box, so the render is cropped to the poster, not to the
   wall beside it. */
#cart-items .cart-item .cart-item-images {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--ink-400);
    align-self: flex-start;
}

#cart-items .cart-item .cart-item-image-list {
    height: 100%;
}

#cart-items .cart-item .cart-item-image {
    width: 100%;
    height: 100%;
}

#cart-items .cart-item .cart-item-image img,
section#cart .cart-item .cart-item-image img,
section:not(#cart) #cart-items .cart-item .cart-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

/* The spec list without the black dash bullets, and tighter */
.cart-subitem-description ul:not(.cart-benefits):not(.no-bullet) {
    list-style: none;
    padding-left: 0;
}

/* Frame chooser: one Cancel on phones (A hides .close-frame-modal-section, but the markup has an id) */
@media only screen and (max-width: 999px) {
    #close-frame-modal-section {
        display: none;
    }
}

/* Payment: promo form aligned, a gap before the rule under it */

#promo-code-section input[type=text],
#promo-code-section input[type=submit],
#promo-code-section button {
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
}

/* Payment in two columns from 1000px (designer spec, owner review 2026-10-08): the form on the
   left, items, totals and the address cards on the right. Not sticky: the stacked right column is
   taller than most viewports. */
@media only screen and (min-width: 1000px) {
    #content-wrapper > section#payment:has(> .obs-pay-aside) {
        max-width: 1200px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        column-gap: 32px;
        align-items: start;
    }

    section#payment:has(> .obs-pay-aside) > * {
        grid-column: 1;
    }

    section#payment:has(> .obs-pay-aside) > .obs-progress {
        grid-column: 1 / -1;
    }

    section#payment > .obs-pay-aside {
        grid-column: 2;
        grid-row: 2 / span 40;
    }

    section#payment > .obs-pay-aside > .paragraph:first-child > h2 {
        margin-top: 0;
    }

    section#payment > .obs-pay-aside #address-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The personalised sky sentence in the quote role: noticed, not shouted */
#payment #star-map-comment-text {
    display: flex;
    gap: 12px;
    max-width: none;
    margin: 0 0 24px;
    padding: 16px 0;
    border-top: 1px solid var(--ink-500);
    border-bottom: 1px solid var(--ink-500);
    font: italic 500 24px/1.3 var(--font-display);
    color: var(--ink-100);
}

#payment #star-map-comment-text:empty {
    display: none;
}

#payment #star-map-comment-text::before {
    content: "";
    flex: 0 0 14px;
    height: 14px;
    margin-top: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 7.4 4.6 11.4 12 12-7.4.6-11.4 4.6-12 12-.6-7.4-4.6-11.4-12-12 7.4-.6 11.4-4.6 12-12z' fill='%23EBECF5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* promo.js opens the form with an inline display:block; keep the row a flex row */
#promo-code-section form[style*="block"] {
    display: flex !important;
}

#promo-code-section form input[type=text],
#promo-code-section form button {
    margin: 0 !important;
    vertical-align: top;
}

/* The payment methods Stripe offers in the shipping country (StripePaymentMethods, filled in by the
   page's script); the line keeps its height while it loads. */
#order-form-column p.obs-wallets {
    min-height: 19px;
    margin: 12px 0 0;
    font: 400 12px/1.6 var(--font-body);
    text-wrap: balance;
    color: var(--ink-200);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* The photo credit: a small caption on a scrim */

#cart-items .cart-item .cart-image-illusration {
    padding: 24px 12px 8px;
    background: linear-gradient(0deg, rgba(11, 16, 38, .8), rgba(11, 16, 38, 0));
    font: 600 12px/1.3 var(--font-body);
    letter-spacing: .02em;
    color: var(--ink-100);
    text-shadow: none;
    opacity: 1;
}

/* The item title larger from tablet up */
@media only screen and (min-width: 768px) {
    section#cart #cart-items .cart-subitem-header h2 {
        font-size: 30px;
    }
}

/* Desktop cart in one column: the totals under the items, as on tablet, instead of a 320px side
   column that leaves most of its height empty */
@media only screen and (min-width: 1000px) {
    #content-wrapper > section#cart,
    #content-wrapper > section#cart:has(#shipping-and-total) {
        display: block;
        max-width: 960px;
    }
}

/* Address cards: the edit button's top on the heading's first line */
#address-details h2 {
    line-height: 20px !important;
}

#address-details .address-actions,
#address-details .address-actions form,
#address-details .address-actions input[type="submit"] {
    margin: 0 !important;
}

/* Several photos: dots under the image (owner decision). The box lets the
   dots hang below it; the scrolling list keeps the corner rounding. */
section:is(#cart, #payment) #cart-items .cart-item .cart-item-images {
    overflow: visible;
    box-shadow: none;
}

section:is(#cart, #payment) #cart-items .cart-item .cart-item-image-list {
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--ink-400);
}

section:is(#cart, #payment) #cart-items .cart-item .cart-item-images:has(.obs-dots :is(button, .obs-dots-count)) {
    margin-bottom: 32px;
}

section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-buttons {
    display: none;
}

.obs-dots {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.obs-dots:empty,
section:not(#cart):not(#payment) .obs-dots {
    display: none;
}

.obs-dots button {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 -4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.obs-dots button::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-400);
    transition: background-color .2s;
}

.obs-dots button.active::after {
    background: var(--gold-400);
}

/* More than five photos: "3 / 21" in the dots' place, as tall as a row of dots */
.obs-dots-count {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .04em;
    color: var(--ink-200);
    font-variant-numeric: tabular-nums;
}

/* The photo on screen, bold gold like the active dot */
.obs-dots-current {
    font-weight: 700;
    color: var(--gold-400);
}

/* Below 1000px the image stacks over the details at the card's full width */
@media only screen and (max-width: 999px) {
    section#cart .cart-item, section#cart .cart-item.new2 {
        flex-direction: column;
    }

    section#cart .cart-item .cart-item-images,
    section#cart #cart-items .cart-item .cart-item-images {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* Desktop: a 360px image beside the details */
@media only screen and (min-width: 1000px) {
    section#cart .cart-item .cart-item-images,
    section#cart #cart-items .cart-item .cart-item-images {
        flex: 0 0 360px;
        width: 360px;
    }
}

/* Beside the image, the title's capitals start level with the image's top edge */
@media only screen and (min-width: 1000px) {
    @supports (text-box: trim-both cap alphabetic) {
        section#cart #cart-items .cart-subitem-header h2,
        section#cart #cart-items .cart-subitem-header .cart-subitem-price {
            text-box: trim-start cap alphabetic;
        }
    }

    @supports not (text-box: trim-both cap alphabetic) {
        section#cart #cart-items .cart-subitem-header {
            margin-top: -6px;
        }
    }
}

#benefits li + li {
    border-top: 1px solid var(--ink-500);
}

/* The address form clear of the totals above it, its title without the extra top space */
section#cart #order-form-section,
section#cart > #order-form-section {
    margin-top: 24px;
}

#order-form-column > h2:first-child,
#order-form-column > h2.track-element-view {
    margin-top: 0 !important;
}

/* Mouse and trackpad (owner review 2026-10-09): no swipe, so the arrows come back beside the dots,
   as round ink buttons over the photo's edges. Touch keeps dots only. */
@media (hover: hover) and (pointer: fine) {
    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-buttons {
        display: block;
    }

    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-left,
    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-right {
        top: 50%;
        bottom: auto;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        border: 1px solid var(--ink-400);
        border-radius: 50%;
        background-color: rgba(11, 16, 38, .8);
        background-size: 16px 16px;
        transition: opacity .25s, background-color .15s, border-color .15s;
    }

    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-left {
        left: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23EBECF5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-right {
        right: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3 5 5-5 5' fill='none' stroke='%23EBECF5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-left:hover,
    section:is(#cart, #payment) #cart-items .cart-item:has(.obs-dots) .cart-item-image-right:hover {
        background-color: var(--ink-900);
        border-color: var(--gold-400);
    }
}

/* Small phones (owner review 2026-10-09): Stripe pads its own form, so the light card adds none
   and the form gets the full width inside the page gutter. */
@media (max-width: 599px) {
    #payment-form,
    #payment-form:empty {
        padding: 8px 0;
    }
}

/* Stripe-address test: the embedded Checkout Form (ui_mode 'form') sits straight on the page on phones,
   with no card around it; its fields carry their own borders (owner review 2026-10-13). */
@media (max-width: 599px) {
    #payment-form.checkout-form-mode {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
}

/* Zoom (owner review 2026-10-09): a centred flex item wider than the screen overflows to the left out of
   scroll reach, so centerZoom() pushed the poster off centre. Auto margins centre it only when it fits,
   and the container pans (touch, trackpad) without showing scrollbars. */

#zoom-container::-webkit-scrollbar {
    display: none;
}

/* Payment (owner review 2026-10-09 11:15): the item's photos at size with their dots, as on the
   cart, over the details at the card's full width: the right column on desktop, the page on phones.
   From 600 to 999px a 320px square beside the details, so they share the first screen (designer,
   pay-gallery-tablet). */
section#payment #cart-items .cart-item .cart-item-images {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
}

@media only screen and (min-width: 600px) and (max-width: 999px) {
    section#payment #cart-items .cart-item {
        flex-wrap: nowrap;
    }

    section#payment #cart-items .cart-item .cart-item-images {
        flex: 0 0 320px;
        width: 320px;
    }

    section#payment #cart-items .cart-item .cart-subitems {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Near 600px the details column is under 200px: the details and the button shrink into it */
    section#payment #cart-items .cart-subitem-description,
    section#payment #cart-items .cart-item-actions form {
        min-width: 0;
        flex-shrink: 1;
    }

    section#payment #cart-items .cart-item-actions input[type="submit"] {
        height: auto;
        min-height: 44px;
        padding: 8px;
        white-space: normal;
        line-height: 1.3;
    }

    @supports (text-box: trim-both cap alphabetic) {
        section#payment #cart-items .cart-subitem-header h2,
        section#payment #cart-items .cart-subitem-header .cart-subitem-price {
            text-box: trim-start cap alphabetic;
        }
    }

    @supports not (text-box: trim-both cap alphabetic) {
        section#payment #cart-items .cart-subitem-header {
            margin-top: -6px;
        }
    }
}

/* Cart (owner review 2026-10-09 13:55): from 600 to 999px the payment page's item layout, a 320px
   image beside the details, instead of the photo at the card's full width */
@media only screen and (min-width: 600px) and (max-width: 999px) {
    section#cart .cart-item, section#cart .cart-item.new2 {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    section#cart .cart-item .cart-item-images,
    section#cart #cart-items .cart-item .cart-item-images {
        flex: 0 0 320px;
        width: 320px;
        margin: 0;
    }

    section#cart #cart-items .cart-item .cart-subitems {
        flex: 1 1 0;
        min-width: 0;
    }

    section#cart #cart-items .cart-subitem-description {
        min-width: 0;
    }

    section#cart #cart-items .cart-item-actions {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    @supports (text-box: trim-both cap alphabetic) {
        section#cart #cart-items .cart-subitem-header h2,
        section#cart #cart-items .cart-subitem-header .cart-subitem-price {
            text-box: trim-start cap alphabetic;
        }
    }
}

/* Owner review 2026-10-09 14:25: the digital upsell's "Convert to digital" as the gold button */
#digital-modal #digital-modal-cta-button,
#digital-modal-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 56px;
    background: var(--gold);
    color: var(--ink);
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    font: 600 16px/1 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}

#digital-modal-cta-button:hover {
    background: var(--gold-hover);
}

/* ---- Zoom overlay: same look as the landing page lightbox ---- */

#zoom #zoom-container {
    background: transparent;
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
}

#zoom #zoom-container > img {
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 85vh;
    margin: 0;
    object-fit: contain;
}

#zoom #zoom-close-button {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
    transition: background 0.2s ease;
}

#zoom #zoom-close-button:hover,
#zoom #zoom-close-button:active {
    background: rgba(255, 255, 255, 0.2);
}

#zoom #zoom-close-button::before,
#zoom #zoom-close-button::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 12px;
    width: 20px;
    height: 2px;
    background: #fff;
}

#zoom #zoom-close-button::before {
    transform: rotate(45deg);
}

#zoom #zoom-close-button::after {
    transform: rotate(-45deg);
}

/* Stripe-address test: an address the printers can't take holds back Pay until it's fixed. */
#stripe-address-message div + div {
    margin-top: .4em;
}

/* Stripe-address test: Stripe's form shows no country field, so the page names it. */
#payment p.stripe-shipping-country {
    /* The spacing the owner approved (review 2026-10-13) */
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--star);
}

#payment p.stripe-shipping-country span {
    color: var(--mute);
    margin: 0 .35em;
}

#payment p.stripe-shipping-country a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Stripe's form loading (both sides of the stripe-address test, owner review 2026-10-13): a gold
   spinner above the text instead of a bare line, in a strip tall enough to read as the form's place. */

#form-loading .form-loading-spinner {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    border: 3px solid var(--ink-500);
    border-top-color: var(--gold-400);
    border-radius: 50%;
    box-sizing: border-box;
    animation: form-loading-spin .8s linear infinite;
}

@keyframes form-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #form-loading .form-loading-spinner {
        animation-duration: 2.4s;
    }
}

/* "Do you need it even faster?" (stripe-address B only): from tablets up the text no longer runs into
   the box's edges (owner review 2026-10-13). */
@media (min-width: 768px) {
    #payment .digital-cross-sell-text-payment {
        padding: 16px 24px;
    }
}

/* Until Stripe mounts its form, the loading strip is the whole card: the still-empty #payment-form below it
   drew a second, empty box on B, where the hidden #stripe-address-message breaks the "#form-loading + #payment-form"
   join (owner review 2026-10-13). The JS hides #form-loading right after mounting, which brings the card back. */
#form-loading:not([style*="none"]) {
    border-radius: 8px;
}

#form-loading:not([style*="none"]) ~ #payment-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    margin-top: 0 !important;
}

#content-wrapper > section#cart > #compliment {
    margin-top: 24px;
}

/* Owner review 2026-10-14 00:20: the frame line ("+ Professional Framing", or "- No frame" on the US
   price test's B side) sat flush against the benefits list above it. */
.cart-subitem-frame {
    margin-top: 24px;
}