<!--
  Gathering Hour: Golden Hour product page
  Created: 2026-08-14
  Notes: Second product/gathering detail page, built on the exact template
  established by tea-in-the-garden-2026-08-12.html (same section order,
  same widget mechanics, same CSS structure), since Sarah asked to build
  "the product pages" without a new wireframe for this one. Golden Hour is
  the evening dinner-and-drinks gathering theme, already linked from four
  other pages (homepage, gatherings.html, how-it-works.html,
  painting-kit.html) as /golden-hour.html but never built until now.

  IMPORTANT, read before sending this live:

  1) Real Shopify data. Checked via the Shopify connector before building.
     Gathering Plan: Golden Hour variant is real and live, $22, SKU
     GP-GOLDEN, inventory 999. Same structure as Tea in the Garden's
     Gathering Plan variant.

  2) Host Box: 2026-08-14, later same day. Originally flagged here as not
     fully wired, since Golden Hour's Standard and Premium Host Box
     variants showed 0 inventory and no SKU, unlike every other theme's
     (Sicilian Aperitivo and Tea in the Garden both had ~48-50 in stock
     with real SKUs). Checked and corrected directly in Shopify: assigned
     SKU HB-STD-GOLDEN (Standard, $95) and HB-PRE-GOLDEN (Premium, $220),
     set both to 50 units in stock at 350 Warren Street, matching the
     other themes' stock levels. The Host Box add-on below is now wired
     for real, same as Tea in the Garden's, no display/checkout price
     mismatch here since there's no legacy wireframe number to reconcile,
     the widget shows the real $95 throughout.

  3) Activity add-on: Painting Kit, reuses the exact same real Shopify
     variants Tea in the Garden's widget uses (AK-PAINT-6, 48229852545178,
     $225 / AK-PAINT-12, 48229852577946, $375), since Painting Kit is one
     product regardless of which guided artwork ships (see
     painting-kit.html). 2026-09-21, per Sarah: originally only wired the
     6-person variant even though the guest stepper goes up to 12 --
     getActivityVariant() now switches to the 12-person kit automatically
     once guestCount > 6, so the add-on's label/price and the cart both
     scale with the stepper instead of checking out a 6-person kit for a
     10 or 12-guest gathering. The cart link also passes
     attributes[Artwork]=Golden Hour by default, so a kit added from this
     page arrives with the matching guided artwork unless changed later on
     the Painting Kit page itself. Flower Arranging and
     Sprinkle Embroidery Cakes are shown the same "Coming soon" way they
     are on Tea in the Garden's page, since neither exists as a real
     Shopify product yet, on any gathering's page.

  4) Photos: only one real Golden Hour photo currently exists in the
     Website Image Library (JguNgBO.jpeg, "candlelit table, skyline
     view"), used here as the hero image. Every other image slot specific
     to Golden Hour itself (gallery thumbnails, the "thought through"
     mockup, the menu spread photo) is a genuine "Photo coming" placeholder
     rather than mismatched photography borrowed from another gathering.
     The Host Box flat lay and the three activity thumbnails ARE reused
     from Tea in the Garden's page, since those photos represent the
     products themselves (the box, the Painting Kit, etc.), not the Golden
     Hour theme.

  5) Menu columns changed to Starters / Mains / Cocktails to fit a dinner
     theme rather than Tea in the Garden's Savory / Sweet / Drinks. Still a
     placeholder ("Menu goes here"), no real menu content exists yet.

  6) Meta line: "6-12 guests · Evening". Reused the guest count already
     used for Golden Hour sitewide (gatherings.html, how-it-works.html,
     painting-kit.html all say "Dinner & drinks · 6-12 guests"). Left out
     a specific hour range (Tea in the Garden shows "3-4 hours") since
     nothing like that has been set for Golden Hour yet, rather than guess.

  7) Cart mechanics, same-tab navigation, and date/guest-count order
     attributes match the pattern already fixed on Tea in the Garden
     (2026-08-14), built in fresh here rather than retrofitted.

  8) Footer Support column still points Order Tracking and Privacy & Terms
     at /contact.html, matching every other page site-wide for now. Both
     real policy pages are being built next in this same session.

  9) 2026-08-17: Gallery thumbnails now act as a slideshow preview,
     clicking one swaps the main image (same mechanism added to Tea in
     the Garden). Main image got id="prodMainImg", and selectGalleryPhoto()
     was added to the script block. Since all three gallery thumbs here
     are still "Photo coming" placeholders with no has-photo class, there's
     nothing clickable yet, this is wired and ready the moment real photos
     go in.

  10) 2026-08-17, later same day: added an Action Band (see styles.css,
      the new shared .closer-band component) right before the newsletter
      cta-band: "This one looks good on your table. Start planning it."
      -> "Get This Gathering ->", button jumps to #add, a new id added to
      this page's .build-widget div. Same copy and pattern as Tea in the
      Garden, both real theme/product pages got this treatment together.

  11) 2026-08-17, still later: real photo dropped into the "we've already
      thought through" Gathering Plan mockup slot (p655Q0S.png), matching
      Tea in the Garden's real dashboard mockup in the same spot. Markup
      switched from the plain img-slot placeholder to the has-photo
      pattern (.thought-mockup + .thought-mockup-img directly, no
      img-slot wrapper), matching Tea in the Garden's exact structure.
      Still needs logging in the Notion Website Image Library.
      2026-09-19: swapped again for a real lifestyle laptop photo (golden
      hour gathering plan-desktop.png -> assets/golden-hour-plan-laptop.jpg,
      hosted locally rather than Shopify CDN like the rest of this page's
      recent local-asset additions).

  12) 2026-08-17, still later: hero/main gallery image (#prodMainImg,
      data-slot golden-hero-main) swapped to
      https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892, replacing the previous
      JguNgBO.jpeg. Alt text updated to "Golden Hour, candlelit table
      setting." Image source is unverified (imgur fetches are blocked in
      this environment, so this is placed on trust). Still needs logging
      in the Notion Website Image Library.

  13) 2026-08-17, still later: first gallery slideshow thumbnail
      (data-slot golden-thumb-1) filled with a real photo,
      https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-ZYgLQ0r.jpg?v=1787475892, alt "Golden Hour, table detail."
      Switched from the plain img-slot placeholder to the has-photo
      pattern with onclick="selectGalleryPhoto(this)", so it's now a
      live slideshow preview, not just wired-but-inert. Thumbs 2 and 3
      still need real photos. Still needs logging in the Notion Website
      Image Library.

  14) 2026-08-17, still later: second gallery slideshow thumbnail
      (data-slot golden-thumb-2) filled with a real photo,
      https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-rwTOSNl.jpg?v=1787475892, alt "Golden Hour, table detail."
      Same has-photo + selectGalleryPhoto() treatment as thumb 1. Thumb
      3 still needs a real photo. Still needs logging in the Notion
      Website Image Library.

  15) 2026-08-17, still later: third gallery slideshow thumbnail
      (data-slot golden-thumb-3) filled with a real photo,
      https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-xsgx956.jpg?v=1787475892, alt "Golden Hour, table detail."
      Same has-photo + selectGalleryPhoto() treatment as thumbs 1 and 2.
      All three gallery thumbnails now have real photos. Still needs
      logging in the Notion Website Image Library.

  16) 2026-08-17, still later: menu spread photo (data-slot
      golden-menu-spread) filled with a real photo,
      https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-iKwHK5Q.jpg?v=1787475892, alt "Golden Hour, menu spread."
      Switched from the plain img-slot placeholder to the has-photo
      pattern. Still needs logging in the Notion Website Image Library.

  17) 2026-08-17, still later: icons in the "we've already thought
      through" quick-links row (.thought-icon-item svg) were getting
      lost against the mockup, sized up from 22px to 32px, item max-width
      78px to 84px, icon margin-bottom 8px to 10px to keep proportions
      matching the bigger icons.

  18) 2026-08-17, still later: same "Everything for the table" /
      "Something to do together" headline and column-balance treatment
      applied here as on Tea in the Garden, for consistency, since both
      pages share this identical section. .ta-eyebrow 11px uppercase
      orange label -> 24px bold espresso headline, normal case. .ta-desc
      moved to espresso-70. Grid ratio 1fr/1.35fr -> 1fr/1.15fr,
      .activity-card-img aspect ratio 1/1 -> 4/5.

  19) 2026-08-17, still later: "On the menu" section filled with Sarah's
      real Golden Hour menu, replacing the "Starters / Mains / Cocktails"
      placeholder heads and "Menu goes here" dashed box. Built as a new
      .menu-groups pattern (2-column grid of category blocks, each with
      an italic serif .menu-group-head and a plain .menu-group-items
      list) since the real menu has 6 categories (To Sip, To Graze,
      Salad, Main, Dessert, Late Night) rather than 3. Old .menu-cols /
      .menu-col-head / .menu-placeholder CSS removed as orphaned.
      .menu-section align-items changed from center to start since the
      real menu list is taller than the old placeholder. "Rose" kept
      spelled as Sarah typed it (no accent), not assumed to be "Rosé".

      2026-09-19: menu changed since the above, and this static block was
      never updated to match -- still listed Warm Peach Galette/Honey
      Mascarpone/Lemon Polenta Cake (retired) and a Sparkling Honey
      Rosemary Lemonade that was never a real Menu-tab item. Rebuilt to
      match the Menu tab's actual 5 categories (To Start/Main/Sweet/Late
      Night/To Sip, same grouping Menu.html itself uses) and current 13
      items: To Start = Grazing Board + Grilled Peach & Arugula Salad;
      Main = Zucchini Corn Orzo + Caramelized Onion & Tomato Galettes;
      Sweet = Golden Hour Pavlova (replaces the old 3-dessert lineup);
      Late Night unchanged; To Sip = Honey Peach Spritz + the 5 wines
      (lemonade dropped). 5 groups now instead of 6, so the 2-col grid
      leaves To Sip alone in the last row -- put it last on purpose since
      it's the longest list and reads fine solo.

  20) 2026-08-18: applied the new Gathering Hour Web Type Scale (see
      styles.css). Same set of fixes as Tea in the Garden, since this
      page shares the identical product-page structure: .prod-tagline-
      italic/.prod-tagline-black (real page H1) 42px/38px mismatched ->
      52px/52px unified (Hero tier), 32px/28px mobile -> 40px/40px.
      .thought-headline 30px -> 40px (Editorial tier), 32px mobile added.
      .ta-eyebrow 24px -> 30px (Section tier), 26px mobile added.
      .menu-group-head 19px -> 20px, .widget-head-title 26px -> 20px
      (H3/card-title tier). .widget-eyebrow normalized to the shared
      13px/700 spec, 12px mobile added. Body/meta copy floored: .prod-
      meta, .menu-group-items li, .activity-card-name/-price, .includes-
      list/.provide-list li, .includes-col-head, .widget-head-price small
      -> 14px (meta); .thought-sub, .menu-body, .thought-icon-item span
      -> 16px or 14px depending on role. .activity-card-btn 11px -> 14px
      to match the new shared Button tier (.btn-pill bumped 12px -> 14px
      site-wide today, see styles.css). .prod-kicker (20px) already
      matched the H3/card-title tier, left alone.

      2026-08-19, later same day: new sitewide corner-radius system (see
      styles.css). .thought-mockup-img (the dashboard/UI mockup graphic)
      is Product/UI imagery, not photography, so it got the "can feel
      digital" exception, border-radius 4px -> 8px, done before the
      sitewide sed. .build-widget border-radius 10px -> 8px, matches
      the new small-not-bubbly card standard. Every other inline
      border-radius:4px on this page is real editorial photography,
      reduced to 2px. .guest-stepper button (a 26x26px stepper control)
      left at 4px, that's small UI chrome, not a card or a photo.

      2026-08-19, later same day: eyebrow reduction pass, per the new
      sitewide rule (max 1-2 per page, banners exempt). Cut "On the
      menu" (redundant, the menu categories themselves already say
      what the section is) and "Your gathering includes" (redundant
      with the "Every Golden Hour includes:" heading right next to it).
      Kept "Build your gathering" (.widget-eyebrow), that's the label
      on the interactive pricing widget itself, functional UI, not
      page decoration. Kept .ta-eyebrow ("Everything for the table.",
      "Something to do together"), those were already converted off
      the orange-eyebrow treatment on 2026-08-17 (11px uppercase orange
      -> 24px bold espresso), so they're headlines in the Archivo-bold
      "product clarity" voice, not eyebrows, no change needed. Kept the
      closer band's "Ready to gather" and the newsletter band's "From
      Gathering Hour", both inside purple/pink banners, exempt per
      Sarah's rule.

      2026-08-19, later same day: gallery rebuilt to be data-driven, same
      fix as Painting Kit, done right after that page. galleryImages
      array holds all four existing photos, thumbnails render from it
      into #prodGalleryRow, two new prev/next .gallery-arrow buttons on
      the main image step through the array regardless of length.
      .prod-gallery-row switched from a fixed 3-column grid to a
      horizontally scrolling flex row so more photos can be added later
      without breaking the layout. Old selectGalleryPhoto(thumbEl)
      removed, replaced by setGalleryIndex()/renderGalleryThumbs()/
      galleryPrev()/galleryNext(). First tried a tomato outline on the
      active thumbnail, Sarah saw it on Painting Kit's version of this
      same component and said she didn't want "the red line", so the
      active state here is just a lower opacity (0.6) instead, no color.

  2026-08-21: sitewide Flamingo Estate rollout. The shared .closer-band
  now defaults to paper instead of aubergine (see styles.css), so the
  "Ready to gather" eyebrow lost its banner-exemption and is cut. Footer
  dropped its now-meaningless divider-top class (garnet footer color
  reads as its own break).
  2026-08-21, later same day: migrated every i.imgur.com image reference
  on this page to Shopify's own file library (cdn.shopify.com), after
  discovering Imgur has been fully blocked in the UK since September
  2025 (an Online Safety Act/ICO issue with Imgur's parent company,
  not a temporary glitch) and has also had spotty blocks elsewhere
  (Taiwan uploads). Imgur was only ever meant as a placeholder host
  during early build, this closes that out. Each image was re-uploaded
  via Shopify's fileCreate mutation with its existing alt text carried
  over, same photos, same alt text, just reliable hosting on
  infrastructure Gathering Hour already depends on for checkout.
  2026-08-27: footer reverted from garnet back to cream sitewide (see
  styles.css), Sarah didn't like it live. Footer here picks up the
  shared default automatically, no page-scoped CSS to change. Restored
  the divider-top class on the <footer> tag, needed again now that
  footer matches the body's cream background.

  2026-09-09: SITEWIDE ROLLOUT, fifth page. Identical pass to
  tea-in-the-garden.html (same shared template, see that page's own
  entry for the full reasoning): nav simplified to How it works / About
  / Shop pill; every corner radius squared to 0 (editorial photos,
  the "Product/UI" 8px mockup exception, .build-widget, .includes-card),
  small UI chrome (stepper, inputs, gallery arrow) left as-is; pink
  removed from .build-widget, .guest-stepper button, .thought-band and
  its text tones, .includes-card/.includes-card.alt, and
  .includes-col-head, all swapped to the same neutral paper/espresso
  tones used on Tea in the Garden. Newsletter band picks up the shared
  aubergine default automatically.

