:root{

--primary-darkest:#2b0510;
--primary-darker:#3f0a18;
--primary:#831132;

--secondary:#d2b885;
--secondary-light:#eeddb8;

--cream:#f7ede0;

--glass-bg:
linear-gradient(
135deg,
rgba(255,255,255,.16),
rgba(255,255,255,.04)
);

/* All borders across cards / buttons / inputs share this token so the
   whole site reads as one family of "glass" surfaces. */
--border:1px solid rgba(210,184,133,.35);
--border-strong:1px solid rgba(238,221,184,.55);

/* Soft, faded box-shadow used everywhere instead of a hard-edged one. */
--shadow-soft:
    0 30px 70px -12px rgba(20,3,9,.55),
    0 8px 24px -8px rgba(20,3,9,.4),
    inset 0 1px 0 rgba(255,255,255,.14);

}
@font-face {
    font-family: "MyFont";
    src: url("/fonts/LuveeRegular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    
}


/* Firefox */
html{
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--primary-darker);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background: var(--primary-darker);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(
        180deg,
        var(--secondary-light),
        var(--secondary),
        var(--secondary-dark)
    );
    border-radius: 999px;
    border: 2px solid var(--primary-darker);
}

::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(
        180deg,
        #f4e6c5,
        var(--secondary-light),
        var(--secondary)
    );
}

::-webkit-scrollbar-corner{
    background: var(--primary-darker);
}



html{
    scroll-behavior:smooth;
    font-family: "MyFont";
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body,*{
    cursor: none !important;
}

/* Browsers give buttons/inputs/selects their own default font in the
   UA stylesheet instead of inheriting the page font — without this,
   every <button> on the site (hero CTA, pin button, section tabs,
   toolbar icons, etc.) silently falls back to the system font. */
button,
input,
select,
textarea{
    font-family:inherit;
}

body{

background:

radial-gradient(circle at 15% 90%,rgba(163,22,63,.18),transparent 45%),
radial-gradient(circle at 85% 85%,rgba(210,184,133,.08),transparent 30%),
radial-gradient(circle at 20% 15%,rgba(163,22,63,.12),transparent 40%),
linear-gradient(
340deg,
var(--primary-darkest),
var(--primary-darker),
var(--primary-darkest)
);

color:var(--cream);

overflow-x:hidden;

}

img{

display:block;

width:100%;

}

#pinOverlay{
position:fixed;
inset:0;
background:#000d;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
}

.hidden{
display:none!important;
}

.pinBox{
width:340px;
background:rgba(20,4,9,.7);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
border:var(--border);
padding:35px;
border-radius:18px;
text-align:center;
box-shadow:var(--shadow-soft);
}

.pinBox input{
width:100%;
padding:15px;
margin:20px 0;
font-size:22px;
text-align:center;
letter-spacing:8px;
border-radius:10px;
border:var(--border);
background:rgba(255,255,255,.06);
color:var(--cream);
}

#pinBtn{
    width:100%;
    padding:14px;
    border-radius:999px;
    border:none;
    background:var(--secondary);
    color:var(--primary-darkest);
    font-weight:600;
    cursor:pointer;
    letter-spacing:.06em;
    text-transform:uppercase;
}

#pinError{
    color:#ff8f8f;
    margin-top:12px;
    font-size:.85rem;
}

/* ── Action-level PIN modal ──────────────────────────────────────────
   Built on the fly by requestPinAuthorization() in utils.js whenever a
   gated action (favorite / unfavorite / download) needs the PIN and the
   visitor hasn't unlocked it yet. Same look as #pinOverlay/.pinBox but
   class-based (not ID-based) so it can be created/destroyed freely
   without colliding with the full-page gate markup already in the DOM. */

.pin-modal-overlay{
    position:fixed;
    inset:0;
    background:#000d;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:100000;
    padding:20px;
}

.pin-modal-box{
    position:relative;
    width:340px;
    max-width:100%;
    background:rgba(20,4,9,.85);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:var(--border);
    padding:35px;
    border-radius:18px;
    text-align:center;
    box-shadow:var(--shadow-soft);
}

.pin-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:var(--cream);
    cursor:pointer;
    font-size:.85rem;
    line-height:1;
}

.pin-modal-box h2{
    color:var(--cream);
    margin:0 0 6px;
}

