/* The designer: the preview, the four step panels (design, moment, text, size) that slide in the
 * control panel, the phone sheet, and the overlays (zoom, photo crop, lead email). Tokens and fonts:
 * base.css. */

* {
    -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="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 {
    position: absolute;
    cursor: pointer;
}

#preview button, #zoom-close-button {
    border: 0;
}

#preview-loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    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 > * {
    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;
}

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

#preview-failed > div {
    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: var(--gold);
    color: var(--ink);
    border-radius: 4px;
    font: inherit;
    font-weight: 700;
    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 {
    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;
}

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

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

#zoom-container > img {
    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 {
    width: 100%;
    cursor: pointer;
    flex: 1;
}

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

#control-panel #menu {
    margin: 0;
    display: flex;
    list-style: none;
    border-bottom: 1px solid var(--line);
    gap: 16px;
    justify-content: space-between;
    align-items: stretch;
    padding: 8px 32px 0;
}

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

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

@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: var(--mute);
}

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

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

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

.cta button {
    width: 100%;
}

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

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

.input-group {
    display: flex;
}

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

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

.input-group input[type=text], .input-group input[type=number], .input-group select {
    background: transparent;
    padding: 0 16px;
}

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

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

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

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

#size-selector {
    position: relative;
}

#title, #title-pre {
    text-transform: uppercase;
    letter-spacing: .05em !important;
    font: 400 16px/1.5 var(--font-body) !important;
}

#day {
    margin-right: 20px;
}

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

/* Size rows: separate rows, no rounded box around the list (with overflow hidden it clipped the rows' corners) */

#sizes {
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#sizes > li {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    min-height: 56px;
    padding: 12px 16px !important;
    gap: 12px;
}

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

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

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

#size-selector .size-description {
    justify-content: center;
}

#size-selector .free-upgrade-badge {
    color: var(--ink);
    padding: 0.3vw 1.5vw;
    border-radius: 0.5vw;
    margin-top: 0.5vw;
    display: block;
    text-align: center;
    letter-spacing: .06em;
    font: 600 12px/1 var(--font-body);
    background: var(--gold);
}

@media (min-width: 768px) {
    #size-selector .free-upgrade-badge {
        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-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] {
    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 {
    background: linear-gradient(to bottom, rgba(18, 26, 58, 0), var(--ink-2) 90%) !important;
}

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

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

.style, #style-custom {
    position: relative;
    cursor: pointer;
    transition: border-color 0.75s;
}

.custom-style {
    display: inline-block;
    position: relative;
    cursor: pointer;
    justify-content: space-between;
    transition: border-color 0.75s;
}

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

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

#style-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 160/225;
}

#style-custom img {
    height: auto;
    width: 30%;
    filter: invert(1);
    opacity: .9;
}

/* Sub-panels that slide over the form */

#custom-photo-panel, #select-time-panel, #select-time-panel-exact {
    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;
    background: var(--ink-2);
    color: var(--star);
}

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

#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;
    display: none;
}

#select-time-buttons,
#select-time-exact-buttons {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 0;
    margin-top: 3vw;
}

#select-time-buttons {
    justify-content: space-between;
    align-content: flex-start;
}

#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;
    display: flex;
    width: 100%;
}

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

#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] {
    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;
    background: var(--ink);
    color: var(--star);
    border: 1px solid var(--ink-500);
    border-radius: 4px;
}

.help-price {
    font-size: 1.1em;
}

.help-price-old {
    text-decoration: line-through;
}

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

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

#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-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: 12px 16px !important;
    outline: 0;
    border: 0;
    line-height: 24px !important;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--star);
    background: transparent;
}

.expandingArea > textarea {
    width: 100%;
}

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

#wrapper {
    transition : filter 200ms linear
}

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

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

