/* designer.observatory.css - Observatory reskin (A/B variant B) fork of designer.css.
 * Loaded instead of designer.css, never together with it. Tokens and fonts: observatory/base.css.
 * The original file is unchanged above the Observatory section at the end, which restyles colour,
 * type and borders only; layout and the step-sliding mechanics stay as they are. */

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

input[type=text],
input[type=email],
input[type=submit],
input[type=button],
input[type=number],
textarea,
select,
button {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    min-width: 0
}

select {
    -moz-appearance:none;
}

textarea {
    resize: none;
}

input[type=submit] {
    -webkit-border-radius: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

#preview button, #zoom-close-button, #preview .cart-indicator-icon {
    background-color: transparent;
    border: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
}

#preview .cart-indicator-icon {
    text-decoration: none;
}

.cart-indicator-icon-item-count {
    font-weight: bold;
    text-align: center;
    background: #f76916;
    color: white;
    overflow: hidden;
}

#zoom-close-button {
    background-image: url("../img/close-icon-hL167n-.svg");
}


#preview-loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(235, 235, 235, 0.5);
    background-image: url("../img/loading-spinner-V3uQolX.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#preview.loading #preview-loading {
    display: block;
}

#preview-loading-long {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

/* Delayed fade-in so instant cache-hit loads don't flash the badge */
#preview.loading #preview-loading-long {
    display: flex;
    opacity: 0;
    animation: fade-in 0.2s ease-in 0.3s forwards;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

#preview-loading-long > * {
    background: black;
    border-radius: 5px;
    color: white;
    text-transform: uppercase;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Shown when the preview render failed even after the automatic retry */
#preview-failed {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(235, 235, 235, 0.6);
}

#preview.failed #preview-failed {
    display: flex;
}

#preview-failed > div {
    background: black;
    border-radius: 5px;
    color: white;
    text-align: center;
}

#preview-failed p {
    margin: 0 0 0.8em 0;
}

/* Undo the icon-button styling every other #preview button gets */
#preview #preview-retry-button {
    position: static;
    width: auto;
    height: auto;
    background: white;
    color: black;
    border-radius: 5px;
    font: inherit;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

#cart-wait-note {
    display: none;
    text-align: center;
}

#cart-wait-note.shown {
    display: block;
}

#zoom, #lead-email, #custom-photo-align-overlay {
    background-color: rgba(235, 235, 235, 0.5);
    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;
}

#zoom.shown, #lead-email.shown, #custom-photo-align-overlay.shown {
    z-index: 1000;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#lead-email {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lead-email-container h1 {
    font-weight: 400;
}

#zoom {
    touch-action: none;
}

#zoom-container > img {
    height: 100%;
    width: auto;
    max-width: 1000000%;
    max-height: 100%;
    margin: 0 -100%;
    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;
}

#custom-photo-align-loading {
    display: none;
}

#custom-photo-align-overlay.loading #custom-photo-align-loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    line-height: 100vh;
    text-align: center;
    text-shadow: 1px 1px 0 white;
}

#custom-photo-align-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#custom-photo-align-container > img {
    width: 500px;
    height: auto;
}

#custom-photo-align-container cropper-canvas {
    height: 100%;
}

#custom-photo-align-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

#custom-photo-align-ok-button, #custom-photo-align-cancel-button {
    text-transform: uppercase;
    border-radius: 10px;
    width: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
    flex: 1;
}

#custom-photo-align-ok-button:active, #custom-photo-align-cancel-button:active {
    transform: translateY(2px);
    box-shadow: none;
}

#custom-photo-align-cancel-button {
    background: white;
    color: #CF0000;
}

#custom-photo-align-ok-button {
    background: #00478F;
    color: white;
}

#control-panel #menu {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    border-bottom: 1px solid #cacaca;
}

#control-panel #menu > li {
    flex: 1 1 auto;
    text-align: center;
    cursor: pointer;
}

#control-panel #menu > li:hover:not(.selected) {
    background: #eaeaea;
}

#control-panel #menu li.selected {
    background: #00478F;
    color: white;
    font-weight: 500;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

#panels {
    overflow: hidden;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    position: relative;
    transition: margin-left 0.5s;
}

#panels > li {
    position: absolute;
    top: 0;
    bottom: 0;
}

#panels > li:nth-child(1) {
    left: 0;
}

#panels > li > form {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.help {
    color: #8D8D8D;
}

.help span {
    color: #00478F;
}

#text-form.help-hidden .help, #size-form.top-help-hidden .top-help {
    display: none;
}

.cta button, #lead-email-container input[type=submit] {
    background: #00478F;
    color: white;
    text-transform: uppercase;
    border-radius: 10px;
    width: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
}

.cta button:active, #lead-email-container input[type=submit]:active {
    transform: translateY(2px);
    box-shadow: none;
}

.cta button:hover {
    background: #0259b0;
    animation: none;
}

.input-group {
    display: flex;
}

.input-group > * {
    flex: 1;
}

.input-group > *:last-child {
    margin-right: 0;
}

.input-group input[type=text], .input-group input[type=number], .input-group select {
    border: 0;
    border-bottom: 2px solid #00478F;
    padding: 5px;
    background: transparent;
}

::placeholder {
    color: #BCBCBC;
}

.input-group .right-aligned {
    text-align: right;
}

.input-group .size-2 {
    flex: 2;
}

.input-group .size-3 {
    flex: 3.5;
}

#size-selector, #size-selector {
    position: relative;
}

#title, #title-pre {
    text-transform: uppercase;
}

#day {
    margin-right: 20px;
}

#add-time {
    white-space: nowrap;
    flex-basis: content;
    flex-shrink: 0;
    flex-grow: 0;
}

#add-time.time-selected {
    color: #00478F;
}

#sizes {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #cacaca;
    border-radius: 10px;
    cursor: pointer;
    background: white;
    overflow: hidden;
}

#sizes > li {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

#sizes > li:hover:not(.selected) {
    background-color: #f6f6f6;
}

#sizes > li .checkbox {
    display: block;
    visibility: hidden;
}

#sizes > li.selected {
    background-color: #e5e5e5;
}

#sizes > li.selected .checkbox {
    visibility: visible;
}

#size-selector-container .help {
    text-align: center;
    margin-bottom: 0;
}

#sizes > li {
    border-bottom: 1px solid #cacaca;
}

#sizes > li:last-child {
    border-bottom: none;
}

#size-selector .size-description {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

#size-selector .size-details {
    flex: 1;
    text-align: center;
    letter-spacing: initial;
}

#size-selector .size-price {
    color: #00478F;
    text-align: right;
    flex-shrink: 0;
}

#sizes > li {
    align-items: flex-start;
}

.size-price-old {
    color: #adadad;
    font-weight: 400;
    text-decoration: line-through;
}

#size-selector .free-upgrade-badge {
    background-color: #2e7d32;
    color: #fff;
    font-size: 2.5vw;
    font-weight: 700;
    padding: 0.3vw 1.5vw;
    border-radius: 0.5vw;
    margin-top: 0.5vw;
    display: block;
    text-align: center;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    #size-selector .free-upgrade-badge {
        font-size: 10px;
        padding: 1px 4px;
        border-radius: 2px;
        margin-top: 2px;
    }
}

form.loading {
    pointer-events: none;
}

form.loading .cta button, #lead-email form.loading input[type=submit] {
    font-size: 0;
    background-color: #BCBCBC;
    background-image: url("../img/loading-spinner-V3uQolX.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8.04vw 8.04vw;
}

form.disabled button[type=submit], form.preview-failed button[type=submit] {
    background-color: #BCBCBC;
    transition: background-color 0.5s;
}

#styles {
    align-items: center;
    flex: 1;
    position: relative;
}

#styles-fade-end, #styles-fade-start {
    display: block;
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}

#styles-fade-end.visible, #styles-fade-start.visible {
    opacity: 1;
}

#style-list {
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
}

.style, #style-custom {
    display: inline-block;
    position: relative;
    border: 1px solid #cacaca;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.75s;
    aspect-ratio: 160/225;
}

.style img {
    display: block;
    object-fit: cover;
    object-position: center center;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    position: absolute;
}

