/* =========================================================================
   Simply Love Wedding — main stylesheet
   White, gold & soft blush pink. Elegant, romantic, simple. Fully responsive.
   ========================================================================= */

:root {
    --gold: #c8a464;
    --gold-light: #e3cfa0;
    --gold-dark: #a3793c;
    --blush: #f7dee2;
    --blush-deep: #eab7c0;
    --blush-text: #c98a95;
    --white: #ffffff;
    --ivory: #fffaf6;
    --charcoal: #3c3532;
    --grey: #8a7f78;
    --grey-light: #e7ddd4;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Jost', Arial, Helvetica, sans-serif;
    --header-h: 92px;
    --header-h-mobile: 66px;
    --max-width: 1240px;
    --radius-pill: 40px;
}

* { box-sizing: border-box; }
/* iOS/Android show a default translucent "tap highlight" overlay on any
   button/link when pressed - this is what shows up as an odd pink/grey
   oval or rectangle over an otherwise-round button on mobile. Turning it
   off gives a cleaner, more native-app feel; :active states below still
   provide their own visual feedback where relevant. */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--charcoal);
    background: var(--white);
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
/* overflow-x:clip (not "hidden") lives here, not on body, and
   deliberately uses "clip" rather than "hidden":
   1. iOS Safari breaks position:sticky (used on .site-header below) on
      any element whose ancestor chain has overflow set to anything
      other than visible - even just overflow-x. Since <header> sits
      outside <main> as a sibling (see engine/header.php / footer.php),
      keeping the horizontal-scroll guard scoped to #main-content
      instead of body is what lets the sticky header actually stick on
      mobile.
   2. Using "hidden" here (rather than "clip") triggers a well-known CSS
      quirk: per spec, if overflow-x is set to anything other than
      visible while overflow-y is left as visible, the browser silently
      computes overflow-y as auto too - which turns #main-content into
      its OWN separate scrollable box, nested inside the page's normal
      scroll. That is what caused a second scrollbar on desktop Chrome,
      and scroll "getting stuck" on iOS Safari (nested scroll containers
      are notorious for trapping/chaining touch-scroll gestures oddly).
      "clip" does not trigger that coupling - verified directly: with
      overflow-x:hidden, overflow-y computes to auto; with
      overflow-x:clip, overflow-y correctly stays visible. */
#main-content { overflow-x: clip; }
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--charcoal);
    letter-spacing: 0.02em;
    margin: 0 0 12px;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.gold-divider {
    display: block;
    width: 64px;
    height: 2px;
    margin: 18px auto 26px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--blush-deep), transparent);
}
.gold-divider.small { width: 44px; margin: 10px 0 20px; }
.block-heading .gold-divider { margin-left: auto; margin-right: auto; }
.gown-more-from-brand .gold-divider { margin-left: auto; margin-right: auto; }

.btn {
    display: inline-block;
    padding: 14px 40px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    transition: all .35s ease;
    border: 1px solid var(--gold);
}
.btn-gold { background: var(--gold); color: var(--white); box-shadow: 0 10px 24px rgba(200,164,100,0.28); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-1px); }
.btn-outline-gold { background: transparent; color: var(--gold-dark); }
.btn-outline-gold:hover { background: var(--gold); color: var(--white); }

/* Page loader */
#page-loader {
    position: fixed; inset: 0; background: var(--white); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
body.loaded #page-loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* =========================================================================
   Header / Navigation — logo on the LEFT, horizontal nav to its right,
   left-aligned dropdown panels underneath each item.
   ========================================================================= */
.site-header {
    position: sticky; top: 0; z-index: 500;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--blush);
}
.header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.nav-desktop {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 30px;
}
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img { height: 56px; width: auto; max-width: 220px; object-fit: contain; }

.nav-list { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: flex-end; }
.nav-list > li { position: relative; }
.nav-list > li > a {
    font-size: 0.82rem; letter-spacing: 0.11em; text-transform: uppercase;
    padding: 10px 2px; display: flex; align-items: center; gap: 5px;
    color: var(--charcoal);
    border-bottom: 1px solid transparent;
    transition: color .25s ease, border-color .25s ease;
}
.nav-list > li > a:hover,
.nav-list > li.has-dropdown:hover > a,
.nav-list > li.has-dropdown:focus-within > a { color: var(--gold-dark); border-color: var(--blush-deep); }
.chevron { font-size: 0.6rem; margin-top: 1px; }

