/* Displays: digital touch-panel firmware. Builds on pcbs.css card layout. */

.displays-lead {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--fg-2);
    font: 400 16px/1.55 var(--font-body);
}

/* Screens are dark UI renders; frame them on the panels' own background
   instead of the PCB green, and never crop the UI. */
.display-media {
    background: #0A0E14;
    padding: 14px;
}

.display-media {
    position: relative;
}

/* Screens are stacked in the frame and cross-fade (see displays.php). */
.display-media img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    object-fit: contain;
    background: transparent;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.display-media img.is-shown {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .display-media img {
        transition: none;
    }
}

.display-blurb {
    margin: 0;
    color: var(--fg-2);
    font: 400 14px/1.5 var(--font-body);
}

.display-add-btn {
    appearance: none;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--clevr-blue-500);
    color: #fff;
    cursor: pointer;
    font: 600 13px var(--font-body);
    min-height: 36px;
    padding: 8px 14px;
    white-space: nowrap;
}

.display-add-btn:hover {
    background: var(--clevr-blue-600);
}

.display-add-btn.is-in-cart,
.display-add-btn:disabled {
    background: var(--bg-brand-soft, #EAF3FE);
    color: var(--clevr-blue-700);
    cursor: default;
}

.display-feedback {
    margin: 0;
    min-height: 0;
    color: var(--danger);
    font: 600 13px var(--font-body);
}

.display-feedback:empty {
    display: none;
}