@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#f8f4ef;
    --paper:#fffdfa;
    --ink:#28221e;
    --muted:#756b63;
    --accent:#8d7358;
    --accent-dark:#6c5540;
    --line:#e5dbd1;
    --danger:#a94343;
    --shadow:0 18px 60px rgba(52,40,30,.12);
    --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}

.hero{
    min-height:82vh;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,.8), transparent 35%),
      radial-gradient(circle at 85% 15%, rgba(209,186,164,.34), transparent 30%),
      linear-gradient(135deg,#efe4d9,#faf7f2 55%,#e8d9ca);
}
.hero:before,.hero:after{
    content:"";
    position:absolute;
    width:420px;height:420px;
    border:1px solid rgba(141,115,88,.18);
    border-radius:50%;
}
.hero:before{left:-180px;top:-170px}
.hero:after{right:-210px;bottom:-210px}
.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:64px 20px;
    max-width:800px;
}
.monogram{
    font-family:"Cormorant Garamond",serif;
    font-size:58px;
    letter-spacing:.16em;
    margin-bottom:12px;
}
.monogram span{font-size:.65em;color:var(--accent);font-style:italic}
.monogram.small{font-size:32px;margin:0}
.hero h1,.gallery-heading h1,.intro h2,.album-cta h2,.upload-card h2,.qr-card h1,.admin-header h1{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    letter-spacing:-.02em;
}
.hero h1{font-size:clamp(58px,10vw,110px);line-height:.9;margin:0}
.hero p{font-family:"Cormorant Garamond",serif;font-size:clamp(21px,3vw,29px);color:var(--muted);margin:24px auto 34px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border-radius:999px;
    padding:0 22px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    font-weight:600;
    transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.btn-danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.btn-small{min-height:38px;padding:0 14px;font-size:13px}
.btn-wide{width:100%;border-radius:14px;min-height:56px;font-size:16px}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.intro{text-align:center;padding:90px 0 70px;max-width:760px}
.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--accent);margin-bottom:12px}
.intro h2,.upload-card h2,.album-cta h2{font-size:clamp(38px,5vw,58px);margin:0 0 16px}
.intro p,.album-cta p{font-size:18px;line-height:1.75;color:var(--muted);margin:0}

