/* ================================================
   Wedding Sage — Standard Wedding Theme
   Palette: olive · sage · ink · cream
   Fonts:   Montserrat (headings/buttons) + Open Sans (body)
   Style:   Organic blob shapes, circular couple photo, editorial cards
   ================================================ */

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

:root {
    --olive:        #a89a68;
    --olive-deep:   #8f8256;
    --sage:         #a9c9bb;
    --sage-deep:    #7fa591;
    --ink:          #1c1c1c;
    --text:         #55575c;
    --muted:        #8a8d75;
    --cream:        #f4f4f2;
    --white:        #ffffff;
    --border:       rgba(168,154,104,.2);
    --accent-color: #a89a68;
    --radius:       16px;
    --btn-radius:   50px;

    --ff-heading: 'Montserrat', Arial, sans-serif;
    --ff-body:    'Open Sans', Arial, sans-serif;
    --ff-accent:  'Cormorant Garamond', Georgia, serif;

    --gold-line: linear-gradient(90deg, transparent, var(--olive) 25%, var(--sage-deep) 75%, transparent);

    /* Layered shadows (a tight contact shadow + a soft diffuse one) read as more
       considered/premium than a single flat box-shadow. */
    --card-shadow: 0 1px 2px rgba(28,28,28,.04), 0 8px 24px rgba(28,28,28,.06), 0 40px 70px rgba(28,28,28,.16);
    --card-shadow-sm: 0 1px 2px rgba(28,28,28,.04), 0 12px 30px rgba(28,28,28,.08);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    color: var(--text);
    background:
        radial-gradient(circle at 1px 1px, rgba(28,28,28,.035) 1px, transparent 0) 0 0/22px 22px,
        var(--cream);
    line-height: 1.75;
    overflow-x: hidden;
}

@keyframes ws-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

img { max-width: 100%; display: block; }
a { color: var(--olive); text-decoration: none; transition: color .2s; }
a:hover { color: var(--olive-deep); text-decoration: none; }

/* ── Containers ─────────────────────────────── */
.ws-container     { max-width: 1100px; margin: 0 auto; padding: 0; }
.ws-container--sm { max-width: 680px; }

/*
 * Alternating section backgrounds, computed from what actually renders rather
 * than hardcoded per section — any of these can be hidden by plan tier, the
 * section-visibility toggle, or missing data, and the rhythm still holds
 * because :nth-child only counts DOM nodes that actually exist.
 */
.ws-alt-sections > * {
    background: var(--white);
}
.ws-alt-sections > *:nth-child(even) {
    background: var(--cream);
}

/* ── Section helpers ─────────────────────────── */
.ws-section-title {
    position: relative;
    font-family: var(--ff-heading);
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    font-weight: 800;
    color: var(--ink);
    text-align: center;
    line-height: 1.2;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
}

.ws-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--gold-line);
}

.ws-section-title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--olive);
    z-index: 1;
}

.ws-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--olive);
    text-align: center;
    margin-bottom: .75rem;
}

/* ── Floating topbar ─────────────────────────── */
.ws-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background .3s ease, backdrop-filter .3s ease;
}

/* Desktop only (mobile hides these links behind the hamburger toggle, which
   already has its own self-contained dark-blur backdrop — the bar itself
   stays transparent unconditionally there). Give the bar a solid/blurred
   background past the scroll threshold (.scrolled toggled by data-topbar in
   theme.js) — light (not dark) since .ws-topbar__links a is dark var(--ink)
   text on this theme's light cream page. */
