<!--
  Gathering Hour: The Painting Kit product page
  Created: 2026-08-14
  Notes: Restyled from the uploaded painting-kit.html draft into the
  current design system, built directly off the Tea in the Garden product
  page's visual language (same .build-widget purchase module shape, same
  .prod-kicker/.prod-tagline hero pattern, same shared nav/footer/cta-band
  from styles.css). This is meant to become the Activity Kit product-page
  TEMPLATE, Sprinkle Embroidery, Flower Arranging, Charm Bracelet Making,
  etc. can reuse this exact architecture later: swap photos, copy, the
  guest/price tiers and the artwork options, keep everything else.

  Real Shopify wiring (same Painting Kit product used in the Tea in the
  Garden widget, confirmed via the Shopify connector in an earlier
  session): 6-person variant 48229852545178 ($225), 12-person variant
  48229852577946 ($375). The 1-person $75 tier is intentionally dropped
  per Sarah's call, a solo kit undercuts the "gathering around a table"
  concept and makes the pricing look worse, not better.

  2026-09-24, per Sarah: added an 18-person tier (variant
  50529536966810, $595) alongside the matching 18-guest Host Box tier
  added to golden-hour.html/tea-in-the-garden.html this same session --
  18 guests ships as a 12-kit + 6-kit together, so $595 is $600 (the sum
  of buying those two separately) minus the same $5 "slight discount"
  used on the Host Box.

  "Choose your artwork" (Tea in the Garden / Golden Hour / Sicilian
  Spring) isn't a separate Shopify variant, there's one Painting Kit
  product regardless of which guided artwork ships. The selection gets
  passed through as a Shopify order attribute (same pattern as the
  date/guest count on the Tea in the Garden page) so it shows up in the
  order's Notes in Shopify admin, not baked into pricing.

  2026-08-14, revised per Sarah's feedback after seeing the page live:
  1) Artwork picker is back to large photo thumbnails (not the plain text
     pills from the first pass), reusing the real swatch photos from the
     old draft: Tea in the Garden (hf2hOgf.jpeg) and the Sicilian one
     (K4UimXu.jpeg, relabeled "Sicilian Spring" per Sarah's naming call,
     the artwork name doesn't have to match the gathering name "Sicilian
     Aperitivo"). Golden Hour still has no dedicated artwork photo, so its
     tile shows a small "Photo coming" placeholder rather than skipping
     it, since Sarah wants all three shown now. Once there are more than
     3-4 artworks, this becomes a small carousel with a next arrow instead
     of a fixed 3-up row, per her note.
  2) 2026-08-14, second revision after seeing the page live: the full
     page got shorter. "The Activity" section and the whole "How It
     Works" (Set the table / Choose your painting / Paint at your own
     pace / Frame it and take it home) section are both cut, Sarah felt
     neither told her anything she couldn't infer in a few seconds. In
     their place, right after the hero, is one big "lifestyle" photo
     placeholder ("Painting at the table," still no dedicated shot) with
     a single line under it, "No experience required. Just sit down and
     start painting." The "Guests painting together" placeholder that
     used to sit under How It Works is gone along with that section, this
     one photo slot covers the same need. "Everything You Need" is also
     trimmed down to just the item names (no per-item description lines,
     the photo plus labels already say enough) plus one small line under
     the list about portioning. The "What's included" accordion item is
     removed from Good to Know too, since the box-contents list right
     above it already covers that.
  3) Add-to-cart no longer opens a new tab. Clicking "Add Painting Kit"
     now shows a small on-page prompt ("Add a gathering to go with it?")
     before navigating, since a new-tab-per-click flow was genuinely
     confusing when someone might also want to add a gathering, per
     Sarah's question about the cart flow. "Browse gatherings" scrolls to
     the Pair It With a Gathering section on this same page, "No thanks,
     continue" navigates the SAME tab to the real Shopify cart permalink.
     Shopify's cart is one cookie-based session per browser, so anything
     added from the gathering pages afterward lands in the same cart and
     can check out together, that part already works today. Note: this
     same-tab-plus-prompt approach is the "small fix" version. The fuller
     fix (AJAX add-to-cart with no page navigation at all, plus a
     persistent cart-count icon in the nav) needs these pages to actually
     be Shopify theme pages rather than static files, since /cart/add.js
     needs to share cookies with the Shopify domain, not a plan/pricing
     issue, just a hosting one. Worth doing once these become real theme
     templates.
  4) 2026-08-14, third revision: the "Activity Kit" eyebrow now reads
     "The Painting Kit" instead, per Sarah's note. Since that made the
     separate ".prod-kicker" line directly below it ("The Painting Kit"
     again) a duplicate, the kicker line is removed entirely rather than
     showing the same words twice, which also matches the old draft's
     actual hero structure (eyebrow, then straight into the two-tone
     headline, no separate kicker line in between).
  5) STYLING TRIAL, not yet a sitewide decision: the hero headline
     ("Paint something beautiful together.") is back to the old draft's
     original two-tone treatment, italic aubergine Cormorant for the
     first line, bold tomato Archivo Black for the second
     (.prod-tagline-italic / .prod-tagline-black), reusing the exact
     old .hi/.hb rule from the uploaded painting-kit.html (color tokens
     swapped from --burgundy/--cherry to --aubergine/--tomato). Sized up
     again per Sarah's "could be bigger" note (50px/44px now). This is
     only applied here for now, per Sarah's request to compare it against
     the single-tone aubergine headline used on every other rebuilt page
     (gatherings, FAQ, About, Activity Kits, Contact, Shipping & Returns,
     Founding Friends) before deciding whether to bring the two-tone
     treatment back sitewide. If she wants it everywhere, that's a
     styles.css-level change plus edits to every page's headline markup,
     not done yet, waiting on her call after seeing this one live.
  6) 2026-08-14, fourth revision: hero photo (LKXMKyo.jpeg) is back to
     horizontal (was briefly tried vertical, Sarah decided to keep it
     landscape). A 3-up gallery row now sits underneath it, reusing the
     exact .prod-gallery-main/.prod-gallery-row/.prod-gallery-thumb
     pattern from the Tea in the Garden page so both product pages share
     the same hero-plus-gallery shape. No dedicated thumbnail photos
     exist for the Painting Kit yet, so all three tiles show a "Photo
     coming" placeholder rather than reusing Tea in the Garden's own
     photos, which would show the wrong product.

     Sarah also floated a future idea, explicitly NOT built yet: once
     there's real artwork imagery for all three options, tying the
     gallery/thumbnail images to whichever artwork is selected in
     "Choose your artwork" above, so picking Sicilian Spring could swap
     in a large secondary photo of that specific artwork in context. That
     would need real per-artwork lifestyle photography for each option
     first, flagging as a follow-up rather than guessing at an
     implementation now.

  "Pair it with a gathering" still shows Tea in the Garden and Golden
  Hour only, both real Ready to Host gatherings right now, using the
  exact .ready-grid/.ready-card pattern from gatherings.html. Left
  Sicily out of this specific grid since Sicilian Aperitivo is still a
  Coming Soon waitlist concept there, not something you can actually
  book yet, didn't want this page to imply otherwise.

  6) 2026-08-17: two fixes.
     a) Gallery thumbnails now act as a slideshow preview, clicking one
        swaps the main image (same mechanism as Tea in the Garden and
        Golden Hour). Main image got id="prodMainImg", selectGalleryPhoto()
        added to the script block. All three gallery thumbs here are still
        "Photo coming" placeholders, so nothing is clickable yet, it's
        wired and ready once real photos go in.
     b) Removed the "One big lifestyle image" section ("Painting at the
        table" placeholder plus caption) that sat right below the gallery.
        With the gallery thumbnails now directly under the main image,
        stacking a second, wider placeholder image right after it read as
        broken/misaligned rather than intentional. The section's CSS
        (.pk-lifestyle / .pk-lifestyle-img / .pk-lifestyle-caption) was
        removed too since nothing else uses it. "Everything You Need"
        (real photo, xf8npne.jpeg) now follows directly after the gallery.

  7) 2026-08-17, same day, follow-up fix: the gallery main image and the
     3-thumbnail row were direct children of .prod-hero (the widget/gallery
     2-column grid) instead of being wrapped together in their own div,
     unlike Tea in the Garden and Golden Hour, which both wrap the gallery
     in a single "PHOTO GALLERY" div. With 3 unwrapped grid children in a
     2-column grid, the browser's auto-placement put the main image next
     to the widget as intended, but pushed the thumbnail row onto its own
     new row underneath, misaligned and detached from the main image.
     Wrapped both in a div to match the other two product pages exactly,
     the thumbnails now sit directly under the main image on the right,
     same slideshow layout as Tea in the Garden and Golden Hour.

  8) 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: "Give everyone something to make. Add painting to the
     table." -> "Shop Painting Kit ->", button jumps to #add (the
     build-widget already had this id from an earlier round).

  9) 2026-08-18: applied the new Gathering Hour Web Type Scale (see
     styles.css). This page wasn't on Sarah's exception list, so the hero
     (originally sized up separately, 50px/44px, as part of an earlier
     "could be bigger" trial comparing two-tone treatments) was brought
     onto the same unified 52px/52px Hero tier as Tea in the Garden and
     Golden Hour's product heroes, 32px/28px mobile -> 40px/40px.
     .pk-includes-headline's two spans (28px/32px mismatched) -> 40px/40px
     (Editorial tier). .ready-name 24px -> 20px, matching the exact same
     card component's new size on the homepage's Gatherings grid
     (.gath-name, this page's "Pair It With a Gathering" section reuses
     that card verbatim per its own header comment). .card-status and
     .cart-prompt-eyebrow (both true eyebrow-style caps labels) and
     .widget-eyebrow normalized to the shared 13px/700/0.14em spec, 12px
     mobile added for all three plus the page's other eyebrow uses.
     .cart-prompt-headline 24px -> 20px (Subheading tier, it's a modal
     headline, not a page section). Body/meta copy floored: .prod-hero-
     body, .cart-prompt-body, .pk-faq-answer -> 16px (body); .pk-includes-
     name/-note, .ready-meta -> 14px (meta). .pk-pill (filter chips) and
     .pk-artwork-check (a decorative checkmark icon) left alone, compact
     UI chrome rather than content hierarchy.

     2026-08-19, later same day: new sitewide corner-radius system (see
     styles.css). .build-widget and .cart-prompt-box border-radius
     10px -> 8px, matches the new small-not-bubbly card standard.
     Every inline border-radius:4px on this page (kit hero, artwork/
     photo picker images) is real editorial photography, reduced to
     2px.

     2026-08-19, later same day: eyebrow reduction pass, per the new
     sitewide rule (max 1-2 per page, banners exempt). Cut the hero's
     "The Painting Kit" eyebrow (redundant with the page title/nav/
     headline) and "Pair it with a gathering" (redundant with "Already
     planned. Ready for painting." right below it). Kept "Choose your
     artwork" and "How many are painting?" (.widget-eyebrow), those are
     labels on the interactive purchase widget itself, functional UI
     like form-field labels, not page decoration. Kept "Good to know",
     it's the only heading above the FAQ accordion, without it that
     section would have no orientation label at all. Kept the closer
     band's "Something to make" and the newsletter band's "From
     Gathering Hour", both inside purple/pink banners, exempt per
     Sarah's rule.

     2026-08-19, later same day: Sarah sent four real Tea in the Garden
     Painting Kit photos. Main gallery image (data-slot pk-hero-main,
     id="prodMainImg") swapped from the generic LKXMKyo.jpeg to
     gng8wXr.jpeg. The three gallery thumbnails (pk-thumb-1/2/3), which
     were still "Photo coming" placeholders, are now filled with
     0GMeFN6.jpeg, kXeME5Y.jpeg and 1I2Fh8Q.jpeg, switched from plain
     img-slot placeholders to the has-photo + onclick="selectGalleryPhoto
     (this)" pattern, so they're now a live slideshow preview (same
     mechanism already wired on this page and on Golden Hour/Tea in the
     Garden). Note: I can't preview imgur URLs directly in this
     environment, fetching them is blocked, so this placement (photo 1
     as the main image, photos 2-4 as the three thumbnails, in the
     order sent) is on trust rather than confirmed by eye, worth a
     quick look to make sure the crop/order reads well and none of the
     four are better suited as the main hero image instead. This is
     separate from the existing "Tea in the Garden" artwork option in
     the purchase widget above (data-artwork="Tea in the Garden",
     already has its own real photo, hf2hOgf.jpeg, untouched here).
     Still needs logging in the Notion Website Image Library.

     2026-08-19, later same day: Sarah asked for a way to click through
     the gallery when there are more than the 3-4 photos that fit in
     the old fixed grid. Rebuilt the gallery to be data-driven: a
     galleryImages array (JS) holds all four current photos, thumbnails
     are rendered from it into #prodGalleryRow (no more hardcoded
     pk-thumb-1/2/3 divs), and two new prev/next arrow buttons
     (.gallery-arrow) sit on the main image, stepping through the full
     array regardless of how many photos it holds. .prod-gallery-row
     switched from a fixed 3-column grid to a horizontally scrolling
     flex row (each thumb sized to show 3 at a time, scroll-snap on),
     so a 5th, 6th, etc. photo just scrolls into view rather than
     breaking the layout. Old selectGalleryPhoto(thumbEl) function
     removed, replaced by setGalleryIndex()/renderGalleryThumbs()/
     galleryPrev()/galleryNext(). Active thumbnail gets a tomato
     outline. This is the same .prod-gallery-* component Golden Hour
     and Tea in the Garden use, both still on the old static 3-thumb
     version as of this entry, same fix queued for both right after
     this file.

  2026-08-20: gallery is now keyed per artwork instead of always showing
  Tea in the Garden's photos. Sarah pointed out the slideshow should
  change when a different "Choose your artwork" option is picked. Added
  PK_GALLERIES (Tea in the Garden / Golden Hour / Sicilian Spring ->
  own photo array), and the artwork-picker click handler now calls
  setGalleryForArtwork() to swap the main slideshow. Each artwork's own
  small picker thumbnail (hf2hOgf.jpeg for Tea in the Garden, K4UimXu.
  jpeg for Sicilian Spring) is included as the first slide of its own
  gallery per Sarah's follow-up note, so it also shows up large, not
  just in the small picker card. Sicilian Spring's gallery is just that
  one photo for now (no in-progress/detail shots exist yet the way Tea
  in the Garden has four). Golden Hour has zero real photos, so its
  gallery is empty and the main image slot falls back to a "Photo
  coming" placeholder with the prev/next arrows hidden, rather than
  showing a blank or borrowed photo. Once real photography exists for
  Golden Hour and more Sicilian Spring shots, just add them to
  PK_GALLERIES, no other changes needed.

  2026-08-21: sitewide Flamingo Estate rollout. The shared .closer-band
  now defaults to paper instead of aubergine (see styles.css), so the
  "Something to make" 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, sixth page (see how-it-works.html for
  the first, tea-in-the-garden.html/golden-hour.html for the other two
  commerce pages). Same pattern:
  - Nav simplified to How it works / About / Shop pill, matching the
    homepage. toggleShopMenu() removed from the closing <script> block.
  - Corner radius squared off: .build-widget 8px -> 0, .pk-artwork-
    option (the artwork-picker photo tiles) 6px -> 0, and every inline
    border-radius:2px on real photography (hero/gallery main image,
    JS-rendered gallery thumbs, "Everything You Need" photo, both
    "Pair It With a Gathering" card photos) -> 0. Left .pk-pill (100px
    chip), .gallery-arrow (100px circular), .pk-artwork-check (50%
    decorative checkmark) and .pk-faq-q-icon (50% accordion icon)
    alone, compact UI chrome rather than the card/photography pattern
    this rollout touches. Also left .cart-prompt-box at 8px, same call
    as gatherings.html's waitlist .modal-box, it's a modal dialog, not
    photography or the card pattern.
  - Pink removed from .build-widget: was #FDF1EC background with a
    var(--pink-dark) border, now var(--paper) background with a
    var(--espresso-15) border, matching Tea in the Garden/Golden
    Hour's purchase widget. .widget-eyebrow and .cart-prompt-eyebrow
    keep their orange, functional eyebrow-style labels on light cards,
    same reasoning as .card-status.
  - Newsletter band: no page-scoped change needed, picks up the new
    aubergine default from the shared .cta-band in styles.css
    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: sitewide two-tone headline audit (see about.html for
the full writeup). .pk-includes-headline's .pi-black span was espresso,
an inconsistent stray combo — recolored to aubergine so "Everything you
need" reads burgundy on burgundy like the rest of the site's secondary
headlines.

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 "Everything You Need" section's thin .divider-top
line to .divider-bold, marking it as the page's editorial moment.

