/* PRIGLO 116 — mobile invitation hero rhythm & genuine fixed Liquid Glass demo CTA.
   Intentional cinematic overlays (Gravity, Impulse, date-between, Afterglow) stay untouched. */
.template-demo-page .template-demo-toolbar {
  position: fixed !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  transform: translate3d(-50%,0,0) !important;
  z-index: 350 !important;
  width: min(570px, calc(100% - 24px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 0 !important;
  padding: 6px !important;
  min-height: 0 !important;
  border-radius: 24px !important;
  background: rgba(250,249,246,.28) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow: 0 8px 30px rgba(24,34,30,.16), inset 0 1px 0 rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  isolation: isolate;
}
.template-demo-page .template-demo-toolbar .demo-template-name { display: none !important; }
.template-demo-page .template-demo-toolbar .demo-choose-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 51px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 19px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  background: linear-gradient(155deg, rgba(255,255,255,.85), rgba(236,245,242,.63) 63%, rgba(219,234,230,.72)) !important;
  color: #17372f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 3px 10px rgba(35,52,44,.11) !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font: 650 clamp(14px,3.8vw,16px)/1.25 'Noto Sans','DM Sans',sans-serif !important;
  letter-spacing: -.012em;
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.template-demo-page .demo-choose-button > span { display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.template-demo-page .demo-choose-button svg { flex-shrink: 0; stroke-width: 2.3; }
@media (hover:hover) { .template-demo-page .template-demo-toolbar .demo-choose-button:hover { background:rgba(255,255,255,.93) !important; box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(35,52,44,.16)!important; } }
.template-demo-page .template-demo-toolbar .demo-choose-button:focus-visible { outline:3px solid #477b6d; outline-offset:3px; }
.template-demo-page .template-demo-toolbar .demo-choose-button:disabled { opacity:.58; cursor:not-allowed; }
.template-demo-page .template-demo-canvas { padding-bottom: calc(95px + env(safe-area-inset-bottom)) !important; }
.template-demo-page .audio-fab { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .template-demo-page .template-demo-toolbar { background: rgba(247,249,245,.93) !important; }
}

/* Clear envelope pictogram instead of the recipient's initials, with intact wax animation. */
.ti-opening--ivory .ti-ivory-envelope-emblem__paper { fill:#f4e7ca !important; stroke:#e9d1a0 !important; }
.ti-opening--ivory .ti-ivory-envelope-emblem__inner { fill:rgba(255,252,242,.87) !important; stroke:#bd9d63 !important; }
.ti-opening--ivory .ti-ivory-envelope-emblem__icon { fill:none; stroke:#62674e; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }

/* Catalog photo/text overlap: the Vow preview's title lives in a separate column. */
.anniversary-thumb-anniversary-vow .anniversary-thumb-photo { width:47% !important; right:3% !important; }
.anniversary-thumb-anniversary-vow .anniversary-thumb-copy { left:5% !important; width:43% !important; right:auto!important; }
.anniversary-thumb-anniversary-vow .anniversary-thumb-copy strong { max-width:100%; font-size:clamp(15px,6.7cqw,28px); line-height:1.06; overflow-wrap:anywhere; word-break:normal; }

/* These templates explicitly place a standalone image ABOVE the names on phones.
   Stop centering a 100svh text container after the 46svh photo. Keep the actual photo,
   masks, outlines and independent image animations without rebuilding the sections. */
@media (max-width: 640px) {
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(18px,4svh,35px) 0 clamp(48px,8svh,72px) !important;
  }
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo > .art-hero-photo {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    margin: 0 auto !important;
    width: min(calc(100% - 36px), 470px) !important;
    max-width: 100% !important;
    height: clamp(245px,46svh,460px) !important;
    flex: 0 0 auto;
  }
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo > .art-hero-copy {
    display: block !important;
    box-sizing: border-box;
    position: relative !important;
    align-self: center !important;
    width: min(calc(100% - 36px),470px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(16px,4svh,30px) 0 0 !important;
    margin: 0 auto !important;
    text-align: left !important;
    justify-items: start !important;
    align-content: start !important;
  }
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo h1 {
    margin: 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(34px,9.5vw,56px) !important;
    line-height: 1.04 !important;
    overflow-wrap: break-word;
    word-break: normal !important;
    white-space: normal !important;
    text-wrap: balance;
  }
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo .art-couple-names {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: .1em .17em !important;
    width: 100%;
  }
  .art-wedding:is(.art-theme-sakura-mist-v2,.art-theme-sakura-mist,.art-theme-herbarium,.art-theme-paper-cut-romance,.art-theme-pop-art-wedding-v2,.art-theme-pop-art-wedding,.art-theme-riviera-60s-v2,.art-theme-cinema-noir-v2,.art-theme-ocean-pearl-v2,.art-theme-digital-aurora-v2) .art-hero.has-photo .art-couple-names em {
    margin: 0 .08em !important;
    font-size: .55em !important;
  }
  .art-theme-herbarium .art-hero.has-photo > .art-hero-photo { padding: 10px !important; }
  .art-theme-pop-art-wedding-v2 .art-hero.has-photo > .art-hero-photo { box-shadow: 8px 8px 0 var(--art-accent2) !important; }
  .art-theme-pop-art-wedding-v2 .art-hero.has-photo h1 { text-transform: none !important; font-size:clamp(32px,8.8vw,48px)!important; }

  /* Anniversary Afterglow ("Тёплое сияние"): keep the dark cinematic fade but shorten the
     enormous blank section between the main photo and the couple's names. */
  .anniversary-afterglow-v2.an-glow .an-hero {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 0 clamp(42px,7svh,66px) !important;
  }
  .anniversary-afterglow-v2.an-glow .an-hero-photo {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:clamp(245px,46svh,450px) !important;
    flex:0 0 auto !important;
  }
  .anniversary-afterglow-v2.an-glow .an-hero-orbit {
    bottom:auto !important;
    top:clamp(226px,44svh,427px) !important;
    opacity:.65;
  }
  .anniversary-afterglow-v2.an-glow .an-hero-copy {
    box-sizing:border-box;
    width:min(calc(100% - 36px),470px) !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:clamp(18px,4svh,30px) 0 0 !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }
  .anniversary-afterglow-v2.an-glow .an-names {
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(36px,10vw,55px) !important;
    line-height:1.08 !important;
    overflow-wrap:break-word;
  }
  .anniversary-afterglow-v2.an-glow .an-years strong {
    font-size:clamp(76px,21vw,104px) !important;
  }

  /* Anniversary Vow / Paper Love: the page's names follow the image without a viewport-tall spacer. */
  .anniversary-vow-v2.an-vow .an-hero,
  .anniversary-paper-v2.an-paper .an-hero { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start!important; min-height:0!important; height:auto!important; padding:clamp(18px,4svh,36px) 0 clamp(48px,8svh,70px) !important; }
  .anniversary-vow-v2.an-vow .an-hero-photo,
  .anniversary-paper-v2.an-paper .an-hero-photo { position:relative!important; inset:auto!important; width:min(calc(100% - 36px),470px)!important; height:clamp(250px,46svh,450px)!important; flex:0 0 auto; margin:0 auto!important; }
  .anniversary-vow-v2.an-vow .an-hero-photo { transform:none!important; }
  .anniversary-paper-v2.an-paper .an-hero-photo { transform:rotate(2deg)!important; }
  .anniversary-vow-v2.an-vow .an-hero-copy,
  .anniversary-paper-v2.an-paper .an-hero-copy { box-sizing:border-box; position:relative!important; z-index:3; width:min(calc(100% - 36px),470px)!important; min-height:0!important; height:auto!important; margin:0 auto!important; padding:clamp(18px,4svh,28px) 0 0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:8px!important; text-align:left!important; }
  .anniversary-vow-v2.an-vow .an-hero-copy > span,
  .anniversary-paper-v2.an-paper .an-hero-copy > span { align-self:flex-start; }
  .anniversary-vow-v2.an-vow .an-hero-copy .an-names,
  .anniversary-paper-v2.an-paper .an-hero-copy .an-names { width:100%; max-width:100%; margin:12px 0!important; font-size:clamp(36px,9.5vw,58px)!important; line-height:1.08; overflow-wrap:break-word; word-break:normal; }
  .anniversary-vow-v2.an-vow .an-hero .an-chevron,
  .anniversary-paper-v2.an-paper .an-hero .an-chevron { display:none!important; }
}
@media (prefers-reduced-motion: reduce) { .template-demo-page .template-demo-toolbar .demo-choose-button { transition:none!important; } }