@media (min-width: 601px) {
    .ws-topbar.scrolled {
        background: color-mix(in srgb, var(--cream) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.ws-topbar__links {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
}

.ws-topbar__links a {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .2rem;
}

.ws-topbar__links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}

.ws-topbar__links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


.ws-topbar__toggle { display: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, just positioned here at opposite bottom
   corners, at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

/* ── Hero ───────────────────────────────────── */
.ws-hero {
    position: relative;
    padding: 8.5rem 0 7rem;
    background: radial-gradient(ellipse 80% 60% at 30% 20%, rgba(168,154,104,.08), transparent),
        var(--cream);
    overflow: visible;
}

/*
 * The card deliberately overlaps the photo's right edge and sits above it
 * (higher z-index + its own shadow) rather than living in a separate column —
 * this is the actual composition in the reference design, not a plain
 * side-by-side split, and reads far more like a designed layout than two
 * boxes with a gap between them.
 */
.ws-hero__grid {
    position: relative;
    min-height: 34rem;
}

.ws-hero__media {
    position: absolute;
    top: 0;
    left: 0;
    width: min(30rem, 62%);
    height: min(30rem, 62vw);
}

.ws-hero__shape {
    position: absolute;
    display: block;
    z-index: 1;
}
.ws-hero__shape--1 {
    width: 88%;
    height: 88%;
    top: -2%;
    left: 10%;
}
.ws-hero__shape--1 path { fill: var(--olive); }
.ws-hero__shape--2 {
    width: 92%;
    height: 92%;
    top: 20%;
    left: -6%;
    opacity: .9;
}
.ws-hero__shape--2 path { fill: var(--sage); }

.ws-hero__photo {
    position: absolute;
    top: 3%;
    left: 8%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    /* White gap ring + thin olive line ring + soft diffuse shadow — a proper
       portrait-frame treatment instead of a plain circular crop. */
    box-shadow:
        0 0 0 8px var(--white),
        0 0 0 9px rgba(168,154,104,.55),
        0 25px 55px rgba(28,28,28,.25);
    animation: ws-fade-up .8s ease both;
}
.ws-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ws-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--sage-deep);
}

.ws-hero__card {
    position: absolute;
    top: 7rem;
    left: min(21rem, 44%);
    z-index: 3;
    width: min(28rem, 58%);
    background: var(--white);
    border-radius: 30px;
    padding: 3rem 2.5rem 2.75rem;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    animation: ws-fade-up .8s ease .15s both;
}

/* Thin gold-to-sage foil line along the top edge — a small but very
   "premium stationery" signature touch. */
.ws-hero__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gold-line);
}

.ws-hero__ornament {
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 0 1.25rem;
    background: var(--gold-line);
    position: relative;
}
.ws-hero__ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--olive);
}

.ws-hero__card .ws-hero__eyebrow,
.ws-hero__eyebrow {
    font-family: var(--ff-heading);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 1rem;
}

.ws-hero__name {
    font-family: var(--ff-heading);
    font-size: clamp(2rem, 4.5vw, 2.85rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.ws-hero__amp {
    display: inline-block;
    font-family: var(--ff-accent);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15em;
    color: var(--sage-deep);
    margin: 0 .15em;
}

.ws-hero__date-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: .4rem 1.1rem .4rem .4rem;
    margin-bottom: 1rem;
}

.ws-hero__date-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sage), var(--sage-deep));
    font-size: .8rem;
}

.ws-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    font-size: .85rem;
    color: var(--text);
    margin-bottom: 1.75rem;
}