.pin-modal-hint{
    color:rgba(247,237,224,.7);
    font-size:.85rem;
    margin:0;
}

.pin-modal-input{
    width:100%;
    padding:15px;
    margin:20px 0;
    font-size:22px;
    text-align:center;
    letter-spacing:8px;
    border-radius:10px;
    border:var(--border);
    background:rgba(255,255,255,.06);
    color:var(--cream);
}

.pin-modal-btn{
    width:100%;
    padding:14px;
    border-radius:999px;
    border:none;
    background:var(--secondary);
    color:var(--primary-darkest);
    font-weight:600;
    cursor:pointer;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.pin-modal-error{
    color:#ff8f8f;
    margin-top:12px;
    font-size:.85rem;
    min-height:1em;
}




@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* NOTE: a second, functionally-identical "@keyframes spin" (using "to"
   instead of "100%") used to be declared again near the bottom of this
   file for .toolbar-btn.loading svg. Removed as a duplicate — this one
   keyframes definition now serves both .spinner and .toolbar-btn.loading. */

/* ── Cover / hero ─────────────────────────────────────────────────
   Equal padding on every side comes from .hero-wrapper's uniform
   `padding: 40px`. #hero clips its child #heroBg, which is the layer
   that actually carries the slow ambient zoom loop. */

.hero-wrapper,
main,
footer{
    max-width:1800px;
    margin:0 auto;
}

.hero-wrapper{
    padding:40px;
}


main{
    padding:24px;
}

#hero{
    position:relative;

    min-height:calc(100vh - 80px);

    display:flex;
    align-items:flex-end;

    border-radius:28px;
    overflow:hidden;

    border:var(--border);
    box-shadow:var(--shadow-soft);
}
.hero-logo{
    position:absolute;
    top:clamp(16px, 3.5vw, 28px);
    left:clamp(16px, 3.5vw, 28px);
    z-index:20;
    display:inline-block;
    cursor:pointer;
}

.hero-logo img{
    height:clamp(84px, 16vw, 196px);
    width:auto;
    display:block;
}
.hero-bg{
    position:absolute;
    inset:-25px; /* extra bleed so the zoom never reveals an edge */
    z-index:0;

    background-size:cover;
    background-position:center;

    animation:coverZoom 22s ease-in-out infinite alternate;
}

@keyframes coverZoom{
    from{ transform:scale(1); }
    to{ transform:scale(1.1); }
}

@media (prefers-reduced-motion:reduce){
    .hero-bg{ animation:none; }
}

#hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.75) 18%,
        rgba(0,0,0,.35) 35%,
        transparent 60%
    );
}

.overlay{
    position:absolute;
    inset:0;
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;

    width:100%;
    padding:56px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
}

/* On the album page the hero-content needs to span the *whole* hero
   so the top bar can sit at the very top while the title/CTA sit at
   the very bottom, on the same cover image. */
.album-hero .hero-content{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    height:100%;

    justify-content:flex-end;

    padding:56px;

    z-index:2;
}

.hero-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    gap:24px;
}

.hero-content h1,
#coupleName,
#albumTitle{

    margin:0;


    font-size:clamp(3rem,6vw,5.5rem);

    color:var(--secondary-light);

    line-height:1.05;

    text-shadow:0 4px 18px rgba(0,0,0,.45);

}

#galleryDate{
    color:var(--secondary);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.9rem;
    opacity:.85;
}

.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 38px;

    border-radius:999px;

    text-decoration:none;
    border:none;
    cursor:pointer;

    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.9rem;

    color:var(--primary-darkest);

    background:var(--secondary);

    transition:
        transform .3s,
        background .3s,
        box-shadow .3s;

    box-shadow:
        0 16px 40px -10px rgba(43,5,16,.55);

}

.hero-btn:hover{

    transform:translateY(-3px);

    background:var(--secondary-light);

}

/* Bottom-right play button on an album cover — opens the fullscreen
   slideshow. Liquid-glass circular button. */
.play-btn{
    position:absolute;
    right:56px;
    top:56px;
    z-index:10;
    bottom:auto;
    left:auto;

    width:64px;
    height:64px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;

    color:var(--secondary-light);
    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    cursor:pointer;
    box-shadow:var(--shadow-soft);
    transition:transform .3s, border-color .3s;
}

.play-btn:hover{
    transform:scale(1.08);
    border-color:var(--secondary-light);
}

