/*
 * WPP Album Viewer v4.4 — Soft Blush theme
 * Design: blush pink (#f7dcd0) background, deep ink text, film aesthetic
 * Photos are everything. UI whispers.
 */

/* ─── TOKENS ─── */
:root {
  --noir:    #0e0c0b;
  --noir2:   #1a1714;
  --noir3:   #2a2623;
  --film:    #f7dcd0;    /* primary blush — topbar, panels, page bg */
  --film2:   #f3d3c4;    /* deeper blush */
  --film3:   #ecc6b3;    /* border / hover blush */
  --ink:     #1c1714;    /* near-black — primary text/buttons */
  --ink2:    #2a2521;    /* hover/secondary */
  --ink3:    #3d3630;    /* mid-tone — readable on light */
  --ink4:    #4a4239;    /* muted — but always legible (was #b0a89e too light) */
  --terra:   #1c1714;    /* primary action — black, was blush */
  --terra2:  #000000;    /* deeper on hover */
  --terra-lt:#e8e2d6;    /* subtle wash */
  --on-terra:#fff;       /* text/icon color sitting ON top of --terra */
  --sage:    #7a9e82;
  --err:     #c04040;
  --line:    rgba(28,23,20,.14);
  --line2:   rgba(28,23,20,.24);
  --film3:   #d8c8b8;    /* darker blush border — was #ecc6b3 too light */
  --r4:      4px;
  --r8:      8px;
  --r12:     12px;
  --ease:    cubic-bezier(.25,.46,.45,.94);
  --spring:  cubic-bezier(.34,1.56,.64,1);
}

