/* ---------- VerseCraft shared UI layer ----------
   Scroll reveals, occasion icons, the mobile sticky CTA, and the live order
   summary. Everything here is additive: if ui.js never runs, content stays
   visible and nothing is hidden behind a class that only JS can remove. */

/* ---------- Scroll reveal ----------
   The resting state is applied by JS, so no-JS visitors see everything
   immediately rather than a blank page. */
.vc-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.vc-reveal.vc-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .vc-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Occasion icons ---------- */
.occ .icon{
  width:42px;height:42px;margin-bottom:14px;color:var(--gold,#D98E2B);
}
.occ .icon svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Memorial reads more softly than the celebratory icons. */
.occ .icon.icon-quiet{color:var(--ink-soft,#6E5560);opacity:.8}

/* ---------- Mobile sticky CTA ----------
   Built by ui.js from the page's own nav CTA, so each landing page keeps its
   occasion-specific destination. Shown only once the hero has scrolled away. */
.vc-stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(255,248,240,.97);
  border-top:1px solid rgba(122,37,64,.14);
  box-shadow:0 -6px 22px rgba(72,19,42,.10);
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.vc-stickybar.vc-show{transform:none}
.vc-stickybar .vc-sticky-meta{
  flex:1;min-width:0;line-height:1.25;
}
.vc-stickybar .vc-sticky-meta b{
  display:block;font-family:var(--display,'Fraunces',Georgia,serif);
  font-size:.98rem;color:var(--wine-deep,#48132A);font-weight:700;
}
.vc-stickybar .vc-sticky-meta span{
  display:block;font-size:.78rem;color:var(--ink-soft,#6E5560);font-weight:700;
}
.vc-stickybar a{
  flex:none;background:linear-gradient(135deg,var(--wine,#7A2540) 0%,#9C3355 100%);
  color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;
  padding:13px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(122,37,64,.32);
}
.vc-stickybar a:focus-visible{outline:3px solid var(--gold,#D98E2B);outline-offset:3px}
@media(max-width:820px){
  .vc-stickybar{display:flex}
  /* Keep the last section clear of the bar. */
  body.vc-has-sticky footer{padding-bottom:86px}
}
@media (prefers-reduced-motion: reduce){
  .vc-stickybar{transition:none}
}

/* ---------- Live order summary (order page) ---------- */
.vc-summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--rose,#FBE9E1);
  border:1px solid var(--rose-deep,#F6D9CC);
  border-radius:14px;padding:14px 18px;margin:0 0 16px;
  text-align:left;
}
.vc-summary .vc-sum-label{
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wine,#7A2540);display:block;margin-bottom:3px;
}
.vc-summary .vc-sum-pkg{
  font-family:var(--display,'Fraunces',Georgia,serif);
  font-size:1.05rem;color:var(--wine-deep,#48132A);font-weight:700;line-height:1.2;
}
.vc-summary .vc-sum-speed{
  display:block;font-size:.84rem;color:var(--ink-soft,#6E5560);font-weight:600;margin-top:2px;
}
.vc-summary .vc-sum-price{
  flex:none;font-family:var(--display,'Fraunces',Georgia,serif);
  font-size:1.7rem;font-weight:700;color:var(--wine-deep,#48132A);line-height:1;
}
@media(max-width:480px){
  .vc-summary{padding:12px 14px;gap:10px}
  .vc-summary .vc-sum-price{font-size:1.45rem}
  .vc-summary .vc-sum-pkg{font-size:.98rem}
}