section{
    width:100%;
    margin:0;
    padding:44px 0;
}
section h2{
 

color:var(--secondary);

font-size:42px;

margin:0;

}

.gallery-container{

    max-width:1800px;

    margin:0 auto;

    padding:40px 40px 24px;

}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px; /* was 35px — Albums title sat far from the cards */
    flex-wrap:wrap;
}

.section-header span{
    color:var(--secondary);
    opacity:.8;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.9rem;
}

/* ── Horizontal card row (Albums + Favorites share this) ─────────── */

.card-row{
    display:flex;
    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;
    -ms-overflow-style:none;

    padding-bottom:8px;

    cursor:grab;
    user-select:none;

    padding:16px;
}

.card-row::-webkit-scrollbar{
    display:none;
}

.card-row.dragging{
    cursor:grabbing;
}

.card-row.dragging .album-card{
    pointer-events:none; /* avoid triggering hover/click mid-drag */
}

/* ── Album card: glass frame, thumbnail as full background, name on
   a fade at the bottom (no photo count). ────────────────────────── */

.album-card{

    position:relative;

    flex:0 0 300px;
    height:380px;

    border-radius:20px;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    cursor:pointer;

    transition:transform .35s, border-color .35s, box-shadow .35s;

}

.album-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.album-card-fade{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:30%;

    background:linear-gradient(
        to top,
        var(--secondary-light) 0%,
        var(--secondary-light) 60%,
        rgba(255,255,255,0) 100%
    );

    opacity:.92;
    pointer-events:none;
    z-index:1; /* merged in — .album-card-fade was declared a second time later in the file with only "z-index:1" */
}

/* Frosted glass strip behind the fade for a true "liquid glass" look
   at the base of the card, independent of the photo itself. */
.album-card::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.album-card-name{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;

    padding:22px;
 
    font-size:26px;
    color:var(--primary-darkest);
    text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.album-card:hover{
    transform:translateY(-8px);
    border-color:rgba(255,255,255,.08); 
    
}

.album-card:hover img{
    transform:scale(1.06);
}

.album-card-title{
    color:var(--primary-darkest);
}


.heart-card{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:70px;
    background:#1b1b1b;
}

/* Favorite cards (photos, not albums) reuse .album-card but drop the
   name label — the hover actions (like/share/download) take its place. */
.favorite-card .album-card-name{
    display:none;
}

/* ── Photo hover actions (like / share / download) ──────────────────
   Shown on hover, before the photo is clicked into the lightbox. */

.photo,
.favorite-card{
    position:relative;
}

.photo-actions{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:3;

    display:flex;
    justify-content:center;
    gap:10px;

    padding:14px 10px 12px;

    background:linear-gradient(to top, rgba(0,0,0,.72), transparent);

    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
}

.photo:hover .photo-actions,
.favorite-card:hover .photo-actions{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.photo-action-btn{
    width:38px;
    height:38px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--glass-bg);
    border:var(--border);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    color:var(--cream);
    cursor:pointer;
    font-size:1rem;
    transition:transform .2s, border-color .2s;
}

.photo-action-btn:hover{
    transform:translateY(-2px);
    border-color:var(--secondary-light);
}

.photo-action-btn.active{
    color:var(--secondary-light);
}

/* ── Bulk selection / zip download ─────────────────────────────────── */

.photos-heading{
    position:relative;
    scroll-margin-top:20px;
}

/* .selection-toolbar was declared twice in the original file:
   once here with layout props, once again lower down (Album top bar
   section) with just "justify-self:start". Merged into one rule. */
.selection-toolbar{
    display:flex;
    gap:12px;
    align-items:center;
    justify-self:start; /* merged in from the duplicate declaration in the "Album top bar" section */

    overflow:hidden;
    transition:width .38s cubic-bezier(.4,0,.2,1);
}

/* Each button/label fades and settles in with a slight stagger so the
   expansion from "Select" into the full toolbar feels sequential
   rather than everything popping in at once. */
.selection-toolbar > *{
    animation:toolbarItemIn .32s cubic-bezier(.2,.8,.2,1) both;
}

.selection-toolbar > *:nth-child(1){ animation-delay:.02s; }
.selection-toolbar > *:nth-child(2){ animation-delay:.08s; }
.selection-toolbar > *:nth-child(3){ animation-delay:.14s; }
.selection-toolbar > *:nth-child(4){ animation-delay:.2s; }

@keyframes toolbarItemIn{
    from{
        opacity:0;
        transform:translateY(6px) scale(.85);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.gallery-toolbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
}

.select-toggle-btn,
.zip-download-btn{
    padding:10px 20px;
    border-radius:999px;
    background:rgba(131,17,50,.22);
    border:var(--border);
    color:var(--secondary);
    cursor:pointer;
    font-size:.85rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:.3s;
}

.select-toggle-btn:hover,
.zip-download-btn:hover{
    border-color:var(--secondary-light);
    color:var(--secondary-light);
}

.zip-download-btn{
    background:var(--secondary);
    color:var(--primary-darkest);
    border-color:var(--secondary);
}

.photo-select-box{
    position:absolute;
    top:10px;
    left:10px;
    z-index:4;
    width:22px;
    height:22px;
    accent-color:var(--secondary);
    display:none;
}

#photoGrid.selecting .photo-select-box{
    display:block;
}

#photoGrid.selecting .photo{
    cursor:pointer;
}