.custom-style {
    display: inline-block;
    position: relative;
    border: 1px solid #cacaca;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.75s;
}

.custom-style img {
    width: 105%;
    height: auto;
    margin: -2px;
    width: calc(100% + 4px);
}

.style.selected, .custom-style.selected {
    border: 3px solid #f76916;
}

.style:hover:not(.selected), #style-custom:hover:not(.selected), .style:hover:not(.selected), .custom-style:hover:not(.selected) {
    border: 1px solid black;
}

.style-limited-edition {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: #000000b8;
    color: white;
    border-radius: 0 0 10px 10px;
    text-align: center;
}

#style-custom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#style-custom img {
    height: auto;
    width: 30%;
}

#style-custom span {
    display: block;
    text-align: center;
}

#custom-photo-panel, #select-time-panel, #select-time-panel-exact {
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: -1;
    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;
    pointer-events: none;
}

#custom-photo-panel.shown,
#select-time-panel.shown,
#select-time-panel-exact.shown {
    z-index: 100;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0s, 0s, 0s, 0s;
    pointer-events: initial;
}

#custom-photo-panel-ui,
#select-time-panel-ui,
#select-time-panel-exact-ui {
    flex: 1;
    display: flex;
    align-items: center;
}

#select-time-panel-ui, #select-time-panel-exact-ui {
    flex-direction: column;
}

#custom-photo-panel-ui > div {
    flex: 1;
}

#custom-styles {
    flex-flow: row wrap;
    align-items: center;
    margin-right: -10px;
    margin-left: 5px;
    display: none;
}

#custom-photo-panel.photo-selected #custom-styles {
    display: flex;
}

#custom-photo-panel.photo-selected #custom-photo-choose-text-1 {
    display: none;
}
#custom-photo-panel.photo-selected #custom-photo-choose-text-2 {
    display: initial;
}
#custom-photo-choose-text-2 {
    display: none;
}

#custom-photo-align {
    display: none;
}

#custom-photo-panel.photo-selected #custom-photo-align {
    display: initial;
}

#custom-photo-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#custom-photo-panel button,
#select-time-panel button,
#select-time-panel-exact button,
#add-time {
    border: 1px solid #cacaca;
    cursor: pointer;
    border-radius: 10px;
    background: white;
    font-weight: 500;
    color: black;
}

#select-time-panel button.with-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

#select-time-panel button.with-icon img {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
}

#select-time-buttons,
#select-time-exact-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
    margin-top: 3vw;
}

#select-time-exact-buttons {
    justify-content: center;
    align-content: center;
    align-items: center;
}

#select-time-buttons-bottom,
#select-time-exact-buttons-bottom {
    flex-basis: content;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
}

#select-time-button-exact {
    flex-basis: 100%;
    flex-shrink: 0;
}

#custom-photo-panel button#custom-photo-cancel,
#select-time-panel button#select-time-button-cancel,
#select-time-panel-exact button#select-time-exact-button-cancel {
    color: #CF0000;
}

#select-time-buttons-bottom, #select-time-exact-buttons-bottom {
    display: flex;
    width: 100%;
}

#select-time-buttons-bottom button {
    flex-basis: 100%;
}

#select-time-button-remove {
    display: none;
}

#select-time-panel.time-selected #select-time-button-remove {
    display: initial;
}

#select-time-panel.time-selected #select-time-buttons-bottom button {
    flex-basis: initial;
}

#select-time-panel-exact-ui input[type=time] {
    border: 1px solid #cacaca;
    border-radius: 10px;
    height: 11vw;
    line-height: 11vw;
    /* auto: 12-hour locales render "01:06 PM", which overflows any fixed width sized
       for "13:06" - let the browser use the format's intrinsic width instead. */
    width: auto;
    min-width: 45vw;
    padding: 0 3vw;
    text-align: center;
    font-size: 7vw;
}

.help-price {
    color: #00478F;
    font-weight: 500;
    float: right;
    font-size: 1.1em;
}

.help-price-old {
    color: #adadad !important;
    font-weight: 400;
    text-decoration: line-through;
}

#custom-image-price-warning, #free-shipping-warning, #promo-warning {
    display: none;
}

#custom-image-price-warning.shown, #free-shipping-warning.shown, #promo-warning.shown {
    display: block;
}

#promo-warning.help span {
    font-weight: 700;
    color: #3C1E95;
}

#custom-photo-panel.loading #custom-photo-buttons, #custom-photo-panel.loading #custom-styles {
    display: none;
}

#custom-photo-panel.loading #custom-photo-upload-progress {
    display: flex;
}

#custom-photo-upload-progress {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#custom-photo-upload-try-again, #custom-photo-upload-progress-error {
    display: none;
}

#custom-photo-upload-progress-error {
    color: #CF0000;
    text-align: center;
}

#custom-photo-panel.loading-error #custom-photo-upload-try-again,
#custom-photo-panel.loading-error #custom-photo-upload-progress-error {
    display: initial;
}

#custom-photo-panel.loading-error #custom-photo-upload-progress-text {
    display: none;
}

#custom-photo-panel.loading-error progress::-moz-progress-bar {
    background: #CF0000;
}

#custom-photo-panel.loading-error progress::-webkit-progress-value {
    background: #CF0000;
}

#custom-photo-panel.loading-error progress {
    color: #CF0000;
}

.expandingArea > textarea,
.expandingArea > pre {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
}

.expandingArea {
    position: relative;
    border-bottom: 2px solid #00478F;
}

.expandingArea > textarea,
.expandingArea > pre {
    line-height: 26px;
    padding: 5px;
    border: 0;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.expandingArea > textarea {
    width: 100%;
    height: 28px;
}

.expandingArea.active > textarea {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: transparent;
}

.expandingArea > pre {
    display: none;
}
.expandingArea.active > pre {
    display: block;
    visibility: hidden;
}

#wrapper {
    transition : filter 200ms linear
}

#wrapper.blurred {
    filter: blur(10px);
}

#lead-email {
    background-color: rgba(255, 255, 255, 0.75);
}

#lead-email-container label {
    display: none;
}

#lead-email-container input[type=text], #lead-email-container input[type=email], #lead-email-container select {
    border: 0;
    border-bottom: 2px solid #00478F;
    width: 350px;
    height: 45px;
    background: rgba(255,255,255,0.25);
    padding: 5px 20px;
    box-sizing: border-box;
}

#lead-email-container input[type=text] {
    margin-bottom: 10px;
}

#lead-email-container input[type=text]::placeholder, #lead-email-container input[type=email]::placeholder {
    color: #000;
}

#lead-email-container form {
    margin: 25px 0;
}

#lead-email-container input[type=submit] {
    width: 250px;
    height: 45px;
    margin-top: 25px;
}

#lead-email-container button {
    text-decoration: underline;
    color: #aaa;
    margin: 25px 0;
    background: transparent;
    border: 0;
}

#designer-more-links {
    position: absolute;
    left: 0;
    right: 0;
}

#designer-more-links a {
    text-decoration: underline;
    color: #aaa;
}

#main-preview.error {
    visibility: hidden;
}

.pac-item {
    padding: 5px;
    margin-left: 5px;
}

.pac-icon {
    display: none;
}

input:focus, select:focus {
    outline: none;
}