#lead-email-container input[type=text], #lead-email-container input[type=email], #lead-email-container select {
    width: 350px;
    height: 45px;
    background: var(--ink);
    padding: 5px 20px;
    box-sizing: border-box;
    color: var(--star);
    border: 1px solid var(--ink-500);
    border-radius: 4px;
}

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

#lead-email-container input[type=text]::placeholder, #lead-email-container input[type=email]::placeholder {
    color: var(--ink-300);
}

#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;
    margin: 25px 0;
}

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

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

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

.pac-item {
    padding: 5px;
    margin-left: 5px;
    color: var(--mute);
    border-color: var(--line);
}

.pac-icon {
    display: none;
}

@media (max-width: 767px) {

    input, body, textarea, button, select, .expandingArea > pre, .pac-item-query {
        font-weight: 400;
    }

    input, body, textarea, button, select, .pac-item-query {
        font-size: 3.93vw;
    }

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

    html {
        overflow: auto;
    }

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

    #logo {
        display: none;
    }

    /* The logo mark only: the wordmark ran across the poster once the preview covers the pane. */

    #logo-mobile {
        position: absolute;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: black;
        text-decoration: none;
        z-index: 1;
        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 {
        width: 8.5vw;
        height: 8.5vw;
        margin-right: 1.5vw;
    }

    #logo-mobile > span {
        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 {
        right: 3vw;
    }

    body.cart-has-items #preview #help-button {
        top: 116px;
    }

    body.cart-has-items #preview #zoom-button {
        top: 64px;
    }

    body.cart-has-items #preview .cart-indicator-icon {
        top: 12px;
    }

    .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;
    }

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

    #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 3.57vw 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        justify-content: flex-start;
    }

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

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

    #sizes > li {
        padding: 6px 16px !important;
        min-height: 52px;
        margin-bottom: 0 !important;
    }

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

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

    #styles {
        margin: 8px -3.57vw -3.57vw;
    }

    #style-list {
        overflow-x: scroll;
        overflow-y: hidden;
        padding-right: 30vw;
        align-items: flex-start;
        gap: 12px;
        padding-left: 16px;
    }

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

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

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

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

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

    #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:last-child {
        margin-bottom: 0;
    }

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

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

    input, body, textarea, button, select, .pac-item-query {
        font-size: 16px;
    }

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

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

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

    #logo {
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 20px;
        width: 68px;
        height: auto;
    }

    #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: calc(100vw - 400px);
    }

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

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

    #control-panel {
        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;
    }

    #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 {
        height: 60px;
    }

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

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

    #add-time {
        padding: 0 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;
    }

    #styles-fade-start {
        top: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

#preview-loading,
#preview-failed,
#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);
}

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

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

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

/* Each tab is as wide as its label, so the gold underline sits under the label only */

#control-panel #menu li.selected {
    background: transparent;
    border-bottom: 0;
}

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

.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;
    }
}

/* Boxed inputs on dark, 48px. 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;
    min-height: 48px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4);
}

.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;
}

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

/* Buttons */

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;
    color: var(--ink-200);
}

#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;
    border: 1px solid var(--ink-400);
    box-shadow: none;
}

#add-time,
#select-time-panel button, #select-time-panel-exact button, #custom-photo-panel button,
#custom-photo-align-cancel-button {
    color: var(--star);
}

#custom-photo-align-ok-button, #custom-photo-align-cancel-button,
#lead-email-container button {
    border-radius: 4px;
}

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

/* Moon and sun: the original artwork sits on a white square, so draw thin line icons instead */

#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-upload-progress-error {
    text-align: center;
    color: #FF9A90;
}

/* Style tiles */

#style-custom span {
    display: block;
    text-align: center;
    color: var(--ink-100);
    text-transform: uppercase;
    letter-spacing: .06em;
    font: 400 14px/1.4 var(--font-body);
}

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

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

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

/* Recolour the blue check to the gold accent */

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

#size-selector .size-price {
    text-align: right;
    flex-shrink: 1;
    font: 600 18px/1.2 var(--font-body);
    letter-spacing: 0;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

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

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