2026-09-11: added the site favicon (Sarah's gh-mark-cream.png monogram, saved to /assets and rendered down to favicon.ico, 16x16, 32x32, and a 180x180 apple-touch-icon). Same four <link> tags added to every page's <head>, right after <title>.
2026-09-11, later still: rolled the homepage's bold-divider treatment (.divider-bold, see styles.css) onto this page too, per Sarah's sitewide request. Upgraded the "Your Gathering Includes" section's thin .divider-top line to .divider-bold.

2026-09-17: fixed a real checkout pricing bug Sarah caught live: ordering
a Host Box + Painting Kit totaled $342 (22+95+225) instead of the correct
$320 (95+225), because the widget's goToCart() unconditionally added the
$22 Gathering Plan variant to the cart even when the Host Box -- which
already includes the plan -- was also selected. Rather than patch that
with conditional cart logic hidden behind a checkbox, the "Add a Host
Box" checkbox is replaced with a .base-toggle: a two-option radio choice
between "Gathering Plan only" ($22) and "Plan + Standard Host Box" ($95,
copy states it includes the plan), so only one base-tier variant is ever
in the cart. recalcTotal()/goToCart() updated to read the selected radio
(getSelectedBase()) instead of the old hostBoxCheckbox. The Painting Kit
add-on is unchanged, still a separate, always-additive checkbox. See the
CSS comment above .base-toggle for the full writeup.


  2026-10-02, per Sarah's build notes: page rebuilt around "every Gathering
  starts with a Gathering Plan, then optionally add a Host Box and/or an
  Activity Kit." Configurator: Plan shown as included (no radio), Host Box
  and Activity Kit as add-on cards that stay in sync with their sections
  lower down. Host Box shown as +$73 (6 guests) because its Shopify variant
  already includes the Plan; cart adds only the box variant, so totals are
  unchanged ($95 for Plan + Box at 6 guests). New order: hero/configurator,
  "Your gathering includes / You provide", Plan demo, menu, Host Box (real
  contents from the theme sheet, scaled to guest count), Activity Kits,
  closer, newsletter. Old bottom "Every ... includes" block removed.
2026-10-03, later: Host Box Founding Friends callout updated to $59 Founding Pass / $259 with Host Boxes.
2026-10-09: footer gets an "Affiliate Disclosure" link next to Privacy & Terms (Sarah's affiliate handoff).
2026-10-15: Sovrn Commerce (VigLink) affiliate script added before </body>.
2026-10-22: "Decorations" (/decorations.html) added to the Shop menu and footer Shop column, after Activity Kits (Sarah).
2026-10-22 (Sarah): on phones the hero reads headline, then photos, then the checkout box (was headline, checkout, photos).
-->

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2026-09-21: Google Tag Manager added sitewide (container GTM-PCGXB7FK) -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PCGXB7FK');</script>
<!-- End Google Tag Manager -->
<!-- 2026-09-22: Klaviyo onsite tracking added sitewide, per Sarah -- unlocks
     Viewed Product tracking for the browse-abandonment flow. The object-
     loader script goes first so klaviyo.track() calls on product pages
     don't race the async klaviyo.js load. -->
<!-- Klaviyo -->
<script type="text/javascript">
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();
</script>
<script type="text/javascript" async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=UhUBGL"></script>
<!-- End Klaviyo -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gathering Hour: Golden Hour</title>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/styles.css?v=20261026a">
<link rel="stylesheet" href="/signup-popup.css?v=20261004a">
<style>

/* ── PRODUCT HERO ── */
.prod-hero {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  padding-top: 32px;
  padding-bottom: 40px;
  align-items: start;
}

.prod-kicker {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--aubergine);
  margin-bottom: 8px;
}

.prod-tagline { line-height: 1.05; margin-bottom: 20px; }
/* Two-tone hero headline (site standard, see styles.css), matches Tea in
   the Garden and Painting Kit's product heroes. */
.prod-tagline-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 52px;
  color: var(--hl-serif);
  display: block;
}
.prod-tagline-black {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 52px;
  color: var(--tomato);
  display: block;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-top: 2px;
}