.photo.selected{
    outline:3px solid var(--secondary);
    outline-offset:-3px;
}

.cancel-selection-btn,
.toolbar-btn{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    border:var(--border);

    background:rgba(131,17,50,.22);

    color:var(--secondary);

    cursor:pointer;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

}

.cancel-selection-btn:hover,
.toolbar-btn:hover{

    border-color:var(--secondary-light);

    color:var(--secondary-light);

}

.selection-count{

    min-width:110px;

    color:var(--secondary);

    font-weight:600;

    letter-spacing:.05em;

}

/* ── Album top bar: back (left) / tabs (center) / count (right), all
   aligned on one row. ───────────────────────────────────────────── */

.album-top{

    width:100%;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:24px;

}
#backBtn{

    position:fixed;

    top:36px;
    left:28px;

    z-index:1000;

    display:inline-flex;
    align-items:center;

    padding:12px 24px;

    border-radius:999px;

    text-decoration:none;

    color:var(--cream);

    background:rgba(20,4,9,.55);

    border:var(--border);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:var(--shadow-soft);

    transition:
        background .3s,
        transform .3s,
        border-color .3s;
}

#backBtn:hover{

    transform:translateY(-2px);

    background:rgba(20,4,9,.75);

    border-color:var(--secondary-light);

}
#albumCount{
    justify-self:end;
    margin:0;

    color:var(--secondary);

    font-size:.95rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    white-space:nowrap;
}

/* NOTE: duplicate ".selection-toolbar{ justify-self:start; }" rule
   that used to live here has been merged into the single
   .selection-toolbar rule above (in the "Bulk selection" section). */

.right-toolbar{
    justify-self:end;
}

#sectionTabs{
    justify-self:center;

    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

#sectionTabs button{
    font-weight:600;

    padding:12px 26px;

    border-radius:999px;

    background:rgba(131,17,50,.22);

    border:var(--border-strong);

    color:var(--secondary);

    cursor:pointer;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

    font-size:.9rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

#sectionTabs button.active{

    background:var(--secondary);

    color:var(--primary-darkest);

    border-color:var(--secondary);

    box-shadow:
        0 10px 24px rgba(38,7,17,.28),
        0 0 20px rgba(210,184,133,.35);

}

#sectionTabs button:hover{

    transform:translateY(-2px);

    border-color:var(--secondary-light);

    color:var(--secondary-light);

    background:rgba(131,17,50,.35);

}
#sectionTabs button.active:hover{

    background:var(--secondary-light);

    border-color:var(--secondary-light);

    color:var(--primary-darkest);

}

/* ── Justified photo grid ───────────────────────────────────────── */

#photoGrid{

display:flex;

flex-direction:column;

gap:12px;

}

.row{
    display:flex;
    gap:12px;
}

.row .photo{
    flex:none;
}

/* Glass treatment lives on the *card frame*, never on the photo
   pixels themselves (a blurred photo looks broken, not elegant). */
.photo{

position:relative;

cursor:pointer;

overflow:hidden;

border-radius:18px;

border:var(--border);

box-shadow:var(--shadow-soft);

transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .35s ease;

}

.photo img{

width:100%;

display:block;

transition:

transform .8s ease,

filter .4s ease;

}