.ws-btn,
.ws-hero__cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--sage), var(--sage-deep));
    color: #fff !important;
    font-family: var(--ff-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .95rem 2.5rem;
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(127,165,145,.35);
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ws-btn:hover,
.ws-hero__cta:hover {
    background: linear-gradient(135deg, var(--olive), var(--olive-deep));
    box-shadow: 0 12px 28px rgba(143,130,86,.4);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ── Shape divider (hero seam) ────────────────── */
.ws-shape {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    direction: ltr;
    pointer-events: none;
    z-index: 1;
}
.ws-shape-top { top: -1px; }
.ws-shape-bottom { bottom: -1px; }
.ws-shape[data-negative="false"].ws-shape-bottom,
.ws-shape[data-negative="true"].ws-shape-top {
    transform: rotate(180deg);
}
.ws-shape svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 46px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Section corner accent ─────────────────────
   A slim botanical sprig (stem + tapering leaf pairs) reused via
   partials/section-accent.blade.php as a quiet corner accent across every
   alt-section — replaces an earlier attempt that reused the hero's blob shapes as
   background texture, which read as too heavy/abstract once repeated. Included
   either as a direct sibling of .ws-container (sections this theme owns directly)
   or nested inside it as the first child of a shared component's `heading` slot
   (dress-code, story timeline, etc.) — either way it's the first element at its DOM
   level, so the general sibling selector below reliably targets "everything that
   comes after it" to lift real content above the decoration, regardless of nesting
   depth. */
.ws-couple, .ws-countdown, .ws-audio, .ws-story, .ws-gallery, .ws-program, .ws-dress-code,
.ws-good-to-know, .ws-location, .ws-guest-wall, .ws-album, .ws-closing, .ws-rsvp {
    position: relative;
    overflow: hidden;
}

.ws-section-accent {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.ws-section-accent__sprig {
    position: absolute;
    display: block;
    width: 90px;
    height: 150px;
    opacity: .16;
}
.ws-section-accent__sprig--1 {
    bottom: -18px;
    left: 2rem;
    transform: rotate(-8deg);
    color: var(--olive);
}
.ws-section-accent__sprig--2 {
    top: -18px;
    right: 2rem;
    transform: rotate(172deg);
    color: var(--sage-deep);
}

@media (max-width: 700px) {
    .ws-section-accent__sprig { display: none; }
}

/* Only every other section gets the accent, following the same rhythm as the
   background-tint alternation above — on every single section back-to-back it
   reads as repetitive. Flip to :nth-child(even) here if odd reads better instead. */
.ws-alt-sections > *:nth-child(odd) .ws-section-accent {
    display: none;
}

.ws-couple .ws-section-accent ~ *,
.ws-countdown .ws-section-accent ~ *,
.ws-audio .ws-section-accent ~ *,
.ws-story .ws-section-accent ~ *,
.ws-gallery .ws-section-accent ~ *:not(.gg-lightbox),
.ws-program .ws-section-accent ~ *,
.ws-dress-code .ws-section-accent ~ *,
.ws-good-to-know .ws-section-accent ~ *,
.ws-location .ws-section-accent ~ *,
.ws-guest-wall .ws-section-accent ~ *,
.ws-album .ws-section-accent ~ *,
.ws-closing .ws-section-accent ~ *,
.ws-rsvp .ws-section-accent ~ * {
    position: relative;
    z-index: 2;
}

/* ── Meet the Couple ──────────────────────────── */
.ws-couple {
    padding: 5.5rem 1rem;
    text-align: center;
}

.ws-couple__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.ws-couple__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.ws-couple__photo {
    position: relative;
    width: clamp(9.5rem, 16vw, 15rem);
    height: clamp(9.5rem, 16vw, 15rem);
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 8px var(--white),
        0 0 0 9px rgba(168,154,104,.55),
        0 20px 45px rgba(28,28,28,.22);
}

.ws-couple__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ws-couple__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: var(--sage-deep);
}

.ws-couple__role {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--olive);
    margin-top: .7rem;
}

.ws-couple__name {
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
}

.ws-couple__amp {
    font-family: var(--ff-accent);
    font-style: italic;
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    color: var(--sage-deep);
    align-self: center;
    margin: 0 .5rem;
    padding-bottom: 2.5rem;
}

/* ── Countdown ───────────────────────────────── */
.ws-countdown {
    padding: 5rem 1rem;
    text-align: center;
}

.ws-countdown__timer {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
    padding: 2rem 2.5rem;
    border: 1px solid var(--border);
    border-radius: 20px;
}

/* Small corner flourishes on the framed timer — a "save the date" card touch. */
.ws-countdown__timer::before,
.ws-countdown__timer::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: var(--olive);
}
.ws-countdown__timer::before { top: -4px; left: -4px; }
.ws-countdown__timer::after { bottom: -4px; right: -4px; }

.ws-countdown__unit {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    min-width: 90px;
    text-align: center;
    box-shadow: var(--card-shadow-sm);
    overflow: hidden;
}
.ws-countdown__unit::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold-line);
}

.ws-countdown__number {
    display: block;
    font-family: var(--ff-heading);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 800;
    color: var(--olive);
    line-height: 1;
}

.ws-countdown__label {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .5rem;
}

/* ── Audio player ──────────────────────────── */
.ws-audio {
    padding: 5rem 1rem;
    text-align: center;
}

/* ── Poem / message ──────────────────────────── */
.ws-poem {
    padding: 6rem 1.5rem;
    text-align: center;
}

.ws-poem__card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--card-shadow-sm);
    padding: 3.25rem 2.5rem 2.75rem;
    overflow: hidden;
}
.ws-poem__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gold-line);
}