.prod-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--espresso-70);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.prod-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.prod-meta-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--espresso-70); }
.prod-meta-dot { color: var(--espresso-15); }

/* ── BUILD WIDGET ── */
.build-widget {
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius:2px;
  padding: 28px;
}

.widget-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--name);
  margin-bottom: 10px;
}

.widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.widget-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--aubergine);
}
.widget-head-price { text-align: right; }
.widget-head-price small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--espresso-50);
  margin-bottom: 2px;
}
.widget-head-price strong { font-size: 20px; color: var(--espresso); }

.widget-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.widget-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--espresso-50);
  margin-bottom: 7px;
}
.widget-field input[type="date"],
.widget-field select {
  width: 100%;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--espresso);
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius: 5px;
  padding: 10px 12px;
}

.guest-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius: 5px;
  padding: 6px 6px 6px 12px;
}
.guest-stepper span { font-size: 14px; color: var(--espresso); }
.guest-stepper-btns { display: flex; gap: 4px; }
.guest-stepper button {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: var(--espresso-15);
  color: var(--aubergine);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.guest-stepper button:disabled { opacity: 0.35; cursor: default; }

.addon {
  border-top: 0.5px solid var(--espresso-15);
  padding: 14px 0;
}
.addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.addon-row-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso-70);
}
.addon-row-right { display: flex; align-items: center; gap: 10px; }
.addon-row-price { font-size: 13px; color: var(--espresso-70); }
.addon-chevron { transition: transform 0.2s ease; color: var(--espresso-50); }
.addon.open .addon-chevron { transform: rotate(180deg); }

.addon-panel {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius: 5px;
}
.addon.open .addon-panel { display: flex; }
.addon-panel-name { font-size: 13.5px; color: var(--espresso); }
.addon-panel-price { font-size: 13.5px; color: var(--espresso-70); margin-left: 6px; }
.addon-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tomato);
  cursor: pointer;
  flex-shrink: 0;
}
.addon-panel input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--tomato); }
.addon-unavailable { font-size: 12px; color: var(--espresso-50); font-style: italic; }

/* ── BASE PLAN TOGGLE (2026-09-17) ──
   Replaces the old "Add a Host Box" checkbox, which stacked its $95 on
   top of the Gathering Plan's $22 unconditionally -- a real checkout bug
   (Sarah's report: Host Box + Painting Kit was totaling $342, not the
   correct $320, because the Host Box price already has the Gathering
   Plan baked in). Rather than fix that with conditional cart logic
   hidden behind a checkbox, this is now a two-option radio toggle: the
   customer picks ONE base ("Gathering Plan only" vs "Plan + Host Box"),
   so only one base-tier variant is ever in the cart, and the "includes
   the plan" relationship is stated in the option copy instead of being
   invisible math. The Painting Kit stays a separate, always-additive
   checkbox below, unchanged. */
.base-toggle { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.base-toggle-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--espresso-15);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.base-toggle-option:hover { border-color: var(--aubergine); }
.base-toggle-option.active { border-color: var(--aubergine); background: var(--espresso-08); }
.base-toggle-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--aubergine); flex-shrink: 0; }
.base-toggle-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.base-toggle-name { font-size: 13.5px; font-weight: 700; color: var(--espresso); }
.base-toggle-note { font-size: 12px; color: var(--espresso-50); }
.base-toggle-price { font-size: 14.5px; font-weight: 700; color: var(--espresso); white-space: nowrap; }

.widget-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--espresso-15);
  margin-top: 4px;
  padding-top: 18px;
}
.widget-total-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--espresso-70); }
.widget-total-amount { font-size: 26px; font-weight: 700; color: var(--espresso); }

.widget-cta {
  width: 100%;
  margin-top: 20px;
  padding: 15px 24px;
  font-size: 12.5px;
}

.widget-fine { font-size: 12px; color: var(--espresso-50); text-align: center; margin-top: 14px; }

/* ── PRODUCT GALLERY ──
   2026-08-19: thumbnail row is now JS-rendered (see renderGalleryThumbs()
   below) so it can hold any number of photos, not just three. Row scrolls
   horizontally, sized so three thumbs show at a time. */
.prod-gallery-main { aspect-ratio: 4 / 3.1; margin-bottom: 14px; }
.prod-gallery-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.prod-gallery-row::-webkit-scrollbar { display: none; }
.prod-gallery-thumb { aspect-ratio: 1 / 1; flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start; }
/* Thumbnails act as a slideshow preview, click swaps the main image, see
   setGalleryIndex() below. */
.prod-gallery-thumb.has-photo { cursor: pointer; transition: opacity 0.15s ease; }
.prod-gallery-thumb.has-photo:hover { opacity: 0.82; }
.prod-gallery-thumb.active { opacity: 0.6; }

/* Prev/next arrows on the main image, for stepping through the full
   gallery even when there are more photos than fit in the thumbnail row
   at once. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: none;
  background: rgba(255,250,243,0.85);
  color: var(--aubergine);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 2;
}
.gallery-arrow:hover { background: var(--paper); }
.gallery-arrow-prev { left: 12px; }
.gallery-arrow-next { right: 12px; }

/* ── "THOUGHT THROUGH" BAND ── */
.thought-band {
  background: var(--paper);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.thought-headline {
  font-size: 40px;
  color: var(--aubergine);
  margin-bottom: 10px;
}
.thought-headline .tb-black { font-family: 'Archivo', sans-serif; font-weight: 700; display: block; color: var(--hl-accent); }
.thought-headline .tb-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; display: block; color: var(--hl-serif); }
.thought-sub { font-size: 16px; color: var(--espresso-70); line-height: 1.55; max-width: 380px; margin-bottom: 26px; }

.thought-icons { display: flex; gap: 28px; flex-wrap: wrap; }
.thought-icon-item { text-align: center; max-width: 84px; }
.thought-icon-item svg { width: 32px; height: 32px; color: var(--aubergine); margin-bottom: 10px; stroke-width: 1.4; }
.thought-icon-item span { display: block; font-size: 14px; color: var(--espresso-70); line-height: 1.3; }

.thought-mockup { position: relative; }
.thought-mockup-img { max-width: 100%; border-radius:2px; }

/* ── MENU SECTION ── */
.menu-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.menu-img { aspect-ratio: 4 / 3.4; }

.menu-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  margin-bottom: 20px;
}
.menu-group { min-width: 0; }
.menu-group-head {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--aubergine);
  margin-bottom: 8px;
}
.menu-group-items { list-style: none; padding: 0; margin: 0; }
.menu-group-items li { font-size: 14px; color: var(--espresso-70); line-height: 1.7; }

.menu-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; }