2026-09-16: added a "Just want the artwork, printed & mailed? $12/person"
link under the main "Add Painting Kit" CTA (see buyArtworkOnly() below),
so someone who already owns paint/brushes/paper can buy just the guided
reference artwork without the full kit. Reuses this widget's own artwork +
guest-count selection rather than asking twice. This is also now where
the Gathering Plan's Activity tab (gather/Activity.html) sends its "Don't
want to print it yourself?" prompt — that used to link straight to the
bare Shopify product page, then briefly to a pre-filled cart with the
artwork pre-picked from the gathering's theme, before landing here: Sarah
wanted guests to keep the artwork choice, which only this page's picker
offers, while still never landing on a bare product page — this link ends
in a pre-filled cart either way, same as the full kit purchase.
2026-10-03, per Sarah's notes: "THE PAINTING KIT" kicker above the headline; tighter intro; price shows "For 6 guests · $37.50/person" and updates with the guest pills; artwork-only demoted from an outline button to a text link; "Open the box" list now shows quantities for the chosen guest count; Good to know reordered (No experience needed first, open by default); pair section retitled "Already picked your gathering? / Add painting to the table." with "Pairs with the Painting Kit" tags; closer now "Ready to paint together? / Choose your artwork and guest count." with Back to the Painting Kit ↑.
2026-10-03, later: "Add printed artwork only" is a button again under Add Painting Kit, showing N × $12; ?guests=N (from the Gathering Plan's Activity tab) pre-selects the smallest kit that fits and uses the exact N for printed artwork. ?artwork= already pre-selected the artwork.
2026-10-03, later still: removed the "Add a gathering to go with it?" pop-up; Add Painting Kit / Add printed artwork go straight to checkout.
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: The Painting Kit</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 (same shape as Tea in the Garden) ── */
.prod-hero {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  padding-top: 32px;
  padding-bottom: 0;
  align-items: start;
}
.prod-tagline { line-height: 1.02; margin-bottom: 20px; }
/* Trial: the old draft's two-tone "eggplant & red" headline treatment
   (italic aubergine + bold Archivo Black in tomato), brought back on
   this one page per Sarah's request to compare against the single-tone
   aubergine headline used sitewide right now, before deciding whether to
   roll it out everywhere. Sized up per her "could be bigger" note. */
.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: 4px;
}
.prod-hero-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; max-width: 460px; margin-bottom: 28px; }
.prod-gallery-main { aspect-ratio: 4 / 3.1; margin-bottom: 14px; }
/* Thumbnail row is 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, matching the old fixed 3-up grid
   look when there are exactly three or fewer. */