.dropdown-menu {
    position: absolute; top: 100%; left: 0; transform: translateY(6px);
    background: var(--white); min-width: 240px; padding: 8px 0;
    box-shadow: 0 22px 46px rgba(60,53,50,0.14);
    border-top: 2px solid var(--gold);
    border-radius: 0 0 6px 6px;
    opacity: 0; visibility: hidden; transition: all .25s ease;
}
.nav-list > li.has-dropdown:hover .dropdown-menu,
.nav-list > li.has-dropdown:focus-within .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu li a {
    display: block; padding: 10px 22px; font-size: 0.88rem; white-space: nowrap;
    color: var(--charcoal);
}
.dropdown-menu li a:hover { background: var(--ivory); color: var(--gold-dark); padding-left: 26px; }
.dropdown-menu li.view-all-link a { color: var(--gold-dark); font-weight: 500; border-bottom: 1px solid var(--grey-light); margin-bottom: 4px; padding-bottom: 12px; }

/* Mobile bar: logo left, hamburger right — both always clearly visible */
.nav-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h-mobile);
}
.site-logo-mobile { flex: 0 0 auto; }
.site-logo-mobile img { height: 40px; width: auto; max-width: 170px; object-fit: contain; }

.hamburger {
    background: var(--ivory);
    border: 1px solid var(--blush);
    border-radius: 10px;
    width: 46px; height: 40px;
    padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
}
.hamburger span {
    display: block; height: 2px; width: 22px;
    background: var(--charcoal);
    border-radius: 2px;
    transition: all .3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(60,53,50,0.45);
    z-index: 600; opacity: 0; visibility: hidden; transition: all .35s ease;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed; top: 0; right: 0; height: 100%; width: min(340px, 86vw);
    background: var(--white); z-index: 601; padding: 74px 26px 30px;
    transform: translateX(100%); transition: transform .4s ease;
    overflow-y: auto;
    box-shadow: -14px 0 40px rgba(60,53,50,0.12);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
    position: absolute; top: 18px; right: 18px; background: var(--ivory); border: 1px solid var(--blush);
    border-radius: 50%; width: 38px; height: 38px;
    font-size: 1.6rem; line-height: 1; color: var(--charcoal);
}
.mobile-nav-list > li { border-bottom: 1px solid var(--ivory); }
.mobile-nav-list > li > a, .mobile-accordion-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; text-align: left;
    padding: 16px 4px; font-size: 1.05rem; font-family: var(--font-serif);
    color: var(--charcoal);
}
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding-left: 14px; }
.mobile-submenu.open { max-height: 900px; }
.mobile-submenu li a { display: block; padding: 10px 4px; font-size: 0.92rem; color: var(--grey); }
.mobile-submenu li.view-all-link a { color: var(--gold-dark); font-weight: 500; }
.mobile-accordion-toggle.open .chevron { transform: rotate(180deg); }
.mobile-menu-social { display: flex; gap: 18px; margin-top: 26px; color: var(--gold-dark); }

@media (min-width: 1080px) {
    .nav-desktop { display: flex; }
    .nav-mobile-bar { display: none; }
}

/* =========================================================================
   Content blocks (the universal template system)
   ========================================================================= */
.block { padding: 54px 24px; max-width: var(--max-width); margin: 0 auto; }
.block-hero { padding: 0; max-width: none; margin: 0; }
.section-alt { background: var(--ivory); }
.section-blush { background: linear-gradient(180deg, var(--white), var(--blush) 50%, var(--white)); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Hero */
.block-hero { position: relative; height: 82vh; min-height: 420px; max-height: 640px; overflow: hidden; color: var(--white); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,42,40,0.18), rgba(50,35,33,0.58)); }
.hero-caption {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 20px;
}
.hero-caption h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.hero-caption p { max-width: 560px; font-size: 1.05rem; font-weight: 300; margin-bottom: 26px; }

