/*
 * Client-gallery store surfaces layered over gallery_prints.html:
 *   .bpm-*  Buy This Photo modal (cart icon on a card, Buy Photo in lightbox)
 *   .glb-*  full-screen lightbox with arrow navigation
 *
 * The site sets html { font-size: 10px }, so 1rem is 10px here. Typography
 * mirrors the gallery cover: Italiana display + Mulish UI, both already
 * loaded by photo_app/includes/gallery_cover_style.html.
 */

/* ══ Buy This Photo modal ════════════════════════════════════════════════ */

.bpm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    background: rgba(18, 18, 18, 0.55);
    backdrop-filter: blur(2px);
    padding: 4vh 4vw;
    overflow-y: auto;
}
.bpm-overlay.is-open { display: block; }

.bpm-shell {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.bpm-close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
    border: 0;
    background: none;
    color: #9a9a9a;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}
.bpm-close:hover { color: #1a1a1a; }

.bpm-body {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    min-height: min(88vh, 780px);
}

/* Photo side — the image floats on a soft wash of its own colours, the way
   the reference does, so it reads as a preview rather than a thumbnail. */
.bpm-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3.5rem;
    overflow: hidden;
    background: #eceae7;
}

/* The client's own photo, blurred and over-scaled, as the backdrop. Scaled
   past the edges because a blur samples beyond them and would otherwise
   leave a pale halo around the pane. */
.bpm-photo__blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
    filter: blur(38px) saturate(1.15);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.bpm-photo__frame {
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: 0;
}
.bpm-photo__frame > img {
    max-width: 100%;
    max-height: 66vh;
    object-fit: contain;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
}

/* What the chosen size will keep. Centred on the photo, proportioned to the
   print, and outlined rather than shaded so nothing is hidden behind it. */
.bpm-crop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #4b6cf5;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.55) inset;
    pointer-events: none;
}
.bpm-crop[hidden] { display: none; }

/* While the client is framing a print, everything outside the rectangle is
   dimmed: what stays bright is what gets printed. */
.bpm-photo__frame.is-framing .bpm-photo__raw { opacity: 0.45; }
.bpm-photo__frame.is-framing { cursor: grab; touch-action: none; }
.bpm-photo__frame.is-dragging { cursor: grabbing; }
.bpm-photo__frame.is-framing .bpm-crop {
    /* The bright cut-out: the same photo, clipped to the rectangle and
       shifted with it, drawn over the dimmed one underneath. */
    background-image: var(--bpm-crop-src);
    background-repeat: no-repeat;
    box-shadow: none;
}

.bpm-photo__note {
    position: absolute;
    left: 2.4rem;
    bottom: 1.8rem;
    z-index: 2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--pxg-ui);
    font-size: 1.15rem;
    color: #5c5c5c;
}
.bpm-photo__note[hidden] { display: none; }
.bpm-photo__note-ico { font-size: 1.3rem; opacity: 0.7; }

.bpm-config-from {
    margin: 0 0 1.1rem;
    font-family: var(--pxg-ui);
    font-size: 1.35rem;
    color: #6b6b6b;
}
.bpm-config-from[hidden] { display: none; }
.bpm-config-blurb {
    margin: 0 0 1.8rem;
    font-family: var(--pxg-ui);
    font-size: 1.3rem;
    line-height: 1.7;
    color: #5c5c5c;
}
.bpm-config-blurb[hidden] { display: none; }

/* One mockup scene per product, cross-faded as the client moves between cards.
   Hidden scenes keep their layout box (visibility, not display) so the warp
   renderer can still measure them. */
.bpm-photo__frame,
.bpm-photo__scene {
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease;
}
.bpm-photo__frame.is-active,
.bpm-photo__scene.is-active { opacity: 1; visibility: visible; }
.bpm-photo__scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3.5rem;
}
.bpm-photo__scene .mockup {
    height: 100%;
    width: auto;
    max-width: 100%;
    background: transparent;
}
/* The scene's own contact shadows are per-print; the pane-level shadow that
   suits a bare photo would double up on them. */
.bpm-photo__scene .mockup img { box-shadow: none; }

.bpm-panel {
    padding: 3.4rem 3.6rem 3.6rem;
    overflow-y: auto;
    max-height: min(88vh, 780px);
}

.bpm-step { display: none; }
.bpm-step.is-active { display: block; }