/* ── TABLE + ACTIVITY SECTION ── */
.table-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
}
.ta-eyebrow { font-size: 30px; font-weight: 700; letter-spacing: -0.3px; text-transform: none; color: var(--espresso); margin-bottom: 8px; }
.ta-desc { font-size: 14px; color: var(--espresso-70); margin-bottom: 16px; }
.ta-img { aspect-ratio: 5 / 4; }

.activity-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.activity-card { display: flex; flex-direction: column; }
.activity-card-img { aspect-ratio: 4 / 5; margin-bottom: 10px; }
.activity-card-name { font-size: 14px; font-weight: 600; color: var(--espresso); margin-bottom: 2px; }
.activity-card-price { font-size: 14px; color: var(--espresso-70); margin-bottom: 10px; }
.activity-card-btn {
  margin-top: auto;
  padding: 9px 16px;
  font-size: 14px;
}
.activity-card-btn:disabled { background: var(--espresso-15); color: var(--espresso-50); cursor: default; }
.activity-card-btn:disabled:hover { background: var(--espresso-15); }
.activity-card-note { font-size: 11px; color: var(--espresso-50); font-style: italic; text-align: center; margin-top: auto; padding: 9px 0; }

/* ── INCLUDES SECTION ── */
.includes-sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.includes-sub h3 { font-size: 18px; font-weight: 600; color: var(--espresso); }

.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.includes-card {
  background: var(--espresso-08);
  border-radius:2px;
  padding: 28px;
}
.includes-card.alt { background: var(--paper); border: 1px solid var(--espresso-15); display: flex; flex-direction: column; }

.includes-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.includes-col-head {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso-50);
  margin-bottom: 12px;
}
.includes-list { list-style: none; }
.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--espresso);
  padding: 5px 0;
  line-height: 1.4;
}
.includes-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--tomato); }

.provide-list { list-style: none; margin-bottom: 20px; }
.provide-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--espresso);
  padding: 8px 0;
}
.provide-list li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--espresso-70); }
.provide-illustration { margin-top: auto; text-align: right; opacity: 0.5; }
.provide-illustration svg { width: 90px; height: 70px; color: var(--espresso-50); }

/* ── RESPONSIVE (page-specific: shared nav/section/footer rules live in styles.css) ── */
@media (max-width: 900px) {
  .prod-hero, .thought-band, .menu-section, .table-activity-grid, .includes-grid { grid-template-columns: 1fr; gap: 32px; }
  .prod-tagline-italic, .prod-tagline-black { font-size: 40px; }
  .thought-mockup { order: -1; }
  .activity-product-grid { grid-template-columns: repeat(2, 1fr); }
  .thought-headline { font-size: 32px; }
  .ta-eyebrow { font-size: 26px; }
  .eyebrow, .widget-eyebrow { font-size: 12px; }
  /* 2026-09-24, per Sarah: "Choose Your Dates" and "Guest Count" overlap
     on mobile. .widget-row-pair is a straight 1fr 1fr grid with no
     mobile override -- a native date input can't shrink below its
     internal field widths, and the guest stepper has its own min
     content width (label text + two 26px buttons), so on a narrow
     screen both columns refuse to shrink to fit half the available
     width and visually overlap. Stacking them removes the fight. */
  .widget-row-pair { grid-template-columns: 1fr; }
}

/* ── 2026-10-02 REBUILD: configurator + reordered sections ── */
.cfg-plan { border: 1px solid var(--aubergine); background: var(--espresso-08); border-radius: 2px; padding: 16px 18px; margin-bottom: 18px; }
.cfg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cfg-plan-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--name); }
.cfg-price { font-size: 16px; font-weight: 700; color: var(--espresso); white-space: nowrap; }
.cfg-included { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--name); margin: 4px 0 8px; }
.cfg-included svg { width: 13px; height: 13px; }
.cfg-desc { font-size: 13.5px; color: var(--espresso-70); line-height: 1.5; margin-bottom: 6px; }
.cfg-link { font-size: 12.5px; color: var(--name); text-decoration: underline; text-underline-offset: 3px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.cfg-optional { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--espresso-50); margin: 6px 0 10px; }
.cfg-addon { border: 1px dashed var(--espresso-15); border-radius: 2px; padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s, background 0.15s; }
.cfg-addon.on { border: 1px solid var(--aubergine); background: var(--espresso-08); }
.cfg-addon-name { font-size: 14px; font-weight: 700; color: var(--espresso); }
.cfg-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.cfg-btn { font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aubergine); background: var(--paper); border: 1px solid var(--aubergine); border-radius: 100px; padding: 8px 16px; cursor: pointer; }
.cfg-btn:hover { background: var(--aubergine); color: var(--paper); }
.cfg-addon.on .cfg-btn { background: var(--aubergine); color: var(--paper); }

[id="includes"], [id="host-box"], [id="activities"] { scroll-margin-top: 90px; }

.ph-headline { font-size: 40px; margin-bottom: 14px; }
.ph-headline .ph-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; display: block; color: var(--hl-serif); line-height: 1.05; }
.ph-headline .ph-black { font-family: 'Archivo', sans-serif; font-weight: 700; display: block; color: var(--hl-accent); line-height: 1.05; }

.inc-section { background: var(--mushroom, #F2E9E2); padding-top: 56px; padding-bottom: 56px; }
.inc-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 20px; }
.inc-card { background: var(--paper); border-radius: 2px; padding: 24px; }
.inc-head { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 22px; color: var(--name); margin-bottom: 12px; }
.inc-list { list-style: none; padding: 0; margin: 0; }
.inc-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--body); padding: 5px 0; line-height: 1.4; }
.inc-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--hl-accent); }
.inc-list li a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.inc-list-plain li::before { content: "·"; color: var(--espresso-50); font-weight: 700; }
.inc-note { font-size: 14px; color: var(--espresso-70); margin-top: 20px; }