/* ─── DARK THEME OVERRIDE ─── */
.wpp-viewer-body.wpp-theme-dark,
.wpp-viewer-body.wpp-theme-dark .wpp-album-page {
  --film:    #1a1413;
  --film2:   #251d1c;
  --film3:   #322a28;
  --ink:     #f5ede9;
  --ink2:    #d8cdc8;
  --ink3:    #a89d97;
  --ink4:    #7a7268;
  --terra:   #f5ede9;    /* light cream in dark mode = high contrast on dark bg */
  --terra2:  #ffffff;
  --terra-lt:#241b1a;
  --on-terra:#0e0c0b;    /* text/icon color on top of cream terra in dark mode */
  --line:    rgba(255,255,255,.10);
  --line2:   rgba(255,255,255,.18);
  background: #0e0c0b;
  color: var(--ink);
}
.wpp-viewer-body.wpp-theme-dark .wpp-album-page { background: #0e0c0b; }
.wpp-viewer-body.wpp-theme-dark .wpp-album-topbar { background: rgba(20,16,15,.85); }
.wpp-viewer-body.wpp-theme-dark .wpp-guestbook { background: #15100f; }
.wpp-viewer-body.wpp-theme-dark .wpp-guestbook-form,
.wpp-viewer-body.wpp-theme-dark .wpp-gb-entry { background: #1f1816; border-color: rgba(255,255,255,.08); }
.wpp-viewer-body.wpp-theme-dark .wpp-gb-name,
.wpp-viewer-body.wpp-theme-dark .wpp-gb-msg { background:#15100f; color:var(--ink); border-color:rgba(255,255,255,.12); }
.wpp-viewer-body.wpp-theme-dark .wpp-view-controls { background:#15100f; border-color:rgba(255,255,255,.10); }
.wpp-viewer-body.wpp-theme-dark .wpp-topbar-btn:hover,
.wpp-viewer-body.wpp-theme-dark .wpp-back-btn:hover { background:rgba(255,255,255,.06); }
.wpp-viewer-body.wpp-theme-dark .wpp-topbar-title { color: rgba(245,237,233,.78); }
.wpp-viewer-body.wpp-theme-dark .wpp-album-meta-item,
.wpp-viewer-body.wpp-theme-dark .wpp-album-breadcrumb,
.wpp-viewer-body.wpp-theme-dark .wpp-album-breadcrumb a { color: var(--ink3); }
.wpp-viewer-body.wpp-theme-dark .wpp-gb-entry-msg { color: var(--ink2); }
.wpp-viewer-body.wpp-theme-dark .wpp-pin-screen__card { background:#1f1816; border-color:rgba(255,255,255,.10); }
.wpp-viewer-body.wpp-theme-dark .wpp-pin-field { background:#15100f; color:var(--ink); border-color:rgba(255,255,255,.15); }
.wpp-viewer-body.wpp-theme-dark .wpp-pin-dot { border-color:rgba(255,255,255,.25); }
.wpp-viewer-body.wpp-theme-dark .wpp-theme-toggle .wpp-theme-toggle__icon--sun { display:none; }
.wpp-viewer-body.wpp-theme-dark .wpp-theme-toggle .wpp-theme-toggle__icon--moon { display:inline-block; }
.wpp-theme-toggle .wpp-theme-toggle__icon--moon { display:none; }
.wpp-theme-toggle .wpp-theme-toggle__icon--sun { display:inline-block; }

/* ─── RESET ─── */
.wpp-viewer-body { margin:0; padding:0; background:var(--film); }
.wpp-viewer-body.admin-bar .wpp-album-topbar { top:32px; }
@media (max-width:782px) { .wpp-viewer-body.admin-bar .wpp-album-topbar { top:46px; } }
.wpp-album-page *,.wpp-album-page *::before,.wpp-album-page *::after { box-sizing:border-box; }

/* ─── PAGE ─── */
.wpp-album-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--film);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── TOPBAR ─── */
.wpp-album-topbar {
  position: sticky; top: 0; z-index: 100;
  height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px;
  background: rgba(247,220,208,.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(28,23,20,.08);
  transition: border-color .3s;
}
.wpp-album-topbar.scrolled { border-bottom-color: rgba(28,23,20,.18); }
.wpp-topbar-left, .wpp-topbar-right { display:flex; align-items:center; gap:6px; }

.wpp-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:var(--r8);
  font-size:12.5px; font-weight:600; color:var(--ink4);
  text-decoration:none; transition:color .15s, background .15s;
}
.wpp-back-btn:hover { color:var(--ink); background:rgba(28,23,20,.06); }
.wpp-back-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

.wpp-topbar-divider { width:1px; height:16px; background:rgba(28,23,20,.15); }
.wpp-topbar-title {
  font-size:13px; font-weight:600; color:rgba(28,23,20,.78);
  letter-spacing:.01em; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.wpp-topbar-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:var(--r8);
  font-family:inherit; font-size:12px; font-weight:600;
  color:var(--ink4); background:transparent; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:all .15s var(--ease);
}
.wpp-topbar-btn:hover { color:var(--ink); background:rgba(28,23,20,.06); border-color:rgba(28,23,20,.08); }
.wpp-topbar-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.9; flex-shrink:0; }
.wpp-topbar-btn--active,
#wpp-selection-toggle.active {
  background:var(--terra); color:var(--on-terra) !important; border-color:var(--terra);
}
.wpp-topbar-btn--active:hover,
#wpp-selection-toggle.active:hover { background:var(--terra2); border-color:var(--terra2); }
.wpp-ai-picks-btn { border-color:rgba(28,23,20,.35); color:var(--ink); }
.wpp-ai-picks-btn:hover { background:rgba(28,23,20,.06); color:var(--ink); border-color:var(--ink); }

.wpp-fav-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--terra); color:var(--on-terra);
  border-radius:99px; font-size:10px; font-weight:700; line-height:1;
}

/* View controls */
.wpp-view-controls {
  display:flex; align-items:center; gap:2px;
  background:#fff; border:1px solid rgba(28,23,20,.18); border-radius:var(--r8); padding:3px;
}
.wpp-view-btn {
  width:28px; height:26px; border-radius:var(--r4); background:transparent; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink4);
  transition:all .13s;
}
.wpp-view-btn:hover { color:var(--ink2); }
.wpp-view-btn.active { background:var(--ink); color:#fff; }
.wpp-view-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ─── ALBUM HERO ─── */
.wpp-album-hero {
  max-width: 760px; margin: 0 auto;
  padding: 60px 32px 44px; text-align: center;
}
.wpp-album-breadcrumb { font-size:12px; color:var(--ink4); margin-bottom:20px; }
.wpp-album-breadcrumb a { color:var(--ink4); text-decoration:none; transition:color .13s; }
.wpp-album-breadcrumb a:hover { color:var(--terra); }
.wpp-album-breadcrumb span { margin:0 8px; opacity:.35; }

.wpp-album-eyebrow {
  display:block; font-size:10px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--terra); margin-bottom:14px; opacity:.85;
}
.wpp-album-heading {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 750; line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink); margin: 0 0 22px;
}
.wpp-album-meta-row {
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  margin-bottom:18px;
}
.wpp-album-meta-item {
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink4);
}
.wpp-album-meta-item svg { width:13px; height:13px; stroke:var(--ink3); fill:none; stroke-width:1.9; }
.wpp-album-story {
  max-width:520px; margin:0 auto; font-size:15px; line-height:1.75;
  color:var(--ink3); font-style:italic;
}