.photo:hover{

    border-color:var(--secondary-light);

    transform:translateY(-6px);

}

.photo:hover img{

transform:scale(1.07);

}

.expiry{

padding:12px;
background:var(--secondary);

color:var(--primary-darkest);

text-align:center;

}

.skeleton{

height:250px;

background:linear-gradient(
90deg,
rgba(131,17,50,.35),
rgba(210,184,133,.12),
rgba(131,17,50,.35)
);

animation:loading 1.2s infinite;

}

.footer-content{
    max-width:1800px;
    margin:0 auto;
    padding:24px;
}

@keyframes loading{

0%{

background-position:-200px;

}

100%{

background-position:200px;

}

}

/* ── Floating "scroll to top" button ───────────────────────────────── */

.scroll-top-btn{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:500;

    width:52px;
    height:52px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;

    color:var(--secondary-light);
    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    cursor:pointer;
    box-shadow:var(--shadow-soft);

    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .3s, transform .3s;
}

.scroll-top-btn.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.scroll-top-btn:hover{
    border-color:var(--secondary-light);
    transform:translateY(-3px);
}

/* ── Toast (used by the lightbox share menu) ───────────────────────── */
.lb-favorite svg{
    transition:.2s;
}

.lb-favorite.active svg{
    color:#ff5a7d;
    fill:currentColor;
}
.lb-toast{
    position:fixed;
    left:50%;
    bottom:40px;
    transform:translate(-50%,10px);
    z-index:100000;

    padding:12px 22px;
    border-radius:999px;

    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    color:var(--cream);
    font-size:.9rem;

    opacity:0;
    transition:opacity .3s, transform .3s;
}

.lb-toast.visible{
    opacity:1;
    transform:translate(-50%,0);
}

/* ── Lightbox ─────────────────────────────────────────────────────── */

.lb-overlay{
    position:fixed;
    inset:0;
    z-index:99998;

    background:rgba(10,2,5,.92);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    display:flex;
    flex-direction:column;
}

.lb-topbar{
    display:flex; 
    justify-content:space-between;
    align-items:center;
    padding:22px 28px;
    z-index:2;
}
.lb-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.lb-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

/* .lb-icon-btn used to be declared twice: once here at 44px, and
   again lower down (Fullscreen slideshow section) grouped with
   .ss-icon-btn at 52px — the later rule would have silently won and
   overridden the 44px below. Merged into one rule at 52px (the value
   that was actually taking effect), with display/align-items/
   justify-content/border-radius consolidated here instead of being
   repeated in the .ss-icon-btn grouping further down. */
.lb-icon-btn{
    width:52px; /* was 44px here — overridden by the duplicate rule further down, now merged */
    height:52px; /* was 44px here — overridden by the duplicate rule further down, now merged */
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    color:var(--cream);
    font-size:1.05rem;
    cursor:pointer;
    transition:transform .2s, border-color .2s;
}

.lb-icon-btn:hover{
    transform:translateY(-2px);
    border-color:var(--secondary-light);
}

.lb-icon-btn.active{
    color:var(--secondary-light);
    border-color:var(--secondary-light);
}

/* Image sits inside a padded stage, never flush to the screen edges. */
.lb-stage{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:0 40px 10px;
    min-height:0;
}

.lb-frame{
    max-width:calc(100% - 120px);
    max-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lb-image{
    cursor:zoom-in;
    max-width:100%;
    max-height:78vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:14px;
    box-shadow:var(--shadow-soft);
    transition:transform .3s ease;
}

.lb-image.zoomed{
    cursor:zoom-out;
    transform:scale(2.2);
}

.lb-nav{
    width:52px;
    height:52px;
    border-radius:50%;
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;

    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    color:var(--cream);
    cursor:pointer;
    transition:transform .2s, border-color .2s;
}

.lb-nav:hover{
    transform:scale(1.08);
    border-color:var(--secondary-light);
}

.lb-date{
    flex:1;
    margin:0px;
    justify-self:center;

    color:var(--secondary-light);
    font-size:.95rem;
    letter-spacing:.06em;
}

.lb-caption{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);

    z-index:2;
    text-align:center;
}

.lb-title{
    margin:0;
    color:var(--cream);
    font-size:1rem;
    letter-spacing:.05em;
}

.lb-subtitle{
    color:var(--secondary);
    letter-spacing:.06em;
    font-size:.9rem;
}