.hb-section { background: var(--mushroom, #F2E9E2); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.hb-img { aspect-ratio: 5 / 4; }
.hb-sub { font-size: 15px; color: var(--espresso-70); line-height: 1.55; margin-bottom: 18px; max-width: 460px; }
.hb-list-head { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--name); margin-bottom: 8px; }
.hb-list { list-style: none; padding: 0; margin: 0 0 22px; columns: 2; column-gap: 24px; }
.hb-list li { font-size: 14px; color: var(--body); padding: 4px 0; break-inside: avoid; line-height: 1.4; }
.hb-qty { font-weight: 700; color: var(--espresso); }
.hb-btn { padding: 13px 26px; }

.hb-section .ph-headline .ph-italic, .act-section .ph-headline .ph-italic { font-size: 28px; margin-bottom: 2px; }
.menu-headline { margin-bottom: 22px; }
.act-sub { font-size: 15px; color: var(--espresso-70); margin-bottom: 22px; }
.act-section .activity-product-grid { max-width: 900px; }
.activity-card-more { font-size: 12.5px; color: var(--name); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 10px; }

@media (max-width: 900px) {
  .hb-section .ph-headline .ph-italic, .act-section .ph-headline .ph-italic { font-size: 24px; }
  .inc-grid, .hb-section { grid-template-columns: 1fr; gap: 20px; }
  .hb-section { gap: 28px; }
  .ph-headline { font-size: 32px; }
  .hb-list { columns: 1; }
}

/* 2026-10-02 (later): add-on rows read as selectable controls, + ADD aligned right; compact Plan card on mobile */
.cfg-addon { display: flex; align-items: center; gap: 14px; border: 1px solid var(--espresso-15); border-radius: 2px; padding: 14px 16px; margin-bottom: 10px; }
.cfg-addon:hover { border-color: var(--aubergine); }
.cfg-addon-main { flex: 1; min-width: 0; }
.cfg-addon-name { font-size: 14.5px; font-weight: 700; color: var(--espresso); margin-bottom: 2px; }
.cfg-addon-price { font-weight: 700; color: var(--name); margin-left: 6px; }
.cfg-addon .cfg-desc { margin-bottom: 0; font-size: 13px; }
.cfg-btn { flex-shrink: 0; min-width: 96px; text-align: center; }
.cfg-addon.on .cfg-btn { background: var(--aubergine); color: var(--paper); }
@media (max-width: 900px) {
  .cfg-plan { padding: 12px 14px; margin-bottom: 14px; }
  .cfg-plan-name { font-size: 20px; }
  .cfg-plan-desc { display: none; }
  .cfg-included { margin-bottom: 4px; }
  .cfg-addon { padding: 12px 12px 12px 14px; gap: 10px; }
  .cfg-btn { min-width: 84px; padding: 8px 12px; }
}

/* 2026-10-22 (Sarah): on phones the product page reads headline, then photos, then the checkout box.
   The left column's wrapper is dissolved (display: contents) so its pieces and the gallery can be reordered. */
@media (max-width: 900px) {
  .prod-hero { gap: 0; }
  .prod-hero > div:first-child { display: contents; }
  .prod-hero > div:last-child { order: 1; margin: 4px 0 28px; }
  .prod-hero .build-widget { order: 2; }
}
</style>
</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGXB7FK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- ── NAV, SIMPLIFIED (2026-09-09) ── -->
<nav>
  <a class='nav-logo' href='/'><em>gathering</em><strong>hour</strong></a>
  <button class="nav-toggle" aria-label="Open menu" onclick="document.querySelector('nav').classList.toggle('nav-open')">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links">
    <li><a href='/how-it-works'>How it works</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/journal'>Journal</a></li>
    <li class="nav-shop">
      <a class='btn-pill btn-tomato' href='/gatherings' onclick='return toggleShopMenu(event)'>Shop</a>
      <div class="nav-shop-menu">
        <a href='/gatherings'>Gatherings</a>
        <a href='/activity-kits'>Activity Kits</a>
        <a href='/decorations'>Decorations</a>
        <a href='/gift-cards'>Gift Cards</a>
      </div>
    </li>
  </ul>
</nav>

<script>
// 2026-09-23, per Sarah: "Shop" nav pill becomes a dropdown again (Themes,
// Activities -- Gift Shop to follow once that's live). Reuses the
// .nav-shop/.nav-shop-menu CSS already in styles.css from the 2026-08-14
// version of this same idea (hover opens it on desktop via CSS alone;
// touch devices need this JS since :hover doesn't fire on tap). The Shop
// pill keeps its real href to gatherings.html so it still works with JS
// off or on desktop hover; on touch, tapping it just opens the menu
// instead of navigating immediately.
function toggleShopMenu(e){
  if (!window.matchMedia('(hover: none)').matches) return true;
  e.preventDefault();
  var el = e.currentTarget.closest('.nav-shop');
  if (el) el.classList.toggle('open');
  return false;
}
document.addEventListener('click', function(e){
  var open = document.querySelector('.nav-shop.open');
  if (open && !open.contains(e.target)) open.classList.remove('open');
});
</script>


<!-- ── PRODUCT HERO ── -->
<section class="prod-hero">
  <div>
    <p class="prod-kicker">Golden Hour</p>
    <h1 class="prod-tagline">
      <span class="prod-tagline-italic">Dinner, drinks,</span>
      <span class="prod-tagline-black">and golden light.</span>
    </h1>

    <div class="prod-meta">
      <span class="prod-meta-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M17 20v-1a4 4 0 00-4-4H7a4 4 0 00-4 4v1"/><circle cx="10" cy="7" r="3.5"/><path d="M22.5 20v-1a4 4 0 00-3-3.87"/><path d="M16 3.63a4 4 0 010 7.75"/></svg>
        6–12 guests
      </span>
      <span class="prod-meta-dot">·</span>
      <span class="prod-meta-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v1M12 20v1M4.2 4.2l.7.7M19.1 19.1l.7.7M3 12h1M20 12h1M4.2 19.8l.7-.7M19.1 4.9l.7-.7"/><circle cx="12" cy="12" r="4.5"/></svg>
        Evening
      </span>
      <span class="prod-meta-dot">·</span>
      <span class="prod-meta-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 2v6a4 4 0 004 4 4 4 0 004-4V2M12 12v10M9 2v6M15 2v6"/></svg>
        Dinner &amp; drinks
      </span>
    </div>

    <!-- ── BUILD WIDGET (rebuilt 2026-10-02) ──
         The Gathering Plan is the required base (shown as included, no
         radio button); Host Box and Activity Kit are optional add-ons.
         See the 2026-10-02 header note for the cart logic. -->
    <div class="build-widget" id="add">
      <p class="widget-eyebrow">Build your gathering</p>

      <div class="cfg-plan">
        <div class="cfg-row">
          <p class="cfg-plan-name">Gathering Plan</p>
          <span class="cfg-price">$22</span>
        </div>
        <p class="cfg-included"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Included with every gathering</p>
        <p class="cfg-desc cfg-plan-desc">Invitations, RSVPs, menu, recipes, shopping list, host guide, playlist + printables.</p>
        <a href="#includes" class="cfg-link">See everything included ↓</a>
      </div>

      <div class="widget-row-pair">
        <div class="widget-field">
          <label for="gatheringDate">Choose your date</label>
          <input type="date" id="gatheringDate">
        </div>
        <div class="widget-field">
          <label>Guest count</label>
          <div class="guest-stepper">
            <span id="guestCountLabel">6 guests</span>
            <div class="guest-stepper-btns">
              <button type="button" id="guestMinus" aria-label="Fewer guests">–</button>
              <button type="button" id="guestPlus" aria-label="More guests">+</button>
            </div>
          </div>
        </div>
      </div>

      <p class="cfg-optional">Optional extras</p>

      <div class="cfg-addon" id="cfgHostBox">
        <div class="cfg-addon-main">
          <p class="cfg-addon-name">Host Box <span class="cfg-addon-price" id="hostBoxAddonPrice">+$73</span></p>
          <p class="cfg-desc">Paper goods and table details for <span class="js-guests">6 guests</span>. <a href="#host-box" class="cfg-link">What's inside ↓</a></p>
        </div>
        <button type="button" class="cfg-btn" id="hostBoxBtn" onclick="toggleHostBox()" aria-pressed="false">+ Add</button>
      </div>

      <div class="cfg-addon" id="cfgActivity">
        <div class="cfg-addon-main">
          <p class="cfg-addon-name">Activity Kit <span class="cfg-addon-price" id="activityAddonPrice"></span></p>
          <p class="cfg-desc"><span id="activityDesc">Painting, flowers, crafts and more.</span> <button type="button" class="cfg-link" id="activityRemove" onclick="removeActivity()" hidden>Remove</button></p>
        </div>
        <button type="button" class="cfg-btn" id="activityBtn" onclick="chooseActivity()">+ Choose</button>
      </div>

      <div class="widget-total">
        <span class="widget-total-label">Your gathering total</span>
        <span class="widget-total-amount" id="widgetTotal">$22</span>
      </div>

      <a href="#" id="startGatheringBtn" class="btn-pill btn-tomato widget-cta" style="display:flex;" onclick="return goToCart(event)">Start your gathering</a>
      <p class="widget-fine">You can add or change extras later from your Plan.</p>
    </div>
  </div>

  <!-- ── PHOTO GALLERY ──
       JS-rendered thumbnail row (see renderGalleryThumbs()/galleryImages
       below), plus prev/next arrows on the main image, so any number of
       photos can be added later without changing this markup. -->
  <div>
    <div class="img-slot prod-gallery-main has-photo" data-slot="golden-hero-main">
      <img id="prodMainImg" src="" alt="" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      <button type="button" class="gallery-arrow gallery-arrow-prev" onclick="galleryPrev()" aria-label="Previous photo">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
      </button>
      <button type="button" class="gallery-arrow gallery-arrow-next" onclick="galleryNext()" aria-label="Next photo">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
      </button>
    </div>
    <div class="prod-gallery-row" id="prodGalleryRow"></div>
  </div>
</section>

<!-- ── YOUR GATHERING INCLUDES (moved up 2026-10-02) ──
     Sits right under the configurator so the $22 is explained before the
     storytelling sections. Replaces the old bottom-of-page includes block. -->
<section class="inc-section" id="includes">
  <p class="eyebrow">Your gathering includes</p>
  <div class="inc-grid">
    <div class="inc-card">
      <p class="inc-head">The Gathering Plan</p>
      <ul class="inc-list">
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Invitation + RSVP page</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Personalized planning dashboard</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Menu + recipes</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Shopping list</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Host guide</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Playlist</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> Printables + more</li>
      </ul>
    </div>
    <div class="inc-card">
      <p class="inc-head">Optional add-ons</p>
      <ul class="inc-list">
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> <a href="#host-box">Host Box</a></li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 12l5 5L20 7"/></svg> <a href="#activities">Activity Kit</a></li>
      </ul>
    </div>
    <div class="inc-card inc-card-provide">
      <p class="inc-head">You provide</p>
      <ul class="inc-list inc-list-plain">
        <li>Food + drinks</li>
        <li>Fresh flowers, if desired</li>
        <li>Your plates, glasses and cutlery (paper plates and cutlery come in the Host Box)</li>
        <li>Serving pieces you want to use</li>
      </ul>
    </div>
  </div>
  <p class="inc-note">Missing something? Your Plan includes recommendations and shopping links for anything else you need.</p>
</section>

<!-- ── "THOUGHT THROUGH" BAND ── -->
<section class="thought-band">
  <div>
    <h2 class="thought-headline">
      <span class="tb-black">Golden Hour,</span>
      <span class="tb-italic">we've already thought through.</span>
    </h2>
    <p class="thought-sub">The menu, invitations, shopping list, table details and host guide are ready. You just choose when and who's coming.</p>

    <div class="thought-icons">
      <div class="thought-icon-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
        <span>Invitations &amp; RSVPs</span>
      </div>
      <div class="thought-icon-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 2a5 5 0 015 5c0 2-1 3-1 3H8s-1-1-1-3a5 5 0 015-5z"/><path d="M4 20h16M6 20c0-3 2-5 6-5s6 2 6 5"/></svg>
        <span>Menu &amp; Recipes</span>
      </div>
      <div class="thought-icon-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8V6a3 3 0 016 0v2"/></svg>
        <span>Shopping List</span>
      </div>
      <div class="thought-icon-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
        <span>Playlist</span>
      </div>
      <div class="thought-icon-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg>
        <span>Host Guide &amp; Printables</span>
      </div>
    </div>
  </div>

  <div class="thought-mockup" data-slot="golden-plan-mockup">
    <img src="/assets/golden-hour-plan-laptop.jpg" alt="Gathering Plan dashboard, laptop mockup for Golden Hour" class="thought-mockup-img">
  </div>
</section>

<!-- ── MENU ── -->
<section class="menu-section section-roomy-top divider-top">
  <div class="img-slot menu-img has-photo" data-slot="golden-menu-spread">
    <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-iKwHK5Q.jpg?v=1787475892" alt="Golden Hour, menu spread" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
  </div>
  <div>
    <p class="eyebrow">On the menu</p>
    <h2 class="ph-headline menu-headline">
      <span class="ph-italic">Dinner and drinks,</span>
      <span class="ph-black">already planned.</span>
    </h2>
    <div class="menu-groups">
      <div class="menu-group">
        <p class="menu-group-head">To Start</p>
        <ul class="menu-group-items">
          <li>Golden Hour Grazing Board</li>
          <li>Grilled Peach &amp; Arugula Salad</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Main</p>
        <ul class="menu-group-items">
          <li>Grilled Zucchini Corn Orzo Salad</li>
          <li>Caramelized Onion &amp; Tomato Galettes</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Sweet</p>
        <ul class="menu-group-items">
          <li>Golden Hour Pavlova</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Late Night</p>
        <ul class="menu-group-items">
          <li>Honeycomb Chocolate Bark</li>
          <li>Golden Honey Popcorn</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">To Sip</p>
        <ul class="menu-group-items">
          <li>Honey Peach Spritz</li>
          <li>White Wine</li>
          <li>Red Wine</li>
          <li>Rose</li>
          <li>Non-Alcoholic Wine</li>
          <li>Prosecco</li>
        </ul>
      </div>
    </div>
    <p class="menu-body">Recipes, quantities and your complete shopping list are included in your Gathering Plan.</p>
  </div>
</section>

<!-- ── HOST BOX (2026-10-02) ──
     Contents come from the theme sheet's "Box Contents" tab (STANDARD
     tier) and scale with the guest count; see BOX_CONTENTS in the script. -->