/* ─── PHOTO SECTION ─── */
.wpp-photo-section { padding: 4px 0 100px; }

/* ─── GRIDS — no-gap proof-sheet aesthetic ─── */
.wpp-album-grid {}
.wpp-album-grid--grid {
  display: block; columns: 4; column-gap: 3px;
}
.wpp-album-grid--grid .wpp-photo-item { break-inside:avoid; margin-bottom:3px; }

.wpp-album-grid--masonry {
  display: block; columns: 5; column-gap: 2px;
}
.wpp-album-grid--masonry .wpp-photo-item { break-inside:avoid; margin-bottom:2px; }

.wpp-album-grid--large {
  display: block; columns: 2; column-gap: 4px;
}
.wpp-album-grid--large .wpp-photo-item { break-inside:avoid; margin-bottom:4px; }

/* ─── PHOTO ITEM ─── */
.wpp-photo-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--noir2);
  /* Scroll reveal — start invisible */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease);
}
.wpp-photo-item.wpp-revealed {
  opacity: 1; transform: none;
}
.wpp-photo-item:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* Images — always natural ratio */
.wpp-album-grid .wpp-photo-item img {
  width:100%; height:auto; display:block;
  transition: transform .6s var(--ease), filter .3s var(--ease);
  will-change: transform;
}
.wpp-photo-item:hover img { transform: scale(1.04); }

/* Favourite ring */
.wpp-photo-item.wpp-is-fav { box-shadow: inset 0 0 0 3px var(--terra); }

/* AI pick ring */
.wpp-photo-item.wpp-ai-pick { box-shadow: inset 0 0 0 3px var(--sage); }

/* Selected ring */
.wpp-photo-item.wpp-selected { box-shadow: inset 0 0 0 3px var(--sage); }

/* Film grain overlay on hover */
.wpp-photo-item::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .3s;
  pointer-events: none; z-index: 2;
}
.wpp-photo-item:hover::after { opacity: 1; }

/* Watermark */
.wpp-watermark-overlay {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:rgba(255,255,255,.2);
  letter-spacing:4px; text-transform:uppercase; pointer-events:none;
  transform:rotate(-22deg); text-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* Photo overlay */
.wpp-photo-overlay {
  position:absolute; inset:0; z-index:4;
  background: linear-gradient(
    180deg,
    rgba(14,12,11,.55) 0%,
    transparent 30%,
    transparent 60%,
    rgba(14,12,11,.65) 100%
  );
  opacity:0; transition:opacity .25s var(--ease);
  display:flex; flex-direction:column; justify-content:space-between; padding:10px;
}
.wpp-photo-item:hover .wpp-photo-overlay { opacity:1; }

.wpp-photo-num {
  font-size:10px; font-weight:700; color:rgba(245,240,232,.55);
  font-family:ui-monospace,monospace; letter-spacing:1px;
}
.wpp-photo-actions { display:flex; gap:5px; justify-content:flex-end; }

.wpp-photo-action-btn {
  width:33px; height:33px; border-radius:50%;
  background:rgba(245,240,232,.9); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--noir); text-decoration:none;
  transition:background .13s, transform .15s var(--spring);
  backdrop-filter:blur(8px);
}
.wpp-photo-action-btn:hover { background:#fff; transform:scale(1.12); }
.wpp-photo-action-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.wpp-fav-btn.active { background:var(--terra); color:var(--on-terra); }
.wpp-fav-btn.active svg { fill:currentColor; stroke:currentColor; }

/* ─── LIGHTBOX ─── */
.wpp-lightbox {
  position:fixed; inset:0; z-index:10000;
  background:var(--noir); display:flex; flex-direction:column;
  animation:wpp-lb-in .22s var(--ease);
}
@keyframes wpp-lb-in { from{opacity:0} to{opacity:1} }
.wpp-lb-closing { animation:wpp-lb-out .2s var(--ease) forwards; }
@keyframes wpp-lb-out { to{opacity:0} }

.wpp-lb-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; flex-shrink:0;
  border-bottom:1px solid var(--line);
}
.wpp-lb-counter {
  font-size:12px; color:rgba(245,240,232,.35);
  font-family:ui-monospace,monospace; letter-spacing:1px;
}
.wpp-lb-actions { display:flex; align-items:center; gap:6px; }