/* Text block */
.block-inner, .block-heading { max-width: 780px; }
.block-heading { margin: 0 auto 40px; text-align: center; }
.block-heading p { color: var(--grey); }
.rich-text { color: var(--grey); font-size: 1.02rem; }
.rich-text p { margin-bottom: 1.1em; }
/* Storybook-style drop cap: type <indent>A</indent> around the first
   letter of a paragraph in a text block's content and it renders as a
   large opening letter, with the following text wrapping around it for
   a few lines - the classic printed-book effect. "indent" isn't a real
   HTML tag; browsers apply CSS to any tag name, known or not, so this
   works with no other setup. Sized in em (relative to the surrounding
   text), so it scales consistently with the body text at any width -
   verified directly that desktop and mobile produce the same
   proportions and line-wrap behaviour, not just "roughly similar". */
.rich-text indent {
    float: left;
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--charcoal);
    font-size: 4.4em;
    line-height: 0.78;
    padding-right: 10px;
    padding-top: 8px;
}

/* Single image */
.single-image { margin: 0; text-align: center; }
.single-image figcaption { margin-top: 12px; color: var(--grey); font-size: 0.9rem; font-style: italic; }
.single-image img, .single-image a { border-radius: 4px; overflow: hidden; }
.single-image.has-max-height { display: inline-block; }
.single-image.has-max-height a, .single-image.has-max-height img { display: block; max-height: inherit; width: auto; height: auto; }

/* Video thumbnails ("moving photos") used inside gallery / row / carousel /
   two-column blocks - see engine/render-blocks.php lightbox_media() and
   assets/js/main.js initVideoThumbs(). */
.video-thumb { background: var(--charcoal); }
.video-mute-toggle {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(30,25,24,0.55); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.video-mute-toggle .icon-unmuted { display: none; }
.video-mute-toggle.is-muted .icon-muted { display: flex; }
.video-mute-toggle:not(.is-muted) .icon-muted { display: none; }
.video-mute-toggle:not(.is-muted) .icon-unmuted { display: flex; }

/* Video */
.video-wrap { position: relative; }
.video-wrap video { width: 100%; border-radius: 6px; }
.video-caption { text-align: center; color: var(--grey); margin-top: 12px; font-size: .9rem; }

/* Row */
.row-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.row-grid.cols-1 { grid-template-columns: 1fr; }
.row-item a { display: block; overflow: hidden; border-radius: 4px; position: relative; }
.row-item img, .row-item video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; transition: transform .5s ease; }
.row-item:hover img { transform: scale(1.05); }

/* Two column */
.two-col-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.two-col-grid .col-side:first-child { order: 1; }
.two-col-grid .col-side:last-child { order: 2; }
.two-col-grid .single-image { border-radius: 6px; }

/* Gallery */
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.gallery-item a { display: block; overflow: hidden; border-radius: 4px; box-shadow: 0 6px 18px rgba(60,53,50,0.07); position: relative; }
/* Scoped to .gallery-grid deliberately, rather than a bare .gallery-item
   selector, so this never has to be fought with overrides elsewhere -
   the brand/gown grids and the Real Brides wall now both use the same
   fixed 3:4 crop, but keeping this scoped means either one can change
   independently without affecting the other.
   IMPORTANT: never pass width/height attributes into an <img> that lands
   in a fixed-aspect-ratio box like this one. When both are present,
   browsers lock the box to the literal attribute height and silently
   ignore the aspect-ratio property for layout purposes entirely (even
   though the property still reads back correctly in DevTools) - that
   mismatch is what caused photos to render at the wrong, badly stretched
   shape. Only pass width/height where a box is meant to size itself to
   an image's own natural proportions. */
.gallery-grid .gallery-item img, .gallery-grid .gallery-item video { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Carousel */
.carousel { position: relative; }
.carousel-track {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--gold) var(--ivory);
}
.carousel-slide { flex: 0 0 72%; scroll-snap-align: center; }
.carousel-slide a { display: block; border-radius: 6px; overflow: hidden; position: relative; }
.carousel-slide img, .carousel-slide video { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; }
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--white); border: 1px solid var(--blush); border-radius: 50%;
    width: 42px; height: 42px; z-index: 3; color: var(--gold-dark);
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(60,53,50,0.12);
}
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }

/* Review cards - landscape units (opposite proportions from a portrait
   gown card): a row of small square photos as supporting evidence, with
   the review text as the actual focus, not a big photo carousel. */
.review-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }

.review-card {
    background: var(--white); border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(60,53,50,0.09);
    text-align: left; /* explicit, not just "not centered" - the homepage
                          teaser section wraps this in text-align:center
                          for its heading, which would otherwise cascade
                          down into the card and center the review text too */
}
.review-photo-strip { position: relative; }
.review-photo-strip-track {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 16px 0 4px;
}
.review-photo-thumb:first-child { margin-left: 16px; }
.review-photo-thumb:last-child { margin-right: 16px; }
.review-photo-thumb {
    flex: 0 0 var(--review-thumb-size, 100px); width: var(--review-thumb-size, 100px); height: var(--review-thumb-size, 100px);
    border-radius: 6px; overflow: hidden;
}
.review-photo-thumb a, .review-photo-thumb img, .review-photo-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-photo-strip .carousel-arrow { top: 56%; width: 30px; height: 30px; }
.review-photo-strip .carousel-arrow.prev { left: 4px; }
.review-photo-strip .carousel-arrow.next { right: 4px; }

.review-body { padding: 18px 22px 22px; }
.review-quote-heading {
    font-family: var(--font-serif); font-style: italic; color: var(--charcoal);
    font-size: 1.3rem; margin: 0; line-height: 1.3;
}
.review-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--charcoal); font-size: 0.95rem; line-height: 1.65; margin: 0;
}
.review-text.expanded { -webkit-line-clamp: unset; overflow: visible; }
.review-more-toggle {
    display: block; color: var(--gold-dark); font-size: 0.85rem; margin-top: 8px;
    background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans);
}
.review-more-toggle:hover { text-decoration: underline; }

/* CTA */
.block-cta { text-align: center; }
.block-cta p { color: var(--grey); max-width: 560px; margin-left: auto; margin-right: auto; }

/* Divider / spacer */
.block-divider { padding: 20px 24px; }
.spacer-sm { height: 20px; padding: 0; }
.spacer-md { height: 50px; padding: 0; }
.spacer-lg { height: 100px; padding: 0; }

@media (min-width: 560px) {
    .row-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .row-grid.cols-4, .row-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
    .block { padding: 64px 24px; }
    .two-col-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    /* "reverse" only swaps the visual left/right order here, at desktop
       width (this breakpoint) where the two columns actually sit side
       by side - on mobile, both columns always stack in their natural
       first-then-last order regardless of reverse, on purpose: an alternating
       image-left/text-right, then text-left/image-right pattern (built
       using two "two-column" blocks, the second with reverse:true)
       looks great side by side on desktop, but stacked on mobile it
       would read as image, text, text, image - two text blocks
       bunched in the middle. Keeping mobile's order consistent (e.g.
       always image-then-text if that's how "left" is set up in both
       blocks) avoids that regardless of what reverse does on desktop. */
    .two-col-grid.reverse .col-side:first-child { order: 2; }
    .two-col-grid.reverse .col-side:last-child { order: 1; }
    .row-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .row-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
    .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
    .gallery-grid { gap: 18px; }
    .carousel-slide { flex: 0 0 32%; }
    .carousel-arrow { display: flex; }
}
@media (min-width: 1300px) {
    .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin: 0 auto; }
    .gallery-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================================
   Lightbox
   ========================================================================= */
.lightbox {
    position: fixed; inset: 0; background: rgba(30,25,24,0.94); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    touch-action: none; /* the lightbox's own JS handles every swipe gesture
        itself (left/right to browse, up/down to close) - this stops the
        browser from also trying to interpret the same touch as a native
        scroll, double-tap-zoom, or pinch-zoom gesture, which is what
        let a swipe leak through to the page underneath. */
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-content { max-width: 90vw; max-height: 86vh; text-align: center; }
.lightbox-content img, .lightbox-content video { max-width: 90vw; max-height: 80vh; margin: 0 auto; object-fit: contain; border-radius: 4px; touch-action: none; }
.lightbox-caption { color: var(--blush); margin-top: 14px; font-size: .92rem; }
.lightbox-close {
    position: absolute; top: 22px; right: 26px; background: none; border: none;
    color: var(--white); font-size: 2.3rem; line-height: 1;
}
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none;
    color: var(--white); font-size: 1.8rem; padding: 14px; opacity: .8;
}
.lightbox-arrow:hover { opacity: 1; color: var(--gold-light); }
.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }

/* =========================================================================
   Anti image-theft (deterrent, best-effort — see README for limitations)
   ========================================================================= */
.protected-img {
    -webkit-user-drag: none; user-drag: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    pointer-events: auto;
}
.protected-img::selection { background: transparent; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--charcoal); color: var(--grey-light); padding: 70px 24px 30px; margin-top: 40px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.footer-logo img { height: 44px; margin: 0 auto 10px; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; color: var(--gold-light); margin-bottom: 40px; }
.footer-columns { display: grid; gap: 30px; grid-template-columns: 1fr; margin-bottom: 30px; text-align: center; }
.footer-col h4 { color: var(--white); font-size: 0.85rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-sans); margin-bottom: 12px; }
.footer-col p { font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; color: var(--gold-light); }
.footer-social a:hover { color: var(--white); }
.footer-copy { font-size: 0.78rem; color: var(--grey); margin: 0; }
.site-footer .gold-divider { margin: 0 auto 20px; }

@media (min-width: 720px) {
    .footer-columns { grid-template-columns: repeat(3, 1fr); text-align: left; }
}

/* =========================================================================
   Home page / category page — brand grid
   ========================================================================= */
.brand-grid-section { text-align: center; }
.brand-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
.brand-card { text-align: center; }
.brand-card-image { overflow: hidden; margin-bottom: 14px; position: relative; aspect-ratio: 3/4; border-radius: 6px; box-shadow: 0 10px 26px rgba(60,53,50,0.10); }
.brand-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.brand-card:hover .brand-card-image img { transform: scale(1.08); }
.brand-card-logo { height: 40px; object-fit: contain; margin: 0 auto 8px; }
.brand-card h3 { font-size: 1.05rem; margin: 0; }
.category-heading { margin: 0 0 6px; }
.category-preview-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; text-align: left; }
.category-preview-header .gold-divider { margin: 10px 0 0; }
.category-view-all { white-space: nowrap; }
.category-view-all-wrap { text-align: center; margin-top: 36px; }