.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; }

/* ── BUILD WIDGET (same shape as Tea in the Garden, simpler contents:
   one product, no accordion add-ons) ── */
.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;
}
.pk-pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pk-pill {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso-70);
  background: var(--paper);
  border: 1px solid var(--espresso-15);
  border-radius: 100px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.pk-pill:hover { border-color: var(--aubergine); color: var(--aubergine); }
.pk-pill.selected { background: var(--aubergine); border-color: var(--aubergine); color: var(--paper); }

/* Large-thumbnail artwork picker, replaces the plain text pills. Works
   well at 2-3 options, once there are more artworks than fit in a row
   this becomes a small carousel with a next arrow instead. */
.pk-artwork-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.pk-artwork-option {
  cursor: pointer;
  border: 1.5px solid var(--espresso-15);
  border-radius:2px;
  overflow: hidden;
  background: var(--paper);
  position: relative;
  transition: border-color 0.15s;
}
.pk-artwork-option:hover { border-color: var(--aubergine); }
.pk-artwork-option.selected { border-color: var(--aubergine); }
.pk-artwork-img { aspect-ratio: 1 / 1; }
.pk-artwork-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
  color: var(--espresso);
  text-align: center;
  padding: 7px 4px;
  background: #FFFFFF;
}
.pk-artwork-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--aubergine);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
}
.pk-artwork-option.selected .pk-artwork-check { opacity: 1; }