.wpp-lb-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--noir3); border:1px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(245,240,232,.6); transition:all .15s var(--ease);
}
.wpp-lb-btn:hover { background:var(--noir2); border-color:var(--line2); color:var(--film); }
.wpp-lb-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; }
.wpp-lb-btn.active { background:var(--terra); border-color:var(--terra); color:var(--on-terra); }
.wpp-lb-btn.active svg { fill:currentColor; }
.wpp-lb-btn--close:hover { background:rgba(192,64,64,.35); border-color:rgba(192,64,64,.5); color:#faa; }

/* LB Stage */
.wpp-lb-stage {
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; padding:20px 72px; min-height:0;
}
#wpp-lb-img-wrap { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.wpp-lb-img {
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  transition:transform .25s ease, opacity .18s ease;
  cursor:zoom-in; border-radius:2px;
  will-change:transform;
}
.wpp-lb-img.zoomed { cursor:zoom-out; }
.wpp-lb-img.zoomed { cursor:zoom-out; }

/* Filmstrip */
.wpp-lb-strip-wrap {
  flex-shrink:0; height:70px; padding:8px 16px;
  border-top:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center;
}
.wpp-lb-strip {
  display:flex; gap:4px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  align-items:center; height:100%;
}
.wpp-lb-strip::-webkit-scrollbar { display:none; }
.wpp-lb-strip-thumb {
  flex-shrink:0; width:52px; height:52px; border-radius:var(--r4);
  overflow:hidden; cursor:pointer; border:1.5px solid transparent;
  transition:border-color .15s, transform .15s var(--spring), opacity .15s;
  opacity:.5;
}
.wpp-lb-strip-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wpp-lb-strip-thumb:hover { opacity:.8; transform:scale(1.06); }
.wpp-lb-strip-thumb.active { border-color:var(--terra); opacity:1; }

.wpp-lb-caption {
  text-align:center; font-size:12px; color:var(--ink4);
  padding:0 20px 8px; min-height:20px; flex-shrink:0;
}
.wpp-lb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(14,12,11,.7); border:1px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(245,240,232,.7); backdrop-filter:blur(8px);
  transition:all .15s var(--ease);
}
.wpp-lb-nav:hover { background:var(--noir2); border-color:var(--line2); color:var(--film); }
.wpp-lb-nav svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.wpp-lb-prev { left:14px; }
.wpp-lb-next { right:14px; }

.wpp-lb-spinner {
  width:32px; height:32px; border:2.5px solid var(--line2);
  border-top-color:var(--terra); border-radius:50%;
  animation:wpp-spin .7s linear infinite;
}
@keyframes wpp-spin { to{transform:rotate(360deg)} }

/* ─── SLIDESHOW ─── */
.wpp-ss-bar {
  position:fixed; inset:0; z-index:10001;
  background:var(--noir); display:flex; align-items:center; justify-content:center;
}
.wpp-ss-bg {
  position:absolute; inset:-5%; background-size:cover; background-position:center;
  filter:blur(50px) brightness(.25) saturate(.8); z-index:0;
  transition:background-image .6s;
}
.wpp-ss-img-wrap {
  position:relative; z-index:1; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:70px;
}
/* Ken Burns on slideshow image */
.wpp-ss-img {
  max-width:100%; max-height:100%; object-fit:contain;
  display:block; border-radius:2px;
  opacity:0; transition:opacity .55s var(--ease);
  transform-origin:center center;
}
.wpp-ss-img.ss-visible { opacity:1; animation:wpp-ken-burns 8s var(--ease) both; }
@keyframes wpp-ken-burns {
  from { transform:scale(1.08); }
  to   { transform:scale(1); }
}
.wpp-ss-close {
  position:absolute; top:18px; right:20px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:var(--noir3); border:1px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(245,240,232,.7); transition:all .13s;
}
.wpp-ss-close:hover { background:var(--noir2); color:var(--film); }
.wpp-ss-close svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.wpp-ss-progress {
  position:absolute; top:0; left:0; height:2px; background:var(--terra); z-index:3;
  transition:width .12s linear; border-radius:0 1px 1px 0;
}