@media (max-width: 767px) {

    input, body, textarea, button, select, .expandingArea > pre, .pac-item-query {
        font-weight: 400;
        font-size: 3.93vw;
        letter-spacing: 0.27vw;
        font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }

    body, html, #wrapper {
        height: 100%;
    }

    html {
        overflow: auto;
    }

    body {
        background-color: white;
        margin: 0;
        overflow: hidden;
    }

    #wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #logo {
        display: none;
    }

    #logo-mobile {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: black;
        text-decoration: none;
        z-index: 1;
    }

    #logo-mobile img {
        width: 8.5vw;
        height: 8.5vw;
        margin-right: 1.5vw;
    }

    #logo-mobile > span {
        display: block;
        font-size: 3.5vw;
        font-weight: 700;
        font-family: sans-serif;
        letter-spacing: initial;
    }

    #logo-mobile > span > span {
        opacity: 0.35;
        font-size: 0.7em;
        transform: translateY(-0.5em);
        display: inline-block;
    }

    #preview {
        text-align: center;
        position: relative;
        overflow: hidden;
        flex: 1;
        width: 100%;
    }

    #main-preview {
        height: 100%;
        width: auto;
        max-width: 500%;
        margin: 2vw -100% 0 -100%;
    }

    #preview-loading {
        background-size: 25vw 25vw;
    }

    #preview-loading-long > * {
        padding: 1vw 2vw;
        font-size: 3vw;
    }

    #preview-failed > div {
        padding: 3vw 4vw;
        font-size: 3.5vw;
    }

    #preview #preview-retry-button {
        padding: 2vw 4vw;
    }

    #cart-wait-note {
        margin-bottom: 1.5vw;
    }

    #preview button, #zoom-close-button, #preview .cart-indicator-icon {
        width: 16vw;
        height: 12vw;
        right: 3vw;
        background-position: center right;
    }

    #preview #help-button {
        background-image: url("../img/help-icon-5Mf3LXF.svg");
        top: 1vw;
    }

    #preview #zoom-button {
        background-image: url("../img/zoom-icon-plus-eSNjDjH.svg");
        top: 15vw;
    }

    #preview .cart-indicator-icon {
        background-image: url("../img/cart-designer-icon-JtsH7Nh.svg");
        top: 29vw;
    }

    body.cart-has-items #preview #help-button {
        top: 15vw;
    }

    body.cart-has-items #preview #zoom-button {
        top: 29vw;
    }

    body.cart-has-items #preview .cart-indicator-icon {
        top: 1vw;
    }

    .cart-indicator-icon-item-count {
        font-size: 2.72vw;
        width: 3.4vw;
        height: 3.4vw;
        border-radius: 1.7vw;
        position: absolute;
        top: 0;
        right: 9vw;
    }

    #zoom-close-button {
        top: 2vw;
    }

    #control-panel {
        background: white;
        box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.20);
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 87.5vw;
        margin-top: -10px;
    }

    #control-panel.dropdown-open {
        overflow: visible;
    }

    #control-panel.dropdown-open #panels {
        overflow: visible;
    }

    #control-panel #menu > li {
        height: 12.86vw;
        line-height: 12.86vw;
        font-size: 4.46vw;
        letter-spacing: 0.48vw;
    }

    #panels.selected-2 {
        margin-left: -100vw;
    }

    #panels.selected-3 {
        margin-left: -200vw;
    }

    #panels.selected-4 {
        margin-left: -300vw;
    }

    #panels > li {
        width: 100vw;
    }

    #panels > li:nth-child(2) {
        left: 100vw;
    }

    #panels > li:nth-child(3) {
        left: 200vw;
    }

    #panels > li:nth-child(4) {
        left: 300vw;
    }

    #panels > li > form {
        padding: 3.57vw;
    }

    .cta {
        margin-top: 2.68vw;
    }

    .cta button {
        font-size: 5.36vw;
        height: 11.96vw;
        letter-spacing: 0.57vw;
    }

    .input-group {
        margin-top: 0.89vw;
    }

    .input-group > * {
        margin-right: 0.89vw;
    }

    #add-time {
        height: 11vw;
        line-height: 11vw;
        width: 45vw;
        padding: 0 3vw;
    }

    #sizes > li {
        padding: 2.9vw 3.4vw 2.9vw 2vw;
    }

    #sizes > li .checkbox {
        height: 4vw;
        width: 5.12vw;
        margin-right: 1vw;
    }

    #size-selector-container .help {
        margin-top: 4vw;
    }

    #size-selector .size-details {
        font-size: 3.57vw;
    }

    #size-selector .size-class {
        font-size: 4.46vw;
    }

    #size-selector .size-price {
        font-size: 4.46vw;
    }

    form.loading .cta button {
        background-size: 8.04vw 8.04vw;
    }

    #design-form .help {
        display: none;
    }

    #styles {
        margin: -3.57vw;
    }

    #style-list {
        overflow-x: scroll;
        overflow-y: hidden;
        padding-right: 30vw;
    }

    #styles-fade-end, #styles-fade-start {
        width: 5vw;
        height: 100%;
        top: 0;
    }

    #styles-fade-end {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%);
    }

    #styles-fade-start {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), white 90%);
    }

    .style, #style-custom {
        position: relative;
        height: 90%;
        flex-shrink: 0;
        margin-left: 3.57vw;
    }

    .style-limited-edition {
        padding: 2vw;
        font-size: 3vw;
    }

    .custom-style {
        width: 11vw;
        height: 11vw;
        margin-right: 1.5vw;
        margin-bottom: 1.5vw;
    }

    #style-custom img {
        margin-bottom: 2vw;
    }

    #style-custom span {
        font-size: 4.5vw;
    }

    #custom-photo-panel, #select-time-panel, #select-time-panel-exact {
        padding: 3.57vw;
    }

    #custom-photo-panel {
        bottom: 16vw;
    }

    #select-time-panel, #select-time-panel-exact {
        bottom: 0;
    }

    #custom-photo-panel button,
    #select-time-panel button,
    #select-time-panel-exact button {
        height: 11vw;
        line-height: 11vw;
        width: 45vw;
        margin-bottom: 3vw;
    }

    #custom-photo-panel button:last-child {
        margin-bottom: 0;
    }

    #custom-photo-align-container {
        bottom: 13vw;
    }

    #custom-photo-align-toolbar {
        height: 13vw;
    }

    #custom-photo-align-ok-button, #custom-photo-align-cancel-button {
        font-size: 5.36vw;
        height: 11.96vw;
        letter-spacing: 0.57vw;
        margin: 0 2vw;
    }

    .expandingArea > textarea,
    .expandingArea > pre {
        line-height: 4.5vw;
    }

    .expandingArea > textarea {
        height: 4.5vw;
        height: calc(4.5vw + 2px);
    }

    #lead-email-container {
        margin: 3vw;
    }

    #lead-email-container input[type=text], #lead-email-container input[type=email], #lead-email-container select {
        padding: 1.5vw 7vw;
        width: 85vw;
    }

    #lead-email-container input[type=text], #lead-email-container input[type=email] {
        line-height: 12vw;
    }

    #lead-email-container input[type=text], #lead-email-container select {
        margin-bottom: 3vw;
    }

    #lead-email-container form {
        margin: 7vw 0;
    }

    #lead-email-container input[type=submit] {
        width: 85vw;
        height: 12vw;
        margin-top: 7vw;
    }

    #lead-email-container button {
        margin: 7vw 0;
    }

    #designer-more-links {
        top: 2vw;
        left: 2vw;
        text-align: left;
    }

    #free-shipping-warning.hide-on-mobile, #promo-warning.hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {

    input, body, textarea, button, select, .expandingArea > pre, .pac-item-query {
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 2px;
        font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }

    html {
        height: 100%;
        min-height: 100%;
    }

    body {
        height: 100%;
        min-height: 100%;
        margin: 0;
    }

    #wrapper {
        height: 100%;
        min-height: 100%;
    }

    #logo {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 100;
    }

    #logo-mobile {
        display: none;
    }

    #preview {
        position: fixed;
        overflow: hidden;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 400px;
        background-position: center center;
        background-repeat: no-repeat;
        width: 90vw;
        width: calc(100vw - 400px);
    }

    #main-preview {
        height: 600px;
        width: 1200px;
        margin: auto 0;
    }

    #preview button, #zoom-close-button, #preview .cart-indicator-icon {
        width: 45px;
        height: 45px;
    }

    #preview #help-button {
        background-image: url("../img/help-icon-5Mf3LXF.svg");
        bottom: 20px;
        left: 20px;
    }

    #preview #zoom-button {
        background-image: url("../img/zoom-icon-plus-eSNjDjH.svg");
        bottom: 75px;
        left: 20px;
    }

    #preview .cart-indicator-icon {
        background-image: url("../img/cart-designer-icon-JtsH7Nh.svg");
        bottom: 130px;
        left: 20px;
    }

    .cart-indicator-icon-item-count {
        font-size: 12px;
        width: 15px;
        height: 15px;
        border-radius: 8px;
    }

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

    #control-panel {
        background: white;
        box-shadow: -2px 0px 4px 0 rgba(0, 0, 0, 0.20);
        position: absolute;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        top: 0;
        bottom: 0;
        right: 0;
        width: 400px;
    }

    #preview-loading {
        background-size: 100px 100px;
    }

    #preview-loading-long > * {
        padding: 10px 20px;
        font-size: 14px;
    }

    #preview-failed > div {
        padding: 20px 30px;
        font-size: 16px;
    }

    #preview #preview-retry-button {
        padding: 10px 20px;
    }

    #cart-wait-note {
        margin-bottom: 10px;
    }

    #control-panel #menu > li {
        line-height: 60px;
        font-size: 20px;
        height: 60px;
        letter-spacing: 2px;
    }

    #panels.selected-2 {
        margin-left: -400px;
    }

    #panels.selected-3 {
        margin-left: -800px;
    }

    #panels.selected-4 {
        margin-left: -1200px;
    }

    #panels > li {
        width: 400px;
    }

    #panels > li:nth-child(2) {
        left: 400px;
    }

    #panels > li:nth-child(3) {
        left: 800px;
    }

    #panels > li:nth-child(4) {
        left: 1200px;
    }

    #panels > li > form {
        padding: 15px;
    }

    .cta {
        margin-top: 20px;
        flex: 1;
        display: flex;
        align-items: flex-end;
    }

    /* Stack the wait note above the button; the button still sits at the bottom */
    #size-form .cta {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }

    .cta button {
        font-size: 20px;
        height: 60px;
        letter-spacing: 2px;
    }

    .input-group {
        margin-top: 20px;
    }

    .input-group > * {
        margin-right: 10px;
    }

    .input-group .size-3 {
        flex: 4;
    }

    .input-block {
        margin-top: 20px;
    }

    #add-time {
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
    }

    #sizes > li {
        padding: 20px 20px 20px 12px;
    }

    #sizes > li .checkbox {
        height: 18px;
        width: 23px;
        margin-right: 5px;
    }

    #size-selector .size-details {
        font-size: 14px;
    }

    #size-selector .size-class {
        font-size: 18px;
    }

    #size-selector .size-price {
        font-size: 20px;
    }

    #text-form.help-hidden .help, #size-form.top-help-hidden .top-help {
        display: initial;
    }

    form.loading .cta button {
        background-size: 30px 30px;
    }

    #styles {
        margin: -15px;
    }

    #style-list {
        overflow-y: scroll;
        overflow-x: hidden;
        flex-wrap: wrap;
        padding-bottom: 100px;
    }

    #styles-fade-end, #styles-fade-start {
        height: 25px;
        width: 100%;
        left: 0;
    }

    #styles-fade-end {
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 90%);
    }

    #styles-fade-start {
        top: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 0), white 90%);
    }

    .style, #style-custom {
        position: relative;
        width: 170px;
        flex-shrink: 0;
        margin-left: 15px;
        margin-bottom: 15px;
    }

    .style-limited-edition {
        padding: 10px;
        font-size: 15px;
    }

    .custom-style {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #style-custom img {
        width: 45px;
        margin-bottom: 10px;
    }

    #style-custom span {
        font-size: 15px;
    }

    #custom-photo-panel-ui {
        flex-direction: column;
    }

    #custom-photo-panel, #select-time-panel, #select-time-panel-exact {
        padding: 15px;
    }

    #custom-photo-panel {
        bottom: 80px;
    }

    #select-time-panel, #select-time-panel-exact {
        bottom: 0;
    }

    #custom-photo-panel button,
    #select-time-panel button,
    #select-time-panel-exact button {
        height: 60px;
        line-height: 60px;
        width: 370px;
        margin-bottom: 15px;
    }

    #select-time-panel.time-selected #select-time-buttons-bottom button,
    #select-time-exact-buttons-bottom button {
        width: 170px;
    }

    #custom-photo-panel button:last-child,
    #select-time-panel button:last-child,
    #select-time-panel-exact button:last-child {
        margin-bottom: 0;
    }

    #select-time-panel button.with-icon img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    #select-time-buttons,
    #select-time-exact-buttons {
        margin-top: 10px;
    }

    #select-time-panel-exact-ui input[type=time] {
        height: 60px;
        line-height: 60px;
        width: auto;
        min-width: 180px;
        padding: 0 16px;
        text-align: center;
        font-size: 40px;
    }

    #custom-styles {
        justify-content: center;
    }

    #custom-photo-align-container {
        bottom: 75px;
    }

    #custom-photo-align-toolbar {
        height: 75px;
    }

    #custom-photo-align-ok-button, #custom-photo-align-cancel-button {
        font-size: 20px;
        height: 60px;
        letter-spacing: 2px;
        margin: 0 10px;
    }

    #design-form .cta {
        flex: none;
    }

    #size-selector-container {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        flex-direction: column;
    }

    #size-selector-container .help {
        margin-top: 40px;
    }

    .help {
        margin-bottom: 40px;
    }

    .expandingArea > textarea,
    .expandingArea > pre {
        line-height: 26px;
    }

    .expandingArea > textarea {
        height: 28px;
    }

    #preview.size_2436_poster {
        background-image: url("../img/displayframes/2436_poster_background-CSIiP8e.jpg");
    }

    #preview.size_1824_poster {
        background-image: url("../img/displayframes/1824_poster_background-djZM0-Q.jpg");
    }

    #preview.size_1216_poster {
        background-image: url("../img/displayframes/1216_poster_background-7qlZh7K.jpg");
    }

    #preview.size_digital, #preview.size_free {
        background-image: url("../img/displayframes/digital_background-CSIiP8e.jpg");
    }

    #preview.category_phones {
        background-image: url("../img/displayframes/phones_background-IF9m5xq.jpg");
        background-repeat: repeat;
    }

    #lead-email-container h1 br {
        display: none;
    }

    #lead-email-container input[type=text], #lead-email-container input[type=email], #lead-email-container select {
        padding: 5px 20px;
    }

    #lead-email-container input[type=text], #lead-email-container input[type=email] {
        line-height: 45px;
    }

    #lead-email-container input[type=text],#lead-email-container select {
        margin-bottom: 10px;
    }

    #lead-email-container form {
        margin: 25px 0;
    }

    #lead-email-container input[type=submit] {
        width: 250px;
        height: 45px;
        margin-top: 25px;
    }

    #lead-email-container button {
        margin: 25px 0;
    }

    #lead-email-container {
        margin: 50px;
    }

    #designer-more-links {
        bottom: 20px;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    #panels.selected-2 {
        margin-left: -500px;
    }

    #panels.selected-3 {
        margin-left: -1000px;
    }

    #panels.selected-4 {
        margin-left: -1500px;
    }

    #panels > li {
        width: 500px;
    }

    #panels > li:nth-child(2) {
        left: 500px;
    }

    #panels > li:nth-child(3) {
        left: 1000px;
    }

    #panels > li:nth-child(4) {
        left: 1500px;
    }

    #preview {
        width: calc(100vw - 500px);
    }

    #control-panel {
        width: 500px;
    }

    .style, #style-custom {
        width: 220px;
    }

    #style-custom img {
        width: 55px;
        padding: 0 5px 0 10px;
    }

    #custom-photo-panel button,
    #select-time-panel button,
    #select-time-panel-exact button {
        width: 470px;
    }

    #select-time-panel.time-selected #select-time-buttons-bottom button,
    #select-time-exact-buttons-bottom button {
        width: 230px;
    }

    .input-group .size-3 {
        flex: 4;
    }
}