@media (min-width: 560px) {
    .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 980px) {
    .brand-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
}
@media (min-width: 1300px) {
    .brand-grid { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================================
   Real Brides page

   Deliberately a plain, fixed CSS grid - every tile is the same 3:4
   portrait shape. This is what makes the layout completely stable: the
   browser computes it once, and nothing about it depends on image load
   order, scroll position, or the mobile browser's address bar
   showing/hiding (which only ever changes viewport HEIGHT, and this grid
   doesn't care about height). Loading more photos just appends more
   tiles to the end of the same grid - already-shown tiles are never
   touched, so they never move.
   ========================================================================= */
.brides-intro { text-align: center; padding-bottom: 20px; }

.brides-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}
.brides-masonry .gallery-item a {
    display: block; overflow: hidden; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(60,53,50,0.10);
}
.brides-masonry .gallery-item img,
.brides-masonry .gallery-item video {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

@media (min-width: 480px) { .brides-masonry { grid-template-columns: repeat(3, 1fr); padding: 0 24px; gap: 16px; } }
@media (min-width: 768px) { .brides-masonry { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .brides-masonry { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
@media (min-width: 1500px) { .brides-masonry { grid-template-columns: repeat(6, 1fr); gap: 22px; } }

.load-more-wrap { text-align: center; padding: 34px 24px 70px; }
.load-more-wrap p { color: var(--grey); font-size: 0.85rem; margin-top: 16px; }
.load-more-status {
    display: none; align-items: center; justify-content: center; gap: 10px;
    margin-top: 18px; color: var(--grey); font-size: 0.85rem;
}
.load-more-status.show { display: flex; }
.mini-spinner {
    width: 16px; height: 16px; border: 2px solid var(--grey-light);
    border-top-color: var(--gold); border-radius: 50%;
    animation: mini-spin .6s linear infinite; flex: 0 0 auto;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }
#bridesScrollSentinel { height: 1px; }

/* =========================================================================
   Instagram wall / home teaser
   ========================================================================= */
.ig-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); max-width: var(--max-width); margin: 0 auto; padding: 0 24px 80px; }
.ig-card { position: relative; overflow: hidden; aspect-ratio: 1/1; border-radius: 6px; }
.ig-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ig-card:hover img { transform: scale(1.07); }
.ig-card .ig-icon { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ig-caption-overlay {
    position: absolute; inset: auto 0 0 0; padding: 16px 12px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
    color: #fff; font-size: 0.78rem; opacity: 0; transition: opacity .3s ease;
}
.ig-card:hover .ig-caption-overlay { opacity: 1; }

@media (min-width: 560px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 980px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-grid { display: grid; gap: 50px; grid-template-columns: 1fr; }
.contact-map iframe { width: 100%; height: 340px; border: 0; border-radius: 6px; filter: saturate(85%); }
.contact-details p { margin-bottom: 6px; }
.contact-details h4 { margin-top: 24px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dark); }
.contact-form { display: grid; gap: 16px; }
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%; padding: 14px 16px; border: 1px solid var(--grey-light); border-radius: 8px;
    font-family: var(--font-sans); font-size: 0.95rem; background: var(--ivory);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.date-field-wrap { position: relative; }
.date-field-wrap input[type="date"] { padding-right: 42px; }
.date-field-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--gold-dark); pointer-events: none; display: flex;
}
/* Hide the browser's own calendar icon where one exists (it sits under
   ours) - our icon is purely decorative; the whole field still opens the
   native picker on click via showPicker() (see main.js initDateInputs()). */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 42px; height: 100%; margin: 0; cursor: pointer; }
.contact-form label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); margin-bottom: 6px; }
.form-msg { padding: 14px 16px; border-radius: 8px; font-size: 0.9rem; display: none; }
.form-msg.show { display: block; }
.form-msg.success { background: #eef6ee; color: #2f6b2f; }
.form-msg.error { background: #fbeceb; color: #a13b34; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; }
.contact-services {
    display: grid; gap: 8px; grid-template-columns: 1fr; padding: 12px 14px;
    border: 1px solid var(--grey-light); border-radius: 8px; background: var(--ivory);
}
.contact-service-option { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
/* Custom-drawn checkbox: iOS/Android render native checkboxes at an
   oversized, harsh blue by default that CSS width/height alone can't
   reliably control - so the native box is hidden and we draw our own
   small, gold-themed one instead. */
.contact-service-option input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 19px; height: 19px; margin: 0; flex: 0 0 auto;
    border: 1.5px solid var(--grey-light); border-radius: 4px;
    background: var(--white); position: relative; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.contact-service-option input[type="checkbox"]:checked {
    background: var(--gold); border-color: var(--gold);
}
.contact-service-option input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.contact-service-option input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--gold-dark); outline-offset: 2px;
}

@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   Simple content pages (About, Reviews, Blog placeholder)
   ========================================================================= */
.page-hero-simple {
    padding: 112px 24px 44px; text-align: center; background: linear-gradient(180deg, var(--ivory), var(--white));
}
.page-hero-simple h1 { margin-bottom: 6px; }
.page-hero-simple p { color: var(--grey); max-width: 620px; margin: 0 auto; }

/* =========================================================================
   Gown detail page (Home > Brand > Gown)
   ========================================================================= */
.gown-detail { max-width: 900px; margin: 0 auto; padding: 34px 24px 60px; text-align: center; }
.gown-breadcrumb { font-size: 0.8rem; color: var(--grey); margin-bottom: 28px; letter-spacing: .02em; }
.gown-breadcrumb a { color: var(--gold-dark); }
.gown-breadcrumb a:hover { text-decoration: underline; }
.gown-breadcrumb span { margin: 0 6px; }

.gown-stage { max-width: 520px; margin: 0 auto; position: relative; }
.gown-stage-item { display: none; }
.gown-stage-item.is-active { display: block; }
.gown-stage-item img, .gown-stage-item video {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px;
    box-shadow: 0 16px 40px rgba(60,53,50,0.14);
}
.gown-stage-item .video-mute-toggle { width: 38px; height: 38px; right: 14px; bottom: 14px; }

.gown-thumbs {
    display: flex; gap: 10px; overflow-x: auto; max-width: 520px; margin: 16px auto 0;
    padding-bottom: 4px;
    /* Native scrollbar styling is unreliable on mobile (shows as a faint
       grey system overlay, not gold) - hide it and draw our own
       consistent gold indicator line below instead. */
    scrollbar-width: none;
}
.gown-thumbs::-webkit-scrollbar { display: none; }
.gown-thumbs-underline {
    max-width: 520px; height: 2px; margin: 8px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), var(--blush-deep), transparent);
}
.gown-thumb {
    flex: 0 0 auto; width: 66px; height: 82px; padding: 0; border-radius: 6px;
    border: 2px solid transparent; overflow: hidden; background: var(--ivory);
    opacity: .7; transition: all .25s ease;
}
.gown-thumb img, .gown-thumb video { width: 100%; height: 100%; object-fit: cover; }
.gown-thumb:hover { opacity: 1; }
.gown-thumb.is-active { border-color: var(--gold); opacity: 1; }