.wpp-ss-controls {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:12px;
  background:rgba(14,12,11,.7); backdrop-filter:blur(16px);
  padding:10px 20px; border-radius:99px; border:1px solid var(--line);
}
.wpp-ss-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--noir3); border:1px solid var(--line);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(245,240,232,.7); transition:all .13s;
}
.wpp-ss-btn:hover { background:var(--noir2); color:var(--film); }
.wpp-ss-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; }
.wpp-ss-btn--play { width:46px; height:46px; background:var(--terra); border-color:var(--terra); color:var(--on-terra); }
.wpp-ss-btn--play:hover { background:var(--terra2); border-color:var(--terra2); }
.wpp-ss-counter {
  font-size:11.5px; color:rgba(245,240,232,.45);
  font-family:ui-monospace,monospace; min-width:52px; text-align:center; letter-spacing:.5px;
}
#wpp-ss-speed { display:flex; gap:3px; }
#wpp-ss-speed button {
  font-size:10.5px; padding:3px 8px; border-radius:99px;
  background:var(--noir3); color:rgba(245,240,232,.55);
  border:1px solid var(--line); cursor:pointer; font-family:inherit;
  transition:all .13s;
}
#wpp-ss-speed button:hover { color:var(--film); }
#wpp-ss-speed button.active { background:rgba(247,220,208,.2); color:var(--terra); border-color:rgba(247,220,208,.4); }

.wpp-ss-caption {
  position:absolute; bottom:90px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:13px; color:rgba(245,240,232,.5); text-align:center;
  font-style:italic; max-width:500px; padding:0 24px;
}

/* ─── PANELS ─── */
.wpp-favs-panel, .wpp-comment-panel, .wpp-print-panel {
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw;
  z-index:10002; background:var(--film); display:flex; flex-direction:column;
  border-left:1px solid var(--film3);
  box-shadow:-12px 0 48px rgba(0,0,0,.45);
  animation:wpp-slide-in .28s var(--ease);
}
@keyframes wpp-slide-in { from{transform:translateX(100%)} to{transform:none} }

.wpp-favs-head, .wpp-comment-head, .wpp-print-head {
  display:flex; align-items:center; padding:16px 20px;
  border-bottom:1px solid var(--film3); gap:10px; flex-shrink:0;
  background:var(--film2);
}
.wpp-favs-head h3, .wpp-comment-head h3, .wpp-print-head h3 {
  font-size:14px; font-weight:700; margin:0; flex:1; color:var(--ink); letter-spacing:-.01em;
}
.wpp-favs-close, .wpp-comments-close, .wpp-print-close {
  width:30px; height:30px; border-radius:var(--r8);
  background:transparent; border:1px solid var(--film3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink3);
  transition:all .13s;
}
.wpp-favs-close:hover, .wpp-comments-close:hover, .wpp-print-close:hover {
  background:var(--film3); color:var(--ink);
}
.wpp-favs-close svg, .wpp-comments-close svg, .wpp-print-close svg {
  width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;
}

.wpp-favs-body, .wpp-comment-list, .wpp-print-body {
  flex:1; overflow-y:auto; padding:14px 16px;
}
.wpp-favs-grid, .wpp-print-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
.wpp-favs-grid img, .wpp-print-grid img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r4); cursor:pointer;
  transition:transform .2s var(--ease), opacity .2s;
}
.wpp-favs-grid img:hover { transform:scale(1.03); }