.lb-share-menu{
    position:absolute;
    top:52px;
    right:0;

    display:flex;
    flex-direction:column;
    gap:6px;

    padding:10px;
    border-radius:14px;

    background:var(--glass-bg);
    border:var(--border-strong);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow-soft);

    min-width:180px;
}

.lb-share-menu button{
    padding:10px 14px;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--cream);
    text-align:left;
    cursor:pointer;
    font-size:.9rem;
}

.lb-share-menu button:hover{
    background:rgba(255,255,255,.08);
}

@media(max-width:768px){
    .lb-stage{ padding:0 12px; gap:8px; }
    .lb-frame{ max-width:calc(100% - 60px); }
    .lb-nav{ width:40px; height:40px; font-size:1.2rem; }
}


/* ── Fullscreen slideshow ───────────────────────────────────────────── */
/* NOTE: the duplicate ".lb-icon-btn, .ss-icon-btn { width:52px; height:52px;
   display:flex; align-items:center; justify-content:center; border-radius:50%; }"
   rule that used to be here has been merged into the single .lb-icon-btn
   rule in the Lightbox section above. .ss-icon-btn keeps its own sizing
   below (42px), which is the value that was actually winning the cascade. */

.lb-icon-btn svg,
.ss-icon-btn svg{
    width:22px;
    height:22px;
    stroke-width:2;
}
.lb-nav svg{
    width:30px;
    height:30px;
    stroke-width:2;
}

.ss-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:#000;

    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.ss-image{
    max-width:90%;
    max-height:88%;
    object-fit:contain; 
    border-radius:10px;
    opacity:1;
    transition:opacity .4s ease;
}

.ss-image.ss-fade-out{ 
    opacity:0;
}
.ss-image.ss-fade-in{
    opacity:1;
}

@keyframes ssFadeIn{
    from{ opacity:0; transform:scale(1.02); }
    to{ opacity:1; transform:scale(1); }
}

.ss-topbar{
    position:absolute;
    top:0; left:0; right:0;
    z-index:2;

    display:flex;
    align-items:center;
    gap:18px;
    padding:24px 28px;

    background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);

    transition:opacity .35s ease, transform .35s ease;
}

/* Tapping empty space in the slideshow toggles this class on .ss-overlay
   to hide the topbar/controls for a clean, uninterrupted view; tapping
   again brings them back. Buttons themselves stop click propagation so
   they don't trigger this. */
.ss-overlay.ss-controls-hidden .ss-topbar{
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
}

.ss-overlay.ss-controls-hidden .ss-controls{
    opacity:0;
    transform:translate(-50%, 12px);
    pointer-events:none;
}

.ss-caption{
    color:var(--secondary-light);
    letter-spacing:.06em;
    font-size:.95rem;
}

.ss-controls{

    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:16px;

    padding:16px 22px;

    border-radius:999px;

    background:var(--glass-bg);

    border:var(--border-strong);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:opacity .35s ease, transform .35s ease;

    max-width:94vw;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.ss-controls::-webkit-scrollbar{
    display:none;
}

.ss-icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(210,184,133,.3);

    color:var(--cream);
    font-size:1rem;
    cursor:pointer;
    transition:transform .2s, border-color .2s, color .2s;
}

.ss-icon-btn:hover{
    transform:translateY(-2px);
    border-color:var(--secondary-light);
    background:rgba(210,184,133,.12);
}

.ss-icon-btn.active{
    background:var(--secondary);
    color:var(--primary-darkest);
    border-color:var(--secondary);

    box-shadow:
        0 0 18px rgba(210,184,133,.35),
        inset 0 0 8px rgba(255,255,255,.12);
}
.ss-speed{
    position:relative;
}

.ss-speed-btn{

    display:flex;
    align-items:center;
    gap:10px;

    height:42px;

    padding:0 16px;

    border-radius:999px;

    border:var(--border);

    background:rgba(255,255,255,.06);

    color:var(--cream);

    cursor:pointer;

    backdrop-filter:blur(18px);

    transition:.25s;
}

.ss-speed-btn:hover{

    border-color:var(--secondary-light);

}

.ss-speed-btn.open{

    background:var(--secondary);

    color:var(--primary-darkest);

    border-color:var(--secondary);

}