.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; }
/* "Just add printed artwork" — 2026-09-16, a real secondary button rather
   than a text link, but an outline pill (not a second filled .btn-tomato)
   so it stays visually secondary to "Add Painting Kit" above it. */
.pk-artwork-only-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px 24px;
  background: none;
  border: 1.5px solid var(--espresso-15);
  border-radius: 100px;
  font-family: 'Archivo', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--aubergine);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pk-artwork-only-btn:hover { border-color: var(--aubergine); background: var(--espresso-08); }

/* ── EVERYTHING YOU NEED ── */
.pk-includes {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.pk-includes-img { aspect-ratio: 4 / 3.4; }
.pk-includes-headline { margin-bottom: 20px; }
.pk-includes-headline .pi-black { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 40px; color: var(--hl-accent); display: block; }
.pk-includes-headline .pi-italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 40px; color: var(--hl-serif); display: block; }
.pk-includes-list { list-style: none; }
.pk-includes-list li { padding: 13px 0; border-bottom: 0.5px solid var(--espresso-15); }
.pk-includes-list li:last-child { border-bottom: none; }
.pk-includes-name { font-size: 14px; font-weight: 600; color: var(--espresso); }
.pk-includes-note { font-size: 14px; color: var(--espresso-70); line-height: 1.6; margin-top: 16px; }

/* ── GOOD TO KNOW ACCORDION (same visual system as the FAQ page) ── */
.pk-accordion { max-width: 760px; }
.pk-faq-item { border-bottom: 0.5px solid var(--espresso-15); }
.pk-faq-item:first-child { border-top: 0.5px solid var(--espresso-15); }
.pk-faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.pk-faq-q-text {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--espresso);
  line-height: 1.4;
  transition: color 0.15s;
}
.pk-faq-question:hover .pk-faq-q-text { color: var(--aubergine); }
.pk-faq-q-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--espresso-15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--espresso-50);
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
  transition: all 0.2s;
}
.pk-faq-item.open .pk-faq-q-icon { background: var(--aubergine); border-color: var(--aubergine); color: var(--paper); transform: rotate(45deg); }
.pk-faq-answer {
  display: none;
  padding: 0 30px 22px 0;
  font-size: 16px;
  color: var(--espresso-70);
  line-height: 1.7;
  max-width: 620px;
}
.pk-faq-answer a { color: var(--tomato); text-decoration: none; }
.pk-faq-answer a:hover { text-decoration: underline; }
.pk-faq-item.open .pk-faq-answer { display: block; }

/* ── PAIR IT WITH A GATHERING (exact Browse Gatherings ready-card) ── */
.ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ready-card { display: block; text-decoration: none; color: inherit; }
.ready-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--name);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ready-arrow { color: var(--tomato); display: inline-block; transition: transform 0.2s; }
.ready-card:hover .ready-arrow { transform: translateX(4px); }
.ready-meta { font-size: 14px; color: var(--espresso-50); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.ready-img { aspect-ratio: 16 / 9; }
.ready-img img { transition: transform 0.4s ease; }
.ready-card:hover .ready-img img { transform: scale(1.03); }
.card-status { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name); display: block; margin-bottom: 8px; }

@media (max-width: 900px) {
  .prod-hero, .pk-includes { grid-template-columns: 1fr; gap: 32px; }
  .prod-tagline-italic, .prod-tagline-black { font-size: 40px; }
  .ready-grid { grid-template-columns: 1fr; gap: 28px; }
  .pk-includes-headline .pi-black, .pk-includes-headline .pi-italic { font-size: 32px; }
  .eyebrow, .widget-eyebrow, .card-status, .cart-prompt-eyebrow { font-size: 12px; }
}