@media (min-width: 2000px) and (min-height: 1000px) {
    #main-preview {
        height: 900px;
        width: 1800px;
    }

    #preview {
        background-size: 2715px 1947px;
    }
}

.locale-ja #control-panel #menu > li {
    font-size: 0.75em;
}

/* ============================================
   Observatory
   ============================================ */

input, body, textarea, button, select, .expandingArea > pre, .pac-item-query {
    font-family: var(--font-body) !important;
    letter-spacing: .01em !important;
}

body {
    background: var(--ink) !important;
    color: var(--star);
    -webkit-font-smoothing: antialiased;
}

::placeholder {
    color: var(--ink-300);
}

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

/* ---- Preview: the room photo stays; the map gets a deep shadow ---- */

#preview {
    background-color: var(--ink);
}

#preview-loading,
#preview-failed,
#zoom, #lead-email, #custom-photo-align-overlay {
    background-color: rgba(11, 16, 38, .6);
}

#preview-loading-long > *,
#preview-failed > div {
    background: var(--ink-2);
    color: var(--star);
    border: 0;
    border-radius: 8px;
    font-family: var(--font-body);
}

#preview #preview-retry-button {
    background: var(--gold);
    color: var(--ink);
    border-radius: 4px;
    font-weight: 700;
}

.cart-indicator-icon-item-count {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
}