.gown-info { max-width: 620px; margin: 40px auto 0; }
.gown-info h1 { margin-bottom: 4px; }
.gown-brand-line { color: var(--grey); margin-bottom: 22px; }
.gown-brand-line a { color: var(--gold-dark); }
.gown-info .rich-text { text-align: left; }
.gown-availability { font-style: italic; color: var(--grey); font-size: 0.92rem; margin: 20px 0; }

.gown-more-from-brand { max-width: 900px; margin: 50px auto 0; }
.gown-more-from-brand h2 { margin-bottom: 24px; }
.gown-more-from-brand .gown-grid { grid-template-columns: repeat(2, 1fr); }

.gown-cta-buttons { margin-top: 40px; }
.gown-cta-buttons .btn { margin: 6px 8px; }

@media (min-width: 560px) {
    .gown-more-from-brand .gown-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
@media (min-width: 640px) {
    .gown-stage { max-width: 460px; }
}

/* Gown grid (shown on a brand page - links each gown to its own page) */
.gown-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.gown-card { text-align: center; }
.gown-card-image { overflow: hidden; margin-bottom: 12px; aspect-ratio: 3/4; border-radius: 6px; box-shadow: 0 8px 22px rgba(60,53,50,0.09); position: relative; }
.gown-featured-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gold); color: #fff;
    box-shadow: 0 3px 10px rgba(60,53,50,0.25);
}
.gown-featured-badge svg { flex: 0 0 auto; width: 14px; height: 14px; }
.gown-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gown-card:hover .gown-card-image img { transform: scale(1.06); }
.gown-card h3 { font-size: 1rem; margin: 0; }

@media (min-width: 560px) { .gown-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 980px) { .gown-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; } }

.gown-pagination {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    margin-top: 44px;
}
.gown-page-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--blush); background: var(--ivory);
    color: var(--charcoal); font-size: 1.2rem; transition: all .2s ease;
}
a.gown-page-arrow:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.gown-page-arrow.is-disabled { opacity: .35; cursor: default; }
.gown-page-status { color: var(--grey); font-size: 0.9rem; letter-spacing: 0.5px; }

/* =========================================================================
   Full-screen "please wait" overlay (form submissions)
   ========================================================================= */
.page-overlay {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(255,255,255,0.88); backdrop-filter: blur(2px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.page-overlay.open { opacity: 1; visibility: visible; }
.page-overlay-spinner {
    width: 46px; height: 46px; border: 3px solid var(--grey-light);
    border-top-color: var(--gold); border-radius: 50%;
    animation: page-overlay-spin .7s linear infinite;
}
.page-overlay-text { margin-top: 18px; color: var(--charcoal); font-size: 0.95rem; }
@keyframes page-overlay-spin { to { transform: rotate(360deg); } }