/* The actual customer website: full-width, responsive, multi-section landing page. */
html { scroll-behavior:smooth }
.wedding-preview-host { scrollbar-width:thin; scrollbar-color:#c6b2aa transparent; scroll-behavior:smooth; }
.preview-shell.phone .wedding-preview-host { width:340px; max-width:100%; height:660px; overflow-y:auto; overflow-x:hidden; border:7px solid #fff; border-radius:20px; box-shadow:0 20px 60px #503e3330; background:#fff; }
.preview-shell.desktop .wedding-preview-host { width:100%; height:660px; overflow-y:auto; overflow-x:hidden; border:7px solid #fff; border-radius:12px; box-shadow:0 20px 60px #503e3330; background:#fff; }
#publishedApp { padding:0; background:transparent; }
.wedding-site {
  --ws-bg:#fcf5ef; --ws-paper:#fffaf5; --ws-paper-alt:#f6e9e7;
  --ws-ink:#654c55; --ws-subtle:#826d70; --ws-accent:#ab7584; --ws-outline:#e4c6c8;
  background:var(--ws-bg); color:var(--ws-ink); font-family:'DM Sans',sans-serif;
  font-weight:400; font-size:14px; line-height:1.6; width:100%; isolation:isolate; text-align:center;
}
.wedding-site.ws-heritage { --ws-bg:#331623;--ws-paper:#4d2031;--ws-paper-alt:#602b3d;--ws-ink:#f6dec1;--ws-subtle:#e2bda2;--ws-accent:#e1b881;--ws-outline:#875d59; }
.wedding-site.ws-minimal { --ws-bg:#f6f5ee;--ws-paper:#fffefa;--ws-paper-alt:#e8eee4;--ws-ink:#435447;--ws-subtle:#67796a;--ws-accent:#6f8a75;--ws-outline:#c6d3c3; }
.wedding-site * { box-sizing:border-box; }
.wedding-site a { color:inherit; }
.wedding-site .ws-nav {
  position:sticky; top:0; z-index:20; min-height:70px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px clamp(18px,5%,90px);
  background:var(--ws-paper); border-bottom:1px solid var(--ws-outline);
}
.wedding-site .ws-monogram { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:25px; letter-spacing:.02em; line-height:1; flex-shrink:0; text-decoration:none; }
.wedding-site .ws-logo-amp { display:inline-block; color:var(--ws-accent); font-style:italic; padding:0 4px; }
.wedding-site .ws-nav nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:clamp(12px,2.4vw,31px); overflow:auto; scrollbar-width:none; }
.wedding-site .ws-nav nav::-webkit-scrollbar { display:none; }
.wedding-site .ws-nav nav a { white-space:nowrap; text-decoration:none; font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--ws-subtle); transition:color .2s; }
.wedding-site .ws-nav nav a:hover { color:var(--ws-accent); }
.wedding-site .ws-section { padding:95px clamp(22px,6vw,85px); position:relative; overflow:hidden; scroll-margin-top:64px; }
.wedding-site .ws-content { max-width:1050px; margin:0 auto; position:relative; z-index:1; }
.wedding-site .ws-hero { min-height:calc(100svh - 70px); display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#fffaf6 8%,#f7e7e5 105%); }
.wedding-site.ws-heritage .ws-hero { background:radial-gradient(ellipse at center,#663248,#351523 82%); }
.wedding-site.ws-minimal .ws-hero { background:radial-gradient(ellipse at center,#f7f9f2,#edf0e7); }
.wedding-site .ws-hero-inner { position:relative; z-index:1; max-width:760px; padding:20px 0; }
.wedding-site .ws-hero-ornament { position:absolute; font-size:280px; line-height:1; color:var(--ws-accent); opacity:.15; pointer-events:none; }
.wedding-site .ws-ornament-left { top:-100px; left:-80px; transform:rotate(-18deg); }
.wedding-site .ws-ornament-right { bottom:-115px; right:-80px; transform:rotate(20deg); }
.wedding-site.ws-heritage .ws-hero-ornament { font-size:230px; opacity:.22; }
.wedding-site .ws-kicker,.wedding-site .ws-section-eyebrow { color:var(--ws-accent); font-size:10px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; margin:0 0 16px; }
.wedding-site .ws-flower,.wedding-site .ws-small-flower { font-family:Georgia,serif; font-size:25px; color:var(--ws-accent); margin:5px auto 10px; }
.wedding-site .ws-name-lockup { font-family:'Cormorant Garamond',Georgia,serif; line-height:.88; letter-spacing:-.045em; font-weight:500; font-size:clamp(75px,13vw,144px); margin:16px auto 20px; }
.wedding-site .ws-name-lockup span { display:block; overflow-wrap:anywhere; }
.wedding-site .ws-name-lockup .ws-name-amp { font-style:italic; color:var(--ws-accent); font-size:.47em; line-height:.95; margin:.1em auto; }
.wedding-site .ws-hero-tagline { font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(21px,2.8vw,30px); font-style:italic; color:var(--ws-subtle); max-width:500px; margin:20px auto; line-height:1.25; }
.wedding-site .ws-hero-date { font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:20px auto 30px; font-weight:700; }
.wedding-site .ws-date-dot { color:var(--ws-accent); padding:0 6px; }
.wedding-site .ws-hero-button { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:14px; border:1px solid var(--ws-outline); border-radius:30px; padding:13px 25px; background:var(--ws-paper); font-size:11px; font-weight:700; transition:transform .2s; }
.wedding-site .ws-hero-button:hover { transform:translateY(-3px); }
.wedding-site .ws-scroll-hint { position:absolute; bottom:25px; font-size:9px; letter-spacing:.22em; color:var(--ws-subtle); }
.wedding-site .ws-section h2 { font:500 clamp(43px,5.5vw,66px)/1 'Cormorant Garamond',Georgia,serif; letter-spacing:-.03em; margin:0 0 20px; }
.wedding-site .ws-section-intro { max-width:600px; font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; line-height:1.4; margin:0 auto 35px; color:var(--ws-subtle); }
.wedding-site .ws-story { background:var(--ws-paper); }
.wedding-site .ws-story-copy { max-width:700px; margin:22px auto; font:400 clamp(22px,3vw,30px)/1.55 'Cormorant Garamond',Georgia,serif; white-space:pre-line; }
.wedding-site .ws-story-end { font:italic 20px 'Cormorant Garamond',Georgia,serif; color:var(--ws-accent); margin-top:25px; }
.wedding-site .ws-celebrations { background:var(--ws-bg); }
.wedding-site .ws-event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; align-items:stretch; margin-top:34px; }
.wedding-site .ws-event-card { background:var(--ws-paper); border:1px solid var(--ws-outline); padding:38px 22px 34px; min-width:0; }
.wedding-site .ws-event-num { font-size:10px; letter-spacing:.18em; color:var(--ws-accent); margin-bottom:18px; }
.wedding-site .ws-event-card h3 { font:500 37px 'Cormorant Garamond',Georgia,serif; margin:0 0 12px; line-height:1; overflow-wrap:anywhere; }
.wedding-site .ws-event-date { font:600 12px 'DM Sans',sans-serif; }
.wedding-site .ws-event-time { font:500 12px 'DM Sans',sans-serif; color:var(--ws-subtle); margin:6px auto 18px; }
.wedding-site .ws-event-address { font:italic 19px 'Cormorant Garamond',Georgia,serif; margin:0 auto 14px; overflow-wrap:anywhere; }
.wedding-site .ws-directions { display:inline-block; font-size:10px; font-weight:700; color:var(--ws-accent)!important; text-decoration:none; border-bottom:1px solid var(--ws-accent); padding:4px 0; }
.wedding-site .ws-gallery { background:var(--ws-paper-alt); }
.wedding-site .ws-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wedding-site .ws-photo { margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--ws-paper); border:5px solid var(--ws-paper); }
.wedding-site .ws-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.wedding-site .ws-gallery-placeholder { border:1px dashed var(--ws-accent); padding:60px 25px; color:var(--ws-subtle); background:var(--ws-paper); max-width:550px; margin:0 auto; }
.wedding-site .ws-gallery-placeholder span { font:56px 'Cormorant Garamond',Georgia,serif; }
.wedding-site .ws-gallery-placeholder p { max-width:250px; margin:10px auto 0; font-size:12px; }
.wedding-site .ws-venue { background:var(--ws-paper); }
.wedding-site .ws-venue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.wedding-site .ws-venue-card { border:1px solid var(--ws-outline); padding:30px 16px; background:var(--ws-bg); }
.wedding-site .ws-venue-icon { font-size:30px; color:var(--ws-accent); }
.wedding-site .ws-venue-card h3 { font:500 27px/1.2 'Cormorant Garamond',Georgia,serif; margin:10px auto 16px; overflow-wrap:anywhere; }
.wedding-site .ws-closing { padding-top:115px; padding-bottom:115px; background:var(--ws-bg); }
.wedding-site .ws-closing h2 { margin:20px auto; }
.wedding-site .ws-closing p { font:italic 24px 'Cormorant Garamond',Georgia,serif; color:var(--ws-subtle); }
.wedding-site .ws-closing-signature { font:italic 30px 'Cormorant Garamond',Georgia,serif; margin-top:32px; }
.wedding-site .ws-closing-signature .ws-amp { color:var(--ws-accent); padding:0 7px; }
.wedding-site .ws-footer { background:var(--ws-paper); border-top:1px solid var(--ws-outline); padding:20px 5%; display:flex; gap:15px; justify-content:space-between; align-items:center; font-size:10px; color:var(--ws-subtle); }
.wedding-site .ws-footer span:first-child { font:600 19px 'Cormorant Garamond',Georgia,serif; }
.wedding-site .ws-footer a { white-space:nowrap; text-decoration:none; }
.wedding-preview-host .wedding-site { font-size:12px; }
.wedding-preview-host .ws-nav { padding:8px 12px; min-height:54px; gap:8px; }
.wedding-preview-host .ws-monogram { font-size:17px; }
.wedding-preview-host .ws-nav nav { gap:11px; }
.wedding-preview-host .ws-nav nav a { font-size:8px; }
.wedding-preview-host .ws-section { padding:55px 18px; scroll-margin-top:54px; }
.wedding-preview-host .ws-hero { min-height:585px; }
.wedding-preview-host .ws-hero-ornament { font-size:150px; }
.wedding-preview-host .ws-ornament-left { top:-55px; left:-38px; }
.wedding-preview-host .ws-ornament-right { bottom:-65px; right:-40px; }
.wedding-preview-host .ws-kicker,.wedding-preview-host .ws-section-eyebrow { font-size:8px; letter-spacing:.2em; }
.wedding-preview-host .ws-name-lockup { font-size:clamp(48px,7vw,81px); }
.wedding-preview-host .ws-hero-tagline { font-size:18px; }
.wedding-preview-host .ws-hero-date { font-size:9px; }
.wedding-preview-host .ws-section h2 { font-size:38px; }
.wedding-preview-host .ws-section-intro { font-size:18px; }
.wedding-preview-host .ws-story-copy { font-size:20px; }
.wedding-preview-host .ws-event-grid { grid-template-columns:1fr; }
.wedding-preview-host .ws-event-card { padding:28px 15px; }
.wedding-preview-host .ws-event-card h3 { font-size:31px; }
.wedding-preview-host .ws-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wedding-preview-host .ws-venue-grid { grid-template-columns:1fr; }
.wedding-preview-host .ws-footer { padding:13px; font-size:8px; }
.wedding-preview-host .ws-footer span:first-child { font-size:14px; }
.wedding-preview-host .ws-scroll-hint { font-size:8px; }
.ws-section-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #e6dcd6; }
.ws-section-toggle label { font-size:12px; font-weight:700; color:#53454a; }
.ws-section-toggle p { font-size:10px; color:#877c79; margin:3px 0 0; }
.ws-section-toggle input { width:19px; height:19px; accent-color:#a97983; }
.ws-photo-edit { border:1px solid #e2d7d1; border-radius:9px; padding:14px; margin-top:20px; background:#fffdfa; }
.ws-photo-edit h3 { font-size:12px; margin:0 0 8px; }
.ws-photo-field { display:flex; align-items:center; gap:8px; margin:9px 0; }
.ws-photo-field input { min-width:0; flex:1; padding:10px 11px; border-radius:6px; border:1px solid #e2d7d1; font-size:11px; }
.ws-photo-field button { border:0; background:transparent; color:#9c626d; font-size:19px; padding:4px; }
.ws-editor-note { color:#827574; font-size:10px; line-height:1.7; }
@media(max-width:650px) {
  .wedding-site .ws-nav { flex-direction:column; gap:5px; padding:8px 10px; }
  .wedding-site .ws-nav nav { justify-content:flex-start; width:100%; gap:17px; }
  .wedding-site .ws-section { scroll-margin-top:85px; padding:68px 22px; }
  .wedding-site .ws-hero { min-height:calc(100svh - 88px); padding-top:75px; padding-bottom:75px; }
  .wedding-site .ws-name-lockup { font-size:clamp(69px,16vw,98px); }
  .wedding-site .ws-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wedding-site .ws-event-grid { grid-template-columns:1fr; }
  .wedding-site .ws-footer { gap:10px; flex-wrap:wrap; justify-content:center; }
}
@media(max-width:400px) {
  .wedding-site .ws-name-lockup { font-size:63px; }
  .wedding-site .ws-hero-date { font-size:9px; }
  .wedding-preview-host .ws-name-lockup { font-size:56px; }
  .wedding-preview-host .ws-hero { min-height:530px; }
  .wedding-site .ws-photo-grid { gap:8px; }
}

/* User-selected overrides win against per-theme gradient rules without changing layouts. */
.wedding-site.ws-custom-colors {
  --ws-paper-alt: color-mix(in srgb, var(--ws-bg) 84%, var(--ws-accent) 16%);
  --ws-subtle: color-mix(in srgb, var(--ws-ink) 88%, var(--ws-bg) 12%);
  --ws-outline: color-mix(in srgb, var(--ws-accent) 42%, var(--ws-bg) 58%);
}
.wedding-site.ws-custom-colors .ws-hero {
  background: radial-gradient(ellipse at center,var(--ws-paper),var(--ws-bg) 95%);
}

/* Independent section design variants: layouts rather than color-only changes. */
.wedding-site .ws-hero.ws-layout-split .ws-hero-inner{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"kicker names" "flower names" "tagline names" "date names" "button names";max-width:1100px;width:100%;align-items:center;text-align:left;column-gap:40px}
.wedding-site .ws-hero.ws-layout-split .ws-kicker{grid-area:kicker;align-self:end}
.wedding-site .ws-hero.ws-layout-split .ws-flower{grid-area:flower;margin:0}
.wedding-site .ws-hero.ws-layout-split .ws-name-lockup{grid-area:names;border-left:1px solid var(--ws-outline);padding:35px 0 35px 40px;font-size:clamp(65px,9vw,115px);margin:0;text-align:left}
.wedding-site .ws-hero.ws-layout-split .ws-hero-tagline{grid-area:tagline;margin:12px 0}
.wedding-site .ws-hero.ws-layout-split .ws-hero-date{grid-area:date;margin:12px 0}
.wedding-site .ws-hero.ws-layout-split .ws-hero-button{grid-area:button;justify-self:start}
.wedding-site .ws-hero.ws-layout-framed .ws-hero-inner{border:2px solid var(--ws-outline);outline:1px solid var(--ws-outline);outline-offset:8px;padding:55px 50px;background:color-mix(in srgb,var(--ws-paper) 75%,transparent)}
.wedding-site .ws-story.ws-layout-editorial .ws-content{text-align:left;display:grid;grid-template-columns:minmax(150px,1fr) minmax(260px,2fr);gap:14px 60px}
.wedding-site .ws-story.ws-layout-editorial .ws-section-eyebrow,.wedding-site .ws-story.ws-layout-editorial h2,.wedding-site .ws-story.ws-layout-editorial .ws-small-flower{grid-column:1}
.wedding-site .ws-story.ws-layout-editorial .ws-story-copy{grid-column:2;grid-row:1/span 4;margin:0;font-size:clamp(25px,3.7vw,37px)}
.wedding-site .ws-story.ws-layout-editorial .ws-story-end{grid-column:2;text-align:right}
.wedding-site .ws-story.ws-layout-letter .ws-content{max-width:730px;background:var(--ws-paper-alt);border:1px solid var(--ws-outline);box-shadow:0 15px 45px #0000000b;padding:clamp(35px,7vw,85px) clamp(25px,7vw,70px);transform:rotate(-.5deg)}
.wedding-site .ws-story.ws-layout-letter .ws-story-copy{text-align:left;font-style:italic;line-height:1.75}
.wedding-site .ws-celebrations.ws-layout-timeline .ws-event-grid{max-width:740px;margin:40px auto 0;display:block;border-left:1px solid var(--ws-outline);padding-left:36px}
.wedding-site .ws-celebrations.ws-layout-timeline .ws-event-card{position:relative;text-align:left;margin:0 0 28px;border:0;border-bottom:1px solid var(--ws-outline);padding:20px 15px 28px;background:transparent}
.wedding-site .ws-celebrations.ws-layout-timeline .ws-event-card:before{content:"";position:absolute;left:-43px;top:28px;width:13px;height:13px;background:var(--ws-accent);border-radius:50%;box-shadow:0 0 0 5px var(--ws-bg)}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-grid{display:block;max-width:900px;margin:30px auto}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-card{display:grid;grid-template-columns:95px 1fr 1fr;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ws-outline);padding:20px 6px;gap:4px 18px}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-num{grid-row:1/span 4;margin:0}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-card h3{grid-column:2;grid-row:1/span 2}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-date,.wedding-site .ws-celebrations.ws-layout-rows .ws-event-time{grid-column:3}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-address,.wedding-site .ws-celebrations.ws-layout-rows .ws-directions{grid-column:2/span 2;margin:0}
.wedding-site .ws-gallery.ws-layout-mosaic .ws-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.wedding-site .ws-gallery.ws-layout-mosaic .ws-photo:nth-child(5n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.wedding-site .ws-gallery.ws-layout-filmstrip .ws-photo-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:16px}
.wedding-site .ws-gallery.ws-layout-filmstrip .ws-photo{flex:0 0 min(58%,310px);scroll-snap-align:center}
.wedding-site .ws-venue.ws-layout-list .ws-venue-grid{display:block;max-width:780px;margin:auto}
.wedding-site .ws-venue.ws-layout-list .ws-venue-card{display:flex;align-items:center;text-align:left;gap:20px;padding:22px 5px;background:transparent;border:0;border-bottom:1px solid var(--ws-outline)}
.wedding-site .ws-venue.ws-layout-list .ws-venue-card h3{flex:1;margin:0}
.wedding-site .ws-venue.ws-layout-highlight .ws-venue-grid{display:grid;grid-template-columns:1fr;max-width:650px;margin:auto}
.wedding-site .ws-venue.ws-layout-highlight .ws-venue-card{padding:55px 20px;border:2px solid var(--ws-accent);background:var(--ws-paper-alt)}
.wedding-site .ws-venue.ws-layout-highlight .ws-venue-card h3{font-size:clamp(32px,5vw,50px)}
.wedding-site .ws-closing.ws-layout-framed .ws-content{max-width:730px;padding:60px 35px;border:2px solid var(--ws-outline);outline:1px solid var(--ws-outline);outline-offset:8px;background:var(--ws-paper)}
.wedding-site .ws-closing.ws-layout-banner{background:var(--ws-ink);color:var(--ws-paper);padding:140px 20px}
.wedding-site .ws-closing.ws-layout-banner .ws-section-eyebrow,.wedding-site .ws-closing.ws-layout-banner .ws-small-flower{color:var(--ws-accent)}
.wedding-site .ws-closing.ws-layout-banner h2{font-size:clamp(55px,8vw,100px)}
.wedding-site .ws-closing.ws-layout-banner p{color:var(--ws-paper)}
@media(max-width:700px){
.wedding-site .ws-hero.ws-layout-split .ws-hero-inner{display:flex;flex-direction:column;text-align:center;gap:14px}
.wedding-site .ws-hero.ws-layout-split .ws-name-lockup{border:0;border-top:1px solid var(--ws-outline);padding:20px 0;margin:0;text-align:center}
.wedding-site .ws-hero.ws-layout-split .ws-hero-button{align-self:center}
.wedding-site .ws-hero.ws-layout-split .ws-hero-tagline,.wedding-site .ws-hero.ws-layout-split .ws-hero-date{margin:0}
.wedding-site .ws-hero.ws-layout-framed .ws-hero-inner{padding:45px 24px}
.wedding-site .ws-story.ws-layout-editorial .ws-content{display:block;text-align:center}
.wedding-site .ws-story.ws-layout-editorial .ws-story-copy{text-align:left}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-card{grid-template-columns:1fr;text-align:center}
.wedding-site .ws-celebrations.ws-layout-rows .ws-event-num,.wedding-site .ws-celebrations.ws-layout-rows .ws-event-card h3,.wedding-site .ws-celebrations.ws-layout-rows .ws-event-date,.wedding-site .ws-celebrations.ws-layout-rows .ws-event-time,.wedding-site .ws-celebrations.ws-layout-rows .ws-event-address,.wedding-site .ws-celebrations.ws-layout-rows .ws-directions{grid-column:1;grid-row:auto}
.wedding-site .ws-gallery.ws-layout-mosaic .ws-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wedding-site .ws-venue.ws-layout-list .ws-venue-card{flex-wrap:wrap;justify-content:center;text-align:center}
.wedding-site .ws-venue.ws-layout-list .ws-venue-card h3{flex:1 1 100%}
}
.wedding-preview-host .ws-hero.ws-layout-split .ws-hero-inner{display:flex;flex-direction:column;text-align:center;gap:12px}
.wedding-preview-host .ws-hero.ws-layout-split .ws-name-lockup{border:0;border-top:1px solid var(--ws-outline);padding:16px 0;text-align:center}
.wedding-preview-host .ws-hero.ws-layout-split .ws-hero-button{align-self:center}
.wedding-preview-host .ws-hero.ws-layout-split .ws-hero-tagline,.wedding-preview-host .ws-hero.ws-layout-split .ws-hero-date{margin:0}
.wedding-preview-host .ws-hero.ws-layout-framed .ws-hero-inner{padding:30px 18px}
.wedding-preview-host .ws-story.ws-layout-editorial .ws-content{display:block;text-align:left}
.wedding-preview-host .ws-celebrations.ws-layout-rows .ws-event-card{display:block;text-align:center}
.wedding-preview-host .ws-celebrations.ws-layout-rows .ws-event-card>*{margin-bottom:7px}
.wedding-preview-host .ws-gallery.ws-layout-mosaic .ws-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wedding-preview-host .ws-venue.ws-layout-list .ws-venue-card{flex-direction:column;text-align:center}

/* Dedicated scroll slider alongside the preview, separate from editor scrolling. */
.preview-shell { align-items:stretch; gap:12px; }
.preview-shell.phone .wedding-preview-host { flex:0 1 340px; min-width:0; }
.preview-shell.desktop .wedding-preview-host { flex:1 1 auto; min-width:0; }
.preview-scroll-controls {
  flex:0 0 40px;
  align-self:stretch;
  height:660px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 0 7px;
  background:color-mix(in srgb,#fff 66%,transparent);
  border:1px solid #e3d6d0;
  border-radius:25px;
  box-shadow:0 8px 24px #4c2d3510;
}
.preview-scroll-arrow {
  width:30px;height:30px;flex:0 0 30px;
  border:1px solid #dcc9c7;
  border-radius:50%; background:#fffdfb;
  color:#794f5c; font-size:17px;
  display:grid;place-items:center;
}
.preview-scroll-arrow:disabled {opacity:.25}
.preview-scroll-arrow:not(:disabled):hover{background:#f5e7ea}
#previewVerticalSlider {
  writing-mode:vertical-lr;
  direction:rtl;
  flex:1 1 auto;
  height:100%;
  min-height:90px;
  width:24px;
  margin:0;
  cursor:ns-resize;
  accent-color:#a77383;
}
#previewVerticalSlider:disabled{opacity:.35;cursor:default}
.preview-scroll-caption {
  writing-mode:vertical-rl;
  font:700 9px 'DM Sans',sans-serif;
  letter-spacing:.18em; color:#a38c86;
  padding-bottom:3px;
}
@media(max-width:520px) {
  .preview-shell{gap:7px;}
  .preview-scroll-controls{flex-basis:35px;}
  .preview-scroll-arrow{width:28px;height:28px;}
  #previewVerticalSlider{width:19px;}
}

/* Twin independent scroll panels for the editor and the live website preview.
   The outer page can still scroll naturally; each slider controls only its pane. */
#builderApp { --studio-pane-height:clamp(430px,calc(100dvh - 190px),660px); }
.workspace { padding:27px 20px 30px clamp(20px,2.8vw,44px); display:flex; min-width:0; }
.editor-pane-layout { display:flex; align-items:stretch; gap:10px; width:100%; height:var(--studio-pane-height); min-width:0; }
.editor-scroll-pane {
  min-width:0; flex:1 1 auto; height:100%;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#cdb7b9 transparent;
  padding:23px clamp(12px,2.8vw,43px) 20px 6px;
}
.editor-scroll-pane:focus-visible {outline:2px solid #ab7b8e;outline-offset:-3px;}
.editor-scroll-controls {
  flex:0 0 40px;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:12px 0 7px;
  background:color-mix(in srgb,#fff 66%,transparent);
  border:1px solid #e3d6d0; border-radius:25px;
  box-shadow:0 8px 24px #4c2d3510;
}
#editorVerticalSlider {
  writing-mode:vertical-lr; direction:rtl;
  flex:1 1 auto; min-height:90px; width:24px; height:100%;
  margin:0; accent-color:#a77383; cursor:ns-resize;
}
#editorVerticalSlider:disabled{opacity:.35;cursor:default}
.preview-shell.phone .wedding-preview-host,.preview-shell.desktop .wedding-preview-host {
  height:var(--studio-pane-height);
  overscroll-behavior:contain;
}
.preview-scroll-controls {height:var(--studio-pane-height);}
@media(max-width:850px) {
  .workspace{padding:20px 14px 28px;}
  .editor-pane-layout{gap:9px;}
  .editor-scroll-pane{padding:20px 20px 18px 8px;}
}
@media(max-width:520px) {
  #builderApp {--studio-pane-height:clamp(410px,calc(100dvh - 220px),580px);}
  .workspace{padding:12px 10px 28px;}
  .editor-pane-layout{gap:7px;}
  .editor-scroll-pane{padding:19px 7px 16px 7px;}
  .editor-scroll-controls{flex-basis:35px;}
  #editorVerticalSlider{width:19px;}
}

/* COMPLETE TWO-COLUMN SCROLLING — each HALF owns exactly one scroll position. */
#builderApp { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; --studio-pane-height:calc(100dvh - 165px); }
#builderApp .site-header { flex:0 0 82px; }
#builderApp .app-footer { flex:0 0 61px; }
#builderApp .app-layout {
  flex:1 1 auto; height:auto; min-height:0; max-height:none;
  overflow:hidden; align-items:stretch;
}
#builderApp .workspace, #builderApp .preview-column {
  min-width:0; min-height:0; height:100%;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain;
  scrollbar-width:thin; scrollbar-color:#c8b4b7 transparent;
  scroll-behavior:smooth;
  position:relative;
}
#builderApp .workspace {
  display:block; padding:25px 13px 50px clamp(20px,4vw,75px);
}
#builderApp .editor-pane-layout {
  display:flex; height:auto; min-height:100%; align-items:flex-start;
  width:100%; gap:10px;
}
#builderApp .editor-scroll-pane {
  flex:1 1 auto; height:auto; min-height:0;
  overflow:visible; padding:30px clamp(12px,2vw,40px) 10px 0;
}
#builderApp .editor-scroll-controls {
  flex:0 0 40px; position:sticky; top:10px;
  height:min(660px,calc(100dvh - 170px));
  max-height:calc(100dvh - 170px);
  align-self:flex-start;
}
#builderApp .preview-column {
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center; padding:25px clamp(16px,3vw,55px) 55px;
}
#builderApp .preview-toolbar, #builderApp .preview-caption, #builderApp .preview-shell { flex-shrink:0; }
#builderApp .preview-shell { align-items:flex-start; }
#builderApp .preview-shell.phone .wedding-preview-host,
#builderApp .preview-shell.desktop .wedding-preview-host {
  height:auto; min-height:660px; overflow:visible; overscroll-behavior:auto;
}
#builderApp .preview-scroll-controls {
  flex:0 0 40px; position:sticky; align-self:flex-start; top:10px;
  height:min(660px,calc(100dvh - 170px));
  max-height:calc(100dvh - 170px);
}
/* Larger hero content should scroll in the right column, not inside the phone frame. */
#builderApp .wedding-preview-host { scrollbar-width:none; }
#builderApp .editor-scroll-pane { scrollbar-width:none; }
@media(max-width:850px) {
  #builderApp .site-header { flex-basis:82px; }
  #builderApp .app-layout {
    flex:1 1 auto; display:flex; flex-direction:column; overflow-y:auto;
    overscroll-behavior-y:contain;
  }
  #builderApp .workspace, #builderApp .preview-column {
    flex:0 0 70dvh; height:70dvh; min-height:360px; overflow-y:auto;
  }
  #builderApp .workspace { padding:15px 10px 25px 24px; }
  #builderApp .editor-scroll-pane { padding:15px 6px 12px 0; }
  #builderApp .preview-column { padding:18px 14px 40px; }
  #builderApp .editor-scroll-controls, #builderApp .preview-scroll-controls {
    height:calc(70dvh - 28px); max-height:none; top:9px;
  }
}
@media(max-width:520px) {
  #builderApp .site-header { flex-basis:66px; }
  #builderApp .app-footer { flex:0 0 auto; }
  #builderApp .workspace, #builderApp .preview-column { flex-basis:70dvh; height:70dvh; }
  #builderApp .workspace { padding:10px 8px 24px 14px; }
  #builderApp .editor-scroll-controls, #builderApp .preview-scroll-controls { flex-basis:35px; }
  #builderApp .editor-scroll-pane { padding:13px 3px 9px 0; }
}

/* Customer-uploaded wallpaper overlays the theme hero gradient. */
.wedding-site.ws-uploaded-background .ws-hero {
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb,var(--ws-paper) var(--ws-uploaded-overlay),transparent),
      color-mix(in srgb,var(--ws-bg) var(--ws-uploaded-overlay),transparent)),
    var(--ws-uploaded-background) !important;
  background-position:center,var(--ws-uploaded-position) !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.background-upload-panel{margin-top:21px;border:1px solid #e4d6ce;background:#fffdfb;border-radius:12px;padding:20px}
.background-upload-panel h3{font:500 25px 'Cormorant Garamond',serif;margin:0 0 8px}
.background-upload-panel p{font:12px/1.6 'DM Sans',sans-serif;color:#85716d}
.background-upload-button{display:inline-flex;border:1px solid #b88b95;border-radius:8px;background:#fcf2f0;padding:11px 16px;color:#805565;font-size:12px;font-weight:700;cursor:pointer}
#background-upload-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.background-upload-panel label:not(.background-upload-button){display:block;font-size:11px;font-weight:700;color:#6e5961;margin:13px 0 7px}
.background-upload-panel input[type=range]{width:100%;accent-color:#ad7e88}
.background-upload-panel select{padding:10px;border:1px solid #e4d6ce;border-radius:7px;width:100%;background:#fff}
.background-preview-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;font-size:11px}
.background-preview-row button{border:0;background:transparent;color:#a16a75;text-decoration:underline}
.background-upload-panel .background-upload-note{margin:15px 0 0;font-size:10px}

/* Image uploads: on the hero or across all customer-facing sections. */
.wedding-site.ws-uploaded-background.ws-uploaded-all .ws-section {
  background-image:linear-gradient(to bottom,
    color-mix(in srgb,var(--ws-paper) var(--ws-uploaded-overlay),transparent),
    color-mix(in srgb,var(--ws-bg) var(--ws-uploaded-overlay),transparent)),
    var(--ws-uploaded-background) !important;
  background-position:center,var(--ws-uploaded-position) !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.background-upload-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.background-remove{border:0;background:transparent;color:#8c5c6d;text-decoration:underline;font-size:11px;cursor:pointer}
.background-thumbnail{margin:15px 0;position:relative;border:1px solid #e4d6ce;border-radius:9px;overflow:hidden;min-height:150px;background:#f5ede9}
.background-thumbnail img{display:block;max-height:220px;width:100%;object-fit:cover}
.background-thumbnail span{position:absolute;bottom:10px;left:10px;color:#4c343d;background:#fffdf3ec;border-radius:20px;font-size:11px;padding:6px 10px}
.background-setting{margin:14px 0 0}
.background-setting label{display:block;font-weight:700;font-size:11px;margin-bottom:7px}
.background-setting select{width:100%}