<section class="hb-section" id="host-box">
  <div class="img-slot hb-img has-photo">
    <img src="/assets/golden-hour-host-box.jpg" alt="Golden Hour Host Box, open with plates, napkins, candles and utensils" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
  </div>
  <div>
    <p class="eyebrow">Optional add-on</p>
    <h2 class="ph-headline">
      <span class="ph-italic">Add a Host Box.</span>
      <span class="ph-black">Everything for the table.</span>
    </h2>
    <p class="hb-sub">Matching paper goods, a runner and printed menus, sized to your guest count and delivered to your door, so the table looks finished without a shopping trip.</p>
    <p class="hb-list-head">Inside, for <span class="js-guests">6 guests</span></p>
    <ul class="hb-list" id="hostBoxContents"></ul>
    <button type="button" class="btn-pill btn-tomato hb-btn" id="hostBoxSectionBtn" onclick="toggleHostBox()">Add Host Box · +$73</button>
    <p class="ff-callout">Hosting more than once this year? Founding Friends get four Gathering Plans for $59, or four Plans and four Host Boxes for $259. <a href='/founding-friends'>Learn about Founding Friends →</a></p>
  </div>
</section>

<!-- ── ACTIVITY KITS (2026-10-02) ── -->
<section class="act-section" id="activities">
  <p class="eyebrow">Optional add-on</p>
  <h2 class="ph-headline">
    <span class="ph-italic">Add an Activity Kit.</span>
    <span class="ph-black">Something to do together.</span>
  </h2>
  <p class="act-sub">Add an activity if you want one. We&rsquo;ll take care of the supplies.</p>
  <div class="activity-product-grid">
    <div class="activity-card">
      <div class="img-slot activity-card-img has-photo">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-7r19nQX.jpg?v=1787475893" alt="Painting Kit activity for Golden Hour" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="activity-card-name">Painting Kit</p>
      <p class="activity-card-price"><span id="activityCardPrice">+$225</span> <span id="activityCardPeople">for 6 guests</span></p>
      <a class='activity-card-more' href='/painting-kit'>See the kit →</a>
      <button type="button" class="btn-pill btn-tomato activity-card-btn" id="paintingKitAddBtn" onclick="togglePaintingKit()">Add</button>
    </div>
    <div class="activity-card">
      <div class="img-slot activity-card-img has-photo">
        <img src="/assets/flower-arranging-club.jpg" alt="Flower arranging activity" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="activity-card-name">Flower Arranging</p>
      <p class="activity-card-note">Coming soon</p>
    </div>
    <div class="activity-card">
      <div class="img-slot activity-card-img has-photo">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-SIiwhDt.jpg?v=1787475892" alt="Sprinkle Embroidery Cakes activity" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
      <p class="activity-card-name">Sprinkle Embroidery Cakes</p>
      <p class="activity-card-note">Coming soon</p>
    </div>
  </div>
</section>

<!-- ── CLOSER: Action Band ── -->
<section class="closer-band">
  <h2 class="closer-headline">
    <span class="cl-italic">This one looks good on your table.</span>
    <span class="cl-black">Start planning it.</span>
  </h2>
  <div class="closer-btns">
    <a href="#add" class="btn-pill btn-tomato">Start your gathering →</a>
  </div>
</section>

<!-- ── CTA / EMAIL BAND ── -->
<section class="cta-band">
  <div>
    <p class="cta-eyebrow">From Gathering Hour</p>
    <p class="cta-headline">Stay at the table.</p>
    <p class="cta-body">New gatherings, first looks and hosting inspiration.</p>
  </div>
  <div>
    <form class="cta-form" onsubmit="return false;">
      <input type="email" placeholder="Your email address" required />
      <button type="submit" class="link-arrow" style="background:none;border:none;cursor:pointer;">Join us →</button>
    </form>
      <p class="cta-consent">By signing up, you agree to receive marketing emails from Gathering Hour. Unsubscribe any time. See our <a href='/privacy-terms'>Privacy Policy</a>.</p>
    <!-- 2026-10-26 (Sarah): social icons under the sign-up, cream on burgundy -->
    <div class="cta-social">
      <a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></a>
      <a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener" aria-label="Gathering Hour on Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg></a>
      <a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener" aria-label="Gathering Hour on TikTok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></a>
    </div>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer class="divider-top">
  <div class="footer-top">
    <div class="footer-col">
      <h5>Gathering Hour</h5>
      <a href='/how-it-works'>How it Works</a>
      <a href='/founding-friends'>Founding Friends</a>
      <a href='/corporate'>Groups &amp; Teams</a>
      <a href='/gatherings'>Gatherings</a>
    </div>
    <div class="footer-col">
      <h5>Shop</h5>
      <a href='/gatherings'>Browse Gatherings</a>
      <a href='/activity-kits'>Activity Kits</a>
      <a href='/decorations'>Decorations</a>
      <a href='/gift-cards'>Gift Cards</a>
    </div>
    <div class="footer-col">
      <h5>Support</h5>
      <a href='/faq'>FAQ</a>
      <a href='/shipping-returns'>Shipping &amp; Returns</a>
      <a href='/order-tracking'>Order Tracking</a>
      <a href='/contact'>Contact</a>
      <a href='/privacy-terms'>Privacy &amp; Terms</a>
      <a href='/affiliate-disclosure'>Affiliate Disclosure</a>
      <a href="#" class="cookie-prefs-link">Cookie Preferences</a>
    </div>
    <div class="footer-col">
      <h5>Company</h5>
      <a href='/about'>About</a>
      <a href='/journal'>Journal</a>
      <a href='/contact'>Contact</a>
    </div>
  </div>

  <hr class="footer-divider">

  <div class="footer-brand">
    <img src="/assets/gh-logo-transp.png" alt="" class="footer-brand-logo">
    <p class="footer-tagline">Beautiful gatherings, already planned.</p>
    <ul class="footer-social">
      <li><a href="https://www.instagram.com/gathering.hour/" target="_blank" rel="noopener">Instagram</a></li>
      <li><a href="https://www.pinterest.com/GatheringHour/" target="_blank" rel="noopener">Pinterest</a></li>
      <li><a href="https://www.tiktok.com/@gathering.hour" target="_blank" rel="noopener">TikTok</a></li>
    </ul>
  </div>

  <div class="footer-bottom">
    <p>© 2026 Gathering Hour</p>
  </div>