.upload-section{padding:0 0 90px}
.upload-card{
    max-width:760px;
    margin:auto;
    padding:clamp(28px,6vw,60px);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-align:center;
}
.upload-icon{font-family:serif;font-size:50px;color:var(--accent);line-height:1}
.upload-card>p{color:var(--muted);line-height:1.6}
.upload-form{text-align:left;margin-top:32px}
.upload-form label:not(.file-picker),.admin-login label{
    display:grid;
    gap:8px;
    margin-bottom:16px;
    font-weight:600;
}
.upload-form label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=password]{
    width:100%;
    min-height:52px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    outline:none;
}
input:focus{border-color:var(--accent)}
.file-picker{
    margin:22px 0 12px;
    border:1.5px dashed #cdbcae;
    background:#fbf8f4;
    border-radius:18px;
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    cursor:pointer;
}
.file-picker input{position:absolute;opacity:0;pointer-events:none}
.file-title{font-weight:700;font-size:18px}
.file-subtitle{font-size:13px;color:var(--muted);margin-top:6px}
.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.preview-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.file-count{text-align:center;color:var(--muted);font-size:13px;margin:8px 0 16px}
.alert{padding:14px 16px;border-radius:12px;margin:16px 0;text-align:left}
.alert.success{background:#edf6ef;color:#2e643a;border:1px solid #cfe8d4}
.alert.error{background:#fff0f0;color:#8d2f2f;border:1px solid #efcccc}
.progress-wrap{text-align:center;margin-top:14px}
.progress-bar{height:9px;background:#ece4dc;border-radius:99px;overflow:hidden}
.progress-bar>div{height:100%;width:0;background:var(--accent-dark);transition:width .1s linear}
#progressText{font-size:13px;color:var(--muted);margin-top:8px}

.album-cta{
    margin-bottom:90px;
    padding:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:#efe5db;
    border-radius:var(--radius);
}
.album-cta h2{font-size:42px}
footer{text-align:center;border-top:1px solid var(--line);padding:40px 20px;color:var(--muted)}

.topbar{
    position:sticky;top:0;z-index:20;
    min-height:72px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    padding:10px max(16px,calc((100vw - 1180px)/2));
    background:rgba(248,244,239,.9);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
}
.brand-mini{font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:700;letter-spacing:.05em}
.brand-mini span{color:var(--accent);font-style:italic}
.topbar>div:nth-child(2){display:grid}
.topbar small{color:var(--muted);font-size:11px}

.gallery-wrap{padding:52px 0 80px}
.gallery-heading,.admin-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.gallery-heading h1,.admin-header h1{font-size:clamp(48px,7vw,74px);margin:0;line-height:1}
.photo-total{color:var(--muted)}
.masonry{columns:4 250px;column-gap:14px}
.photo-card{
    break-inside:avoid;
    display:block;
    width:100%;
    margin:0 0 14px;
    padding:0;
    border:0;
    border-radius:16px;
    background:#ddd;
    overflow:hidden;
    position:relative;
    cursor:zoom-in;
}
.photo-card img{width:100%;height:auto;transition:transform .3s ease}
.photo-card:hover img{transform:scale(1.015)}
.photo-meta{
    position:absolute;left:10px;right:10px;bottom:10px;
    display:grid;gap:3px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(28,24,21,.62);
    color:white;
    text-align:left;
    backdrop-filter:blur(10px);
}
.photo-meta small{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-state{
    min-height:52vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.empty-heart{font-size:70px;color:var(--accent)}
.empty-state h2{font-family:"Cormorant Garamond",serif;font-size:44px;margin:10px 0}
.empty-state p{color:var(--muted);margin:0 0 24px}

.lightbox{
    position:fixed;inset:0;z-index:100;
    background:rgba(18,16,14,.94);
    display:none;
    align-items:center;
    justify-content:center;
    padding:28px 70px;
}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(1100px,100%);max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:80vh;max-width:100%;object-fit:contain;border-radius:8px}
.lightbox figcaption{color:#fff;display:grid;text-align:center;gap:5px;margin-top:14px}
.lightbox figcaption span{opacity:.9}
.lightbox figcaption small{opacity:.55}
.lightbox-close,.lightbox-nav{
    position:absolute;
    border:0;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    border-radius:999px;
}
.lightbox-close{top:18px;right:18px;width:48px;height:48px;font-size:34px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:50px;height:70px;font-size:45px}
.lightbox-nav.prev{left:14px}
.lightbox-nav.next{right:14px}

.admin-bg{min-height:100vh;display:grid;place-items:center;padding:20px}
.admin-login{
    width:min(460px,100%);
    padding:38px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-align:center;
}
.admin-login .monogram{font-size:42px}
.admin-login h1{font-family:"Cormorant Garamond",serif;font-size:38px;margin:8px 0}
.admin-login p{color:var(--muted);margin-top:0}
.admin-login form{text-align:left;margin-top:24px}
.admin-wrap{padding:46px 0 80px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.admin-photo{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.admin-photo.is-hidden{opacity:.48}
.admin-photo>img{width:100%;aspect-ratio:1/1;object-fit:cover}
.admin-photo-info{padding:13px;display:grid;gap:5px}
.admin-photo-info small{color:var(--muted)}
.admin-actions{display:flex;gap:8px;padding:0 13px 13px}
.admin-actions form{flex:1}
.admin-actions .btn{width:100%}

.qr-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:#efe5db}
.qr-card{
    width:min(650px,100%);
    text-align:center;
    background:#fffdfa;
    border:1px solid var(--line);
    border-radius:30px;
    padding:48px;
    box-shadow:var(--shadow);
}
.qr-card .monogram{font-size:45px}
.qr-card h1{font-size:48px;margin:8px 0 12px}
.qr-card p{color:var(--muted);line-height:1.6}
.qr-box{width:max-content;margin:28px auto;padding:16px;background:white;border:1px solid var(--line);border-radius:18px}
.qr-box img,.qr-box canvas{display:block}
.qr-note{font-size:13px}

@media (max-width:700px){
    .hero{min-height:74vh}
    .hero-content{padding:45px 18px}
    .monogram{font-size:44px}
    .hero h1{font-size:64px}
    .hero p{font-size:21px}
    .intro{padding:65px 0 50px}
    .upload-card{border-radius:20px}
    .preview-grid{grid-template-columns:repeat(3,1fr)}
    .album-cta{padding:28px;align-items:flex-start;flex-direction:column}
    .gallery-wrap{padding-top:34px}
    .gallery-heading,.admin-header{align-items:flex-start;flex-direction:column}
    .masonry{columns:2 145px;column-gap:8px}
    .photo-card{margin-bottom:8px;border-radius:12px}
    .photo-meta{display:none}
    .lightbox{padding:60px 12px 30px}
    .lightbox-nav{width:42px;height:58px;background:rgba(0,0,0,.2)}
    .lightbox-nav.prev{left:5px}
    .lightbox-nav.next{right:5px}
    .topbar{grid-template-columns:auto 1fr auto}
    .topbar .btn{font-size:0;padding:0;width:42px}
    .topbar .btn:after{content:"＋";font-size:24px}
    .qr-card{padding:30px 20px}
    .qr-card h1{font-size:40px}
    .qr-box{max-width:100%;overflow:hidden}
}



/* === Custom Wedding Hero / Slideshow / Countdown === */
.hero-wedding{
    min-height:90vh;
    background:
      linear-gradient(135deg,#efe5db,#f8f4ef 55%,#dfcdbd);
}
.hero-slideshow{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}
.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1.3s ease, transform 5s ease;
    filter:sepia(.16) saturate(.92) brightness(.82);
}
.hero-slide.active{
    opacity:1;
    transform:scale(1);
}
.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(to bottom, rgba(34,26,20,.26), rgba(34,26,20,.34)),
      linear-gradient(to top, rgba(248,244,239,.22), rgba(248,244,239,.06));
}
.hero-content{
    z-index:2;
    color:#fffdfa;
}
.hero-content p{color:#f2e6dc}
.hero-content .monogram span{color:#dcc0a5}
.countdown-card{
    margin:20px auto 32px;
    max-width:720px;
    padding:18px 18px 16px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:22px;
    background:rgba(77,58,42,.28);
    backdrop-filter:blur(12px);
    box-shadow:0 20px 45px rgba(32,24,18,.18);
}
.countdown-title{
    font-size:12px;
    letter-spacing:.22em;
    font-weight:700;
    color:#eadccf;
    margin-bottom:12px;
}
.countdown-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.countdown-box{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:14px 8px;
}
.countdown-box strong{
    display:block;
    font-size:clamp(28px,4vw,42px);
    line-height:1;
    font-family:"Cormorant Garamond",serif;
    font-weight:700;
}
.countdown-box span{
    display:block;
    margin-top:6px;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#f1e6db;
}
.countdown-date{
    margin-top:12px;
    font-size:14px;
    color:#f1e6db;
    opacity:.95;
}
.btn-ghost{
    background:rgba(255,255,255,.18);
    color:#fffdfa;
    border-color:rgba(255,255,255,.35);
}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.btn-primary{
    background:#7c624b;
    border-color:#7c624b;
}
.album-cta{
    background:#ebdfd1;
}
@media (max-width:700px){
    .hero-wedding{min-height:88vh}
    .countdown-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .countdown-card{
        padding:16px 14px;
        margin:18px auto 24px;
    }
}


/* === Elegant names + welcome + music control === */
.hero-kicker{
    margin-bottom:10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#f1e6dc;
    text-shadow:0 2px 15px rgba(35,24,16,.28);
}
.elegant-monogram{
    margin-bottom:4px;
    font-size:44px;
    opacity:.92;
}
.couple-names{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(64px,10vw,118px);
    line-height:.82;
    font-weight:600;
    letter-spacing:-.035em;
    color:#fffdfa;
    text-shadow:0 4px 28px rgba(40,28,18,.32);
}
.couple-names em{
    font-size:.52em;
    font-weight:500;
    color:#e5cdb8;
    line-height:1;
}
.hero-subtitle{
    margin-top:22px !important;
    margin-bottom:18px !important;
    font-size:clamp(20px,2.8vw,28px) !important;
}
.music-toggle{
    position:fixed;
    top:18px;
    right:18px;
    z-index:120;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    background:rgba(75,56,41,.52);
    color:#fffdfa;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 28px rgba(40,28,18,.18);
    cursor:pointer;
    font-weight:600;
    transition:.2s ease;
}
.music-toggle:hover{
    background:rgba(75,56,41,.68);
    transform:translateY(-1px);
}
.music-toggle.playing{
    background:rgba(120,92,69,.78);
}
.music-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    font-size:14px;
}
.music-label{
    font-size:12px;
    letter-spacing:.06em;
}
@media (max-width:700px){
    .hero-kicker{
        font-size:10px;
        letter-spacing:.2em;
    }
    .elegant-monogram{
        font-size:36px;
    }
    .couple-names{
        gap:10px;
        font-size:clamp(54px,17vw,78px);
    }
    .couple-names em{
        width:100%;
        margin:-8px 0;
        font-size:.42em;
    }
    .music-toggle{
        top:12px;
        right:12px;
        min-height:40px;
        padding:0 12px;
    }
    .music-label{
        display:none;
    }
}



/* ==========================================================
   Gallery music controls + automatic presentation
   ========================================================== */

.gallery-heading-actions{
    align-items:flex-end;
}

.gallery-intro{
    margin:12px 0 0;
    color:var(--muted);
    max-width:620px;
    line-height:1.6;
}

.gallery-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.gallery-control-btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid #d8c6b5;
    background:#fffaf5;
    color:#5f4937;
    cursor:pointer;
    font-weight:700;
    box-shadow:0 6px 22px rgba(70,50,35,.08);
    transition:.2s ease;
}

.gallery-control-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 28px rgba(70,50,35,.12);
}

.gallery-control-btn.active{
    background:#8a6b51;
    color:white;
    border-color:#8a6b51;
}

.gallery-control-primary{
    background:#6e543f;
    color:#fff;
    border-color:#6e543f;
}

.control-icon{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(127,95,70,.10);
    font-size:13px;
}

.gallery-control-primary .control-icon,
.gallery-control-btn.active .control-icon{
    background:rgba(255,255,255,.15);
}

.gallery-subbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin:-10px 0 24px;
    color:var(--muted);
    font-size:13px;
}

.gallery-tip{
    opacity:.76;
}

/* ---------- Presentation full screen ---------- */

.presentation{
    position:fixed;
    inset:0;
    z-index:300;
    display:none;
    overflow:hidden;
    background:#1d1713;
    color:#fff;
}

.presentation.open{
    display:block;
}

.presentation-bg{
    position:absolute;
    inset:-35px;
    background-size:cover;
    background-position:center;
    filter:blur(30px) brightness(.38) saturate(.75);
    transform:scale(1.10);
    transition:background-image .8s ease;
}

.presentation-shade{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.035), transparent 52%),
        linear-gradient(to bottom, rgba(24,17,12,.28), rgba(24,17,12,.12) 45%, rgba(24,17,12,.46));
}

.presentation-stage{
    position:absolute;
    inset:84px 42px 108px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:20px;
}

.presentation-image{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transform:scale(1.015);
    transition:
        opacity 1.25s cubic-bezier(.22,.61,.36,1),
        transform 6s ease;
    filter:drop-shadow(0 22px 55px rgba(0,0,0,.35));
    will-change:opacity,transform;
}

.presentation-image.active{
    opacity:1;
}

.presentation-image.zoom-a.active{
    transform:scale(1.055);
}

.presentation-image.zoom-b{
    transform:scale(1.055);
}

.presentation-image.zoom-b.active{
    transform:scale(1);
}

.presentation-top{
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    right:0;
    min-height:78px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:16px 22px;
}

.presentation-brand{
    display:grid;
    gap:2px;
}

.presentation-monogram{
    font-family:"Cormorant Garamond",serif;
    font-size:27px;
    font-weight:700;
    letter-spacing:.08em;
}

.presentation-monogram em{
    color:#d7bda5;
    font-style:italic;
}

.presentation-brand small{
    color:rgba(255,255,255,.66);
    font-size:11px;
    letter-spacing:.05em;
}

.presentation-top-actions{
    display:flex;
    gap:8px;
}

.presentation-round-btn{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    backdrop-filter:blur(10px);
    cursor:pointer;
    font-size:25px;
    transition:.2s ease;
}

.presentation-round-btn:hover,
.presentation-round-btn.active{
    background:rgba(190,154,124,.35);
}

.presentation-caption{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:93px;
    transform:translateX(-50%);
    width:min(700px,calc(100% - 130px));
    display:grid;
    gap:4px;
    text-align:center;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
    pointer-events:none;
}

.presentation-caption strong{
    font-family:"Cormorant Garamond",serif;
    font-size:24px;
}

.presentation-caption span{
    font-size:14px;
    color:rgba(255,255,255,.88);
}

.presentation-caption small{
    font-size:11px;
    color:rgba(255,255,255,.56);
}

.presentation-bottom{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:12px;
}

.presentation-play-btn{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    color:#fff;
    backdrop-filter:blur(10px);
    cursor:pointer;
    font-weight:700;
}

.presentation-progress{
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:rgba(255,255,255,.10);
    overflow:hidden;
}

.presentation-progress > div{
    width:0;
    height:100%;
    background:#d4b89d;
}

.presentation-progress > div.animate{
    animation-name:presentationTimer;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
}

@keyframes presentationTimer{
    from{width:0}
    to{width:100%}
}

.presentation-counter{
    position:absolute;
    z-index:5;
    right:22px;
    bottom:28px;
    min-width:55px;
    text-align:right;
    color:rgba(255,255,255,.62);
    font-size:12px;
    letter-spacing:.08em;
}

@media (max-width:700px){
    .gallery-heading-actions{
        align-items:flex-start;
    }

    .gallery-controls{
        width:100%;
        justify-content:stretch;
    }

    .gallery-control-btn{
        flex:1;
        min-width:0;
        padding:0 12px;
    }

    .gallery-subbar{
        margin-top:0;
    }

    .gallery-tip{
        display:none;
    }

    .presentation-stage{
        inset:80px 8px 124px;
        border-radius:0;
    }

    .presentation-top{
        padding:14px 12px;
    }

    .presentation-brand small{
        display:none;
    }

    .presentation-round-btn{
        width:42px;
        height:42px;
    }

    .presentation-caption{
        width:calc(100% - 48px);
        bottom:112px;
    }

    .presentation-caption strong{
        font-size:21px;
    }

    .presentation-bottom{
        bottom:40px;
    }

    .presentation-counter{
        right:14px;
        bottom:12px;
    }
}


/* ================= SITO 2 INTRO ================= */
.intro-page{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 10%,rgba(255,249,240,.72),transparent 32%),radial-gradient(circle at 84% 78%,rgba(155,111,78,.16),transparent 36%),linear-gradient(135deg,#ead8c7 0%,#f7eee4 48%,#d8bda5 100%);color:#5b4432;overflow-x:hidden}
.intro-story{min-height:100vh;position:relative;display:grid;grid-template-columns:1fr minmax(220px,360px) 1fr;grid-template-rows:1fr auto 1fr;align-items:center;gap:26px;padding:58px clamp(22px,5vw,76px);isolation:isolate}
.intro-story:before,.intro-story:after{content:"";position:absolute;border:1px solid rgba(100,72,50,.16);border-radius:50%;pointer-events:none;z-index:-1}.intro-story:before{width:460px;height:460px;left:-220px;top:-180px}.intro-story:after{width:520px;height:520px;right:-250px;bottom:-220px}
.intro-grain{position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:radial-gradient(circle at 20% 30%,#684b36 0 1px,transparent 1.2px),radial-gradient(circle at 70% 80%,#684b36 0 1px,transparent 1.2px);background-size:27px 27px,31px 31px;z-index:-1}
.intro-quote{max-width:590px;position:relative;align-self:center}.intro-quote-left{grid-column:1;grid-row:1/span 2;justify-self:start;transform:translateY(-24px)}.intro-quote-right{grid-column:3;grid-row:2/span 2;justify-self:end;transform:translateY(36px)}
.intro-quote-mark{position:absolute;left:-10px;top:-58px;font-family:"Cormorant Garamond",serif;font-size:108px;line-height:1;color:rgba(118,82,57,.20)}
.typewriter-text{min-height:240px;margin:0;font-family:"Allura","Cormorant Garamond",cursive;font-size:clamp(29px,3vw,43px);line-height:1.22;color:#684b36;text-wrap:balance;white-space:pre-wrap}.typewriter-text.typing:after{content:"";display:inline-block;width:2px;height:.9em;margin-left:4px;background:#86644a;vertical-align:-.05em;animation:writerBlink .7s steps(1) infinite}@keyframes writerBlink{50%{opacity:0}}
.intro-center{grid-column:2;grid-row:2;display:grid;justify-items:center;align-content:center;text-align:center;gap:10px;z-index:2}.intro-monogram{font-family:"Cormorant Garamond",serif;font-size:48px;letter-spacing:.13em;color:#624832}.intro-monogram span{color:#9b7355;font-style:italic}.intro-date{margin-bottom:16px;font-size:11px;letter-spacing:.34em;color:#8c6b52;font-weight:700}
.intro-enter{width:134px;height:134px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:8px;background:#6d503b;color:#fff9f3;border:1px solid rgba(255,255,255,.34);box-shadow:0 20px 55px rgba(83,56,38,.20),inset 0 0 0 8px rgba(255,255,255,.035);font-family:"Cormorant Garamond",serif;font-size:23px;letter-spacing:.03em;transition:.35s ease}.intro-enter i{font-style:normal;transition:transform .3s ease}.intro-enter:hover{transform:scale(1.045);background:#5d4331}.intro-enter:hover i{transform:translateX(4px)}
.intro-signature{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:"Allura","Cormorant Garamond",cursive;font-size:28px;color:rgba(104,75,54,.72)}

/* ================= SITO 2 MAIN ================= */
body.sito2-main{min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(255,250,244,.9),transparent 42%),linear-gradient(135deg,#d7c0ab 0%,#eadbcd 42%,#c7aa92 100%);overflow-x:hidden}
.polaroid-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.polaroid-background:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 25%,rgba(71,49,34,.08) 100%),rgba(245,232,220,.12);backdrop-filter:blur(.4px)}
.floating-polaroid{position:absolute;width:clamp(150px,16vw,245px);margin:0;padding:10px 10px 34px;background:#fffaf3;box-shadow:0 18px 44px rgba(73,47,29,.22);border:1px solid rgba(115,80,54,.08);transform:translateY(20px) rotate(var(--rot)) scale(.94);opacity:0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.61,.36,1),left 1.4s ease,top 1.4s ease;animation:polaroidFloat 7s ease-in-out infinite;animation-delay:var(--delay)}.floating-polaroid.is-visible{opacity:.86;transform:translateY(0) rotate(var(--rot)) scale(1)}.floating-polaroid-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:#dfd2c6}.floating-polaroid-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.08) contrast(.96)}.floating-polaroid figcaption{position:absolute;left:12px;right:12px;bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-family:"Allura","Cormorant Garamond",cursive;font-size:18px;color:#6f513d}@keyframes polaroidFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}
.wedding-banner-shell{position:relative;z-index:3;width:100%;padding:34px 16px 70px;display:flex;justify-content:center}.wedding-banner{width:min(760px,100%);overflow:hidden;background:rgba(249,242,234,.965);border:1px solid rgba(119,84,59,.16);border-radius:34px;box-shadow:0 26px 80px rgba(72,48,31,.24);backdrop-filter:blur(12px)}.wedding-banner .hero{min-height:76vh;border-radius:0}.wedding-banner .wrap{width:min(100% - 34px,690px)}.wedding-banner .intro{padding:66px 0 50px}.wedding-banner .upload-section{padding-bottom:64px}.wedding-banner .upload-card{box-shadow:0 12px 40px rgba(70,50,35,.10)}.wedding-banner .album-cta{width:calc(100% - 34px);margin-left:auto;margin-right:auto;margin-bottom:54px;padding:30px}.wedding-banner footer{padding-bottom:34px}
@media(max-width:980px){.intro-story{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:50px 24px 70px;gap:44px}.intro-quote-left,.intro-quote-right,.intro-center{grid-column:1;transform:none;justify-self:stretch}.intro-quote-left{grid-row:1;max-width:86%}.intro-center{grid-row:2}.intro-quote-right{grid-row:3;max-width:86%;justify-self:end;text-align:right}.intro-quote-right .intro-quote-mark{left:auto;right:-10px}.typewriter-text{min-height:0;font-size:clamp(28px,5.5vw,40px)}}
@media(max-width:700px){.intro-story{padding:38px 18px 78px;gap:34px}.intro-quote-left,.intro-quote-right{max-width:94%}.typewriter-text{font-size:29px;line-height:1.16}.intro-enter{width:116px;height:116px;font-size:21px}.floating-polaroid{width:132px}.floating-polaroid.is-visible{opacity:.54}.wedding-banner-shell{padding:0}.wedding-banner{width:100%;border-radius:0;border-left:0;border-right:0}.wedding-banner .hero{min-height:84vh}}



/* ==========================================================
   SITO 2 — POLAROID FIX v3
   Mantiene le foto visibili anche su smartphone.
   ========================================================== */
body.sito2-main{
    position:relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,250,244,.88), transparent 45%),
        linear-gradient(135deg,#cdb49e 0%,#eadbcd 42%,#b99980 100%);
}

.polaroid-background{
    display:block !important;
    opacity:1 !important;
}

.polaroid-background::after{
    background:
        radial-gradient(circle at center, rgba(245,232,220,.16) 0 20%, rgba(71,49,34,.08) 100%);
}

.floating-polaroid{
    width:clamp(165px,17vw,250px);
    padding:10px 10px 36px;
    opacity:0;
    transform:
        translateY(20px)
        rotate(var(--rot))
        scale(calc(var(--scale, 1) * .93));
}

.floating-polaroid.is-visible{
    opacity:.96;
    transform:
        translateY(0)
        rotate(var(--rot))
        scale(var(--scale, 1));
}

.floating-polaroid-photo{
    box-shadow:inset 0 0 0 1px rgba(98,68,47,.06);
}

.wedding-banner-shell{
    padding:34px 16px 70px;
}

.wedding-banner{
    width:min(720px,64vw);
    min-width:560px;
    background:rgba(249,242,234,.945);
    box-shadow:
        0 28px 90px rgba(72,48,31,.28),
        0 0 0 1px rgba(255,255,255,.30);
}

@media (max-width:900px){
    .wedding-banner{
        width:72vw;
        min-width:0;
    }

    .floating-polaroid{
        width:170px;
    }
}

@media (max-width:700px){
    body.sito2-main{
        background:
            linear-gradient(90deg,#b9957b 0 7%,#decabb 7% 93%,#b9957b 93% 100%);
    }

    .wedding-banner-shell{
        padding:16px 0 42px;
    }

    .wedding-banner{
        width:82vw !important;
        min-width:0 !important;
        border-radius:24px !important;
        border:1px solid rgba(119,84,59,.16) !important;
    }

    .wedding-banner .wrap{
        width:min(100% - 24px,690px);
    }

    .wedding-banner .hero{
        min-height:82vh;
    }

    .floating-polaroid{
        width:138px !important;
        padding:7px 7px 26px;
        box-shadow:0 12px 28px rgba(73,47,29,.28);
    }

    .floating-polaroid.is-visible{
        opacity:.88 !important;
    }

    .floating-polaroid figcaption{
        font-size:14px;
        bottom:5px;
    }
}

@media (max-width:420px){
    .wedding-banner{
        width:84vw !important;
    }

    .floating-polaroid{
        width:124px !important;
    }
}



/* ==========================================================
   SITO 2 — CORREZIONI NOMI / FRASE / CAMPI OBBLIGATORI
   ========================================================== */

.couple-names-inline{
    flex-wrap:nowrap !important;
    white-space:nowrap;
    gap:10px !important;
    font-size:clamp(46px,7vw,72px) !important;
    line-height:1 !important;
}

.couple-names-inline em{
    width:auto !important;
    margin:0 !important;
    font-size:.52em !important;
}

.wedding-photo-quote{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(18px,2.5vw,26px);
    line-height:1.35;
    letter-spacing:.02em;
    text-transform:none;
    font-weight:600;
    color:var(--accent);
}

.file-picker.is-locked{
    opacity:.58;
    cursor:not-allowed;
}

.file-picker:not(.is-locked){
    opacity:1;
    cursor:pointer;
}

.upload-form input:required:invalid{
    border-color:#c9aa91;
}

@media (max-width:700px){
    .couple-names-inline{
        font-size:clamp(38px,11vw,52px) !important;
        gap:7px !important;
    }

    .wedding-photo-quote{
        font-size:21px;
    }
}



/* TYPEWRITER FIX — vera battitura carattere per carattere */
.typewriter-text{
    white-space:pre-wrap;
}

.typewriter-text.typing::after{
    content:"";
    display:inline-block;
    width:2px;
    height:.9em;
    margin-left:4px;
    background:#86644a;
    vertical-align:-.06em;
    animation:typeCursorBlink .72s steps(1,end) infinite;
}

.typewriter-text.typed::after{
    content:"";
    display:none;
}

@keyframes typeCursorBlink{
    0%,49%{opacity:1}
    50%,100%{opacity:0}
}





/* ==========================================================
   SITO 2 — FIX FOTO A TUTTA LARGHEZZA NEL BANNER
   ========================================================== */
.hero-wedding.custom-photo-hero{
    background-color: transparent !important;
    background-image:
        linear-gradient(rgba(24,18,14,.16),rgba(24,18,14,.30)),
        url('banner-countdown-bg.jpg') !important;
    background-size:
        100% 100%,
        cover !important;
    background-position:
        center center,
        center center !important;
    background-repeat:
        no-repeat,
        no-repeat !important;
}



/* INTRO STATICO — nessuna battitura */
.typewriter-text.static-quote{
    opacity:1 !important;
    visibility:visible !important;
}

.typewriter-text.static-quote::after{
    content:none !important;
    display:none !important;
    animation:none !important;
}




/* ==========================================================
   INTRO — FADE IN / FADE OUT DELLE DUE FRASI
   ========================================================== */
.typewriter-text.static-quote{
    opacity:0;
    filter:none !important;
    transform:none !important;
    animation:quoteFadeInOut 6s ease-in-out .15s forwards;
    will-change:opacity;
}

@keyframes quoteFadeInOut{
    0%{
        opacity:0;
    }
    18%{
        opacity:1;
    }
    72%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

@media (prefers-reduced-motion: reduce){
    .typewriter-text.static-quote{
        animation:none !important;
        opacity:1 !important;
    }
}




/* ==========================================================
   HOME — TITOLO FOTOGRAFIA / SOTTOTITOLO
   Modifica esclusivamente tipografia e dimensioni.
   ========================================================== */
.wedding-banner .intro .wedding-photo-title{
    max-width:680px !important;
    margin:0 auto 12px !important;
    padding:0 !important;
    text-align:center !important;
    color:#70482e !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    line-height:1 !important;
    font-weight:500 !important;
}

.wedding-banner .intro .wedding-photo-title .photo-title-main{
    display:block;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:clamp(38px,5.2vw,58px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.025em;
}

.wedding-banner .intro .wedding-photo-title .photo-title-script{
    display:block;
    margin-top:5px;
    font-family:"Allura","Cormorant Garamond",cursive;
    font-size:clamp(43px,5.6vw,64px);
    font-weight:400;
    line-height:1;
    letter-spacing:.01em;
    color:#82583c;
}

.wedding-banner .intro .share-subtitle{
    margin:12px 0 20px !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:clamp(10px,1.25vw,13px) !important;
    line-height:1.3 !important;
    font-weight:500 !important;
    letter-spacing:.28em !important;
    text-transform:none !important;
    color:#8c6b55 !important;
}

@media(max-width:700px){
    .wedding-banner .intro .wedding-photo-title .photo-title-main{
        font-size:clamp(30px,8.4vw,42px);
        line-height:1.02;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-script{
        font-size:clamp(38px,10vw,50px);
        margin-top:2px;
    }

    .wedding-banner .intro .share-subtitle{
        font-size:10px !important;
        letter-spacing:.18em !important;
        margin-top:10px !important;
    }
}


/* ==========================================================
   HOME — RIFINITURA TESTI INTRO
   ========================================================== */

/* Prima riga del titolo sempre su una sola riga */
.wedding-banner .intro .wedding-photo-title .photo-title-main{
    white-space:nowrap !important;
    font-size:clamp(17px,4.7vw,38px) !important;
    line-height:1.05 !important;
    letter-spacing:-.025em !important;
}

/* Condividi + descrizione: stessa dimensione, nero,
   stesso carattere di "Aggiungi la tua foto" */
.wedding-banner .intro .share-subtitle,
.wedding-banner .intro .share-description{
    font-family:"Cormorant Garamond",serif !important;
    font-size:18px !important;
    line-height:1.45 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:#111 !important;
}

.wedding-banner .intro .share-subtitle{
    margin:14px 0 8px !important;
}

.wedding-banner .intro .share-description{
    margin:0 auto !important;
    max-width:620px;
}

@media(max-width:700px){
    .wedding-banner .intro .wedding-photo-title .photo-title-main{
        font-size:clamp(16px,4.65vw,20px) !important;
    }

    .wedding-banner .intro .share-subtitle,
    .wedding-banner .intro .share-description{
        font-size:17px !important;
        line-height:1.4 !important;
    }
}


/* ==========================================================
   HOME — GERARCHIA TESTI DEFINITIVA
   ========================================================== */
.wedding-banner .intro .wedding-photo-title .photo-title-main{
    white-space:nowrap !important;
}

.wedding-banner .intro .wedding-photo-title .photo-title-script{
    display:block !important;
}

.wedding-banner .intro .share-subtitle{
    color:#111 !important;
}

.wedding-banner .intro .share-intro-heading{
    color:#111 !important;
    font-weight:600 !important;
}

.wedding-banner .intro .share-intro-heading strong{
    font:inherit;
    font-weight:600 !important;
}


/* ==========================================================
   HOME — RIFINITURA FINALE DIMENSIONI TESTI
   ========================================================== */
.wedding-banner .intro .share-subtitle{
    font-family:"Cormorant Garamond", Georgia, serif !important;
    font-size:clamp(38px,5.2vw,58px) !important;
    line-height:.98 !important;
    font-weight:700 !important;
    letter-spacing:-.025em !important;
    color:#111 !important;
    margin:16px 0 12px !important;
}

.wedding-banner .intro .share-intro-heading{
    font-family:"Cormorant Garamond",serif !important;
    font-size:20px !important;
    line-height:1.5 !important;
    font-weight:600 !important;
    color:#111 !important;
}

.wedding-banner .intro .share-intro-heading strong{
    font:inherit !important;
    font-weight:600 !important;
}

@media(max-width:700px){
    .wedding-banner .intro .share-subtitle{
        font-size:clamp(30px,8.4vw,42px) !important;
        line-height:1.02 !important;
    }

    .wedding-banner .intro .share-intro-heading{
        font-size:19px !important;
        line-height:1.45 !important;
    }
}


/* ==========================================================
   HOME — DIVISORE CON CUORE
   ========================================================== */
.wedding-banner .intro .title-heart-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:14px auto 16px;
    max-width:520px;
}

.wedding-banner .intro .title-heart-divider .line{
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(to right, rgba(130,88,60,0), rgba(130,88,60,.55), rgba(130,88,60,0));
}

.wedding-banner .intro .title-heart-divider .heart{
    flex:0 0 auto;
    font-family:"Cormorant Garamond", serif;
    font-size:26px;
    line-height:1;
    color:#82583c;
    transform:translateY(-1px);
}

@media(max-width:700px){
    .wedding-banner .intro .title-heart-divider{
        gap:10px;
        margin:12px auto 14px;
        max-width:320px;
    }

    .wedding-banner .intro .title-heart-divider .heart{
        font-size:22px;
    }
}


/* ==========================================================
   GALLERIA — TASTO INDIETRO ALLA HOME
   ========================================================== */
.album-back-button{
    position:fixed;
    top:18px;
    left:18px;
    z-index:1200;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(83,55,38,.88);
    color:#fff !important;
    text-decoration:none !important;
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:18px;
    font-weight:600;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.album-back-button:hover{
    transform:translateY(-1px);
    background:rgba(83,55,38,.98);
    box-shadow:0 10px 28px rgba(0,0,0,.23);
}

.album-back-button span:first-child{
    font-size:22px;
    line-height:.8;
}

@media(max-width:700px){
    .album-back-button{
        top:12px;
        left:12px;
        padding:9px 13px;
        font-size:16px;
    }
}


/* ==========================================================
   RESPONSIVE FINALE — SMARTPHONE / TABLET / DESKTOP
   Mantiene la grafica esistente adattandola automaticamente.
   ========================================================== */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

img,
video,
canvas,
svg{
    max-width:100%;
    height:auto;
}

button,
a,
input,
textarea,
select{
    -webkit-tap-highlight-color:transparent;
}

.wrap{
    width:min(1180px, calc(100% - 32px));
    max-width:100%;
}

/* ---------- HOME ---------- */

.wedding-banner-shell{
    max-width:100vw;
}

.wedding-banner{
    max-width:100%;
}

.hero-wedding.custom-photo-hero{
    min-height:min(860px, 88svh);
    background-position:center center !important;
}

.hero-wedding .hero-content{
    width:100%;
    max-width:720px;
    margin:auto;
}

.countdown-card{
    width:min(520px, 100%);
}

.hero-actions .btn{
    min-width:0;
}

.upload-card,
.album-cta{
    max-width:100%;
}

.upload-form input[type="text"],
.upload-form input[type="password"]{
    min-width:0;
}

/* Titolo fotografico: stessa proporzione tra titolo e sottotitolo */
.wedding-banner .intro .wedding-photo-title .photo-title-main,
.wedding-banner .intro .share-subtitle{
    font-size:clamp(28px, 4.7vw, 38px) !important;
}

.wedding-banner .intro .share-subtitle{
    line-height:1.05 !important;
}

/* ---------- GALLERIA ---------- */

.gallery-page{
    min-height:100svh;
}

.gallery-page .topbar{
    padding-left:max(150px, calc(env(safe-area-inset-left) + 150px));
    padding-right:max(16px, env(safe-area-inset-right));
}

.album-back-button{
    top:max(14px, env(safe-area-inset-top));
    left:max(14px, env(safe-area-inset-left));
}

.masonry{
    max-width:100%;
}

.photo-card{
    touch-action:manipulation;
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){
    .wedding-banner{
        width:min(760px, 78vw) !important;
        min-width:0 !important;
    }

    .floating-polaroid{
        width:clamp(145px, 18vw, 190px) !important;
    }

    .hero-wedding.custom-photo-hero{
        min-height:min(800px, 86svh);
    }

    .gallery-heading-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .gallery-controls{
        justify-content:flex-start;
    }
}

/* ---------- SMARTPHONE / TABLET PICCOLO ---------- */

@media (max-width:700px){

    :root{
        --radius:20px;
    }

    .wrap{
        width:calc(100% - 24px);
    }

    /*
     * La fascia centrale occupa quasi tutto lo schermo.
     * Le Polaroid restano decorative sui bordi senza comprimere i contenuti.
     */
    .wedding-banner-shell{
        padding:10px 0 30px !important;
    }

    .wedding-banner{
        width:calc(100vw - 14px) !important;
        max-width:calc(100vw - 14px) !important;
        min-width:0 !important;
        border-radius:22px !important;
    }

    .wedding-banner .wrap{
        width:calc(100% - 26px) !important;
    }

    .floating-polaroid{
        width:118px !important;
        padding:6px 6px 24px !important;
    }

    .floating-polaroid.is-visible{
        opacity:.45 !important;
    }

    .floating-polaroid figcaption{
        font-size:12px !important;
    }

    /* Hero */
    .hero-wedding.custom-photo-hero{
        min-height:auto !important;
        padding-top:0;
        background-position:center center !important;
    }

    .hero-wedding .hero-content{
        padding:
            calc(36px + env(safe-area-inset-top))
            14px
            36px !important;
    }

    .hero-kicker{
        margin:0 auto 9px !important;
        max-width:95%;
        font-size:9px !important;
        line-height:1.4;
        letter-spacing:.16em !important;
    }

    .couple-names-inline{
        width:100%;
        max-width:100%;
        justify-content:center;
        gap:6px !important;
        font-size:clamp(34px, 12vw, 52px) !important;
        letter-spacing:-.035em !important;
    }

    .couple-names-inline em{
        font-size:.50em !important;
    }

    .hero-subtitle{
        margin:13px auto 14px !important;
        max-width:92%;
        font-size:clamp(17px, 5vw, 22px) !important;
        line-height:1.18 !important;
    }

    .countdown-card{
        width:min(100%, 430px);
        margin:14px auto 18px !important;
        padding:14px 12px !important;
        border-radius:18px;
    }

    .countdown-title{
        font-size:9px !important;
        letter-spacing:.15em !important;
        margin-bottom:10px !important;
    }

    .countdown-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
    }

    .countdown-box{
        min-width:0;
        padding:10px 5px !important;
        border-radius:12px !important;
    }

    .countdown-box strong{
        font-size:clamp(25px, 8vw, 34px) !important;
    }

    .countdown-box span{
        font-size:9px !important;
        letter-spacing:.05em !important;
    }

    .countdown-date{
        margin-top:9px !important;
        font-size:12px !important;
    }

    .hero-actions{
        width:100%;
        gap:9px !important;
    }

    .hero-actions .btn{
        flex:1 1 calc(50% - 5px);
        min-height:46px;
        padding:0 12px;
        font-size:13px;
        white-space:nowrap;
    }

    /* Titoli e testo */
    .wedding-banner .intro{
        padding:46px 0 36px !important;
    }

    .wedding-banner .intro .wedding-photo-title{
        width:100%;
        max-width:100% !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-main,
    .wedding-banner .intro .share-subtitle{
        /*
         * Stessa grandezza come richiesto.
         * Il clamp evita che la prima riga esca dallo schermo.
         */
        font-size:clamp(15px, 4.65vw, 20px) !important;
        line-height:1.08 !important;
        letter-spacing:-.015em !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-main{
        white-space:nowrap !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-script{
        font-size:clamp(36px, 10vw, 48px) !important;
        line-height:.98 !important;
    }

    .wedding-banner .intro .title-heart-divider{
        width:min(100%, 310px);
        margin:13px auto !important;
    }

    .wedding-banner .intro .share-subtitle{
        margin:12px 0 10px !important;
        font-weight:700 !important;
    }

    .wedding-banner .intro .share-intro-heading{
        max-width:100%;
        font-size:18px !important;
        line-height:1.42 !important;
    }

    /* Upload */
    .wedding-banner .upload-section{
        padding-bottom:44px !important;
    }

    .upload-card{
        padding:25px 17px !important;
        border-radius:20px !important;
    }

    .upload-card h2{
        font-size:clamp(34px, 10vw, 46px) !important;
    }

    .upload-card>p{
        font-size:15px;
        line-height:1.5;
    }

    .upload-form{
        margin-top:24px !important;
    }

    .upload-form label:not(.file-picker){
        margin-bottom:14px;
    }

    /*
     * 16px evita lo zoom automatico dei campi su iPhone.
     */
    input[type=text],
    input[type=password],
    textarea,
    select{
        font-size:16px !important;
        min-height:52px;
    }

    .file-picker{
        min-height:132px !important;
        margin:18px 0 12px !important;
        padding:18px 12px !important;
    }

    .preview-grid{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:7px !important;
    }

    /* CTA album */
    .wedding-banner .album-cta,
    .album-cta{
        width:calc(100% - 26px) !important;
        margin:0 auto 38px !important;
        padding:24px 18px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        text-align:center;
        gap:18px !important;
    }

    .album-cta h2{
        font-size:clamp(31px, 9vw, 42px) !important;
    }

    .album-cta p{
        font-size:15px !important;
        line-height:1.55 !important;
    }

    .album-cta .btn{
        width:100%;
    }

    /* Intro iniziale */
    .intro-page{
        min-height:100svh;
    }

    .intro-story{
        min-height:100svh !important;
        padding:
            calc(28px + env(safe-area-inset-top))
            16px
            calc(74px + env(safe-area-inset-bottom)) !important;
        gap:28px !important;
    }

    .intro-quote-left,
    .intro-quote-right{
        max-width:96% !important;
    }

    .typewriter-text{
        font-size:clamp(23px, 7vw, 29px) !important;
        line-height:1.18 !important;
        min-height:0 !important;
    }

    .intro-quote-mark{
        font-size:80px !important;
        top:-42px !important;
    }

    .intro-enter{
        width:108px !important;
        height:108px !important;
        font-size:20px !important;
    }

    .intro-signature{
        bottom:calc(14px + env(safe-area-inset-bottom)) !important;
        font-size:24px !important;
        white-space:nowrap;
    }

    /* Album / gallery */
    .gallery-page .topbar{
        min-height:64px;
        grid-template-columns:1fr auto;
        padding:
            calc(8px + env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            8px
            max(108px, calc(env(safe-area-inset-left) + 108px)) !important;
    }

    .gallery-page .brand-mini{
        display:none;
    }

    .gallery-page .topbar>div:nth-child(2){
        min-width:0;
    }

    .gallery-page .topbar strong{
        font-size:13px;
        white-space:nowrap;
    }

    .gallery-page .topbar small{
        font-size:9px;
    }

    .gallery-page .topbar .btn-small{
        min-height:40px;
        padding:0 10px;
        font-size:11px;
        white-space:nowrap;
    }

    .album-back-button{
        top:calc(10px + env(safe-area-inset-top)) !important;
        left:max(8px, env(safe-area-inset-left)) !important;
        min-height:42px;
        padding:0 12px !important;
        font-size:15px !important;
    }

    .gallery-wrap{
        width:calc(100% - 20px) !important;
        padding:32px 0 56px !important;
    }

    .gallery-heading,
    .gallery-heading-actions{
        margin-bottom:20px !important;
    }

    .gallery-heading h1{
        font-size:clamp(42px, 13vw, 58px) !important;
    }

    .gallery-intro{
        font-size:14px;
        line-height:1.5;
    }

    .gallery-controls{
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:8px !important;
    }

    .gallery-control-btn{
        min-height:44px !important;
        padding:0 8px !important;
        font-size:12px;
    }

    .gallery-subbar{
        margin:0 0 16px !important;
    }

    .masonry{
        columns:2 !important;
        column-gap:8px !important;
    }

    .photo-card{
        margin-bottom:8px !important;
        border-radius:12px !important;
    }

    .photo-meta{
        left:6px !important;
        right:6px !important;
        bottom:6px !important;
        padding:7px 8px !important;
        border-radius:9px !important;
    }

    .photo-meta strong{
        font-size:12px;
    }

    .photo-meta small{
        font-size:10px;
    }

    /* Lightbox */
    .lightbox{
        padding:
            calc(58px + env(safe-area-inset-top))
            8px
            calc(86px + env(safe-area-inset-bottom)) !important;
    }

    .lightbox figure{
        width:100%;
        max-height:100%;
    }

    .lightbox img{
        max-height:72svh !important;
        border-radius:6px;
    }

    .lightbox-close{
        top:calc(10px + env(safe-area-inset-top)) !important;
        right:max(10px, env(safe-area-inset-right)) !important;
        width:44px !important;
        height:44px !important;
    }

    .lightbox-nav{
        width:44px !important;
        height:58px !important;
        font-size:38px !important;
    }

    .lightbox-nav.prev{
        left:6px !important;
    }

    .lightbox-nav.next{
        right:6px !important;
    }

    /* Presentazione */
    .presentation-top{
        padding:
            calc(10px + env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            10px
            max(10px, env(safe-area-inset-left)) !important;
    }

    .presentation-stage{
        inset:
            calc(70px + env(safe-area-inset-top))
            6px
            calc(120px + env(safe-area-inset-bottom)) !important;
    }

    .presentation-caption{
        width:calc(100% - 30px) !important;
        bottom:calc(105px + env(safe-area-inset-bottom)) !important;
    }

    .presentation-bottom{
        bottom:calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .presentation-counter{
        bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    }

    /* QR / Admin */
    .qr-page,
    .admin-bg{
        min-height:100svh;
        padding:
            calc(16px + env(safe-area-inset-top))
            14px
            calc(16px + env(safe-area-inset-bottom)) !important;
    }

    .qr-card,
    .admin-login{
        width:100% !important;
        padding:26px 18px !important;
        border-radius:20px !important;
    }

    .admin-wrap{
        width:calc(100% - 22px) !important;
        padding:30px 0 54px !important;
    }

    .admin-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
    }

    .admin-actions{
        flex-direction:column;
    }
}

/* ---------- SMARTPHONE MOLTO PICCOLI ---------- */

@media (max-width:390px){

    .wedding-banner{
        width:calc(100vw - 8px) !important;
        max-width:calc(100vw - 8px) !important;
        border-radius:18px !important;
    }

    .wedding-banner .wrap{
        width:calc(100% - 20px) !important;
    }

    .hero-wedding .hero-content{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .couple-names-inline{
        font-size:clamp(31px, 11.5vw, 44px) !important;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions .btn{
        width:100%;
        flex:1 1 auto;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-main,
    .wedding-banner .intro .share-subtitle{
        font-size:clamp(14px, 4.45vw, 17px) !important;
    }

    .wedding-banner .intro .share-intro-heading{
        font-size:17px !important;
    }

    .preview-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }

    .gallery-page .topbar{
        padding-left:max(96px, calc(env(safe-area-inset-left) + 96px)) !important;
    }

    .gallery-page .topbar>div:nth-child(2){
        display:none;
    }

    .gallery-page .topbar{
        grid-template-columns:1fr;
        justify-items:end;
    }

    .masonry{
        columns:2 !important;
    }

    .admin-grid{
        grid-template-columns:1fr !important;
    }
}

/* ---------- ORIZZONTALE SU SMARTPHONE ---------- */

@media (max-height:520px) and (orientation:landscape){

    .hero-wedding.custom-photo-hero{
        min-height:640px !important;
    }

    .hero-wedding .hero-content{
        padding-top:28px !important;
        padding-bottom:28px !important;
    }

    .intro-story{
        min-height:auto !important;
    }

    .presentation-stage{
        inset:58px 70px 76px !important;
    }

    .presentation-caption{
        bottom:66px !important;
    }

    .presentation-bottom{
        bottom:12px !important;
    }
}

/* Rispetta le preferenze di accessibilità */
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    .floating-polaroid,
    .photo-card img,
    .btn,
    .album-back-button{
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   FINALE — FOTO HERO / POLAROID VISIBILI / TOPBAR ALBUM
   ========================================================== */

/* Foto countdown aggiornata e sempre adattata al banner */
.hero-wedding.custom-photo-hero{
    background-image:
        linear-gradient(rgba(24,18,14,.17),rgba(24,18,14,.31)),
        url('banner-countdown-bg.jpg') !important;
    background-size:100% 100%, cover !important;
    background-repeat:no-repeat, no-repeat !important;
    background-position:center center, center center !important;
}

/*
 * Mantiene spazio reale ai lati del banner affinché le Polaroid
 * restino visibili su desktop, tablet e smartphone.
 */
.wedding-banner{
    width:min(720px,62vw) !important;
    min-width:0 !important;
}

.floating-polaroid{
    z-index:1;
}

.wedding-banner-shell{
    z-index:3;
}

@media(max-width:1024px){
    .wedding-banner{
        width:70vw !important;
    }
}

@media(max-width:700px){
    .wedding-banner-shell{
        padding:12px 0 42px !important;
    }

    .wedding-banner{
        width:78vw !important;
        max-width:78vw !important;
        border-radius:22px !important;
    }

    .floating-polaroid{
        width:118px !important;
        padding:6px 6px 24px !important;
    }

    .floating-polaroid.is-visible{
        opacity:.90 !important;
    }

    .wedding-banner .wrap{
        width:calc(100% - 20px) !important;
    }

    .hero-wedding .hero-content{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .couple-names-inline{
        font-size:clamp(27px,9.4vw,43px) !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-main,
    .wedding-banner .intro .share-subtitle{
        font-size:clamp(12px,4vw,17px) !important;
    }

    .wedding-banner .intro .share-intro-heading{
        font-size:17px !important;
    }
}

@media(max-width:390px){
    .wedding-banner{
        width:80vw !important;
        max-width:80vw !important;
    }

    .floating-polaroid{
        width:108px !important;
    }

    .couple-names-inline{
        font-size:clamp(25px,8.8vw,36px) !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-main,
    .wedding-banner .intro .share-subtitle{
        font-size:clamp(11.5px,3.9vw,15px) !important;
    }
}

/* ---------- TOPBAR ALBUM: nessuna sovrapposizione ---------- */

.gallery-page .album-topbar{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:14px !important;
    padding:
        calc(10px + env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        10px
        max(16px, env(safe-area-inset-left)) !important;
}

.gallery-page .album-back-button{
    position:static !important;
    inset:auto !important;
    z-index:auto !important;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 14px !important;
    border-radius:999px;
    background:#6d503b;
    color:#fff !important;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    white-space:nowrap;
}

.gallery-page .album-back-button:hover{
    transform:none;
    background:#5d4331;
    box-shadow:none;
}

.gallery-page .album-topbar-title{
    min-width:0;
    display:grid;
    justify-items:start;
    line-height:1.05;
}

.gallery-page .album-topbar-title strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.gallery-page .mobile-add-label{
    display:none;
}

@media(max-width:700px){
    .gallery-page .album-topbar{
        min-height:64px;
        gap:8px !important;
        padding:
            calc(8px + env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            8px
            max(8px, env(safe-area-inset-left)) !important;
    }

    .gallery-page .album-back-button{
        width:42px;
        height:42px;
        min-height:42px;
        padding:0 !important;
        border-radius:50%;
    }

    .gallery-page .album-back-button .back-label{
        display:none;
    }

    .gallery-page .album-back-button .back-arrow{
        font-size:23px;
    }

    .gallery-page .album-topbar-title{
        justify-items:center;
        text-align:center;
    }

    .gallery-page .album-topbar-title strong{
        font-size:13px !important;
        max-width:100%;
    }

    .gallery-page .album-topbar-title small{
        font-size:9px !important;
    }

    .gallery-page .album-add-photo{
        min-height:42px !important;
        padding:0 10px !important;
        font-size:11px !important;
    }

    .gallery-page .desktop-add-label{
        display:none;
    }

    .gallery-page .mobile-add-label{
        display:inline;
    }
}

@media(max-width:360px){
    .gallery-page .album-topbar{
        gap:5px !important;
    }

    .gallery-page .album-back-button{
        width:38px;
        height:38px;
        min-height:38px;
    }

    .gallery-page .album-add-photo{
        min-height:38px !important;
        padding:0 8px !important;
        font-size:10px !important;
    }

    .gallery-page .album-topbar-title strong{
        font-size:11px !important;
    }

    .gallery-page .album-topbar-title small{
        font-size:8px !important;
    }
}

/* Controlli musica più chiari */
.gallery-control-btn.active,
.presentation-round-btn.active{
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);
}


/* ==========================================================
   MOBILE — POLAROID IN PRIMO PIANO
   ========================================================== */
@media(max-width:700px){
    /*
     * Su smartphone il livello Polaroid passa davanti al banner,
     * ma resta non cliccabile e quindi non interferisce con i tasti.
     */
    .polaroid-background{
        z-index:5 !important;
        overflow:hidden !important;
        pointer-events:none !important;
    }

    /* Evita che il velo decorativo del layer copra il contenuto centrale. */
    .polaroid-background::after{
        display:none !important;
    }

    .wedding-banner-shell{
        z-index:3 !important;
    }

    .floating-polaroid{
        width:clamp(104px,30vw,128px) !important;
        opacity:0 !important;
        pointer-events:none !important;
        box-shadow:0 14px 34px rgba(73,47,29,.30) !important;
    }

    .floating-polaroid.is-visible{
        opacity:.92 !important;
    }
}

@media(max-width:390px){
    .floating-polaroid{
        width:clamp(96px,29vw,112px) !important;
    }

    .floating-polaroid.is-visible{
        opacity:.90 !important;
    }
}


/* ==========================================================
   MOBILE — COUNTDOWN 1 RIGA + POLAROID SOTTOSTANTI
   ========================================================== */

/* Il collage mobile non compare su desktop/tablet grandi. */
.mobile-polaroid-collage{
    display:none;
}

@media(max-width:700px){

    /*
     * Su smartphone rimuoviamo completamente le Polaroid laterali:
     * vengono sostituite dal collage sotto il countdown.
     */
    .polaroid-background{
        display:none !important;
    }

    /*
     * Countdown sempre su una sola linea.
     * I quattro elementi si comprimono mantenendo leggibilità.
     */
    .countdown-card{
        width:100% !important;
        max-width:100% !important;
        padding:12px 8px !important;
    }

    .countdown-grid{
        display:grid !important;
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
        gap:5px !important;
        width:100% !important;
    }

    .countdown-box{
        min-width:0 !important;
        padding:9px 2px 8px !important;
        border-radius:10px !important;
    }

    .countdown-box strong{
        display:block;
        font-size:clamp(21px, 7.2vw, 30px) !important;
        line-height:1 !important;
    }

    .countdown-box span{
        display:block;
        margin-top:4px;
        font-size:clamp(7px, 2.25vw, 9px) !important;
        line-height:1 !important;
        letter-spacing:0 !important;
        white-space:nowrap;
    }

    .countdown-title{
        margin-bottom:8px !important;
    }

    .countdown-date{
        margin-top:8px !important;
    }

    /*
     * Collage Polaroid in-flow: non copre i pulsanti,
     * rimane sotto al countdown e sopra alle azioni.
     */
    .mobile-polaroid-collage{
        position:relative;
        display:block;
        width:min(100%, 330px);
        height:150px;
        margin:8px auto 10px;
        pointer-events:none;
    }

    .mobile-polaroid-card{
        position:absolute;
        width:100px;
        margin:0;
        padding:6px 6px 18px;
        background:#fffaf3;
        border-radius:4px;
        box-shadow:0 12px 25px rgba(45,28,18,.28);
        transform-origin:center;
        opacity:1;
        transition:opacity .34s ease, transform .58s cubic-bezier(.22,.61,.36,1);
        overflow:hidden;
    }

    .mobile-polaroid-card.is-changing{
        opacity:0;
    }

    .mobile-polaroid-photo{
        width:100%;
        aspect-ratio:4/5;
        overflow:hidden;
        background:#e8dfd5;
    }

    .mobile-polaroid-photo img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .mobile-polaroid-1{
        left:3%;
        top:22px;
        transform:rotate(-10deg);
        z-index:2;
    }

    .mobile-polaroid-2{
        left:20%;
        top:3px;
        transform:rotate(6deg);
        z-index:4;
    }

    .mobile-polaroid-3{
        left:39%;
        top:17px;
        transform:rotate(-4deg);
        z-index:5;
    }

    .mobile-polaroid-4{
        right:19%;
        top:1px;
        transform:rotate(8deg);
        z-index:4;
    }

    .mobile-polaroid-5{
        right:2%;
        top:23px;
        transform:rotate(-7deg);
        z-index:2;
    }

    .hero-actions{
        position:relative;
        z-index:8;
        margin-top:4px !important;
    }
}

@media(max-width:390px){
    .countdown-card{
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .countdown-grid{
        gap:3px !important;
    }

    .countdown-box strong{
        font-size:clamp(19px, 7vw, 26px) !important;
    }

    .countdown-box span{
        font-size:7px !important;
    }

    .mobile-polaroid-collage{
        width:min(100%, 285px);
        height:132px;
    }

    .mobile-polaroid-card{
        width:86px;
        padding:5px 5px 15px;
    }
}

/* ==========================================================
   MOBILE — AZIONI SOTTO IL COLLAGE POLAROID
   ========================================================== */
@media(max-width:700px){
    .mobile-polaroid-collage{
        margin-bottom:20px !important;
    }

    .hero-actions{
        position:relative !important;
        z-index:8 !important;
        margin-top:18px !important;
        padding-top:2px !important;
    }

    .hero-actions .btn{
        position:relative;
        z-index:9;
    }
}

@media(max-width:390px){
    .mobile-polaroid-collage{
        margin-bottom:18px !important;
    }

    .hero-actions{
        margin-top:16px !important;
    }
}


/* ==========================================================
   HOME — TESTI MOBILE: RIGHE CONTROLLATE
   ========================================================== */
.wedding-banner .intro .wedding-photo-title .photo-title-main,
.wedding-banner .intro .wedding-photo-title .photo-title-script{
    display:block !important;
    white-space:nowrap !important;
}

/* La frase fotografica deve avere esattamente due righe: la prima
   termina dopo la virgola, la seconda contiene il seguito. */
.wedding-banner .intro .wedding-photo-title{
    white-space:normal !important;
}

/* Titolo della scheda di caricamento sempre su un'unica riga. */
.wedding-banner .upload-card h2{
    white-space:nowrap !important;
    font-size:clamp(28px, 8.6vw, 42px) !important;
    line-height:1.05 !important;
}

@media(max-width:700px){
    .wedding-banner .intro .wedding-photo-title .photo-title-main{
        font-size:clamp(15px, 4.55vw, 20px) !important;
        line-height:1.05 !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-script{
        font-size:clamp(34px, 9.2vw, 48px) !important;
        line-height:1 !important;
        margin-top:3px !important;
    }

    .wedding-banner .upload-card h2{
        font-size:clamp(27px, 8.1vw, 40px) !important;
    }
}

@media(max-width:390px){
    .wedding-banner .intro .wedding-photo-title .photo-title-main{
        font-size:clamp(14px, 4.25vw, 17px) !important;
    }

    .wedding-banner .intro .wedding-photo-title .photo-title-script{
        font-size:clamp(31px, 8.6vw, 42px) !important;
    }

    .wedding-banner .upload-card h2{
        font-size:clamp(25px, 7.7vw, 34px) !important;
    }
}