.ws-poem__text {
    font-family: var(--ff-heading);
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.9;
    color: var(--ink);
    white-space: pre-line;
}

.ws-poem__sig {
    margin-top: 1.75rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--olive);
}

/* ── Our Story / Gallery / Guest Wall ─────────── */
.ws-story {
    padding: 5.5rem 1.5rem;
    text-align: center;
}
.ws-gallery {
    padding: 5.5rem 1rem;
    text-align: center;
}
.ws-guest-wall {
    padding: 5rem 1rem;
    text-align: center;
}
.ws-gallery-upload {
    padding: 5.5rem 1rem;
    text-align: center;
}

.ws-gallery-upload .gu-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-sm);
}

/*
 * Shared <x-story-timeline> reskin: the component's default is a single-column
 * vertical rail (spine line + dot marker, photo stacked above text). This theme
 * instead alternates photo-left/text-right, then photo-right/text-left, per
 * milestone — a classic "our story" zigzag — with much bigger photos. The rail
 * and dot markers don't fit that layout so they're removed entirely rather than
 * left dangling on one side.
 */
.ws-story .st-timeline {
    padding-left: 0;
    max-width: 900px;
    margin: 2rem auto 0;
}
.ws-story .st-timeline::before {
    display: none;
}
.ws-story .st-item::before {
    display: none;
}
/* The shared component wraps photo/period/title/desc in a .st-item__card box
   (for the other themes' card treatment) — display:contents drops that box
   entirely so those four elements reattach as direct grid children here,
   exactly like before the wrapper existed. */
.ws-story .st-item__card {
    display: contents;
}
.ws-story .st-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2.5rem;
    align-items: center;
    padding-bottom: 3rem;
}
.ws-story .st-timeline .st-item,
.ws-story .st-timeline .st-item:nth-child(odd),
.ws-story .st-timeline .st-item:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
}
.ws-story .st-item:last-child {
    padding-bottom: 0;
}
.ws-story .st-item__photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
}
.ws-story .st-item:nth-child(even) {
    grid-template-columns: 1fr auto;
}
.ws-story .st-item:nth-child(even) .st-item__photo {
    grid-column: 2;
}
.ws-story .st-item:nth-child(even) .st-item__period,
.ws-story .st-item:nth-child(even) .st-item__title,
.ws-story .st-item:nth-child(even) .st-item__desc {
    grid-column: 1;
    text-align: right;
}

/* Bigger portrait-ring photo, matching the hero/couple treatment. */
.ws-story .st-item__photo img {
    width: clamp(11rem, 20vw, 16rem);
    height: clamp(11rem, 20vw, 16rem);
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
        0 0 0 6px var(--white),
        0 0 0 7px rgba(168,154,104,.5),
        0 15px 35px rgba(28,28,28,.2);
}
.ws-story .st-item__photo-caption {
    left: 50%;
    right: auto;
    bottom: .6rem;
    transform: translateX(-50%);
    max-width: 80%;
    border-radius: 50px;
}

@media (max-width: 720px) {
    .ws-story .st-item,
    .ws-story .st-item:nth-child(even) {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding-bottom: 2.5rem;
    }
    .ws-story .st-item__photo,
    .ws-story .st-item:nth-child(even) .st-item__photo {
        grid-column: 1;
        grid-row: auto;
        margin-bottom: .5rem;
    }
    .ws-story .st-item:nth-child(even) .st-item__period,
    .ws-story .st-item:nth-child(even) .st-item__title,
    .ws-story .st-item:nth-child(even) .st-item__desc {
        grid-column: 1;
        text-align: center;
    }
}

/* Shared <x-gallery-grid> reskin: a defined edge instead of a borderless tile. */
.ws-gallery .gg-item {
    border: 1px solid var(--border);
}

/* ── Program ─────────────────────────────────── */
.ws-program {
    padding: 5.5rem 1rem;
    text-align: center;
}

.ws-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 2rem;
}

.ws-tl-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--card-shadow-sm);
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.ws-tl-item:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.ws-tl-time {
    background: rgba(168,154,104,.12);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--olive-deep);
    padding: 1.25rem .5rem;
}