</footer>

<!-- ── COOKIE CONSENT BANNER ──
     Notice + opt-out style, see styles.css for the reasoning. Shown
     once per browser until dismissed; "Turn off analytics cookies"
     sets a persistent opt-out flag for when GA4 is wired in. Same
     block duplicated on every page, kept in sync, per this site's
     established "no shared JS file" pattern. -->
<div class="cookie-banner" id="cookieBanner" role="region" aria-label="Cookie notice">
  <div class="cookie-banner-inner">
    <p class="cookie-banner-text">We use cookies to keep your cart working and understand how visitors use this site. See our <a href='/privacy-terms#cookies'>Cookie Policy</a> for details.</p>
    <div class="cookie-banner-btns">
      <button type="button" class="cookie-banner-optout" id="cookieOptOutBtn">Turn off analytics cookies</button>
      <button type="button" class="cookie-banner-accept" id="cookieAcceptBtn">Got it</button>
    </div>
  </div>
</div>


<script>
  // Nav shrinks and quiets down after a small scroll.
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) nav.classList.add('nav-scrolled'); // 2026-10-05: was 40, matches the header's 28px slide (styles.css nav)
      else nav.classList.remove('nav-scrolled');
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();

  // ── PRICING WIDGET ──
  // Grounded in real Shopify data for the "Golden Hour" variant of each
  // product (checked via the Shopify connector before building this page).
  // See the file header comment for the Host Box availability flag.
  var SHOP_DOMAIN = 'gathering-hour.myshopify.com';
  // 2026-09-24, per Sarah: Host Box pricing is no longer flat -- $95/$185/
  // $275 for 6/12/18 guests ($95 base + $15/head, with the 18-guest tier
  // priced as a $5 bundle discount off buying the 12- and 6-person boxes
  // separately). Real Shopify variants created on the Standard Host Box
  // product (new "Guests" option, 6/12/18, crossed with the existing Theme
  // option) and on Painting Kit (new "18 people" variant, $595 -- also a
  // bundle discount off the 12+6 kit total). Both follow the same
  // round-up-to-nearest-tier pattern the Painting Kit 6/12 split already
  // used: 7-12 guests get the 12-tier, 13-18 get the 18-tier.
  var VARIANTS = {
    gatheringPlan: { id: '48958944510106', price: 22 },   // Gathering Page: Golden Hour
    // 2026-09-26, per Sarah (real bug found via test checkout): the
    // three-tier version (6/12/18 only) silently snapped any guest count
    // above 6 to the 12-guest price and anything above 12 to the 18-guest
    // price -- e.g. 7 guests charged the same $185 as 12, since no
    // Shopify variant existed for 7-11 or 13-17. Fixed by creating a real
    // Shopify variant for every guest count 6-18 (added via
    // productOptionUpdate on the "Guests" option, MANAGE strategy, so one
    // new value auto-created a matching variant per Theme), each priced
    // at the real $95 + $15/head formula. hostBoxByGuests below replaces
    // the old hostBox6/12/18 + tierForGuestCount() snapping entirely
    // (same fix applied to tea-in-the-garden.html's identical widget).
    hostBoxByGuests: {
      6:  { id: '48958944739482', price: 95 },
      7:  { id: '67577116524698', price: 110 },
      8:  { id: '67577116623002', price: 125 },
      9:  { id: '67577116721306', price: 140 },
      10: { id: '67577116819610', price: 155 },
      11: { id: '67577116917914', price: 170 },
      12: { id: '50529524777114', price: 185 },
      13: { id: '67577117016218', price: 200 },
      14: { id: '67577117114522', price: 215 },
      15: { id: '67577117212826', price: 230 },
      16: { id: '67577117311130', price: 245 },
      17: { id: '67577117409434', price: 260 },
      18: { id: '50529524809882', price: 275 }
    },
    paintingKit6:  { id: '48229852545178', price: 225 },  // Painting Kit: 6 people (theme-agnostic)
    paintingKit12: { id: '48229852577946', price: 375 },  // Painting Kit: 12 people (theme-agnostic)
    paintingKit18: { id: '50529536966810', price: 595 }   // Painting Kit: 18 people (theme-agnostic, AK-PAINT-18)
  };

  // ── KLAVIYO: VIEWED PRODUCT TRACKING ──
  // 2026-09-22, per Sarah: fires once on page load so this page starts
  // feeding Klaviyo's "Viewed Product" metric, which unblocks the Browse
  // Abandonment flow (that metric only populates via Klaviyo's own onsite
  // snippet, now installed sitewide -- it isn't a native Shopify sync).
  // Tracks the default-selected base product (Gathering Plan, radio
  // checked on load); doesn't refire if the host later toggles to the
  // Host Box or an add-on.
  if (window.klaviyo) {
    klaviyo.track('Viewed Product', {
      ProductName: 'Gathering Hour: Golden Hour',
      ProductID: VARIANTS.gatheringPlan.id,
      Categories: ['Gathering Themes'],
      ImageURL: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892',
      URL: window.location.href,
      Brand: 'Gathering Hour',
      Price: VARIANTS.gatheringPlan.price,
      CompareAtPrice: VARIANTS.gatheringPlan.price
    });
  }

  var guestCount = 6;
  // 2026-09-24: raised from 12 to 18 to match the new Host Box/Painting Kit
  // top tier (see VARIANTS comment above).
  var GUEST_MIN = 6, GUEST_MAX = 18;

  // Three tiers now (6/12/18), same round-up-to-nearest-purchasable-size
  // pattern as before -- 7-12 guests round up to the 12-person kit, 13-18
  // round up to the 18-person kit, since those are the only real Shopify
  // variants (see painting-kit.html's header comment for the original
  // binary version of this rule).
  function tierForGuestCount() {
    if (guestCount > 12) return 18;
    if (guestCount > 6) return 12;
    return 6;
  }
  // ── 2026-10-02 REBUILD ──
  // The Gathering Plan is the required base. Host Box and Activity Kit are
  // optional add-ons. Cart logic: the Host Box variant already includes the
  // Plan ($95 for 6 guests), so when the box is on, the cart gets ONLY the
  // box variant and the page shows it as "+$" + (box price - $22). Display
  // total and checkout total always match. Per Sarah 2026-10-02 (kept the
  // existing Plan + Box prices rather than charging $22 + $95).
  var hostBoxOn = false;
  var activityOn = false;

  // Standard Host Box contents, from this gathering's theme sheet ("Box
  // Contents" tab, STANDARD rows). perHead = quantity per guest (rounded
  // up), fixed = same for any guest count.
  var BOX_CONTENTS = [
    {
        "name": "Golden yellow dinner napkins",
        "perHead": 3,
        "fixed": null
    },
    {
        "name": "Cocktail napkins",
        "perHead": 2,
        "fixed": null
    },
    {
        "name": "Paper plates (dinner and dessert)",
        "perHead": 2,
        "fixed": null
    },
    {
        "name": "Wooden forks, knives and spoons",
        "perHead": 4.5,
        "fixed": null
    },
    {
        "name": "Paper placemats",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Food to-go boxes",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Table runner",
        "perHead": null,
        "fixed": 1
    },
    {
        "name": "Taper candles",
        "perHead": null,
        "fixed": "set"
    },
    {
        "name": "Printed menus",
        "perHead": null,
        "fixed": 4
    },
    {
        "name": "Printed food cards",
        "perHead": null,
        "fixed": 16
    }
];

  function getActivityVariant() {
    var tier = tierForGuestCount();
    if (tier === 18) return VARIANTS.paintingKit18;
    if (tier === 12) return VARIANTS.paintingKit12;
    return VARIANTS.paintingKit6;
  }
  function getHostBoxVariant() { return VARIANTS.hostBoxByGuests[guestCount]; }
  function hostBoxAddonPrice() { return getHostBoxVariant().price - VARIANTS.gatheringPlan.price; }

  function renderHostBoxContents() {
    var ul = document.getElementById('hostBoxContents');
    if (!ul) return;
    ul.innerHTML = BOX_CONTENTS.map(function (it) {
      var q = it.fixed !== null ? it.fixed : Math.ceil(it.perHead * guestCount);
      var qty = q === 'set' ? '1 set' : q + ' ×';
      return '<li><span class="hb-qty">' + qty + '</span> ' + it.name + '</li>';
    }).join('');
  }

  function setText(id, txt) { var el = document.getElementById(id); if (el) el.textContent = txt; }

  function renderAll() {
    var people = tierForGuestCount();
    var kit = getActivityVariant();
    var boxAdd = hostBoxAddonPrice();
    document.querySelectorAll('.js-guests').forEach(function (el) { el.textContent = guestCount + ' guests'; });

    setText('hostBoxAddonPrice', '+$' + boxAdd);
    setText('hostBoxBtn', hostBoxOn ? '✓ Added' : '+ Add');
    document.getElementById('hostBoxBtn').setAttribute('aria-pressed', hostBoxOn ? 'true' : 'false');
    setText('hostBoxSectionBtn', hostBoxOn ? '✓ Host Box added · Remove' : 'Add Host Box · +$' + boxAdd);
    document.getElementById('cfgHostBox').classList.toggle('on', hostBoxOn);

    setText('activityAddonPrice', activityOn ? '+$' + kit.price : '');
    setText('activityDesc', activityOn ? 'Painting Kit, for up to ' + people + ' guests' : 'Painting, flowers, crafts and more.');
    setText('activityBtn', activityOn ? '✓ Added' : '+ Choose');
    document.getElementById('activityRemove').hidden = !activityOn;
    document.getElementById('cfgActivity').classList.toggle('on', activityOn);
    setText('activityCardPrice', '+$' + kit.price);
    setText('activityCardPeople', 'for up to ' + people + ' guests');
    setText('paintingKitAddBtn', activityOn ? '✓ Added · Remove' : 'Add');

    var total = VARIANTS.gatheringPlan.price + (hostBoxOn ? boxAdd : 0) + (activityOn ? kit.price : 0);
    setText('widgetTotal', '$' + total);
    renderHostBoxContents();
  }

  function toggleHostBox() { hostBoxOn = !hostBoxOn; renderAll(); }
  function togglePaintingKit() { activityOn = !activityOn; renderAll(); }
  function removeActivity() { activityOn = false; renderAll(); }
  function chooseActivity() {
    document.getElementById('activities').scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  function updateGuestLabel() {
    document.getElementById('guestCountLabel').textContent = guestCount + ' guests';
    document.getElementById('guestMinus').disabled = guestCount <= GUEST_MIN;
    document.getElementById('guestPlus').disabled = guestCount >= GUEST_MAX;
    renderAll();
  }
  document.getElementById('guestMinus').addEventListener('click', function () {
    if (guestCount > GUEST_MIN) { guestCount--; updateGuestLabel(); }
  });
  document.getElementById('guestPlus').addEventListener('click', function () {
    if (guestCount < GUEST_MAX) { guestCount++; updateGuestLabel(); }
  });
  updateGuestLabel();

  // Default the date picker to today so it's never blank/invalid.
  (function () {
    var dateInput = document.getElementById('gatheringDate');
    var today = new Date().toISOString().split('T')[0];
    dateInput.min = today;
    dateInput.value = today;
  })();

  // ── PRODUCT GALLERY ──
  // Data-driven so the gallery can hold any number of photos, not just
  // three: thumbnails are rendered from this array, and the prev/next
  // arrows on the main image step through the full set even when there
  // are more photos than fit in the visible thumbnail row (the row
  // scrolls horizontally, see .prod-gallery-row in the style block).
  var galleryImages = [
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-z4MgD8q.jpg?v=1787475892', alt: 'Golden Hour, candlelit table setting' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-ZYgLQ0r.jpg?v=1787475892', alt: 'Golden Hour, table detail' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-rwTOSNl.jpg?v=1787475892', alt: 'Golden Hour, table detail' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-xsgx956.jpg?v=1787475892', alt: 'Golden Hour, table detail' }
  ];
  var galleryIndex = 0;

  function renderGalleryThumbs() {
    var row = document.getElementById('prodGalleryRow');
    row.innerHTML = '';
    galleryImages.forEach(function (img, i) {
      var thumb = document.createElement('div');
      thumb.className = 'img-slot prod-gallery-thumb has-photo' + (i === galleryIndex ? ' active' : '');
      thumb.onclick = function () { setGalleryIndex(i); };
      var thumbImg = document.createElement('img');
      thumbImg.src = img.src;
      thumbImg.alt = img.alt;
      thumbImg.style.cssText = 'width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;';
      thumb.appendChild(thumbImg);
      row.appendChild(thumb);
    });
  }

  // 2026-09-24, per Sarah: clicking into this page on mobile landed
  // scrolled to the bottom instead of the top. Root cause: the initial
  // setGalleryIndex(0) call below ran scrollIntoView() on the active
  // thumbnail on every load, even though there's nothing to scroll on a
  // fresh page load (thumb 0 is already the default). block:'nearest'
  // should limit that to the thumbnail row itself, but on mobile Safari
  // calling scrollIntoView before the page has finished its first
  // layout pass is a known trigger for it resolving against the wrong
  // (unstable) layout and jumping the whole page instead of just the
  // horizontally-scrolling thumb strip. Added a skipScroll flag so only
  // user-triggered calls (thumb clicks, prev/next arrows) scroll;
  // load-time initialization doesn't.
  function setGalleryIndex(i, skipScroll) {
    galleryIndex = (i + galleryImages.length) % galleryImages.length;
    var mainImg = document.getElementById('prodMainImg');
    mainImg.src = galleryImages[galleryIndex].src;
    mainImg.alt = galleryImages[galleryIndex].alt;
    renderGalleryThumbs();
    if (skipScroll) return;
    var activeThumb = document.querySelector('.prod-gallery-thumb.active');
    if (activeThumb) activeThumb.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
  }

  function galleryPrev() { setGalleryIndex(galleryIndex - 1); }
  function galleryNext() { setGalleryIndex(galleryIndex + 1); }

  setGalleryIndex(0, true);

  function goToCart(e) {
    e.preventDefault();
    // Host Box variant includes the Plan, so it replaces the Plan line.
    var baseVariant = hostBoxOn ? getHostBoxVariant() : VARIANTS.gatheringPlan;
    var items = [baseVariant.id + ':1'];
    if (activityOn) items.push(getActivityVariant().id + ':1');

    // Date + guest count travel as order-level attributes (they show in the
    // order's Notes in Shopify admin).
    var chosenDate = document.getElementById('gatheringDate').value;
    var params = [];
    if (chosenDate) params.push('attributes[Gathering Date]=' + encodeURIComponent(chosenDate));
    params.push('attributes[Guest Count]=' + encodeURIComponent(guestCount + ' guests'));

    window.location.href = 'https://' + SHOP_DOMAIN + '/cart/' + items.join(',') + '?' + params.join('&');
    return false;
  }