.wpp-favs-empty, .wpp-comment-loading {
  text-align:center; padding:52px 20px; color:var(--ink3); font-size:13.5px; line-height:1.6;
}
.wpp-favs-empty svg { width:44px; height:44px; stroke:var(--film3); fill:none; margin-bottom:12px; display:block; margin-inline:auto; }
.wpp-favs-actions {
  padding:13px 16px; border-top:1px solid var(--film3);
  display:flex; gap:8px; flex-shrink:0; background:var(--film2);
}

/* Comments */
.wpp-comment-form {
  padding:13px 16px; border-top:1px solid var(--film3); flex-shrink:0; background:var(--film2);
}
.wpp-comment-input {
  width:100%; padding:10px 12px; border:1.5px solid var(--film3); border-radius:var(--r8);
  font-family:inherit; font-size:13.5px; resize:vertical; min-height:68px; color:var(--ink);
  background:white; transition:border-color .13s;
}
.wpp-comment-input:focus { outline:none; border-color:var(--terra); }
.wpp-comment-form-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.wpp-comment-charcount, .wpp-char-count { font-size:11px; color:var(--ink4); font-variant-numeric:tabular-nums; }
.wpp-comment-submit {
  padding:8px 16px; background:var(--ink); color:var(--film); border:none;
  border-radius:var(--r8); font-family:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
  transition:background .13s;
}
.wpp-comment-submit:hover { background:var(--ink2); }
.wpp-comment-body {
  background:white; border:1px solid var(--film3); border-radius:var(--r8);
  padding:11px 13px; margin-bottom:8px; font-size:13.5px; line-height:1.55; color:var(--ink2);
}

/* Print form */
.wpp-print-form {
  padding:13px 16px; border-top:1px solid var(--film3); flex-shrink:0; background:var(--film2);
}
.wpp-print-info { font-size:12.5px; color:var(--ink3); margin-bottom:10px; line-height:1.6; }
.wpp-print-notes {
  width:100%; padding:10px 12px; border:1.5px solid var(--film3); border-radius:var(--r8);
  font-family:inherit; font-size:13px; resize:vertical; min-height:60px; color:var(--ink);
}
.wpp-print-notes:focus { outline:none; border-color:var(--terra); }
#wpp-print-grid label { position:relative; cursor:pointer; display:block; }
#wpp-print-grid label input {
  position:absolute; top:6px; left:6px; accent-color:var(--terra);
  width:14px; height:14px;
}
.wpp-print-tile { position:relative; cursor:pointer; display:block; border-radius:4px; overflow:hidden; }
.wpp-print-tile img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:4px; opacity:.85; transition: opacity .18s var(--ease), transform .25s var(--ease); }
.wpp-print-tile:hover img { opacity:1; transform:scale(1.03); }
.wpp-print-tile--off img { opacity:.35; }
.wpp-print-tile input[type="checkbox"] {
  position:absolute; top:6px; left:6px; accent-color:var(--terra);
  width:16px; height:16px; z-index:2;
}
.wpp-print-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 20px; text-align:center;
}

/* Shared panel backdrop */
#wpp-panel-backdrop {
  cursor:pointer;
}

/* ─── BUTTONS in panels ─── */
.wpp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:var(--r8);
  font-family:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
  border:1px solid transparent; text-decoration:none; line-height:1;
  transition:all .15s var(--ease);
}
.wpp-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.wpp-btn-ink, .wpp-btn-primary { background:var(--ink); color:var(--film) !important; flex:1; }
.wpp-btn-ink:hover, .wpp-btn-primary:hover { background:var(--ink2); }
.wpp-btn-ghost, .wpp-btn--ghost { background:white; color:var(--ink) !important; border-color:var(--film3); }
.wpp-btn-ghost:hover, .wpp-btn--ghost:hover { border-color:var(--ink3); }
.wpp-btn-sm, .wpp-btn--sm { padding:6px 12px; font-size:11.5px; }

/* ─── SELECTION MODE ─── */
body.wpp-selection-mode .wpp-photo-overlay { display:none; }
body.wpp-selection-mode .wpp-photo-item::after { display:none; }