#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-query {
    color: var(--star);
}

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

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

    /* Bottom sheet */
    #control-panel {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: max(87.5vw, 376px);
        margin-top: -16px;
        border-left: 0;
        border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0 !important;
    }

    #styles-fade-start {
        left: 0;
        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;
}

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

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

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

#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: 48px !important;
        line-height: normal;
        min-height: 48px;
    }

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

/* Preview buttons: 48px squares with thin line icons */
#preview #help-button, #preview #zoom-button, #preview .cart-indicator-icon {
    width: 48px !important;
    height: 48px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--ink-400) !important;
    background-color: var(--ink-900) !important;
    background-size: 18px 18px !important;
}
#preview .cart-indicator-icon { text-decoration: none; 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 {
    position: absolute;
    min-width: 20px;
    width: auto;
    height: 20px;
    border-radius: 10px;
    top: -6px;
    right: -6px;
    background: var(--gold-400);
    color: var(--ink-900);
    font: 600 12px/20px var(--font-body);
    letter-spacing: 0 !important;
}

/* "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 {
    color: var(--mute) !important;
    border-color: var(--line) !important;
}

@media (max-width: 767px) {
    #control-panel #menu {
        gap: 8px;
        padding: 0 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: 8px;
    }

    #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: 44px !important;
        line-height: 42px !important;
        min-height: 44px;
    }
}

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

@media (min-width: 768px) {

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

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

/* Step tabs: the numeral over the caption, a 3px heavy rule under the active one. */

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

.obs-tab-n {
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: inherit;
    font: 500 24px/1 var(--font-display);
}

.expandingArea {
    position: relative;
    padding: 0 !important;
}

/* Primary button */

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

/* Style tiles: the real render cropped 321:411, the name under it, white-ink selection. */

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

.style {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.style img {
    display: block;
    object-fit: cover;
    object-position: center center;
    top: -5%;
    left: -5%;
    position: static;
    aspect-ratio: 321 / 411;
    width: 100%;
    height: auto;
}

.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 {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    bottom: auto;
    top: 0;
    border-radius: 0;
    background: rgba(11, 16, 38, .85);
    color: var(--ink-100);
}

.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%);
}

/* Size rows: 56px, white-ink selection with the --ink-700 fill. */

#sizes > li .size-description {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 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);
}

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

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

@media (max-width: 767px) {
    /* Tabs centred under the numerals, 12px labels */

    #design-form > .help,
    #moment-form > .help,
    #text-form > .help {
        margin-bottom: 16px;
        font-size: 24px !important;
    }
    /* 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. */

    .obs-style-name {
        padding: 40% 12px 8px;
        letter-spacing: .06em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(11, 16, 38, .85), rgba(11, 16, 38, 0));
        font: 600 11px/1.2 var(--font-body);
        color: var(--ink-100);
    }

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

/* Size rows without the check column: the white border and fill mark the selection */

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

/* 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, the name over the
   image foot, so the tiles never run under the Next button */
@media (max-width: 767px) {
    .style, #style-custom {
        position: relative;
        height: calc(100% - 8px);
        margin-left: 0;
        flex: 0 0 auto;
        width: auto;
        aspect-ratio: 321 / 411;
    }

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

/* Phone tiles: the name on a bottom scrim over the lower 40% of the tile */
@media (max-width: 767px) {

    .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;
}

/* Phone sheet: tighter tabs, the step body scrolls, and Next / Add to Cart stays pinned at the foot */
@media (max-width: 767px) {

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

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

    .expandingArea {
        min-height: 48px;
    }

    /* 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 {
        gap: 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 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: row;
    align-items: baseline;
    line-height: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 8px;
}

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

/* The photo panel's "Use your own photo +$19" line: the price in gold, 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);
}

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

#zoom {
    touch-action: none;
    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);
}