/* ============================================================
   Scribe — image viewer

   One lightbox, shared by the commission request page and the
   admin. Anywhere a photograph is shown small — a leather
   swatch, a charm, a customer's mood board — a "View" control
   opens it here at full size.

   Deliberately neutral: it sits over two different design
   systems (.cmn-* on the shop, .adm-* on the admin), so it
   borrows from neither and defines everything it needs.
   ============================================================ */

/* The trigger. Positioned by whatever it sits in; this is only its look. */
.iv-open {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .26rem .55rem;
    border: none; border-radius: 999px;
    background: rgba(30, 18, 12, .62);
    color: #FFF4EA;
    font-family: inherit; font-size: .62rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    backdrop-filter: blur(3px);
    transition: background .16s ease, transform .16s ease;
}
.iv-open:hover { background: rgba(30, 18, 12, .85); transform: translateY(-1px); }
.iv-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.iv-open svg { width: 11px; height: 11px; display: block; }

/* A quieter variant for admin tables, where a dark pill would shout. */
.iv-open.iv-plain {
    background: #fff; color: #23201C;
    border: 1px solid #E3DED7; backdrop-filter: none;
    border-radius: 6px; font-size: .7rem; letter-spacing: 0;
    text-transform: none; font-weight: 650; padding: .28rem .6rem;
}
.iv-open.iv-plain:hover { border-color: #C58A7A; color: #A96F60; background: #fff; }


/* ---------------- The overlay ---------------- */
.iv-back {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(28, 18, 12, .78);
    backdrop-filter: blur(6px);
    animation: iv-fade .18s ease both;
}
/* Load-bearing. The `hidden` attribute hides through the UA rule
   `[hidden] { display: none }`, which is specificity (0,1,0) — exactly the same
   as `.iv-back` above, so the later declaration wins and `display: grid` simply
   overrode it. The overlay could be opened and never closed: pressing ✕ set the
   attribute, nothing happened, and the image blanked because close() also drops
   the src. Two symptoms, one missing rule. */
.iv-back[hidden] { display: none; }
@keyframes iv-fade { from { opacity: 0; } to { opacity: 1; } }

.iv-frame {
    position: relative;
    display: flex; flex-direction: column;
    max-width: min(1100px, 100%); max-height: 100%;
    background: #FBF7F1;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
    animation: iv-rise .22s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes iv-rise {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* A checkered ground, so a cut-out charm on a transparent background reads as
   transparent rather than as a white square. */
.iv-stage {
    display: grid; place-items: center;
    min-height: 0; padding: 1rem;
    background:
        linear-gradient(45deg, #EFE7DE 25%, transparent 25%, transparent 75%, #EFE7DE 75%) 0 0 / 18px 18px,
        linear-gradient(45deg, #EFE7DE 25%, transparent 25%, transparent 75%, #EFE7DE 75%) 9px 9px / 18px 18px,
        #F7F1EA;
}
.iv-stage img {
    display: block; max-width: 100%; max-height: calc(100vh - 12rem);
    width: auto; height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 20px -8px rgba(40, 24, 14, .5);
}

.iv-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid #E7DACB;
    background: #FFFDFA;
}
.iv-meta { min-width: 0; }
.iv-title {
    display: block; font-size: .95rem; font-weight: 700; color: #3B2E25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-sub {
    display: block; font-size: .74rem; color: #8B7867; margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.iv-link {
    font-size: .76rem; font-weight: 700; color: #7C5A44; text-decoration: none;
    padding: .3rem .5rem; border-radius: 6px;
}
.iv-link:hover { color: #C58A7A; text-decoration: underline; }
.iv-link:focus-visible { outline: 2px solid #C58A7A; outline-offset: 1px; }

.iv-close {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid #E7DACB; background: #fff; color: #4A3528;
    font-size: 1rem; line-height: 1; cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.iv-close:hover { background: #F6EEE4; border-color: #C58A7A; }
.iv-close:focus-visible { outline: 2px solid #C58A7A; outline-offset: 2px; }

/* Holds the page still while the overlay is up. */
body.iv-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .iv-back, .iv-frame { animation: none; }
    .iv-open { transition: none; }
}