.wpp-sel-controls {
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:space-between; padding:8px;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
body.wpp-selection-mode .wpp-sel-controls { opacity:1; pointer-events:auto; }

.wpp-sel-check {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:rgba(245,240,232,.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink3);
  backdrop-filter:blur(6px); transition:all .15s var(--spring);
}
.wpp-sel-check svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; }
.wpp-sel-check.on { background:var(--sage); color:#fff; }
.wpp-sel-check:hover { transform:scale(1.1); }

.wpp-sel-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.wpp-sel-stars {
  display:flex; gap:1px; background:rgba(14,12,11,.55);
  border-radius:99px; padding:3px 7px; backdrop-filter:blur(6px);
}
.wpp-sel-star { font-size:13px; color:rgba(245,240,232,.3); cursor:pointer; line-height:1; transition:color .1s; }
.wpp-sel-star:hover, .wpp-sel-star.on { color:#f5c451; }
.wpp-sel-note-btn {
  width:26px; height:26px; border-radius:50%;
  background:rgba(245,240,232,.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink3);
  backdrop-filter:blur(6px);
}
.wpp-sel-note-btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
.wpp-sel-note-btn.has-note { background:var(--terra); color:var(--on-terra); }

/* Selection bar — always dark surface, light text */
.wpp-sel-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; gap:16px; padding:13px 24px;
  background:rgba(14,12,11,.95); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.wpp-sel-bar-info { font-size:13.5px; color:rgba(255,255,255,.85); white-space:nowrap; }
.wpp-sel-bar-info strong { font-size:18px; font-weight:750; color:#fff; letter-spacing:-.02em; }
.wpp-sel-bar-progress {
  flex:1; height:4px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden; max-width:320px;
}
.wpp-sel-bar-fill { height:100%; background:#fff; border-radius:99px; transition:width .3s var(--ease); }
.wpp-sel-bar .wpp-btn-ink {
  background:#fff; color:#0e0c0b !important; flex:none; border:none; font-weight:700;
}
.wpp-sel-bar .wpp-btn-ink:hover { background:rgba(255,255,255,.88); }
.wpp-sel-bar .wpp-btn-ink.secondary {
  background:rgba(255,255,255,.12); color:#fff !important; border:1px solid rgba(255,255,255,.18);
}
.wpp-sel-bar .wpp-btn-ink.secondary:hover { background:rgba(255,255,255,.18); }

/* ─── PIN SCREEN ─── */
.wpp-pin-screen {
  position:fixed; inset:0; z-index:10003;
  background:rgba(14,12,11,.92); backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.wpp-pin-screen__card {
  background:var(--film); border-radius:var(--r12);
  padding:48px 40px; max-width:380px; width:100%; text-align:center;
}
.wpp-pin-screen__icon { font-size:38px; margin-bottom:16px; }
.wpp-pin-screen__title { font-size:21px; font-weight:750; letter-spacing:-.02em; color:var(--ink); margin:0 0 6px; }
.wpp-pin-screen__names { font-size:14px; color:var(--terra2); font-weight:650; margin-bottom:6px; }
.wpp-pin-screen__desc { font-size:13px; color:var(--ink3); line-height:1.6; margin-bottom:22px; }
.wpp-pin-dots { display:flex; gap:12px; justify-content:center; margin-bottom:16px; }
.wpp-pin-dot {
  width:12px; height:12px; border-radius:50%; border:2px solid var(--film3);
  transition:all .15s var(--spring);
}
.wpp-pin-dot.filled { background:var(--terra); border-color:var(--terra); transform:scale(1.1); }
.wpp-pin-field {
  width:100%; padding:14px; font-size:26px; letter-spacing:14px; text-align:center;
  border:1.5px solid var(--film3); border-radius:var(--r8);
  font-family:ui-monospace,monospace; color:var(--ink); background:white;
  margin-bottom:10px; transition:border-color .13s;
}
.wpp-pin-field:focus { outline:none; border-color:var(--terra); }
.wpp-pin-btn {
  width:100%; padding:13px; background:var(--ink); color:var(--film); border:none;
  border-radius:var(--r8); font-family:inherit; font-size:14.5px; font-weight:650;
  cursor:pointer; transition:background .13s;
}
.wpp-pin-btn:hover { background:var(--ink2); }
.wpp-pin-error { font-size:12.5px; color:var(--err); margin-top:10px; min-height:18px; }

/* ─── GUESTBOOK ─── */
.wpp-guestbook {
  background:var(--terra-lt); border-top:1px solid rgba(28,23,20,.10); padding:72px 32px; margin-top:20px;
}
.wpp-guestbook-inner { max-width:600px; margin:0 auto; }
.wpp-guestbook-eyebrow {
  display:block; font-size:9.5px; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--terra2); margin-bottom:12px; opacity:.8;
}
.wpp-guestbook-title {
  font-size:clamp(22px,3.5vw,32px); font-weight:750; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 32px; line-height:1.15;
}
.wpp-guestbook-form {
  background:#fff; border:1px solid rgba(28,23,20,.10); border-radius:var(--r12);
  padding:20px; margin-bottom:28px;
}
.wpp-gb-name, .wpp-gb-msg {
  width:100%; padding:10px 12px; border:1.5px solid rgba(28,23,20,.15);
  border-radius:var(--r8); font-family:inherit; font-size:13.5px;
  color:var(--ink); background:#fff; margin-bottom:10px; resize:vertical;
  transition:border-color .13s;
}
.wpp-gb-name::placeholder, .wpp-gb-msg::placeholder { color:var(--ink4); }
.wpp-gb-name:focus, .wpp-gb-msg:focus { outline:none; border-color:var(--terra); }
.wpp-gb-form-foot { display:flex; align-items:center; justify-content:space-between; }
.wpp-gb-charcount { font-size:11px; color:var(--ink4); font-variant-numeric:tabular-nums; }
.wpp-guestbook-list { display:flex; flex-direction:column; gap:10px; }
.wpp-gb-entry {
  display:flex; gap:12px; background:#fff; border:1px solid rgba(28,23,20,.10);
  border-radius:var(--r12); padding:13px 15px;
  animation:wpp-gb-in .3s var(--ease);
}
@keyframes wpp-gb-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.wpp-gb-entry-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--terra-lt); color:var(--terra2);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; flex-shrink:0;
}
.wpp-gb-entry-name { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.wpp-gb-entry-msg  { font-size:13.5px; line-height:1.6; color:var(--ink2); }

/* ─── TOAST ─── */
.wpp-ai-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:var(--noir2); color:rgba(245,240,232,.9);
  border:1px solid var(--line2); padding:10px 20px; border-radius:99px;
  font-size:12.5px; font-weight:600; z-index:10010; white-space:nowrap;
  backdrop-filter:blur(16px);
  animation:wpp-toast-in .22s var(--spring);
}
@keyframes wpp-toast-in { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%)} }