/* ---- Control panel ---- */

#control-panel {
    background: var(--ink-2) !important;
    color: var(--star);
    box-shadow: none !important;
    border-left: 1px solid var(--line);
}

#control-panel #menu {
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    gap: 12px;
    justify-content: space-between;
}

/* Each tab is as wide as its label, so the gold underline sits under the label only */
#control-panel #menu > li {
    flex: 0 0 auto !important;
    padding: 0 2px;
}

#control-panel #menu > li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 12px/1 var(--font-body) !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

#control-panel #menu > li:hover:not(.selected) {
    background: transparent;
    color: var(--star);
}

#control-panel #menu li.selected {
    background: transparent;
    color: var(--star);
    border-bottom-color: var(--gold);
    font-weight: 600;
}

.obs-tab-n {
    font: 500 20px/1 var(--font-display);
    letter-spacing: 0;
    color: inherit;
}

#control-panel #menu li.selected .obs-tab-n {
    color: var(--gold);
}

.obs-step {
    font: 400 12px var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.help {
    color: var(--mute);
}

.help span {
    color: var(--gold);
}

#design-form > .help,
#moment-form > .help,
#text-form > .help,
#size-form > .top-help {
    font: 500 24px/1.15 var(--font-display) !important;
    letter-spacing: -.01em !important;
    color: var(--star);
}

.obs-hint {
    margin: 8px 0 0;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--mute);
}

.obs-hint--tap {
    display: none;
}

@media (hover: none) {
    .obs-hint--click {
        display: none;
    }

    .obs-hint--tap {
        display: inline;
    }
}

.input-block-header {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}

/* Boxed inputs on dark. background-color, not the shorthand: an !important shorthand would pin the
   select's arrow gradients to full size (a big lavender triangle). */
.input-group input[type=text], .input-group input[type=number], .input-group select,
.expandingArea {
    background-color: var(--ink) !important;
    color: var(--star);
    border: 1px solid var(--ink-500) !important;
    border-radius: 4px;
    padding: 12px 12px;
    min-height: 50px;
    box-sizing: border-box;
}

.input-group input[type=text]:hover, .input-group input[type=number]:hover, .input-group select:hover,
.expandingArea:hover {
    border-color: var(--ink-400) !important;
}

.input-group 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% - 18px) 50%, calc(100% - 12px) 50% !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px;
    color: var(--star);
}

.input-group > * {
    margin-right: 12px;
}

.expandingArea > textarea,
.expandingArea > pre {
    color: var(--star);
    background: transparent;
}

#title, #title-pre {
    letter-spacing: .08em !important;
}

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

/* Buttons */
.cta button, #lead-email-container input[type=submit] {
    box-sizing: border-box;
    background: var(--gold);
    color: var(--ink);
    border: 1px solid var(--gold);
    border-radius: 4px;
    box-shadow: none;
    outline: 1px solid var(--gold-800);
    outline-offset: 3px;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-transform: none;
    transition: outline-offset .15s ease, background-color .15s ease;
}

.cta button:hover {
    background: var(--gold-hover);
    outline-offset: 5px;
}

form.loading .cta button, #lead-email form.loading input[type=submit],
form.disabled button[type=submit], form.preview-failed button[type=submit] {
    background-color: var(--gold-800);
    border-color: transparent;
    outline-color: transparent;
}

#add-time,
#select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button,
#custom-photo-align-ok-button, #custom-photo-align-cancel-button,
#lead-email-container button {
    background: transparent;
    color: var(--star);
    border: 1px solid var(--ink-400);
    border-radius: 4px;
    box-shadow: none;
}

#add-time.time-selected,
#select-time-exact-button-save,
#custom-photo-align-ok-button {
    border-color: var(--gold);
    color: var(--gold);
}

/* Moon and sun: the original artwork sits on a white square, so draw thin line icons instead */
#select-time-panel button.with-icon img {
    display: none;
}

#select-time-panel button.with-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-right: 12px;
    background: no-repeat center / contain;
}

#select-time-button-night::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E") !important;
}

#select-time-button-day::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E") !important;
}

#custom-photo-panel button#custom-photo-cancel,
#select-time-panel button#select-time-button-cancel,
#select-time-panel-exact button#select-time-exact-button-cancel {
    color: var(--mute);
    border-color: var(--line);
}

#select-time-button-remove,
#custom-photo-upload-progress-error {
    color: #FF9A90;
}

/* Sub-panels that slide over the form */
#custom-photo-panel, #select-time-panel, #select-time-panel-exact {
    background: var(--ink-2);
    color: var(--star);
}

#select-time-panel-exact-ui input[type=time] {
    background: var(--ink);
    color: var(--star);
    border: 1px solid var(--ink-500);
    border-radius: 4px;
}

/* Style tiles */
.style, #style-custom, .custom-style {
    background: var(--ink);
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    overflow: hidden;
}

.style.selected, .custom-style.selected {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 1px var(--gold);
}

.style:hover:not(.selected), #style-custom:hover:not(.selected), .custom-style:hover:not(.selected) {
    border-color: var(--ink-400) !important;
}

#style-custom img {
    filter: invert(1);
    opacity: .75;
}

#style-custom span {
    color: var(--star);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.style-limited-edition {
    background: rgba(11, 16, 38, .85);
    color: var(--gold);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
}

#styles-fade-end, #styles-fade-start {
    background: linear-gradient(to bottom, rgba(18, 26, 58, 0), var(--ink-2) 90%) !important;
}

#styles-fade-start {
    background: linear-gradient(to top, rgba(18, 26, 58, 0), var(--ink-2) 90%) !important;
}

/* Size rows. The original list is a rounded box with overflow hidden, which clipped the rows' corners. */
#sizes {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#sizes > li {
    align-items: center;
    min-height: 64px;
    padding: 16px 16px !important;
}

#sizes > li,
#sizes > li:last-child {
    background: transparent;
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    color: var(--star);
}

#sizes > li:hover:not(.selected) {
    background-color: transparent;
}

#sizes > li.selected {
    background-color: var(--gold-tint);
    border-color: var(--gold) !important;
}

#sizes > li .checkbox {
    filter: invert(1) brightness(1.4);
}

/* Recolour the blue check to the gold accent */
#sizes > li.selected .checkbox {
    filter: brightness(0) saturate(100%) invert(84%) sepia(37%) saturate(679%) hue-rotate(347deg) brightness(99%);
}

#size-selector .size-class {
    font: 600 24px/1 var(--font-display);
    letter-spacing: 0;
}

#size-selector .size-details {
    color: var(--mute);
}

#size-selector .size-price {
    font: 600 20px/1.1 var(--font-display);
    letter-spacing: 0;
    color: var(--gold);
}

.size-price-old {
    color: var(--mute) !important;
}

#size-selector .free-upgrade-badge {
    background: var(--gold);
    color: var(--ink);
}

#custom-image-price-warning, #free-shipping-warning, #promo-warning {
    color: var(--mute);
}

#promo-warning.help span, .help-price {
    color: var(--gold);
}

/* Lead email modal */
#lead-email-container {
    background: var(--ink-2);
    color: var(--star);
    border: 0;
    border-radius: 8px;
}

#lead-email-container h1 {
    font: 500 36px/1.1 var(--font-display);
    letter-spacing: -.01em;
}