</script>

<script>
  // ── COOKIE CONSENT BANNER ──
  // Notice + opt-out (not block-until-accept), see styles.css header
  // comment for why. Preference lives in localStorage, not a cookie,
  // so the cookie notice itself doesn't need a cookie to work.
  (function () {
    var DISMISSED_KEY = 'gh_cookie_notice_dismissed';
    var OPTOUT_KEY = 'gh_analytics_optout';
    var banner = document.getElementById('cookieBanner');
    if (!banner) return;

    function updateOptOutLabel() {
      var btn = document.getElementById('cookieOptOutBtn');
      if (!btn) return;
      var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
      btn.textContent = isOut ? 'Analytics cookies are off' : 'Turn off analytics cookies';
    }

    if (localStorage.getItem(DISMISSED_KEY) !== 'true') {
      banner.classList.add('visible');
    }

    var acceptBtn = document.getElementById('cookieAcceptBtn');
    if (acceptBtn) {
      acceptBtn.addEventListener('click', function () {
        localStorage.setItem(DISMISSED_KEY, 'true');
        banner.classList.remove('visible');
      });
    }

    var optOutBtn = document.getElementById('cookieOptOutBtn');
    if (optOutBtn) {
      optOutBtn.addEventListener('click', function () {
        var isOut = localStorage.getItem(OPTOUT_KEY) === 'true';
        localStorage.setItem(OPTOUT_KEY, isOut ? 'false' : 'true');
        updateOptOutLabel();
      });
    }

    document.querySelectorAll('.cookie-prefs-link').forEach(function (el) {
      el.addEventListener('click', function (e) {
        e.preventDefault();
        banner.classList.add('visible');
      });
    });

    updateOptOutLabel();
  })();
</script>

<script src="/signup-popup.js?v=20261004a"></script>
<!-- Sovrn Commerce (VigLink): turns plain retailer links into affiliate links (2026-10-15, affiliate handoff) -->
<script type="text/javascript">
  var vglnk = {key: '0e9a4c55bc62b5523d88dc826290b18e'};
  (function(d, t) {var s = d.createElement(t);
    s.type = 'text/javascript';s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>
</body>
</html>