/* Wedding-only colours and details, built on Bonumi's shared components. */
.wedding-theme {
  --ink: #344b43;
  --muted: #696b61;
  --line: #e5ddd0;
  --soft: #f5f0e7;
  --wedding-rose: #915c60;
  --wedding-sage: #36584c;
  --wedding-gold: #947442;
  --shadow: 0 1rem 3rem rgb(78 64 43 / 10%);
  background: #fffcf7;
}

.wedding-theme .site-header {
  background: linear-gradient(110deg, #526958, #3d5b50 60%, #304c44);
  box-shadow: 0 1px 0 rgb(236 216 178 / 30%);
}

.wedding-theme :is(.site-header, .site-footer) a:focus-visible {
  outline: 3px solid #ecdbb7;
  outline-offset: 4px;
}

.wedding-theme .occasion-page { --occasion-ink: #2e4b41; }
.wedding-theme .occasion-page .eyebrow { color: var(--wedding-rose); }
.wedding-theme .occasion-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 3.5rem;
  background: linear-gradient(115deg, #fcf8ef 20%, #f5e9dd 100%);
}

.wedding-theme .occasion-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url('/app/assets/themes/wedding-garden.webp') center / cover;
  opacity: .14;
  pointer-events: none;
}

.wedding-theme .occasion-breadcrumbs {
  color: #706b5d;
  margin-bottom: 2.2rem;
}

.wedding-theme .occasion-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

.wedding-rings { display: block; width: 58px; height: 40px; color: var(--wedding-gold); }
.occasion-hero-copy > .wedding-rings { margin: 0 0 1.4rem; }
.wedding-theme .occasion-hero h1 {
  max-width: 600px;
  font-size: clamp(3.1rem, 5.1vw, 4.5rem);
  line-height: 1.09;
  letter-spacing: -.045em;
  margin-bottom: 1.5rem;
}

.wedding-theme .occasion-hero h1 em {
  color: var(--wedding-rose);
  font-weight: 400;
}

.wedding-theme .occasion-lede { max-width: 31rem; font-size: 1.05rem; line-height: 1.8; }
.wedding-theme .occasion-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: .75rem; }
.wedding-theme .occasion-button {
  background: var(--wedding-rose);
  box-shadow: 0 .5rem 1.4rem rgb(145 92 96 / 16%);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.wedding-theme .occasion-button:hover { background: #79494e; box-shadow: 0 .7rem 1.5rem rgb(145 92 96 / 22%); }
.wedding-theme .wedding-design-link { font-size: .85rem; text-underline-offset: 5px; }
.wedding-design-link span { margin-left: .4rem; }
.wedding-theme .occasion-reassurance { font-size: .75rem; margin-top: .5rem; }
.wedding-preview-wrap { min-width: 0; padding-top: 1rem; }
.wedding-theme .occasion-preview .register-peek-browser {
  border: 1px solid #dacdb9;
  box-shadow: 0 1.6rem 3.5rem rgb(74 59 35 / 13%), 0 0 0 7px rgb(255 252 247 / 55%);
  transform: rotate(1.2deg);
}

.wedding-theme .browser-dots { background: #fffdf8; border-color: var(--line); }
.wedding-theme .browser-dots i { background: #c5bc9f; }
.wedding-theme .browser-dots i:first-child { background: #c89992; }
.wedding-theme .browser-dots i:nth-child(3) { background: #8c9c81; }
.wedding-theme .browser-dots span { color: #757565; }
.wedding-theme .compact .register-peek-hero { min-height: 240px; }
.wedding-theme .compact .register-peek-hero p { padding: 0; max-width: 18rem; }
.wedding-theme .compact .occasion-gift h3 { font: 700 .85rem/1.4 'Quicksand', sans-serif; }
.wedding-theme .compact .occasion-gift > img { height: 110px; object-fit: cover; background: #fffdf9; }
.wedding-theme .occasion-gift-state { background: #ecf0e8; }
.wedding-theme .is-reserved .occasion-gift-state { color: #795959; background: #f4e7e4; }
.wedding-preview-note { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 1.7rem 0 0; color: #6c695a; font-size: .75rem; }
.wedding-colour-dots { display: flex; flex-shrink: 0; padding-left: 5px; }
.wedding-colour-dots i { display: block; width: 16px; height: 16px; margin-left: -5px; border: 2px solid #fcf7ef; border-radius: 50%; background: #526958; }
.wedding-colour-dots i:nth-child(2) { background: #c99d98; }
.wedding-colour-dots i:nth-child(3) { background: #d7bf94; }

.wedding-theme .occasion-benefits { gap: 2rem; padding-block: 2.5rem; border-bottom: 1px solid var(--line); }
.wedding-theme .occasion-benefits > div { position: relative; padding-left: 2rem; }
.wedding-theme .occasion-benefits > div > span { position: absolute; top: .3rem; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--wedding-sage); background: #edf0e5; font-size: .75rem; }
.wedding-theme .occasion-benefits h2 { margin-top: .25rem; }
.wedding-theme .occasion-benefits p { font-size: .8rem; }

.wedding-theme .section { padding-block: 4.75rem; }
.wedding-theme .section-heading h2 { color: var(--occasion-ink); }
.wedding-designs { scroll-margin-top: 100px; }
.wedding-design-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.wedding-design { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 1.2rem; background: #fffefb; box-shadow: 0 .6rem 1.6rem rgb(78 64 43 / 5%); }
.wedding-design-art { position: relative; overflow: hidden; display: grid; width: 100%; min-width: 0; min-height: 185px; place-items: center; aspect-ratio: 1.8; background: #f9f4e9; }
.wedding-design-art > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.wedding-design-art > div { position: relative; display: grid; text-align: center; gap: .45rem; padding: 1rem; color: #2e4b41; }
.wedding-design-art small { font-size: .5rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.wedding-design-art span { font: 600 clamp(1.3rem, 2vw, 1.75rem)/1.2 'Playfair Display', serif; letter-spacing: -.035em; }
.wedding-design-art i { font: 400 .72rem/1.5 'Quicksand', sans-serif; }
.wedding-design figcaption { padding: 1.1rem 1.25rem; text-align: center; }
.wedding-design figcaption h3 { font-size: 1rem; margin: 0 0 .4rem; }
.wedding-design figcaption p { margin: 0; color: var(--muted); font-size: .78rem; }
.wedding-design-note { margin: 1.5rem auto 0; max-width: 35rem; color: var(--muted); font-size: .8rem; text-align: center; }

.wedding-theme .occasion-inspiration { padding-top: 1rem; align-items: center; }
.wedding-theme .occasion-inspiration > div:first-child { padding-right: 1rem; }
.wedding-theme .occasion-categories { gap: 1rem; }
.wedding-theme .occasion-categories article { padding: 1.4rem; border: 1px solid #e6dfd1; border-radius: 1.1rem; background: #f6f1e6; }
.wedding-theme .occasion-categories article:nth-child(2) { background: #f6eae6; border-color: #ecdad4; }
.wedding-theme .occasion-categories article:nth-child(3) { background: #edf0e6; border-color: #dfe4d5; }
.wedding-theme .occasion-categories article:nth-child(4) { background: #f8f2e9; }
.wedding-theme .occasion-categories article > span { color: var(--wedding-rose); font: 400 1.25rem/1 'Playfair Display', serif; }
.wedding-theme .occasion-categories h3 { font-size: 1rem; line-height: 1.4; margin: .75rem 0 .4rem; }
.wedding-theme .occasion-categories p { font-size: .82rem; }
.wedding-theme .occasion-collections { background: #f3efe5; border-block: 1px solid var(--line); }
.wedding-theme .occasion-collections .related-collection { background: #fffdf8; }
.wedding-theme .occasion-collections .related-collection:hover { box-shadow: 0 1rem 2.2rem rgb(78 64 43 / 12%); }
.wedding-theme .occasion-collections .related-collection h3 { color: var(--wedding-sage); }

.wedding-theme .occasion-guidance { align-items: start; }
.wedding-theme .occasion-guidance > div:first-child { padding: 2.5rem 2rem 7rem; border: 1px solid var(--line); border-radius: 1.2rem; background: linear-gradient(#fffcf7 10%, rgb(255 252 247 / 50%) 70%, transparent), url('/app/assets/themes/wedding-garden.webp') bottom right / cover; }
.wedding-theme .occasion-guidance h2 { font: 500 clamp(2rem, 3vw, 2.8rem)/1.18 'Playfair Display', serif; }
.wedding-theme .occasion-guidance h3 { color: var(--wedding-sage); font-size: 1.1rem; }
.wedding-theme .occasion-guidance article { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.wedding-theme .occasion-guidance article:last-child { padding-bottom: 0; border-bottom: 0; }
.wedding-theme .occasion-guidance p { margin-bottom: 0; font-size: .95rem; }
.wedding-theme .occasion-how { background: #eef1e8; border-block: 1px solid #e0e5d6; }
.wedding-theme .occasion-how .step-card { padding: 1.8rem; background: #fffdf8; border-color: #dce2d2; }
.wedding-theme .occasion-how .step-number { color: rgb(81 105 73 / 10%); }
.wedding-theme .occasion-how .text-link { display: inline-block; margin-top: 1.5rem; }
.wedding-theme .occasion-faq { width: min(820px, calc(100% - 2rem)); padding-block: 4.75rem; scroll-margin-top: 100px; }
.wedding-theme .occasion-faq h2 { text-align: center; margin: 0 0 2rem; color: var(--wedding-sage); }
.wedding-theme .occasion-faq summary { color: var(--wedding-sage); }
.wedding-theme .occasion-faq summary::marker { color: var(--wedding-rose); }
.wedding-theme .occasion-faq details[open] { padding-inline: 1rem; border-radius: .75rem; background: #f6f1e8; }
.wedding-theme .occasion-faq details p { font-size: .95rem; }

.wedding-theme .occasion-final {
  position: relative;
  background: linear-gradient(90deg, rgb(246 235 224 / 80%), rgb(253 247 237 / 93%) 30%, rgb(253 247 237 / 93%) 70%, rgb(246 235 224 / 60%)), url('/app/assets/themes/wedding-champagne.webp') center / cover;
  border-block: 1px solid #e4d6c2;
}

.wedding-theme .occasion-final .wedding-rings { margin: 0 auto 1.25rem; }
.wedding-theme .occasion-final h2 { font-weight: 500; max-width: 580px; font-size: clamp(2.5rem, 4.5vw, 3.75rem); line-height: 1.15; }
.wedding-theme .occasion-final .wedding-final-note { margin: 1rem auto 0; font-size: .75rem; color: #6b6659; }
.wedding-theme .occasion-related { justify-content: center; font-size: .8rem; padding-block: 1.6rem; }
.wedding-theme .occasion-related > span { color: var(--muted); }
.wedding-theme .site-footer { background: linear-gradient(115deg, #3d5549, #2c463d); }
.wedding-theme .site-footer::before { background: radial-gradient(circle, rgb(215 191 148 / 14%), transparent 68%); }
.wedding-theme .footer-nav strong { color: #e5d3b2; }
.wedding-theme .footer-bottom { border-color: rgb(228 211 176 / 20%); color: #c1c8bb; }

@media (max-width: 1000px) {
  .wedding-theme .occasion-hero .hero-actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .wedding-theme .occasion-hero-grid { grid-template-columns: 1fr; max-width: 650px; gap: 2.5rem; }
  .wedding-theme .occasion-hero-copy { text-align: center; }
  .occasion-hero-copy > .wedding-rings { margin-inline: auto; }
  .wedding-theme .occasion-hero h1, .wedding-theme .occasion-lede { margin-inline: auto; }
  .wedding-theme .occasion-hero .hero-actions { align-items: center; }
  .wedding-preview-wrap { width: min(100%, 540px); margin-inline: auto; }
  .wedding-theme .occasion-inspiration > div:first-child { padding-right: 0; }
  .wedding-theme .occasion-guidance > div:first-child { padding: 2rem; background-position: center; }
  .wedding-theme .occasion-guidance h2 { max-width: 28rem; margin-bottom: 0; }
  .wedding-design-grid { gap: .8rem; }
  .wedding-design-art { min-height: 150px; }
  .wedding-design-art span { font-size: 1.3rem; }
  .wedding-design figcaption { padding: 1rem .75rem; }
}

@media (max-width: 600px) {
  .wedding-theme .site-nav { background: linear-gradient(145deg, #526958, #304c44); border-color: rgb(236 216 178 / 30%); box-shadow: 0 1rem 2.4rem rgb(32 51 40 / 20%); }
  .wedding-theme .section { padding-block: 3rem; }
  .wedding-theme .occasion-hero { padding-top: 1rem; padding-bottom: 2rem; }
  .wedding-theme .occasion-breadcrumbs { margin-bottom: 2rem; font-size: .72rem; }
  .wedding-theme .occasion-hero h1 { max-width: 28rem; font-size: clamp(2.65rem, 10vw, 3.75rem); }
  .wedding-theme .occasion-lede { font-size: .95rem; }
  .wedding-theme .occasion-hero .hero-actions { align-items: center; }
  .wedding-theme .occasion-hero .text-link { align-self: center; }
  .wedding-theme .occasion-reassurance { margin-top: .65rem; }
  .wedding-theme .occasion-preview .register-peek-browser { transform: none; box-shadow: 0 1rem 2.5rem rgb(74 59 35 / 12%); }
  .wedding-theme .compact .register-peek-hero { min-height: 235px; }
  .wedding-theme .compact .register-peek-hero p { max-width: 15rem; font-size: .8rem; }
  .wedding-theme .occasion-preview .occasion-gift > div:last-child { padding: .7rem; }
  .wedding-preview-note { font-size: .65rem; gap: .45rem; }
  .wedding-theme .occasion-benefits { gap: 1.4rem 1rem; padding-block: 2rem; }
  .wedding-theme .occasion-benefits > div { padding-left: 0; }
  .wedding-theme .occasion-benefits > div > span { position: static; margin-bottom: .5rem; }
  .wedding-theme .occasion-benefits h2 { font-size: .86rem; }
  .wedding-theme .occasion-benefits p { font-size: .78rem; }
  .wedding-theme .wedding-designs .section-heading.centered { text-align: center; }
  .wedding-design-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 1.25rem; }
  .wedding-design-art { min-height: 180px; aspect-ratio: 2; }
  .wedding-design-art span { font-size: 1.8rem; }
  .wedding-design-art small { font-size: .55rem; }
  .wedding-theme .occasion-inspiration { padding-top: 1rem; }
  .wedding-theme .occasion-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .wedding-theme .occasion-categories article { padding: 1rem; }
  .wedding-theme .occasion-categories h3 { font-size: .95rem; }
  .wedding-theme .occasion-categories p { font-size: .78rem; }
  .wedding-theme .occasion-guidance > div:first-child { padding: 1.75rem 1.5rem 3rem; }
  .wedding-theme .occasion-faq { padding-block: 3rem; }
  .wedding-theme .occasion-final h2 { max-width: 350px; }
  .wedding-theme .occasion-final > .container > p:not(.eyebrow, .wedding-final-note) { font-size: .95rem; }
  .wedding-theme .occasion-related { gap: .4rem 1.2rem; text-align: center; }
}

@media (max-width: 360px) {
  .wedding-theme .occasion-categories { grid-template-columns: 1fr; }
  .wedding-theme .occasion-hero h1 { font-size: 2.5rem; }
  .wedding-theme .compact .register-peek-hero h2 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-theme .occasion-button { transition: none; }
}