/* ── 2026-10-03 refinements ── */
.pk-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name); margin-bottom: 12px; }
.pk-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pk-price-per { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--espresso-50); }
.pk-date-note { font-size: 14px; line-height: 1.55; padding: 12px 14px; border-radius: 2px; margin-top: 14px; }
.pk-date-note.warn { background: var(--mushroom, #F2E9E2); color: var(--body); }
.pk-date-note.stop { background: var(--aubergine); color: var(--paper); }
.pk-date-note.stop a { color: var(--paper); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pk-artwork-only { font-size: 13px; color: var(--espresso-70); text-align: center; margin-top: 10px; line-height: 1.5; }
.pk-artwork-only a { color: var(--name); text-decoration: underline; text-underline-offset: 3px; }
.pk-includes-for { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--name); margin-bottom: 4px; }
.pk-qty { font-weight: 700; color: var(--espresso); }
.pk-includes-list li { padding: 10px 0; }
.pk-pair-headline { margin-bottom: 28px; }
.pk-pair-headline .hl-italic, .pk-pair-headline .hl-black { display: block; font-size: 36px; }
.pk-pair-headline .hl-black { color: var(--hl-accent); }
@media (max-width: 900px) { .pk-pair-headline .hl-italic, .pk-pair-headline .hl-black { font-size: 28px; } }

/* 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 ── -->
<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="pk-kicker">The Painting Kit</p>
    <h1 class="prod-tagline">
      <span class="prod-tagline-italic">Paint something</span>
      <span class="prod-tagline-black">beautiful together.</span>
    </h1>
    <p class="prod-hero-body">Everything you need to turn the table into a painting studio. Gouache, brushes, palettes and guided artwork, all packed for your guest count.</p>

    <!-- ── PURCHASE MODULE ── -->
    <div class="build-widget" id="add">
      <p class="widget-eyebrow">Choose your artwork</p>
      <div class="pk-artwork-grid" id="artworkPills">
        <div class="pk-artwork-option selected" data-artwork="Tea in the Garden">
          <div class="img-slot pk-artwork-img has-photo">
            <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-hf2hOgf.jpg?v=1787475893" alt="Tea in the Garden artwork, floral botanical prints" style="width:100%; height:100%; object-fit:cover; display:block;">
          </div>
          <p class="pk-artwork-name">Tea in the Garden</p>
          <span class="pk-artwork-check">✓</span>
        </div>
        <!-- 2026-09-28, per Sarah: real Golden Hour artwork photo added
             (swans, butterflies, clouds, peaches), replacing the "Photo
             coming" placeholder -- same pattern as Tea in the Garden/
             Sicilian Spring's own thumbnails above. -->
        <div class="pk-artwork-option" data-artwork="Golden Hour">
          <div class="img-slot pk-artwork-img has-photo">
            <img src="/assets/golden-hour-artwork.jpg" alt="Golden Hour artwork, swans, butterflies, clouds and peaches prints" style="width:100%; height:100%; object-fit:cover; display:block;">
          </div>
          <p class="pk-artwork-name">Golden Hour</p>
          <span class="pk-artwork-check">✓</span>
        </div>
        <!-- 2026-10-02, per Sarah: Sicilian Spring artwork hidden until its spring
             release. Restore by removing these comment markers (and set
             .pk-artwork-grid back to 3 columns).
        <div class="pk-artwork-option" data-artwork="Sicilian Spring">
          <div class="img-slot pk-artwork-img has-photo">
            <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-K4UimXu.jpg?v=1787475892" alt="Sicilian Spring artwork, citrus and tile prints" style="width:100%; height:100%; object-fit:cover; display:block;">
          </div>
          <p class="pk-artwork-name">Sicilian Spring</p>
          <span class="pk-artwork-check">✓</span>
        </div>
        -->
      </div>

      <p class="widget-eyebrow">How many are painting?</p>
      <div class="pk-pill-group" id="guestPills" style="margin-bottom: 4px;">
        <button type="button" class="pk-pill selected" data-guests="6" data-price="225">6 guests</button>
        <button type="button" class="pk-pill" data-guests="12" data-price="375">12 guests</button>
        <button type="button" class="pk-pill" data-guests="18" data-price="595">18 guests</button>
      </div>

      <div class="widget-total">
        <span class="widget-total-label">Price</span>
        <span class="pk-price-wrap">
          <span class="widget-total-amount" id="pkPrice">$225</span>
          <span class="pk-price-per" id="pkPricePer">For 6 guests &middot; $37.50/person</span>
        </span>
      </div>

      <a href="#" id="pkAddBtn" class="btn-pill btn-tomato widget-cta" style="display:flex;" onclick="return addPaintingKit(event)">Add Painting Kit →</a>

      <!-- 2026-09-16: someone who already has paint/brushes/paper and just
           wants the guided reference artwork (Gathering Plan's Activity tab
           links here for exactly this) shouldn't have to buy the whole kit.
           Reuses this same widget's artwork + guest-count selection rather
           than asking again — see buyArtworkOnly() below. Was a plain text
           link; Sarah wanted it to read as a real, tappable button —
           promoted to a full-width outline pill (.pk-artwork-only-btn)
           rather than a second filled .btn-tomato, so it doesn't compete
           with "Add Painting Kit" for attention right above it. -->
      <!-- 2026-10-03, per Sarah: back to a real button under Add Painting Kit;
           quantity follows the exact guest count (from ?guests= or the pills). -->
      <button type="button" class="pk-artwork-only-btn" id="pkArtworkBtn" onclick="return buyArtworkOnly(event)">Add printed artwork only &middot; $12/person &rarr;</button>
      <p class="pk-artwork-only" id="pkArtworkNote">Already have paints and brushes? We&rsquo;ll print and mail the reference artwork.</p>
      <div class="pk-date-note" id="pkDateNote" hidden></div>
      <p class="widget-fine">No experience needed &middot; Ships before your gathering &middot; US only</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. 2026-08-20:
       gallery now swaps to a per-artwork photo set (PK_GALLERIES) when a
       different "Choose your artwork" option is picked, so this slot
       shows a placeholder if that artwork has no real photos yet. -->
  <div>
    <div class="img-slot prod-gallery-main has-photo" id="prodMainSlot" data-slot="pk-hero-main">
      <img id="prodMainImg" src="" alt="" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      <span class="img-slot-label" id="prodMainPlaceholder" style="display:none;">Photo coming<br><small>Real photos for this artwork are still in progress</small></span>
      <button type="button" class="gallery-arrow gallery-arrow-prev" id="galleryArrowPrev" 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" id="galleryArrowNext" 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>

<!-- ── EVERYTHING YOU NEED ── -->
<section class="divider-bold pk-includes">
  <div class="img-slot pk-includes-img has-photo" data-slot="pk-includes-photo">
    <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-xf8npne.jpg?v=1787475892" alt="The Painting Kit, full contents laid out" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
  </div>
  <div>
    <h2 class="pk-includes-headline">
      <span class="pi-black">Open the box.</span>
      <span class="pi-italic">Start painting.</span>
    </h2>
    <p class="pk-includes-for">Inside, for <span id="pkIncludesGuests">6 guests</span></p>
    <ul class="pk-includes-list" id="pkIncludesList"></ul>
    <p class="pk-includes-note">Everything is portioned for your guest count and ready to put straight on the table.</p>
  </div>
</section>

<!-- ── GOOD TO KNOW ── -->
<section class="divider-top">
  <span class="eyebrow">Good to know</span>
  <div class="pk-accordion" id="pkAccordion" style="margin-top: 20px;"></div>
</section>

<!-- ── PAIR IT WITH A GATHERING ── -->
<section class="divider-top" id="pair-gathering">
  <h2 class="pk-pair-headline">
    <span class="hl-italic headline-serif">Already picked your gathering?</span>
    <span class="hl-black headline-black">Add painting to the table.</span>
  </h2>
  <div class="ready-grid">
    <a class='ready-card' href='/tea-in-the-garden'>
      <span class="card-status">Pairs with the Painting Kit</span>
      <p class="ready-name">Tea in the Garden <span class="ready-arrow">→</span></p>
      <p class="ready-meta">Afternoon tea &middot; 6–12 guests</p>
      <div class="img-slot ready-img has-photo" data-slot="pk-pair-tea">
        <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 tray, teapots, tins" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
    </a>
    <a class='ready-card' href='/golden-hour'>
      <span class="card-status">Pairs with the Painting Kit</span>
      <p class="ready-name">Golden Hour <span class="ready-arrow">→</span></p>
      <p class="ready-meta">Dinner &amp; drinks &middot; 6–12 guests</p>
      <div class="img-slot ready-img has-photo" data-slot="pk-pair-golden-hour">
        <img src="https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-JguNgBO.jpg?v=1787475892" alt="Golden Hour, candlelit table, skyline view" style="width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:2px;">
      </div>
    </a>
  </div>
</section>

<!-- ── CLOSER: Action Band ── -->
<section class="closer-band">
  <h2 class="closer-headline">
    <span class="cl-italic">Ready to paint together?</span>
    <span class="cl-black">Choose your artwork and guest count.</span>
  </h2>
  <div class="closer-btns">
    <a href="#add" class="btn-pill btn-tomato">Back to the Painting Kit ↑</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>
  (function () {
    var nav = document.querySelector('nav');
    function onScroll() {
      if (window.scrollY > 24) {
        nav.classList.add('nav-scrolled');
      } else {
        nav.classList.remove('nav-scrolled');
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();

</script>

<script>
  // ── PURCHASE MODULE ──
  // Real Shopify variants for the Painting Kit (confirmed via the Shopify
  // connector in an earlier session, same product used in the Tea in the
  // Garden widget's Activity add-on). No 1-person tier, per Sarah's call.
  var SHOP_DOMAIN = 'gathering-hour.myshopify.com';
  var PK_VARIANTS = {
    6:  { id: '48229852545178', price: 225 },
    12: { id: '48229852577946', price: 375 },
    18: { id: '50529536966810', price: 595 }
  };

  var selectedGuests = 6;
  var selectedArtwork = 'Tea in the Garden';

  // ── 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 6-person / Tea in the Garden combo; doesn't
  // refire if the guest count or artwork pills are changed afterward.
  if (window.klaviyo) {
    klaviyo.track('Viewed Product', {
      ProductName: 'The Painting Kit',
      ProductID: PK_VARIANTS[6].id,
      SKU: 'AK-PAINT-6',
      Categories: ['Activity Kits'],
      ImageURL: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-xf8npne.jpg?v=1787475892',
      URL: window.location.href,
      Brand: 'Gathering Hour',
      Price: PK_VARIANTS[6].price,
      CompareAtPrice: PK_VARIANTS[6].price
    });
  }

  document.querySelectorAll('#guestPills .pk-pill').forEach(function (btn) {
    btn.addEventListener('click', function () {
      document.querySelectorAll('#guestPills .pk-pill').forEach(function (b) { b.classList.remove('selected'); });
      btn.classList.add('selected');
      selectedGuests = parseInt(btn.dataset.guests, 10);
      artworkPeople = null;
      updatePkGuests();
    });
  });

  // 2026-10-03: price context + guest-count-aware contents list. Quantities
  // match the "Full kit contents" answer in Good to know below.
  var PK_CONTENTS = [
    { name: '18-color gouache paint sets', per: 1 / 3 },
    { name: 'Fine and medium paint brushes', per: 3 },
    { name: 'Ceramic paint palettes', per: 1 },
    { name: 'Acrylic water cups', per: 1 },
    { name: 'Envelopes of original line drawings on watercolor paper', per: 1 },
    { name: 'A5 oak frames', per: 1 },
    { name: 'Clear table protector', fixed: 1 },
    { name: 'Set of inspiration prints', fixed: 1 }
  ];
  // Printed artwork is priced per person, so it can follow an exact headcount
  // (e.g. 14 from the Gathering Plan's ?guests=), while the kit comes in 6/12/18.
  var artworkPeople = null;
  function artworkCount() { return artworkPeople || selectedGuests; }
  function updateArtworkBtn() {
    var n = artworkCount();
    document.getElementById('pkArtworkBtn').innerHTML = 'Add printed artwork only &middot; ' + n + ' &times; $12 = $' + (n * 12) + ' &rarr;';
  }
  function updatePkGuests() {
    var price = PK_VARIANTS[selectedGuests].price;
    var per = (price / selectedGuests).toFixed(2).replace(/\.00$/, '');
    document.getElementById('pkPrice').textContent = '$' + price;
    document.getElementById('pkPricePer').textContent = 'For ' + selectedGuests + ' guests \u00b7 $' + per + '/person';
    document.getElementById('pkIncludesGuests').textContent = selectedGuests + ' guests';
    document.getElementById('pkIncludesList').innerHTML = PK_CONTENTS.map(function (it) {
      var q = it.fixed ? it.fixed : Math.ceil(it.per * selectedGuests);
      return '<li><p class="pk-includes-name"><span class="pk-qty">' + q + ' &times;</span> ' + it.name + '</p></li>';
    }).join('');
    updateArtworkBtn();
  }
  updatePkGuests();

  document.querySelectorAll('#artworkPills .pk-artwork-option').forEach(function (opt) {
    opt.addEventListener('click', function () {
      document.querySelectorAll('#artworkPills .pk-artwork-option').forEach(function (o) { o.classList.remove('selected'); });
      opt.classList.add('selected');
      selectedArtwork = opt.dataset.artwork;
      setGalleryForArtwork(selectedArtwork);
    });
  });

  function addPaintingKit(e) {
    e.preventDefault();
    var variant = PK_VARIANTS[selectedGuests];
    // Artwork choice isn't a separate Shopify variant, it's the same
    // physical product regardless of which guided artwork ships, so it
    // gets passed as an order attribute instead (shows up in the order's
    // Notes in Shopify admin), same pattern as the date/guest count on
    // the Tea in the Garden page.
    var params = 'attributes[Artwork]=' + encodeURIComponent(selectedArtwork);
    var url = 'https://' + SHOP_DOMAIN + '/cart/' + variant.id + ':1?' + params;
    // Same-tab navigation (not a new tab), plus a quick on-page prompt
    // asking if they'd also like a gathering before heading to checkout,
    // instead of silently opening Shopify's bare cart page.
    openCartPrompt(url);
    return false;
  }

  // "Reference Artwork Set — Printed & Mailed" — the $12/person, print-only
  // product (separate Shopify listing, real variant per artwork set:
  // confirmed via the Shopify connector 2026-09-16). Unlike the Painting
  // Kit, artwork choice here IS the variant, not an order attribute — each
  // set is its own physical mailer. Priced per person, so quantity follows
  // this widget's own guest-count selection, same as the Painting Kit does.
  // Sarah: never link out to a bare Shopify product page, only straight to
  // a pre-filled cart — same cart-permalink + openCartPrompt() pattern as
  // addPaintingKit() above, just a different product.
  var ARTWORK_SET_VARIANTS = {
    'Tea in the Garden': '49221232591002',
    'Golden Hour': '49221232623770',
    'Sicilian Spring': '49221232656538'
  };
  function buyArtworkOnly(e) {
    e.preventDefault();
    var variantId = ARTWORK_SET_VARIANTS[selectedArtwork] || ARTWORK_SET_VARIANTS['Tea in the Garden'];
    var url = 'https://' + SHOP_DOMAIN + '/cart/' + variantId + ':' + artworkCount();
    openCartPrompt(url, 'Printed artwork added');
    return false;
  }

  function openCartPrompt(cartUrl, label) {
    // 2026-10-03, per Sarah: no more "Add a gathering to go with it?" pop-up
    // between Add and checkout. It sent buyers away to more decisions (and
    // Gathering Plan hosts already have a gathering). Straight to checkout;
    // the "Pairs with the Painting Kit" section on the page covers pairing.
    window.location.href = cartUrl;
  }
  function closeCartPrompt() {
    document.getElementById('cartPromptModal').classList.remove('open');
  }
  function cartPromptBrowseGatherings() {
    closeCartPrompt();
    document.getElementById('pair-gathering').scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  function cartPromptContinue() {
    window.location.href = document.getElementById('cartPromptUrl').value;
  }

  // ── 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).
  //
  // 2026-08-20: the gallery is now keyed per artwork (PK_GALLERIES),
  // since the kit itself looks completely different depending which
  // guided artwork is selected above. Each artwork's own "Choose your
  // artwork" thumbnail photo is included as the first slide of its own
  // gallery, per Sarah's note, so it isn't just sitting in the picker
  // unused. Sicilian Spring currently only HAS that one photo (no
  // additional in-progress/detail shots yet, unlike Tea in the Garden's
  // four), and Golden Hour has no real photography at all yet, so its
  // gallery is an empty array and the main slot falls back to a "Photo
  // coming" placeholder (#prodMainPlaceholder) instead of showing a
  // broken or borrowed image. Flag to Sarah: once Golden Hour and
  // Sicilian Spring get their own in-progress/detail shots (matching
  // what exists for Tea in the Garden), just add them to PK_GALLERIES
  // below and the picker will start showing them automatically.
  var PK_GALLERIES = {
    'Tea in the Garden': [
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-hf2hOgf.jpg?v=1787475893', alt: 'Tea in the Garden artwork, floral botanical prints' },
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-gng8wXr.jpg?v=1787475892', alt: 'The Painting Kit, Tea in the Garden artwork' },
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-0GMeFN6.jpg?v=1787475892', alt: 'The Painting Kit, Tea in the Garden artwork detail' },
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-kXeME5Y.jpg?v=1787475893', alt: 'The Painting Kit, Tea in the Garden artwork detail' },
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-1I2Fh8Q.jpg?v=1787475893', alt: 'The Painting Kit, Tea in the Garden artwork detail' }
    ],
    'Sicilian Spring': [
      { src: 'https://cdn.shopify.com/s/files/1/0749/3504/2202/files/gathering-hour-K4UimXu.jpg?v=1787475892', alt: 'Sicilian Spring artwork, citrus and tile prints' }
    ],
    // 2026-09-28, per Sarah: real Golden Hour artwork photo added, same
    // "picker thumbnail is also the gallery's first slide" pattern as
    // Tea in the Garden/Sicilian Spring above -- no longer an empty
    // array, so the main slot now shows this instead of falling back to
    // the "Photo coming" placeholder.
    'Golden Hour': [
      { src: '/assets/golden-hour-artwork.jpg', alt: 'Golden Hour artwork, swans, butterflies, clouds and peaches prints' }
    ]
  };

  var galleryImages = PK_GALLERIES[selectedArtwork] || [];
  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 a product page on mobile landed
  // scrolled to the bottom instead of the top. Same root cause as
  // golden-hour.html/tea-in-the-garden.html's identical gallery pattern:
  // scrollIntoView() firing on the page-load call to setGalleryIndex(0)
  // before mobile Safari has finished its first layout pass. skipScroll
  // flag added so only user-triggered calls (thumb clicks, arrows, and
  // switching "Choose your artwork") scroll -- the true load-time call
  // further down passes true and skips it.
  function setGalleryIndex(i, skipScroll) {
    var mainImg = document.getElementById('prodMainImg');
    var mainSlot = document.getElementById('prodMainSlot');
    var placeholder = document.getElementById('prodMainPlaceholder');
    var prevArrow = document.getElementById('galleryArrowPrev');
    var nextArrow = document.getElementById('galleryArrowNext');

    if (galleryImages.length === 0) {
      galleryIndex = 0;
      mainImg.style.display = 'none';
      mainImg.src = '';
      mainImg.alt = '';
      mainSlot.classList.remove('has-photo');
      placeholder.style.display = 'block';
      prevArrow.style.display = 'none';
      nextArrow.style.display = 'none';
      renderGalleryThumbs();
      return;
    }

    galleryIndex = (i + galleryImages.length) % galleryImages.length;
    mainImg.style.display = 'block';
    mainSlot.classList.add('has-photo');
    placeholder.style.display = 'none';
    var showArrows = galleryImages.length > 1 ? 'flex' : 'none';
    prevArrow.style.display = showArrows;
    nextArrow.style.display = showArrows;
    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); }

  // Called when a different "Choose your artwork" option is picked, so
  // the slideshow always matches what's actually selected.
  function setGalleryForArtwork(artwork) {
    galleryImages = PK_GALLERIES[artwork] || [];
    setGalleryIndex(0);
  }

  setGalleryIndex(0, true);

  // 2026-09-23, per Sarah: supports deep-linking straight to a specific
  // artwork tile from elsewhere in the app -- e.g. a Gathering Plan Supplies
  // checklist item for "just the printed reference artwork" -- via
  // ?artwork=Golden+Hour#add. Reads the URL param once on load and
  // pre-selects the matching tile/gallery, same end state the click
  // handler above sets. Silently does nothing if the param is missing or
  // doesn't match a real tile name (data-artwork is the source of truth,
  // not a hardcoded list here, so this stays correct if artworks are
  // added/renamed later).
  // ?guests=N (from the Gathering Plan): pick the smallest kit that fits
  // (6/12/18) and use the exact N for printed artwork.
  (function selectGuestsFromUrl() {
    var n = parseInt(new URLSearchParams(window.location.search).get('guests'), 10);
    if (!n || n < 1) return;
    var size = n <= 6 ? 6 : (n <= 12 ? 12 : 18);
    document.querySelectorAll('#guestPills .pk-pill').forEach(function (b) {
      b.classList.toggle('selected', parseInt(b.dataset.guests, 10) === size);
    });
    selectedGuests = size;
    artworkPeople = n;
    updatePkGuests();
  })();

  // ?date= (from the Gathering Plan, e.g. "Saturday, October 31st"): same
  // 7-day lead time as the Host Box add-on. Under 7 days no checkout (email
  // us); 7-9 days a warning. Public visitors (no date) see no gate.
  (function leadTimeFromUrl() {
    var dateStr = new URLSearchParams(window.location.search).get('date');
    if (!dateStr) return;
    var months = {january:0,february:1,march:2,april:3,may:4,june:5,july:6,august:7,september:8,october:9,november:10,december:11,jan:0,feb:1,mar:2,apr:3,jun:5,jul:6,aug:7,sep:8,oct:9,nov:10,dec:11};
    var month, day, year = new Date().getFullYear();
    dateStr.toLowerCase().replace(/[^a-z0-9 ]/g, ' ').split(/\s+/).forEach(function (p) {
      var n = parseInt(p.replace(/(st|nd|rd|th)$/, ''), 10);
      if (months[p] !== undefined) month = months[p];
      else if (!isNaN(n) && n >= 1 && n <= 31) day = n;
      else if (!isNaN(n) && n > 31) year = n;
    });
    if (month === undefined || !day) return;
    var now = new Date(); now.setHours(0, 0, 0, 0);
    var days = Math.round((new Date(year, month, day) - now) / 86400000);
    if (days < 0) days = Math.round((new Date(year + 1, month, day) - now) / 86400000);
    var note = document.getElementById('pkDateNote');
    if (days < 7) {
      document.getElementById('pkAddBtn').style.display = 'none';
      document.getElementById('pkArtworkBtn').style.display = 'none';
      document.getElementById('pkArtworkNote').style.display = 'none';
      note.className = 'pk-date-note stop';
      note.innerHTML = 'Your gathering is less than a week away, which is too soon to order online. <a href="mailto:hello@thegatheringhour.com?subject=' +
        encodeURIComponent('Painting Kit for ' + dateStr) + '">Email us</a> and we&rsquo;ll see what&rsquo;s still possible.';
      note.hidden = false;
    } else if (days < 10) {
      note.className = 'pk-date-note warn';
      note.textContent = 'Your gathering is less than 10 days away, so this is cutting it close. We\u2019ll do our best to have it there in time.';
      note.hidden = false;
    }
  })();

  (function selectArtworkFromUrl() {
    var artworkParam = new URLSearchParams(window.location.search).get('artwork');
    if (!artworkParam) return;
    var opts = document.querySelectorAll('#artworkPills .pk-artwork-option');
    var match = null;
    opts.forEach(function (o) { if (o.dataset.artwork === artworkParam) match = o; });
    if (!match) return;
    opts.forEach(function (o) { o.classList.remove('selected'); });
    match.classList.add('selected');
    selectedArtwork = artworkParam;
    setGalleryForArtwork(selectedArtwork);
  })();
</script>

<script>
  // ── GOOD TO KNOW ACCORDION ── (same visual system and behavior as the
  // FAQ page: one item open at a time, no numbering)
  // 2026-10-03, per Sarah: reordered by purchase objection (experience
  // first, open by default), then logistics.
  var pkFaqs = [
    {
      q: 'No experience needed',
      a: 'Absolutely none. The artwork is designed for beginners, and each kit includes guided references to paint from. Everyone can choose the artwork they like.'
    },
    {
      q: 'Shipping & delivery',
      a: 'Painting Kits ship 3 to 5 days before your gathering date. US shipping only at launch, tracking is sent by email as soon as it\'s on the way.'
    },
    {
      q: 'Full kit contents',
      a: 'An 18-color gouache paint set (one box per 3 guests), fine and medium paint brushes (3 per guest), a ceramic paint palette and an acrylic water cup for each guest, a clear table protector, an A5 oak frame for each guest, a set of inspiration prints, and one envelope of original line drawings on watercolor paper per guest.'
    },
    {
      q: 'Returns & damaged items',
      a: 'If your kit arrives damaged or something\'s missing, contact us within 48 hours of delivery and we\'ll make it right.'
    },
    {
      q: 'Questions',
      a: 'Read the <a href="/faq.html">FAQ</a> or <a href="/contact.html">get in touch</a>, we typically reply within 24 hours.'
    }
  ];

  var pkAccordionEl = document.getElementById('pkAccordion');
  pkFaqs.forEach(function (item, i) {
    var el = document.createElement('div');
    el.className = 'pk-faq-item' + (i === 0 ? ' open' : '');
    el.innerHTML =
      '<button type="button" class="pk-faq-question" onclick="togglePkFaq(this)">' +
        '<span class="pk-faq-q-text">' + item.q + '</span>' +
        '<span class="pk-faq-q-icon">+</span>' +
      '</button>' +
      '<div class="pk-faq-answer">' + item.a + '</div>';
    pkAccordionEl.appendChild(el);
  });

  function togglePkFaq(btn) {
    var item = btn.closest('.pk-faq-item');
    var isOpen = item.classList.contains('open');
    document.querySelectorAll('.pk-faq-item').forEach(function (i) { i.classList.remove('open'); });
    if (!isOpen) item.classList.add('open');
  }
</script>

<!-- ── CART PROMPT MODAL ── (shown right after clicking Add, before
     leaving the page for Shopify's cart, same overlay/modal pattern as
     the waitlist modal used elsewhere on the site) -->
<input type="hidden" id="cartPromptUrl">
<div class="cart-prompt-overlay" id="cartPromptModal" onclick="if(event.target===this) closeCartPrompt();">
  <div class="cart-prompt-box">
    <!-- 2026-09-16: Sarah — "there's no way to click out of this box if I
         want to add [more]." Both existing buttons navigate away (to
         gatherings.html or straight to cart); neither lets someone stay on
         this page to keep shopping (e.g. the "just want the artwork" link
         above). Added the same close affordance the waitlist modal already
         uses elsewhere: an × button plus click-outside-to-dismiss (see the
         overlay's onclick above), so closing and doing nothing is an
         option, not just the two forced paths. -->
    <button type="button" class="modal-close" onclick="closeCartPrompt()" aria-label="Close">×</button>
    <p class="cart-prompt-eyebrow" id="cartPromptEyebrow">Painting Kit added</p>
    <h3 class="cart-prompt-headline">Add a gathering to go with it?</h3>
    <p class="cart-prompt-body">Painting Kits pair well with a Gathering Plan already stocked with everything else for the table.</p>
    <div class="cart-prompt-btns">
      <button type="button" class="btn-pill btn-tomato" onclick="cartPromptBrowseGatherings()">Choose a Gathering →</button>
      <button type="button" class="cart-prompt-skip" onclick="cartPromptContinue()">No thanks, continue to cart →</button>
    </div>
  </div>
</div>

<style>
.cart-prompt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42,27,21,0.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cart-prompt-overlay.open { display: flex; }
.cart-prompt-box {
  position: relative;
  background: var(--paper);
  border-radius: 8px;
  padding: 36px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(42,27,21,0.25);
}
.cart-prompt-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name); margin-bottom: 12px; }
.cart-prompt-headline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 20px; color: var(--aubergine); margin-bottom: 12px; line-height: 1.2; }
.cart-prompt-body { font-size: 16px; color: var(--espresso-70); line-height: 1.6; margin-bottom: 24px; }
.cart-prompt-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.cart-prompt-btns .btn-pill { width: 100%; }
.cart-prompt-skip { background: none; border: none; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--espresso-50); cursor: pointer; text-decoration: underline; }
.cart-prompt-skip:hover { color: var(--aubergine); }
</style>


<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>