<!--
  Gathering Hour: Tea in the Garden product page
  Created: 2026-08-12
  Notes: First product/gathering detail page, built from Sarah's wireframe.
  All photos are placeholder blocks (search data-slot="...") since these are
  new shots specific to this page, not yet supplied.

  IMPORTANT, read before sending this live: the pricing widget is wired to
  REAL Shopify products/variants (checked via the Shopify connector before
  building), not just decorative numbers. Differences from the wireframe,
  flagged rather than silently guessed:

  1) Host Box price: wireframe shows +$73, which Sarah confirmed was meant
     as "$95 total for Gathering Plan + Host Box together," i.e. $73 was
     the delta on top of the $22 plan, not the box's own price. Since
     Standard Host Box is a real, standalone $95 Shopify product (SKU
     HB-STD-TEA) with no bundle discount configured, a real cart checkout
     would actually total $117 ($22 + $95), not $95.
     Decision (2026-08-12, revised): first tried showing the real $95
     plainly, but seeing it live at $117 total, Sarah asked for the total
     to read $95. Chose to display "+$73" and total $95 on the page, while
     the actual Shopify cart link still adds the real $95 item, since no
     discount exists yet. This is a KNOWN, ACCEPTED mismatch: what the
     widget shows and what checkout actually charges disagree ($95 shown
     vs. $117 charged) until a real bundle discount gets set up in
     Shopify. See VARIANTS.hostBox in the script for the displayPrice vs.
     checkoutPrice split.
     RESOLVED 2026-09-17: closed via the .base-toggle rebuild (see that
     dated entry further down this comment and the CSS comment above
     .base-toggle) -- the widget now shows the Host Box's real $95 price
     and only ever adds one base variant to the cart, so display and
     checkout always match. No Shopify bundle discount needed after all.
  2) There's also a Premium Host Box in Shopify ($220, Tea in the Garden
     variant) that isn't in the wireframe at all. Left it out to match
     what you drew, flag if you want a premium tier offered here too.
  3) Activity: "Painting Kit for 6" in the widget matches Shopify exactly
     ($225, 6-person variant, SKU AK-PAINT-6). But the three product cards
     further down show Painting Kit at +$49, Flower Arranging +$59, and
     Sprinkle Embroidery Cakes +$45, none of which match anything in
     Shopify (Painting Kit's real cheapest tier is $75 for 1 person).
     Flower Arranging and Sprinkle Embroidery Cakes don't exist as Shopify
     products yet at all. So for now: Painting Kit's card is wired for
     real (uses the same $225 / 6-person variant as the widget above,
     clicking Add there updates the widget too), and the other two show a
     "Coming soon" state instead of a working Add button, since there's
     nothing real to add yet. Once those exist as Shopify products, wiring
     them in is a quick follow-up.
     2026-09-21, per Sarah: "Painting Kit for 6" was hardcoded even though
     the guest stepper goes up to 12, so a 10-12 guest gathering checked
     out with a kit sized for 6. getActivityVariant() now switches to the
     real 12-person Shopify variant (AK-PAINT-12, 48229852577946, $375)
     once guestCount > 6 -- label, price, and the cart link all scale with
     the stepper. Same fix applied to golden-hour.html's identical widget.
  4) "Start Your Gathering" builds a real Shopify cart permalink from
     whatever's currently selected (Gathering Plan + Host Box if toggled +
     Painting Kit if toggled) and sends the visitor straight to
     gathering-hour.myshopify.com/cart/... with those items already in it.
     No custom backend or checkout page needed.
  5) Guest count doesn't change any price (nothing in Shopify's pricing
     scales continuously with guest count, only Painting Kit's tiers do,
     and the widget already targets the 6-person tier directly per the
     wireframe). Flag if you want the Painting Kit tier to follow the
     guest count stepper instead of always being fixed at 6.
  6) 2026-08-12: chosen date and guest count now get passed through to
     Shopify as order attributes (attributes[Gathering Date],
     attributes[Guest Count] query params on the cart permalink), so they
     show up in the Notes section of the order in Shopify admin. This uses
     order-level attributes rather than line-item properties, since
     properties only attach to the first item in a multi-item permalink
     and date/guest count describe the whole gathering, not one line.
  7) 2026-08-14: "Start Your Gathering" now navigates the same tab
     instead of opening a new one (was window.open, now
     window.location.href), so it stops spawning stray Shopify tabs.
  8) 2026-08-14, later same day: hero updated to match the Painting Kit
     product hero exactly. .prod-kicker switched to true Archivo Black
     (was semi-bold Cormorant, read as not-quite-bold). The tagline is
     now the site's two-tone treatment: "An afternoon made" stays italic
     aubergine, "for lingering." is now bold tomato Archivo Black instead
     of a single-color espresso line.

  9) Gallery thumbnails now work as a real slideshow preview, clicking
     one swaps the main image (id="prodMainImg") to show that photo
     full-size, via selectGalleryPhoto(). Same mechanism added to Golden
     Hour and Painting Kit for consistency, though those two currently
     have "Photo coming" placeholder thumbnails with nothing to preview
     yet, the click handler just quietly no-ops until real photos exist.

  10) 2026-08-17: added an Action Band (see styles.css, the new shared
      .closer-band component's commercial-page variant) 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 so the button has
      somewhere real to land. Same copy and pattern added to Golden Hour.

  11) 2026-08-17, still later: "Everything for the table" / "Something
      to do together" section headlines were too easy to skim past as
      tiny orange caps. .ta-eyebrow bumped from an 11px uppercase label
      to a real 24px bold espresso headline (text-transform removed so
      it reads in normal case). .ta-desc color moved from full espresso
      to espresso-70 so it now reads clearly as supporting copy under
      the bigger headline. Also balanced the two-column layout: grid
      ratio 1fr/1.35fr -> 1fr/1.15fr, and .activity-card-img aspect
      ratio 1/1 -> 4/5 so the three activity cards on the right read
      taller and the columns land closer to even. Same treatment applied
      to Golden Hour's identical duplicated section for consistency.

  12) 2026-08-17, still later: "On the menu" section filled with Sarah's
      real Tea in the Garden menu, replacing the "Savory / Sweet /
      Drinks" 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), 4 real categories: Savory, Sweet, Tea, Beverages. 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. Same
      .menu-groups pattern built on Golden Hour for its own menu.

  13) 2026-08-18: applied the new Gathering Hour Web Type Scale (see
      styles.css). No hero exception on product pages, so .prod-tagline-
      italic/.prod-tagline-black (the real page H1) went from mismatched
      42px/38px to a unified 52px/52px (Hero tier), 32px/28px mobile ->
      40px/40px. .thought-headline (the "we've already thought through"
      two-tone headline) 30px -> 40px (Editorial tier), 32px mobile
      added. .ta-eyebrow, already bumped once this session to a real
      headline at 24px, brought onto the controlled scale properly at
      30px (Section tier, matches Archivo Bold at that size elsewhere on
      the site), 26px mobile added. .menu-group-head 19px -> 20px, .widget-
      head-title 26px -> 20px (matches the H3/card-title tier used for
      other compact card headers site-wide). .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 all moved to 14px (meta); .thought-sub,
      .menu-body, .thought-icon-item span moved to 16px (body) or 14px
      depending on role. .activity-card-btn 11px -> 14px to match the new
      shared Button tier (see styles.css, .btn-pill was also bumped
      12px -> 14px site-wide today). .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), same changes as
      Golden Hour since both pages share this exact template. Cut "On
      the menu" (redundant, the menu categories already say what the
      section is) and "Your gathering includes" (redundant with the
      "Every Tea in the Garden 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"), already converted off the orange-
      eyebrow treatment earlier this session, so it's a headline in the
      Archivo-bold "product clarity" voice now, not an eyebrow. 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 support more than 4
      photos. Old markup (exactly 3 hardcoded thumbnail divs +
      selectGalleryPhoto(thumbEl)) replaced with the same data-driven
      pattern built for Painting Kit and Golden Hour: a galleryImages JS
      array, renderGalleryThumbs()/setGalleryIndex()/galleryPrev()/
      galleryNext(), a horizontally-scrolling thumbnail row, and two
      .gallery-arrow prev/next buttons on the main image. Active
      thumbnail state is a plain opacity dip (0.6), no colored outline,
      matching the corrected version on the other two pages (Sarah asked
      to drop the tomato outline there, so it was never added here to
      begin with). Same 4 real photos as before (TQUaiB8 main,
      QkfpsBq/0LHkyyQ/iwKJQrg thumbs), just re-plumbed through the new
      array. Stale .prod-gallery-row mobile grid override removed since
      the row is a flex/scroll row now, not a grid.

  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, fourth page (see how-it-works.html,
  about.html and gatherings.html for the first three). This page had
  more pink than the earlier rollout pages, being a commerce page with
  its own pricing widget, so this pass is bigger than the last few:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage. toggleShopMenu() removed from the closing <script> block.
  - Corner radius squared off everywhere: every editorial photo (2px)
    is now 0, and the "Product/UI" 8px exception (.thought-mockup-img,
    the dashboard graphic) is retired too, also 0. .build-widget and
    .includes-card (both 8px card rounding) are now 0 as well, matching
    the squared-card standard used on the homepage's plan3 cards.
    Small UI chrome that was never part of this system (.guest-stepper
    button, .widget-field input, .addon-panel, .gallery-arrow) is left
    exactly as it was, not photography or a content card.
  - Pink removed: .build-widget's tinted background (#FDF1EC) and
    var(--pink-dark) border are now plain paper with a standard
    espresso-15 border, matching the neutral card style used elsewhere
    (e.g. the modal inputs on gatherings.html). .guest-stepper button
    background moved from var(--pink) to espresso-15 (aubergine text
    kept), same swap already used sitewide for the pink placeholder/
    badge backgrounds. .thought-band (the pink "Afternoon Tea, we've
    already thought through" section) is now plain paper instead of a
    full pink color block, per the site's "paper is the default, color
    is an occasional moment" rule, its rgba(68,3,34,...) text tones
    converted to the standard espresso-70 body-copy color to match
    (aubergine headline/icon color unchanged, that already worked on
    paper). .includes-card's pink background is now espresso-08 (the
    same neutral swap used for the sitewide img-slot placeholder fix),
    .includes-card.alt's #FDF1EC tint is now plain paper with an
    espresso-15 border so the two cards still read as distinct from
    each other. .includes-col-head's rgba(68,3,34,0.55) label color is
    now espresso-50, matching the neutral muted-label convention used
    elsewhere on the page.
  - Newsletter band: no page-scoped change needed, picks up the new
    aubergine default from the shared .cta-band in styles.css.
  .badge.pink and .widget-eyebrow's orange are untouched: badge.pink
  was already remapped off real pink sitewide, and the widget eyebrow
  is a functional UI label on a light card, not the "orange on dark
  aubergine" issue this rollout has fixed elsewhere.

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 the checkout pricing bug flagged in this file's own
header since 2026-08-12 (see above) -- ordering a Host Box here always
charged $117 at checkout despite the page displaying a $95 total, since
the widget's "+$73" Host Box price was cosmetic while the cart link
added the real $95 Shopify variant on top of the always-added $22 plan.
Same root cause Sarah independently caught live on golden-hour.html's
checkout (22+95+225=$342 instead of 95+225=$320). Fixed the same way on
both pages: 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, real price, copy states it
includes the plan), so only one base-tier variant is ever in the cart
and the displayed total always equals the checkout total.
VARIANTS.hostBox's displayPrice/checkoutPrice split is removed, no
longer needed. recalcTotal()/goToCart() updated to read the selected
radio (getSelectedBase()) instead of the old hostBoxCheckbox. 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: Tea in the Garden</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;
}