.bpm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.6rem;
}
.bpm-title {
    margin: 0;
    font-family: var(--pxg-display);
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #1a1a1a;
}
.bpm-store-link {
    font-family: var(--pxg-display);
    font-size: 1.35rem;
    color: #6b6b6b;
    text-decoration: none;
    white-space: nowrap;
}
.bpm-store-link:hover { color: #1a1a1a; }

/* ── Category tabs ── */
.bpm-tabs {
    display: flex;
    gap: 2.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0.8rem;
}
.bpm-tab {
    position: relative;
    padding: 0 0 1.2rem;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.4rem;
    color: #9a9a9a;
    transition: color 140ms ease;
}
.bpm-tab:hover { color: #4a4a4a; }
.bpm-tab.is-active { color: #1a1a1a; font-weight: 400; }
.bpm-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #1a1a1a;
}

.bpm-pane { display: none; }
.bpm-pane.is-active { display: block; }

/* ── Size list ── */
.bpm-sizes { display: none; }
.bpm-sizes.is-active { display: block; }

.bpm-size-row {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 18px;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: none;
    cursor: pointer;
    text-align: left;
}
.bpm-size-row:hover .bpm-size-name,
.bpm-size-row:hover .bpm-size-price { color: #1a1a1a; }

.bpm-size-name {
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.45rem;
    color: #4a4a4a;
    transition: color 140ms ease;
}
.bpm-size-flag {
    display: inline-block;
    margin-left: 0.8rem;
    font-size: 1rem;
    font-style: normal;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a9a9a;
}
/* Resolution caveat. Warm rather than alarming: the size is still for sale,
   we are just being straight about how it will look. */
.bpm-size-flag--soft { color: #b07d3a; }
.bpm-size-price {
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.45rem;
    color: #4a4a4a;
    transition: color 140ms ease;
}
.bpm-chev {
    justify-self: end;
    width: 8px;
    height: 8px;
    border-top: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;
    transform: rotate(45deg);
}
.bpm-size-row:hover .bpm-chev { border-color: #1a1a1a; }

/* ── Shop All grid ── */
.bpm-subhead {
    margin: 3.4rem 0 2rem;
    font-family: var(--pxg-display);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #1a1a1a;
}
.bpm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2.4rem 1.8rem;
}
.bpm-card {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}
.bpm-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 0.92;
    background: #f4f4f4;
    overflow: hidden;
    border: 1px solid transparent;
}
.bpm-card.is-active .bpm-card__media { border-color: #1a1a1a; }
.bpm-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* A mockup stage sizes itself from its own aspect ratio; inside a card it has
   to fill the square instead. */
.bpm-card__media .mockup { width: 100%; height: 100%; }
.bpm-card__name {
    display: block;
    margin-top: 1rem;
    font-family: var(--pxg-display);
    font-size: 1.4rem;
    color: #1a1a1a;
}
.bpm-card__price {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.15rem;
    color: #8a8a8a;
}

/* ── Configure step ── */
.bpm-back {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.25rem;
    color: #8a8a8a;
}
.bpm-back:hover { color: #1a1a1a; }
.bpm-back__arrow {
    width: 9px;
    height: 9px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

.bpm-config-size {
    margin: 0.5rem 0 2.8rem;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.35rem;
    color: #8a8a8a;
}

.bpm-optgroup { margin-bottom: 2.4rem; }
.bpm-optgroup__label {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--pxg-ui);
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.bpm-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 0.9rem;
}
.bpm-chip {
    min-height: 40px;
    padding: 0 0.8rem;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #4a4a4a;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.2rem;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}
.bpm-chip:hover { border-color: #9a9a9a; color: #1a1a1a; }
.bpm-chip.is-active {
    border-color: #1a1a1a;
    color: #1a1a1a;
    box-shadow: inset 0 0 0 1px #1a1a1a;
}

.bpm-qty {
    width: 92px;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid #dcdcdc;
    font-family: var(--pxg-ui);
    font-size: 1.3rem;
    color: #1a1a1a;
}

.bpm-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.8rem 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.bpm-total__label {
    font-family: var(--pxg-ui);
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.bpm-total__value {
    font-family: var(--pxg-display);
    font-size: 2rem;
    color: #1a1a1a;
}

.bpm-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border: 0;
    background: #333;
    color: #fff;
    font-family: var(--pxg-ui);
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.bpm-add:hover { background: #1a1a1a; color: #fff; }
.bpm-add[disabled] { background: #b9b9b9; cursor: progress; }
.bpm-add--link { margin-bottom: 1.2rem; }

.bpm-secondary {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dcdcdc;
    background: #fff;
    color: #4a4a4a;
    font-family: var(--pxg-ui);
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}
.bpm-secondary:hover { border-color: #1a1a1a; color: #1a1a1a; }

.bpm-note {
    margin: 1.4rem 0 0;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.15rem;
    color: #8a8a8a;
}
.bpm-empty {
    padding: 3rem 0;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.25rem;
    color: #8a8a8a;
}
/* ── Opening state ──────────────────────────────────────────────────────
   The modal opens on the photo the client just clicked — already decoded in
   the page, so it paints on the first frame — with the catalogue side stubbed
   until the fragment lands. Laid out like the real thing so nothing jumps
   when it is swapped in. */
.bpm-shell.is-skeleton .bpm-panel {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 3.2rem 2.8rem;
}
.bpm-skel {
    border-radius: 4px;
    background: linear-gradient(90deg, #efefef 25%, #f7f7f7 37%, #efefef 63%);
    background-size: 400% 100%;
    animation: bpm-shimmer 1.4s ease-in-out infinite;
}
.bpm-skel--title { height: 2.6rem; width: 55%; }
.bpm-skel--line { height: 1.3rem; width: 80%; }
.bpm-skel--line:last-of-type { width: 62%; }
.bpm-skel--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    background: none;
    animation: none;
    margin-top: 1.2rem;
}
.bpm-skel--cards span {
    aspect-ratio: 1;
    border-radius: 6px;
    background: linear-gradient(90deg, #efefef 25%, #f7f7f7 37%, #efefef 63%);
    background-size: 400% 100%;
    animation: bpm-shimmer 1.4s ease-in-out infinite;
}
@keyframes bpm-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .bpm-skel, .bpm-skel--cards span { animation: none; }
}

.bpm-loading {
    padding: 8rem 2rem;
    text-align: center;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9a9a9a;
}

@media (max-width: 900px) {
    .bpm-overlay { padding: 0; }
    .bpm-body { grid-template-columns: 1fr; min-height: 0; }
    .bpm-photo { padding: 2.5rem 2rem; }
    .bpm-photo img { max-height: 38vh; }
    .bpm-panel { max-height: none; padding: 2.6rem 2rem 3.5rem; }
}

/* ══ Lightbox ════════════════════════════════════════════════════════════ */

.glb {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: none;
    flex-direction: column;
    background: #fff;
}
.glb.is-open { display: flex; }

.glb__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 2rem;
}
.glb__actions { display: flex; align-items: center; gap: 0.4rem; }

.glb__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #6b6b6b;
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms ease;
}
.glb__icon:hover { color: #1a1a1a; }
.glb__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.glb__icon[aria-pressed="true"] { color: #1a1a1a; }
.glb__icon[aria-pressed="true"] svg { fill: currentColor; }
#glb-slideshow svg { fill: currentColor; stroke: none; }

.glb__buy {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: 0.8rem;
    padding: 0 2.2rem;
    min-height: 44px;
    border: 0;
    background: #333;
    color: #fff;
    font-family: var(--pxg-ui);
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms ease;
}
.glb__buy:hover { background: #1a1a1a; }
.glb__buy svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glb__stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6rem;
    min-height: 0;
}
.glb__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.12);
}

.glb__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #b0b0b0;
    cursor: pointer;
    transition: color 150ms ease;
}
.glb__arrow:hover { color: #1a1a1a; }
.glb__arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.glb__arrow--prev { left: 0.8rem; }
.glb__arrow--next { right: 0.8rem; }
.glb__arrow[hidden] { display: none; }

.glb__caption {
    flex: 0 0 auto;
    padding: 1.6rem 2rem 2.2rem;
    text-align: center;
    font-family: var(--pxg-ui);
    font-weight: 300;
    font-size: 1.2rem;
    color: #9a9a9a;
}

@media (max-width: 700px) {
    .glb__stage { padding: 0 1rem; }
    .glb__arrow { width: 40px; height: 40px; }
    .glb__buy { padding: 0 1.2rem; letter-spacing: 0.12em; }
    .glb__bar { padding: 0.8rem 1rem; }
}

/* ─── Lightbox per-photo download menu ──────────────────────────────
   Sits in the lightbox bar. Anchored to the right so it never runs off
   the edge of a narrow viewport. */
.glb-menu { position: relative; }
.glb-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 20rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,0.16);
    padding: 0.5rem;
    display: none;
    z-index: 40;
}
.glb-menu.is-open .glb-menu__panel { display: block; }
.glb-menu__item {
    display: block;
    padding: 0.8rem 1rem;
    color: #1a1a1a;
    font-family: var(--pxg-ui);
    font-size: 1.35rem;
    text-decoration: none;
}
.glb-menu__item:hover { background: #f5f5f5; }
.glb-menu__item span {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a9a9a;
}