/* The placeholders are the only labels in this form; the original rule makes them black. */
#lead-email-container input[type=text]::placeholder, #lead-email-container input[type=email]::placeholder {
    color: var(--ink-300);
}

#lead-email-container input[type=text], #lead-email-container input[type=email], #lead-email-container select {
    background: var(--ink);
    color: var(--star);
    border: 1px solid var(--ink-500);
    border-radius: 4px;
}

#designer-more-links a,
#lead-email-container button {
    color: var(--mute);
}

.pac-container {
    background: var(--ink-2);
    border: 1px solid var(--ink-400);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .8);
}

.pac-item {
    color: var(--mute);
    border-color: var(--line);
}

.pac-item-query {
    color: var(--star);
}

.pac-item:hover {
    background: var(--ink);
}

@media (max-width: 767px) {
    body {
        background: var(--ink) !important;
    }

    /* Bottom sheet */
    #control-panel {
        border-left: 0;
        border-top: 1px solid var(--line);
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    #control-panel #menu > li {
        font-size: 12px !important;
        letter-spacing: .1em !important;
    }

    .obs-tab-n {
        font-size: 16px;
    }

    #design-form > .help,
    #moment-form > .help,
    #text-form > .help,
    #size-form > .top-help {
        font-size: 24px !important;
    }

    #styles-fade-end {
        background: linear-gradient(to right, rgba(18, 26, 58, 0), var(--ink-2) 90%) !important;
    }

    #styles-fade-start {
        background: linear-gradient(to left, rgba(18, 26, 58, 0), var(--ink-2) 90%) !important;
    }
}

/* ---- One type scale for the step panels (desktop and phone) ---- */
.input-group input[type=text], .input-group input[type=number], .input-group select,
#add-time, .expandingArea > textarea, .expandingArea > pre,
#select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button,
#select-time-panel-exact-ui input[type=time] {
    font-size: 16px !important;
    letter-spacing: .01em !important;
}

#add-time,
#select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button {
    min-height: 50px;
    height: 50px !important;
    line-height: 48px !important;
    font-weight: 500;
    border-radius: 4px !important;
}

.input-block {
    margin-top: 16px;
}

.input-block-header {
    font-size: 12px !important;
    letter-spacing: .16em !important;
    margin-bottom: 8px;
}

#select-time-panel > .help, #select-time-panel-exact > .help, #custom-photo-panel > .help {
    font-size: 16px !important;
    line-height: 1.5;
    color: var(--mute);
}

@media (max-width: 767px) {
    .input-group input[type=text], .input-group input[type=number], .input-group select {
        height: 50px;
        line-height: normal;
    }

    #add-time {
        width: auto;
        flex: 0 0 auto;
        padding: 0 16px !important;
    }

    #select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button {
        margin-bottom: 12px;
    }
}

/* ---- Designer review, 2026-10-08 ---- */

/* Preview buttons: 44px translucent discs with thin line icons (the originals are 50px+ black discs) */
#preview #help-button, #preview #zoom-button, #preview .cart-indicator-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background-color: rgba(11, 16, 38, .75) !important;
    border: 1px solid var(--ink-400) !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box;
}

#preview #help-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 9.2a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.5-2.8 4.3'/%3E%3Ccircle cx='12' cy='18.2' r='.6' fill='%23EDEBF5'/%3E%3C/svg%3E") !important; }
#preview #zoom-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") !important; }
#preview .cart-indicator-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEBF5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") !important; }

#preview .cart-indicator-icon .cart-indicator-icon-item-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    width: auto;
    height: 20px;
    line-height: 20px;
    border-radius: 8px;
    font-size: 12px;
}

@media (min-width: 768px) {
    #preview #help-button { bottom: 20px; left: 20px; }
    #preview #zoom-button { bottom: 74px; left: 20px; }
    #preview .cart-indicator-icon { bottom: 128px; left: 20px; }
}

@media (max-width: 767px) {
    #preview #help-button, #preview #zoom-button, #preview .cart-indicator-icon { right: 12px; }
    #preview #help-button { top: 12px; }
    #preview #zoom-button { top: 66px; }
    #preview .cart-indicator-icon { top: 120px; }
    body.cart-has-items #preview .cart-indicator-icon { top: 12px; }
    body.cart-has-items #preview #help-button { top: 66px; }
    body.cart-has-items #preview #zoom-button { top: 120px; }
}

/* "Use default footnote" is a control, not a caption */
.input-block-header label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font: 400 16px var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--star);
    cursor: pointer;
}

.input-block-header:has(label) {
    text-transform: none;
    letter-spacing: 0 !important;
}

/* Secondary actions in the sub-panels */
#select-time-button-remove,
#select-time-button-cancel,
#select-time-exact-button-cancel,
#custom-photo-cancel {
    height: 44px !important;
    min-height: 44px;
    line-height: 42px !important;
    font-size: 14px !important;
    color: var(--mute) !important;
    border-color: var(--line) !important;
}

@media (max-width: 767px) {
    #control-panel #menu {
        padding: 8px 16px 0;
    }

    .obs-tab-n {
        font-size: 18px;
    }

    #control-panel #menu > li {
        font-size: 12px !important;
    }

    #design-form > .help,
    #moment-form > .help,
    #text-form > .help,
    #size-form > .top-help {
        font-size: 24px !important;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    /* Date row: year / month / day, then the time button full width */
    #moment-form .input-group:has(#year) {
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: 12px;
    }

    #moment-form .input-group:has(#year) > * {
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    #moment-form .input-group:has(#year) > #year { grid-column: 1; grid-row: 1; }
    #moment-form .input-group:has(#year) > #month { grid-column: 2; grid-row: 1; }
    #moment-form .input-group:has(#year) > #day { grid-column: 3; grid-row: 1; }

    #moment-form .input-group:has(#year) > #add-time {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: 46px !important;
        line-height: 44px !important;
    }
}

/* ---- Refactoring UI audit, designer spec 2026-10-08 ---- */

/* Preview: the room photo is the background; no star field, no ring around the render. */
#preview {
    background-color: #F8F7F5;
}

/* Tools on the room: dark 4px squares with line icons, cart on top. */
#preview #help-button, #preview #zoom-button, #preview .cart-indicator-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px;
    background-color: var(--ink-900) !important;
    border: 1px solid var(--ink-400) !important;
    background-size: 18px 18px !important;
}

#preview #help-button:hover, #preview #zoom-button:hover, #preview .cart-indicator-icon:hover {
    border-color: var(--ink-100) !important;
}

#preview #help-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBECF5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.7'/%3E%3Ccircle cx='12' cy='17.2' r='.5' fill='%23EBECF5'/%3E%3C/svg%3E") !important; }
#preview #zoom-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBECF5' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") !important; }
#preview .cart-indicator-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBECF5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") !important; }

#preview .cart-indicator-icon .cart-indicator-icon-item-count {
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: var(--gold-400);
    color: var(--ink-900);
    font: 600 12px/20px var(--font-body);
    letter-spacing: 0 !important;
}

@media (min-width: 768px) {
    #logo {
        top: 20px;
        left: 20px;
        width: 68px;
        height: auto;
        z-index: 2;
    }

    #preview #help-button { bottom: 20px; left: 20px; }
    #preview #zoom-button { bottom: 76px; left: 20px; }
    #preview .cart-indicator-icon { bottom: 132px; left: 20px; }
}

@media (max-width: 767px) {
    #preview #help-button, #preview #zoom-button, #preview .cart-indicator-icon {
        width: 44px !important;
        height: 44px !important;
        right: 12px;
    }

    /* Cart on top when it shows, then zoom, then help: 44px squares 8px apart. */
    #preview .cart-indicator-icon { top: 12px; }
    #preview #zoom-button { top: 12px; }
    #preview #help-button { top: 64px; }
    body.cart-has-items #preview .cart-indicator-icon { top: 12px; }
    body.cart-has-items #preview #zoom-button { top: 64px; }
    body.cart-has-items #preview #help-button { top: 116px; }

    /* The logo mark only: the wordmark ran across the poster once the preview covers the pane. */
    #logo-mobile {
        top: 12px;
        left: 12px;
        width: 40px;
        height: 80px;
        background: url("../img/logo-new-trademark@2x-HfJ0Z7N.png") no-repeat top left / 40px auto;
    }

    #logo-mobile > img,
    #logo-mobile > span {
        display: none;
    }

    /* The live sheet height (87.5vw) with the preview taking the rest: a 300px preview left an
       empty band in the sheet on tall phones (owner review 2026-10-08). */
    #control-panel {
        margin-top: -16px;
        border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0 !important;
    }
}

