/* Licensed Golden Plains (owner, 2026-11-10; blkbktyp.com). The old family names used by the live stylesheets
   ("Golden Plains - Demo", "Golden-Plains-Demo") point at the licensed file too, so no punctuation "DEMO" boxes. */
@font-face { font-family: 'Golden Plains'; font-weight: 400; font-style: normal; src: url('/fonts/golden-plains.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Golden Plains - Demo'; font-weight: 400; font-style: normal; src: url('/fonts/golden-plains.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Golden-Plains-Demo'; font-weight: 400; font-style: normal; src: url('/fonts/golden-plains.woff2') format('woff2'); font-display: block; }
/* Rebuild-only rules, linked after the live stylesheet snapshot.
   Everything visual comes from /live-css; add rules here only to restore live
   behaviour that WordPress-side JavaScript provided. */

/* ---------------------------------------------------------------------------
 * Footer (.tgf) – compact redesign approved by the owner 2026-10-17.
 * Same brand: navy ground, PinkSunset yellow headings, white logo, real badges.
 * Sizes in px because the live CSS sets the root font size to 62.5%.
 * ------------------------------------------------------------------------- */
.tgf { background: #535d89; color: #fff; font-family: 'Mona-Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
.tgf a { color: #fff; text-decoration: none; }
.tgf a:hover { color: #eee092; }
.tgf a:focus-visible { outline: 2px solid #eee092; outline-offset: 3px; border-radius: 4px; }
.tgf__inner { max-width: 1180px; margin: 0 auto; padding: 56px 24px 40px; display: grid; gap: 36px 48px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.tgf__brand { display: grid; gap: 14px; justify-items: start; }
.tgf__logo img { width: 190px; height: auto; display: block; }
.tgf__tagline { margin: 0; color: rgb(255 255 255 / 0.8); font-size: 14px; max-width: 30ch; }
.tgf__social { display: flex; gap: 10px; }
.tgf__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: transform 0.15s; }
.tgf__social a:hover { transform: translateY(-2px); }
.tgf__social img { width: 40px; height: 40px; display: block; }
.tgf__col { display: grid; gap: 6px; align-content: start; }
.tgf__h { margin: 0 0 6px; font-family: 'Golden Plains', 'PinkSunset', cursive; font-weight: 400; font-size: 34px; line-height: 1.1; color: #eee092; }
.tgf__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 28px; }
.tgf__badges { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; }
.tgf__badges a { display: block; flex: 0 0 auto; }
.tgf__badges img { width: 76px; height: 76px; display: block; }
.tgf__bar { background: #9ba2d0; color: #fff; }
.tgf__bar-inner { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.tgf__google { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.tgf__google img { height: 26px; width: auto; display: block; }
@media (max-width: 1100px) {
  .tgf__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tgf__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
  .tgf__badges img { width: 68px; height: 68px; }
  .tgf__bar-inner { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .tgf__social a { transition: none; } .tgf__social a:hover { transform: none; } }

/* Example keepsake page inside the booking pop-up: show the page only. */
body:has(.tgk-embed) > :not(main), body:has(.tgk-embed) .tgb-band { display: none !important; }
/* Keepsake pages stand alone: no promo bar, site menu or footer (they have their own logo bar). */
body:has(.tgk-bare) > :not(main) { display: none !important; }
body:has(.tgk-embed) { background: #fff; }

/* Desktop menu (owner choice 2026-10-23): links in the header from 1024px,
   a navy bar fixed to the top once the visitor scrolls (DesktopNav.tsx).
   Below 1024px the live header (Book Now, cart, hamburger) is unchanged. */
.tgnav { display: none; }
@media (min-width: 1024px) {
  #section-97-20 { left: 0; right: 0; z-index: 20; }
  #section-97-20 .nav__container { align-items: center; gap: 24px; }
  #section-97-20 .nav__hamburger-icon { display: none; }
  .tgnav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); flex: 1 1 auto; justify-content: flex-end; font-family: Mona-Sans, sans-serif; font-weight: 600; font-size: clamp(14px, 1.15vw, 16px); }
  .tgnav__list { display: flex; align-items: center; gap: clamp(14px, 2.1vw, 34px); list-style: none; margin: 0 auto; padding: 0; }
  .tgnav__list > li { position: relative; }
  .tgnav a, .tgnav button { color: #fff; text-decoration: none; white-space: nowrap; transition: color .15s; }
  .tgnav a:hover, .tgnav button:hover, .tgnav a:focus-visible, .tgnav button:focus-visible { color: var(--secondary); }
  .tgnav button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .tgnav__help::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
  .tgnav__menu { position: absolute; left: -22px; top: calc(100% + 14px); min-width: 230px; list-style: none; margin: 0; padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(38, 42, 64, .22); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
  .tgnav__help:hover .tgnav__menu, .tgnav__help.is-open .tgnav__menu, .tgnav__help:focus-within .tgnav__menu { opacity: 1; visibility: visible; transform: none; }
  .tgnav__menu a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--base-dark-2); }
  .tgnav__menu a:hover, .tgnav__menu a:focus-visible { background: #f1f2fa; color: var(--primary); }
  .tgnav__account { display: inline-flex; align-items: center; gap: 8px; }
  /* The two top floating photos would sit under the menu links (white on their white frames): lift them above. */
  .hero-floating-1 { top: -300px; }
  .hero-floating-2 { top: -290px; }
  #section-97-20.tg-stuck { position: fixed; top: 0; background: var(--base-dark-2); box-shadow: 0 6px 20px rgba(38, 42, 64, .18); animation: tgnav-in .25s ease-out; }
  #section-97-20.tg-stuck > .ct-section-inner-wrap { padding-top: 12px; padding-bottom: 12px; }
  #section-97-20.tg-stuck .nav__logo-container { width: 140px; }
  #section-97-20.tg-stuck .nav__logo-container:hover { transform: none; }
  .tg-stuck .tgnav a:hover, .tg-stuck .tgnav button:hover { color: var(--secondary); }
  .tg-stuck .tgnav__menu a:hover { color: var(--primary); }
}
@media (min-width: 1441px) { .hero-floating-1 { top: -410px; } .hero-floating-2 { top: -430px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .tgnav__account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #section-97-20 .nav__logo-container { width: 150px; }
}
@keyframes tgnav-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #section-97-20.tg-stuck { animation: none; } .tgnav__menu { transition: none; } }

/* Information pages (gift card preview, legal contents list): the live theme's
   overflow:hidden on the content wrapper stops sticky panels. clip trims the
   same way without blocking position: sticky. */
#inner_content-102-20:has(.tgp) { overflow: clip; }

/* PinkSunset swash letters (components/site/Swash.tsx): the swash is drawn,
   the real letter stays in the page for search engines and screen readers. */
.tg-swash::before { content: attr(data-swash); content: attr(data-swash) / ""; }
.tg-swash__plain { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cookie choice (live site only; components/analytics/Tracking.tsx, owner 2026-11-09). */
.tg-cookies { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 10002;
  max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-radius: 16px;
  background: #fff; color: #262a40; box-shadow: 0 16px 40px rgb(38 42 64 / .25); font: 14px/1.45 'Mona-Sans', system-ui, sans-serif; }
.tg-cookies p { margin: 0; flex: 1 1 260px; }
.tg-cookies a { color: #bf568a; }
.tg-cookies__btns { display: flex; gap: 8px; }
.tg-cookies button { border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.tg-cookies__yes { background: #bf568a; color: #fff; }
.tg-cookies__no { background: #eceefa; color: #545b86; }
.tg-cookies { flex-direction: column; align-items: stretch; max-width: 440px; margin: 0; left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 18px 20px; gap: 10px; }
.tg-cookies__title { font-weight: 800; font-size: 16px; }
.tg-cookies:not(.tg-cookies--notice) p { flex: none; }
.tg-cookies .tg-cookies__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-cookies .tg-cookies__btns button { padding: 12px 14px; font-size: 15px; }
.tg-cookies .tg-cookies__no { background: #fff; color: #262a40; box-shadow: inset 0 0 0 2px #262a40; }
.tg-cookies--notice { flex-direction: row; align-items: center; max-width: 520px; padding: 12px 16px; }
.tg-cookies--notice .tg-cookies__btns { display: flex; gap: 6px; }
.tg-cookies--notice .tg-cookies__btns button { padding: 8px 16px; font-size: 14px; }
.tg-cookies__link { background: none !important; color: #545b86; text-decoration: underline; }
@media (max-width: 600px) { .tg-cookies { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; } }
.tg-cookie-settings { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
/* Banner (owner, 2026-11-11): two identical copies in one track, so the -50% loop is seamless. */
.promo-marquee-content { flex: none; white-space: pre; }
@media (prefers-reduced-motion: reduce) { .promo-marquee-track { animation-duration: 120s !important; } }