/* ─── ACCESSIBILITY ─── */
.wpp-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ─── RESPONSIVE ─── */
@media (max-width:900px) {
  .wpp-album-grid--grid    { columns:3; }
  .wpp-album-grid--masonry { columns:4; }
  .wpp-album-grid--large   { columns:2; }
}
@media (max-width:640px) {
  .wpp-album-topbar { padding:0 12px; height:48px; }
  .wpp-topbar-btn span:not(.wpp-fav-count) { display:none; }
  .wpp-topbar-btn { padding:6px 8px; }
  .wpp-album-hero { padding:36px 18px 28px; }
  .wpp-photo-section { padding:2px 0 80px; }
  .wpp-album-grid--grid    { columns:2; }
  .wpp-album-grid--masonry { columns:3; }
  .wpp-album-grid--large   { columns:1; }
  .wpp-lb-stage { padding:16px 44px; }
  .wpp-lb-prev  { left:6px; }
  .wpp-lb-next  { right:6px; }
  .wpp-lb-strip-wrap { display:none; }
  .wpp-guestbook { padding:48px 16px; }
  .wpp-sel-bar { padding:10px 14px; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .wpp-album-page *,.wpp-lightbox,.wpp-ss-img,.wpp-photo-item {
    animation:none !important; transition:none !important;
  }
}

/* ─── LIGHTBOX IMAGE FADE ─── */
.wpp-lb-img { transition: transform .24s var(--ease), opacity .2s !important; }

/* ─── SS caption ─── */
.wpp-ss-caption {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 13px; color: rgba(245,240,232,.45);
  font-style: italic; text-align: center; max-width: 480px; padding: 0 24px;
  pointer-events: none;
}