/* Matches the Painting Kit product hero fix: true Archivo Black instead
   of semi-bold Cormorant, which didn't read as truly bold. */
.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 the
   Painting Kit product hero. */
.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. That version had TWO real
   bugs at once, both closed by this change: (1) the same
   always-add-the-$22-plan cart logic Sarah caught on golden-hour.html,
   and (2) a worse one specific to this page -- the Host Box's real
   Shopify variant is a standalone $95 product, but the widget displayed
   it as "+$73" so the on-page total read $95 combined, while the actual
   Shopify cart charged $117 (22+95). That mismatch was flagged as a
   known gap in this page's own VARIANTS comment (2026-08-12) pending a
   real Shopify bundle discount that was never set up. This toggle
   removes the need for one: it's a two-option radio choice ("Gathering
   Plan only" vs "Plan + Host Box"), so only one base-tier variant is
   ever in the cart, the Host Box option shows its real $95 checkout
   price (not the old cosmetic $73), and the displayed total always
   equals the checkout total. See golden-hour.html's matching comment
   for the original bug report. */
.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 ── */
/* ── 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: 78px; }
.thought-icon-item svg { width: 22px; height: 22px; color: var(--aubergine); margin-bottom: 8px; }
.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. Same fix as golden-hour.html's identical widget -- see
     that file's comment for why. */
  .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">Tea in the Garden</p>
    <h1 class="prod-tagline">
      <span class="prod-tagline-italic">An afternoon made</span>
      <span class="prod-tagline-black">for lingering.</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"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2.5 12H5M19 12h2.5M4.2 19.8L6 18M18 6l1.8-1.8"/></svg>
        Afternoon
      </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"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>
        3–4 hours
      </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 ──
       2026-08-19: thumbnail row is now built from a JS galleryImages array
       (see renderGalleryThumbs()/setGalleryIndex() 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="tea-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">Afternoon Tea,</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="tea-plan-mockup">
    <!-- 2026-09-21: swapped the old Shopify-hosted screenshot for the
         newer local one already in use on the homepage's "Start with the
         Plan" column -- Golden Hour's equivalent section got this same
         update to /assets/golden-hour-plan-laptop.jpg on 2026-09-19; this
         page just hadn't caught up yet. -->
    <img src="/assets/gathering-plan-laptop.jpg" alt="Gathering Plan dashboard, laptop mockup for Tea in the Garden" 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="tea-menu-spread">
    <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-E2uXgkV.jpg?v=1787475892" alt="Tea in the Garden, tiered dessert tray" 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">Afternoon tea,</span>
      <span class="ph-black">already planned.</span>
    </h2>
    <div class="menu-groups">
      <div class="menu-group">
        <p class="menu-group-head">Savory</p>
        <ul class="menu-group-items">
          <li>Sausage Rolls</li>
          <li>Coronation Chicken Sandwiches</li>
          <li>Egg Mayo Sandwiches</li>
          <li>Smoked Salmon Sandwiches</li>
          <li>Cucumber Sandwiches</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Sweet</p>
        <ul class="menu-group-items">
          <li>Fruit Scones</li>
          <li>Victoria Sandwich Cake</li>
          <li>Lemon Drizzle Cake</li>
          <li>Mini Lemon Meringue Tarts</li>
          <li>Cherry Bakewell Tarts</li>
          <li>Fondant Fancies</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Tea</p>
        <ul class="menu-group-items">
          <li>Earl Grey</li>
          <li>Chai</li>
          <li>Darjeeling</li>
          <li>Vanilla Comoro</li>
          <li>Cherry Blossom</li>
        </ul>
      </div>
      <div class="menu-group">
        <p class="menu-group-head">Beverages</p>
        <ul class="menu-group-items">
          <li>White Wine</li>
          <li>Red Wine</li>
          <li>Rosé</li>
          <li>Non-Alcoholic Wine</li>
          <li>Hugo Spritz</li>
          <li>Cherry Spritz</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="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-Dc7iGIe.jpg?v=1787475892" alt="Tea in the Garden Host Box, plates, napkins, menus and table details" 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 Tea in the Garden" 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 "Tea in the Garden" variant of
  // each product (checked via the Shopify connector before building this
  // page). See the file header comment for prices that differ from the
  // wireframe and why.
  var SHOP_DOMAIN = 'gathering-hour.myshopify.com';
  var VARIANTS = {
    gatheringPlan: { id: '48229350703258', price: 22 },   // Gathering Page: Tea in the Garden
    // 2026-09-17: the display/checkout price mismatch flagged here since
    // 2026-08-12 (page showed a cosmetic "$73" add-on price against a
    // real $95 Shopify variant, so the on-page total and the checkout
    // total disagreed) is closed by the .base-toggle rebuild below -- the
    // widget now shows this variant's real $95 price directly and only
    // ever adds ONE base variant to the cart, so display and checkout
    // always match. displayPrice/checkoutPrice split removed as no
    // longer needed.
    //
    // 2026-09-26, per Sarah (real bug found via test checkout): the
    // three-tier version below (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.
    hostBoxByGuests: {
      6:  { id: '48229354406042', price: 95 },
      7:  { id: '67577116491930', price: 110 },
      8:  { id: '67577116590234', price: 125 },
      9:  { id: '67577116688538', price: 140 },
      10: { id: '67577116786842', price: 155 },
      11: { id: '67577116885146', price: 170 },
      12: { id: '50529524711578', price: 185 },
      13: { id: '67577116983450', price: 200 },
      14: { id: '67577117081754', price: 215 },
      15: { id: '67577117180058', price: 230 },
      16: { id: '67577117278362', price: 245 },
      17: { id: '67577117376666', price: 260 },
      18: { id: '50529524744346', price: 275 }
    },
    paintingKit6:  { id: '48229852545178', price: 225 },  // Painting Kit: 6 people
    // 2026-09-21, per Sarah: the widget let a host pick up to 12 guests via
    // the stepper but only ever offered the 6-person kit -- a 10 or 12-
    // guest gathering would check out with a kit sized for 6, leaving some
    // guests without a matching canvas/supplies. Wired in the real 12-
    // person Shopify variant (same one painting-kit.html already offers,
    // and same fix applied to golden-hour.html's identical widget) so the
    // add-on scales with the guest count instead of silently understocking
    // it.
    paintingKit12: { id: '48229852577946', price: 375 },  // Painting Kit: 12 people
    // 2026-09-24, per Sarah: adding the matching 18-person Painting Kit
    // tier alongside the new 18-guest Host Box tier ($600 sum of the 6+12
    // kits, minus the same $5 "slight discount" pattern as the Host Box).
    paintingKit18: { id: '50529536966810', price: 595 }   // Painting Kit: 18 people
  };

  // ── 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. Same pattern as golden-hour.html.
  if (window.klaviyo) {
    klaviyo.track('Viewed Product', {
      ProductName: 'Gathering Hour: Tea in the Garden',
      ProductID: VARIANTS.gatheringPlan.id,
      Categories: ['Gathering Themes'],
      ImageURL: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-TQUaiB8.jpg?v=1787475893',
      URL: window.location.href,
      Brand: 'Gathering Hour',
      Price: VARIANTS.gatheringPlan.price,
      CompareAtPrice: VARIANTS.gatheringPlan.price
    });
  }

  var guestCount = 6;
  var GUEST_MIN = 6, GUEST_MAX = 18;

  // 2026-09-24, per Sarah: guest tiers now go 6/12/18 (was a binary 6/12)
  // -- see the 2026-09-24 VARIANTS comment above for why 18 was chosen.
  // Same helper added to golden-hour.html's identical widget.
  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": "Floral dinner napkins",
        "perHead": 3,
        "fixed": null
    },
    {
        "name": "Green cocktail napkins",
        "perHead": 2,
        "fixed": null
    },
    {
        "name": "Paper dinner plates",
        "perHead": 2,
        "fixed": null
    },
    {
        "name": "Paper dessert plates",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Wooden forks, knives and spoons",
        "perHead": 3,
        "fixed": null
    },
    {
        "name": "Paper placemats",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Food to-go boxes",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Sheets of decorative wax paper",
        "perHead": 1,
        "fixed": null
    },
    {
        "name": "Lace table runner",
        "perHead": null,
        "fixed": 1
    },
    {
        "name": "Floral garland",
        "perHead": null,
        "fixed": 1
    },
    {
        "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-TQUaiB8.jpg?v=1787475893', alt: 'Tea in the Garden, garden table setting' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-QkfpsBq.jpg?v=1787475893', alt: 'Tea in the Garden, gallery thumbnail' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-0LHkyyQ.jpg?v=1787475892', alt: 'Tea in the Garden, gallery thumbnail' },
    { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-iwKJQrg.jpg?v=1787475892', alt: 'Tea in the Garden, gallery thumbnail' }
  ];
  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 -- same root cause and
  // fix as golden-hour.html's identical gallery (see that file's
  // comment): the initial setGalleryIndex(0) call was running
  // scrollIntoView() on load, which mobile Safari can resolve against
  // an unstable pre-layout page and jump the whole page instead of just
  // the horizontally-scrolling thumb strip. skipScroll flag added so
  // only user-triggered calls scroll.
  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>