.ss-speed-menu{

    position:fixed;

    min-width:180px;

    padding:8px;

    border-radius:16px;

    background:var(--glass-bg);

    border:var(--border-strong);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow-soft);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .2s,
        transform .2s,
        visibility .2s;
}

.ss-speed-menu.open{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.ss-speed-menu button{

    width:100%;

    padding:12px 14px;

    border:none;

    border-radius:12px;

    background:none;

    color:var(--cream);

    text-align:left;

    cursor:pointer;

    transition:.2s;
}

.ss-speed-menu button:hover{

    background:rgba(255,255,255,.08);

}

.ss-speed-menu button.active{

    background:var(--secondary);

    color:var(--primary-darkest);

}

.lb-icon-btn.flash,
.ss-icon-btn.flash{
    background:var(--secondary);
    color:var(--primary-darkest);
    border-color:var(--secondary);
    transform:scale(.94);
    box-shadow:
        0 0 18px rgba(210,184,133,.45),
        inset 0 0 10px rgba(255,255,255,.15);

    transition:
        background .15s,
        color .15s,
        border-color .15s,
        transform .15s,
        box-shadow .15s;
}

@media (max-width:1024px){

    .hero-wrapper{
        padding:24px;
    }

    #hero{
        min-height:75vh;
    }

    .hero-content{
        padding:40px;
    }

    .hero-bottom{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        gap:24px;
    }

    #albumTitle{
        font-size:clamp(2.8rem,5vw,4.2rem);
    }

    .play-btn{
        top:40px;
        right:40px;
    }

    .gallery-toolbar{
        grid-template-columns:auto 1fr auto;
        gap:16px;
    }

    #sectionTabs{
        justify-content:center;
        flex-wrap:wrap;
    }
}


@media(max-width:768px) {
    .ss-controls {
        gap: 8px;
        padding: 10px 14px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        max-width: 92vw;
    }

    .ss-icon-btn{
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
    }

    .ss-icon-btn svg{
        width: 18px;
        height: 18px;
    }

    .ss-speed-btn{
        height: 40px;
        padding: 0 12px;
        gap: 6px;
        font-size: .82rem;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ss-speed-menu{
        min-width: 150px;
    }

    .ss-topbar{
        padding: 18px 18px;
        gap: 12px;
    }

    .ss-caption{
        font-size: .82rem;
    }
}

@media(max-width:420px){
    .ss-controls{
        gap: 6px;
        padding: 8px 10px;
    }

    .ss-icon-btn{
        width: 36px;
        height: 36px;
    }

    .ss-speed-btn span{
        display: none; /* keep just the chevron to save space on very small screens */
    }

    .ss-speed-btn{
        padding: 0 10px;
    }
}
@media (max-width:768px){

    .hero-wrapper{
        padding:16px;
    }

    #hero{
        min-height:70vh;
        border-radius:22px;
    }

    .hero-content{
        position:absolute;
        inset:0;

        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:center;

        padding:24px;
    }

    .hero-bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:18px;
        width:100%;
    }

    .hero-content h1,
    #coupleName,
    #albumTitle{
        text-align:center;
    }

    .hero-btn{
        width:auto;
        max-width:100%;
        padding:15px 34px;
    }

    #albumTitle{
        font-size:2.6rem;
        line-height:1.05;
    }

    .play-btn{
        top:24px;
        right:24px;

        width:52px;
        height:52px;
    }

    #backBtn{
        top:16px;
        left:16px;
        padding:10px 18px;
        font-size:.85rem;
    }

    .gallery-toolbar{
        display:grid;
        grid-template-columns:1fr auto;
        grid-template-areas:
            "select count"
            "sections sections";
        row-gap:14px;
        column-gap:12px;
        align-items:center;
        margin:28px 0;
    }

    /* While picking photos for zip/favorite, the count isn't useful —
       hide it and let the selection toolbar (cancel / count / favorite
       / download) use the full row width instead. */
    .gallery-toolbar.selecting{
        grid-template-areas:
            "select select"
            "sections sections";
    }

    .gallery-toolbar.selecting #albumCount{
        display:none;
    }

    .selection-toolbar{
        grid-area:select;
        justify-self:start;
        width:auto;
        flex-wrap:wrap;
    }

    .gallery-toolbar.selecting .selection-toolbar{
        justify-self:stretch;
        width:100%;
        justify-content:space-between;
    }

    /* Tabs share the available row width equally and shrink (with an
       ellipsis on overflowing text) rather than scrolling or wrapping
       — every tab stays visible and the row always fits the screen. */
    #sectionTabs{
        grid-area:sections;
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        gap:8px;
    }

    #sectionTabs button{
        flex:1 1 0;
        min-width:0;
        padding:10px 10px;
        font-size:.76rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        text-align:center;
    }

    #albumCount{
        grid-area:count;
        justify-self:end;
        text-align:right;
        white-space:nowrap;
    }
}