/* Panel */
#control-panel {
    background: var(--ink-800) !important;
}

/* Step tabs: the numeral over the caption, a 3px heavy rule under the active one. */
#control-panel #menu {
    gap: 16px;
    padding: 8px 32px 0;
    align-items: stretch;
}

#control-panel #menu > li {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    height: auto !important;
    padding: 16px 0 12px;
    font: 600 14px/1.2 var(--font-body) !important;
    letter-spacing: .06em !important;
    color: var(--ink-200);
    border-bottom: 0;
    margin-bottom: 0;
}

#control-panel #menu > li:hover:not(.selected) {
    color: var(--ink-100);
}

#control-panel #menu li.selected {
    color: var(--ink-100);
    border-bottom: 0;
}

#control-panel #menu li.selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--rule-heavy);
}

.obs-tab-n,
#control-panel #menu li.selected .obs-tab-n {
    font: 300 20px/1 var(--font-body);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.obs-step {
    font: 600 14px/1.2 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-100);
    margin-bottom: 8px;
}

#design-form > .help,
#moment-form > .help,
#text-form > .help,
#size-form > .top-help {
    font: 500 30px/1.05 var(--font-display) !important;
}

.input-block-header {
    font: 600 14px/1.4 var(--font-body) !important;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--ink-100);
}

/* Inputs and the time buttons: 48px */
.input-group input[type=text], .input-group input[type=number], .input-group select,
.expandingArea {
    min-height: 48px;
    padding: 0 16px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
}

.expandingArea {
    padding: 12px 16px;
}

#add-time,
#select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button {
    min-height: 48px;
    height: 48px !important;
    line-height: 46px !important;
}

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

/* The title is set as the poster sets it */
#title, #title-pre {
    font: 600 18px/1.4 var(--font-body) !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
}

input[type=checkbox] {
    accent-color: var(--ink-100);
}

#add-time.time-selected,
#select-time-exact-button-save,
#custom-photo-align-ok-button {
    border-color: var(--ink-100);
    color: var(--ink-100);
}

/* Primary button */
.cta button, #lead-email-container input[type=submit] {
    box-sizing: border-box;
    min-height: 56px;
    border-radius: 4px;
    outline: 1px solid var(--gold-800);
    font: 600 18px/1 var(--font-body) !important;
    letter-spacing: 0 !important;
}

.cta button:active {
    background: var(--gold-active);
}

form.loading .cta button, #lead-email form.loading input[type=submit],
form.disabled button[type=submit], form.preview-failed button[type=submit] {
    background-color: var(--gold-800);
    color: var(--ink-200);
}

/* Style tiles: the real render cropped 321:411, the name under it, white-ink selection. */
#style-list {
    align-items: stretch;
    align-content: flex-start;
}

.style, #style-custom, .custom-style {
    background: var(--ink-900);
    border: 1px solid var(--ink-500) !important;
    border-radius: 4px;
    box-shadow: none;
}

.style {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
}

.style img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 321 / 411;
    object-fit: cover;
}

.obs-style-name {
    display: block;
    padding: 12px;
    font: 400 14px/1.4 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-200);
}

.style-limited-edition {
    bottom: auto;
    top: 0;
    border-radius: 0;
    background: rgba(11, 16, 38, .85);
    color: var(--ink-100);
    font-size: 12px;
    letter-spacing: .06em;
}

.style:hover:not(.selected), #style-custom:hover:not(.selected), .custom-style:hover:not(.selected) {
    border-color: var(--ink-400) !important;
}

.style.selected, .custom-style.selected, #style-custom.selected {
    border-color: var(--ink-100) !important;
    box-shadow: 0 0 0 1px var(--ink-100);
}

.style.selected .obs-style-name {
    color: var(--ink-100);
}

.style.selected::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--ink-100);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

#style-custom img {
    filter: invert(1);
    opacity: .9;
}

#style-custom span {
    font: 400 14px/1.4 var(--font-body);
    letter-spacing: .06em;
    color: var(--ink-100);
}

/* Size rows: 56px, white-ink selection with the --ink-700 fill. */
#sizes > li {
    min-height: 56px;
    padding: 12px 16px !important;
    box-sizing: border-box;
}

#sizes > li,
#sizes > li:last-child {
    border: 1px solid var(--ink-500) !important;
    border-radius: 4px;
}

#sizes > li:hover:not(.selected) {
    border-color: var(--ink-400) !important;
}

#sizes > li.selected {
    background-color: var(--ink-700);
    border-color: var(--ink-100) !important;
}

#sizes > li {
    gap: 12px;
}

#sizes > li .size-description {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 24px 48px 1fr;
    gap: 12px;
    align-items: center;
    text-align: left;
}

#sizes > li .checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    visibility: hidden;
    filter: brightness(0) invert(1);
}

#sizes > li.selected .checkbox {
    visibility: visible;
    filter: brightness(0) invert(1);
}

#size-selector .size-class {
    font: 600 24px/1 var(--font-display);
}

#size-selector .size-details {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    color: var(--ink-100);
}

#size-selector .size-price {
    font: 600 18px/1.2 var(--font-body);
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
}

.size-price-old {
    color: var(--ink-300) !important;
    font-weight: 400;
}

#size-selector .free-upgrade-badge {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
}

#lead-email-container {
    border: 0;
}

@media (max-width: 767px) {
    /* Tabs centred under the numerals, 12px labels */
    #control-panel #menu {
        gap: 8px;
        padding: 8px 16px 0;
    }

    #control-panel #menu > li {
        flex: 1 1 0 !important;
        align-items: center;
        padding: 12px 0;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    #design-form > .help,
    #moment-form > .help,
    #text-form > .help,
    #size-form > .top-help {
        font-size: 24px !important;
    }

    /* Style tiles as a horizontal snap scroller, names on one line */
    /* No scroll-snap: the designer centres the selected tile with scrollIntoView, and a mandatory
       snap left the rest of that scroll to #panels, which shifted the whole step sideways. */
    #styles {
        margin-top: 8px;
    }

    #style-list {
        align-items: flex-start;
        gap: 12px;
        padding-left: 16px;
    }

    .style, #style-custom {
        flex: 0 0 152px;
        width: 152px;
        height: auto;
        margin-left: 0;
    }

    #style-custom {
        height: calc(152px * 411 / 321 + 34px);
    }

    .obs-style-name {
        padding: 8px 12px;
        font-size: 11px;
        letter-spacing: .04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #style-custom span {
        font-size: 11px;
        letter-spacing: .04em;
    }
}

/* ---- Owner review 2026-10-08 16:12 ---- */

/* Size rows without the check column: the white border and fill mark the selection */
#sizes > li .size-description {
    grid-template-columns: 48px 1fr;
}

#sizes > li .checkbox,
#sizes > li.selected .checkbox {
    display: none;
}

/* The title box reads like the moment step's inputs */
#title, #title-pre {
    font: 400 16px/1.5 var(--font-body) !important;
    letter-spacing: .05em !important;
}

/* Tablet (400px panel): year / month / day on one row, the time button under them */
@media (min-width: 768px) and (max-width: 1199px) {
    #moment-form .input-group:has(#year) {
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: 12px;
    }

    #moment-form .input-group:has(#year) > * {
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    #moment-form .input-group:has(#year) > #year { grid-column: 1; grid-row: 1; }
    #moment-form .input-group:has(#year) > #month { grid-column: 2; grid-row: 1; }
    #moment-form .input-group:has(#year) > #day { grid-column: 3; grid-row: 1; }

    #moment-form .input-group:has(#year) > #add-time {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    #moment-form .input-group:has(#year) select,
    #moment-form .input-group:has(#year) input {
        padding: 0 12px;
    }
}