.ws-tl-body { padding: 1.1rem 1.5rem; text-align: left; }
.ws-tl-label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.ws-tl-loc { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.ws-tl-loc a { margin-left: .4em; opacity: .8; font-size: .85em; color: inherit; }

/* ── Dress Code / Good to Know ───────────────── */
.ws-dress-code {
    padding: 5.5rem 1rem;
    text-align: center;
}
.ws-good-to-know {
    padding: 5.5rem 1rem;
    text-align: center;
}

/* Dress Code has no per-item cards of its own (just note text + swatches), so the
   whole content block is framed as one card, matching the poem/countdown language. */
.ws-dress-code .ws-container {
    position: relative;
    max-width: 680px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--card-shadow-sm);
    padding: 3rem 2.5rem;
}

/* Good to Know still renders individual cards (.gtk-card) with a flat
   rgba(0,0,0,.03) tint — elevate to the same white/border/shadow language used
   everywhere else instead of leaving it looking unfinished. Guest Wall no longer
   uses cards at all (see the testimonial slider below). */
.ws-good-to-know .gtk-card {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow-sm);
}

/* Well Wishes — single-slide testimonial carousel (<x-wedding-sage-guest-wall>,
   Swiper-powered via window.initTestimonialsSwiper(), the same library/pattern
   wedding-neela uses) instead of a card grid — guest messages read one at a time. */
.ws-testimonials__swiper {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
}
.ws-testimonials__slide {
    padding: 1rem 0 3rem;
}
.ws-testimonials__quote {
    position: relative;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 3rem;
    font-family: var(--ff-accent);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.75;
    color: var(--ink);
}
.ws-testimonials__quote::before,
.ws-testimonials__quote::after {
    content: '\201C';
    position: absolute;
    top: -1rem;
    left: 0;
    font-family: var(--ff-accent);
    font-size: 4rem;
    font-style: normal;
    line-height: 1;
    color: var(--olive);
    opacity: .4;
}
.ws-testimonials__quote::after {
    content: '\201D';
    left: auto;
    right: 0;
}
.ws-testimonials__author {
    position: relative;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--olive);
}
.ws-testimonials__author::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 1px;
    background: var(--gold-line);
    transform: translateX(-50%);
}
.ws-guest-wall .swiper-pagination-bullet {
    background: var(--olive);
    opacity: .35;
}
.ws-guest-wall .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--olive-deep);
}

/* ── Location ────────────────────────────────── */
.ws-location {
    padding: 5.5rem 1rem;
    text-align: center;
}

.ws-location__address {
    font-size: .95rem;
    color: var(--muted);
    margin: .5rem 0 2.5rem;
}

.ws-map {
    max-width: 820px;
    margin: 1.5rem auto 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0,0,0,.1);
}

.ws-map iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* ── Closing ─────────────────────────────────── */
.ws-closing {
    padding: 3.5rem 1.5rem 1.5rem;
    text-align: center;
}

.ws-closing__text {
    font-family: var(--ff-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--muted);
}

/* ── RSVP section ────────────────────────────── */
.ws-rsvp {
    padding: 3rem 1rem 6rem;
}

.ws-rsvp .rsvp-layout-wrap {
    max-width: 600px;
    padding: 0;
}

.ws-rsvp .rsvp-layout-wrap .rsvp-form-col {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--card-shadow-sm);
    padding: 1.25rem 1rem;
}

.ws-form .form__group label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem;
}

.ws-rsvp .rsvp-qr-strip__inner {
    border-color: var(--border);
    background: var(--white);
}
.ws-rsvp .rsvp-qr-calendar { color: var(--olive); }
.ws-rsvp .rsvp-qr-calendar:hover { color: var(--olive-deep); }

/* ── Album ───────────────────────────────────── */
.ws-album {
    padding: 5rem 1.5rem;
    text-align: center;
}
.ws-album__sub {
    color: var(--muted);
    font-size: .95rem;
    margin: .5rem 0 2.5rem;
}