@media(max-width:380px){
    #backBtn{
        top:12px;
        left:12px;
        padding:8px 14px;
        font-size:.8rem;
    }

    .play-btn{
        top:16px;
        right:16px;
        width:46px;
        height:46px;
    }
}


.lb-icon-btn.loading {
    pointer-events: none;
    opacity: .8;
}

.lb-icon-btn.loading i {
    animation: lb-spin .8s linear infinite;
}

@keyframes lb-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.toolbar-btn.loading {
    pointer-events: none;
    opacity: .8;
}

.toolbar-btn.loading svg {
    animation: spin .8s linear infinite; /* reuses the single @keyframes spin declared near the top of the file */
}

/* NOTE: a duplicate "@keyframes spin { to { transform: rotate(360deg); } }"
   used to be declared again here — removed. It was functionally identical
   to the @keyframes spin defined near the top of this file (used by
   .spinner), so .toolbar-btn.loading svg now just reuses that one. */
.favorites-grid{
    column-count:4;
    column-gap:16px;
}

.favorite-card{
    display:inline-block;
    width:100%;
    margin:0 0 16px;
    break-inside:avoid;
}

 
.favorites-grid .favorite-card{
    flex:none;
    height:auto;
}

#favoriteSelectedBtn.active{
    color: var(--secondary-light);
    border-color: var(--secondary-light);
    background: rgba(210,184,133,.18);
}

#favoriteSelectedBtn.active svg{
    fill: currentColor;
}


/* Mobile tweaks */
@media (max-width: 768px) {

    /* Lightbox top bar */
    .lb-topbar{
        padding:14px 16px;
    }

    .lb-actions{
        gap:8px;
    }

    .lb-icon-btn{
        width:38px;
        height:38px;
    }

    .lb-icon-btn svg{
        width:18px;
        height:18px;
    }

    .lb-date{
        font-size:.8rem;
    }

    /* Smaller sections */
    section{
        padding:28px 0;
    }

    .gallery-container{
        padding:12px 8px 8px;
    }

    .section-header{
        margin-bottom:4px;
    }

    section h2{
        font-size:24px;
    }
}

@media (max-width: 480px) {

    .lb-icon-btn{
        width:34px;
        height:34px;
    }

    .lb-icon-btn svg{
        width:16px;
        height:16px;
    }

    .lb-topbar{
        padding:12px;
    }

    .lb-actions{
        gap:6px;
    }

    section{
        padding:20px 0;
    }

    .gallery-container{
        padding:20px 12px 12px;
    }

    section h2{
        font-size:28px;
    }
}

@media (max-width:768px){
    .gallery-toolbar.selecting .selection-toolbar{
        justify-self:start;
        width:auto;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}
@media (max-width:768px){

    .favorites-grid{
        display:block;
        column-count:2;
        column-gap:12px;
    }

    .favorites-grid .favorite-card{
        display:inline-block;
        width:100%;
        margin:0 0 12px;
        break-inside:avoid;
        aspect-ratio:auto;
        height:auto;
    }

    /* IMPORTANT */
    .favorites-grid .favorite-card img{
        position:static;
        inset:auto;
        width:100%;
        height:auto;
        display:block;
        object-fit:contain;
    }
}

/* Favorites should look like gallery photos */
.favorite-card{
    /* position:relative; — removed here, already set above via the
       shared ".photo, .favorite-card { position:relative; }" rule */
    overflow:hidden;
    border-radius:18px;
    border:var(--border);
    box-shadow:var(--shadow-soft);
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .35s ease;

    height:auto;
}

.favorite-card img{
    position:static;
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    transition:transform .8s ease;
}

.favorite-card:hover{
    transform:translateY(-6px);
    border-color:var(--secondary-light);
}

.favorite-card:hover img{
    transform:scale(1.07);
}