/* Phone style tiles: sized by the sheet's height as the live page does, the name over the
   image foot, so the tiles never run under the Next button */
@media (max-width: 767px) {
    .style, #style-custom {
        flex: 0 0 auto;
        width: auto;
        height: calc(100% - 8px);
        aspect-ratio: 321 / 411;
    }

    .style img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .obs-style-name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 16, 38, .85);
    }
}

/* Step tabs back to the earlier look (designer spec, owner review 2026-10-08): Cormorant numeral
   over the caption, the active step gold with a 2px gold underline under the label */
.obs-tab-n,
#control-panel #menu li.selected .obs-tab-n {
    font: 500 24px/1 var(--font-display);
    letter-spacing: 0;
}

#control-panel #menu li.selected {
    color: var(--gold-400);
}

#control-panel #menu li.selected::after {
    height: 2px;
    bottom: 0;
    background: var(--gold-400);
}

/* Phone tiles: the name on a bottom scrim over the lower 40% of the tile */
@media (max-width: 767px) {
    .obs-style-name {
        padding: 40% 12px 8px;
        background: linear-gradient(0deg, rgba(11, 16, 38, .85), rgba(11, 16, 38, 0));
        font: 600 11px/1.2 var(--font-body);
        letter-spacing: .06em;
        color: var(--ink-100);
    }

    .style {
        overflow: hidden;
    }
}

/* The active step's label goes gold with its numeral on every width */
#control-panel #menu li.selected,
#control-panel #menu li.selected .obs-tab-n {
    color: var(--gold-400) !important;
}

/* Owner decision 2026-10-08: the selected size row goes gold, like the selected shipping option */
#sizes > li.selected {
    background-color: var(--gold-soft);
    border-color: var(--gold-400) !important;
}

/* Owner review 2026-10-08 18:50: the textareas pad like the moment inputs; the padding sits on the
   overlaid textarea and its sizing pre, not on the box around them */
.expandingArea {
    padding: 0 !important;
}

.expandingArea > textarea,
.expandingArea > pre {
    padding: 12px 16px !important;
    line-height: 24px !important;
}

/* Phone sheet: tighter tabs, the step body scrolls, and Next / Add to Cart stays pinned at the foot */
@media (max-width: 767px) {
    #control-panel #menu {
        padding-top: 0;
    }

    #control-panel #menu > li {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #panels > li > form {
        overflow-y: auto;
        overscroll-behavior: contain;
        justify-content: flex-start;
        padding-bottom: 0;
    }

    #panels > li > form > .cta {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: auto;
        padding-top: 12px;
        padding-bottom: 3.57vw;
        box-shadow: 0 -16px 16px -4px var(--ink-2);
        background: var(--ink-2);
    }

    #design-form #styles {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
    }
}

/* Owner review 2026-10-08 20:53: on phones every step fits the sheet without scrolling, as on the
   live page. The field labels carry the Moment and Text instructions, so their help sentences and
   the hint lines go; inputs, gaps, size rows and the button strip tighten. */
@media (max-width: 767px) {
    /* The live 87.5vw, but never under its 430px height: B sizes the steps in px */
    #control-panel {
        height: max(87.5vw, 376px);
    }

    #moment-form > .help,
    #text-form > .help,
    #text-form .obs-hint {
        display: none !important;
    }

    #moment-form > .input-block:first-of-type,
    #text-form > .input-block:first-of-type {
        margin-top: 0;
    }

    #moment-form .input-block,
    #text-form .input-block {
        margin-top: 12px;
    }

    .input-block-header {
        margin-bottom: 6px;
    }

    .input-block-header label {
        min-height: 32px;
    }

    .input-group input[type=text], .input-group input[type=number], .input-group select {
        height: 48px !important;
        min-height: 48px;
    }

    #moment-form .input-group:has(#year) {
        gap: 8px;
    }

    #moment-form .input-group:has(#year) > #add-time {
        height: 44px !important;
        min-height: 44px;
        line-height: 42px !important;
    }

    .expandingArea {
        min-height: 48px;
    }

    .expandingArea > textarea,
    .expandingArea > pre {
        padding: 11px 16px !important;
    }

    /* Steps 2 and 3 show only field labels on phones; the size step's prompt matches them. */
    #size-form > .top-help {
        margin-bottom: 6px !important;
        font: 600 14px/1.4 var(--font-body) !important;
        letter-spacing: 0 !important;
        color: var(--ink-100);
    }

    #sizes > li {
        min-height: 52px;
        padding: 8px 16px !important;
    }

    #sizes {
        gap: 0 !important;
    }

    #sizes > li {
        margin-bottom: 0 !important;
    }

    #sizes > li + li {
        margin-top: 8px !important;
    }

    #size-selector-container .help {
        margin-top: 8px !important;
    }

    /* The hidden time and photo panels wait in place: their 30px slide-in offset made the step scroll */
    #custom-photo-panel:not(.shown), #select-time-panel:not(.shown), #select-time-panel-exact:not(.shown) {
        transform: none;
    }

    #panels > li > form > .cta {
        padding-top: 8px;
        padding-bottom: 12px;
        box-shadow: none;
    }

    #panels > li > form > .cta button {
        height: 48px;
        min-height: 48px;
    }
}

/* Narrower phones: the size line stays on one row so the Size step still fits */
@media (max-width: 419px) {
    #size-selector .size-details {
        font-size: 14px !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }
}

/* Owner review 2026-10-08 22:35: the struck-out price sits small over the price, so long currencies
   (¥29,850 ¥28,350) stay inside the row. On every width since owner review 2026-10-09. */
#size-selector .size-price > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

#size-selector .size-price .size-price-old {
    margin: 0 0 2px;
    font-size: 12px !important;
    line-height: 1.1;
}

/* ---- Owner review 2026-10-09 14:01 ---- */

/* The photo panel's "Use your own photo +$19" line: the price in gold (the live navy didn't read on
   ink), and on phones the line is back in the gap above the photo buttons */
#custom-photo-panel .help-price {
    float: none;
    color: var(--gold);
    font-weight: 600;
}

#custom-photo-panel .help-price-old {
    margin-right: 6px;
    color: var(--mute) !important;
    font-weight: 400;
}

#design-form #custom-photo-panel > .help {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    line-height: 1.4;
}

@media (max-width: 767px) {
    #design-form #custom-photo-panel > .help {
        margin: 0 0 12px;
    }
}

/* Align Photo: a solid bar under the cropper (the Next button showed through), Cancel as the ghost
   button and Save as the gold one */
#custom-photo-align-toolbar,
#custom-photo-align-overlay #custom-photo-align-toolbar {
    height: auto;
    box-sizing: border-box;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    border-top: 1px solid var(--line);
}

#custom-photo-align-overlay #custom-photo-align-container {
    bottom: calc(77px + env(safe-area-inset-bottom, 0px));
}

#custom-photo-align-overlay #custom-photo-align-ok-button,
#custom-photo-align-overlay #custom-photo-align-cancel-button {
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border-radius: 4px;
    box-shadow: none;
    font: 600 16px/1 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}

#custom-photo-align-overlay #custom-photo-align-cancel-button {
    background: transparent;
    color: var(--star);
    border: 1px solid var(--ink-400);
}

#custom-photo-align-overlay #custom-photo-align-ok-button {
    background: var(--gold);
    color: var(--ink);
    border: 1px solid var(--gold);
}

#custom-photo-align-overlay #custom-photo-align-ok-button:active,
#custom-photo-align-overlay #custom-photo-align-cancel-button:active {
    transform: translateY(1px);
}

/* ---- A/B add-to-cart gap 2026-10-12: the struck-out price at full size, beside the price as on A ----
   It only drops above the price when the pair doesn't fit (long currencies such as ¥29,850 ¥28,350). */
#size-selector .size-price {
    flex-shrink: 1;
    min-width: 0;
}

#size-selector .size-price > div {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 8px;
    line-height: 1;
}

#size-selector .size-price .size-price-old {
    margin: 0;
    font-size: inherit !important;
    line-height: inherit;
}

@media (max-width: 767px) {
    #sizes > li {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

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

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

#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);
}