/* ── Footer ──────────────────────────────────── */
.ws-footer {
    position: relative;
    background: var(--ink);
    color: rgba(255,255,255,.55);
    text-align: center;
    padding: 3.5rem 1.5rem 3rem;
    font-size: .82rem;
    line-height: 2.2;
}
.ws-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gold-line);
}
.ws-footer a { color: var(--sage); }
.ws-footer__names {
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: rgba(255,255,255,.85);
    display: block;
    margin-bottom: .35rem;
}
.ws-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    max-width: 14rem;
    margin: 0 auto 1.25rem;
    color: var(--sage);
}
.ws-footer__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor);
}
.ws-footer__ornament-line:last-child {
    background: linear-gradient(to left, transparent, currentColor);
}
.ws-footer__ornament-mark {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
}
.ws-footer__signoff {
    margin: 1rem auto 0;
    max-width: 22rem;
    font-style: italic;
    color: var(--sage);
    opacity: .9;
}
.ws-footer__cal {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.ws-footer__cal-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 880px) {
    /* Desktop's clearance for the fixed topbar is generous breathing room on a
       wide canvas — on a phone-height viewport it just pushes everything below
       the fold. The blob shapes stay: they're sized relative to the already-
       small 220px media box below, not the viewport, so there's no risk of the
       littlestar-style single-shape-overflow bug that justified hiding them
       elsewhere — keeping them makes the mobile hero read as rich as the
       desktop one instead of a plain circle-crop + card. */
    .ws-hero {
        padding: 6rem 1rem 2.5rem;
    }
    .ws-hero__grid {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }
    .ws-hero__media {
        position: relative;
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }
    .ws-hero__photo {
        /* Not position:static — z-index is ignored on statically-positioned
           elements, which let the (still position:absolute) blob shapes behind
           it paint on top regardless of z-index, hiding the photo entirely. */
        position: relative;
        width: 100%;
        height: 100%;
    }
    .ws-hero__card {
        position: static;
        width: 100%;
        margin-top: -2.5rem;
        padding: 2.25rem 1.5rem 2rem;
    }
}

@media (max-width: 600px) {
    /* Always the same dark-translucent treatment. .ws-topbar is space-between
       on desktop — pin the toggle to the left instead on mobile, matching
       every other theme. */
    .ws-topbar { justify-content: flex-start; }
    .ws-topbar__toggle { order: -1; }

    .ws-topbar__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1.5px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(40,42,38,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .ws-topbar__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .ws-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ws-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .ws-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .ws-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        margin-left: 0;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(244,244,242,.97);
        border: 1px solid var(--olive);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .ws-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .ws-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: var(--text);
        opacity: 1;
    }
    .ws-topbar__links a::after { display: none; }
    .ws-topbar__links a:hover { background: rgba(168,154,104,.12); color: var(--olive); }

    /* nowrap + scroll fallback guarantees all 4 units stay on one row down to
       360px, instead of flex-wrap letting them fall to a 2x2 block once
       their min-width no longer fits. */
    .ws-countdown__timer {
        padding: 1.5rem 1rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ws-countdown__timer::-webkit-scrollbar { display: none; }
    .ws-countdown__unit { padding: 1.1rem 0.5rem; min-width: 62px; flex-shrink: 0; }
    .ws-poem__card { padding: 2rem 1.5rem; }
    .ws-dress-code .ws-container { padding: 2rem 1.5rem; }
    .ws-tl-item { grid-template-columns: 56px 1fr; }
    .ws-tl-time { font-size: .9rem; padding: 1rem .25rem; }

    /* Row layout wraps the "&" onto the bride's line while the groom drops
       alone to a second row once both photos no longer fit one line. Stack
       instead, and drop the amp since it has no sensible spot between two
       stacked photos. */
    .ws-couple__grid { flex-direction: column; gap: 2.5rem; }
    .ws-couple__amp { display: none; }

}

/* Standardized horizontal gutter across every content section on mobile
   (padding-x: 1rem), matching wedding-romantic-bloom's convention — several
   sections here otherwise use a wider desktop-only gutter (1.25rem/1.5rem)
   that just eats into already-limited mobile width. Appended at the very end
   of the file (not folded into an earlier @media block) so equal-specificity
   source order guarantees this wins over each section's own base padding
   rule, which is declared later in the file than this file's other,
   topbar-only 600px media query. */
@media (max-width: 600px) {
.ws-hero,
.ws-poem,
.ws-story,
.ws-closing,
.ws-album,
.ws-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}