/* Crazy Alpaca shared detail-page system - consolidation pass
   Workshop + Party use the same calmer visual language.
   Global navbar/footer are intentionally owned by style.css only. */

:root {
  --detail-ink: #7d1795;
  --detail-copy: #68495b;
  --detail-deep: #4b2f43;
  --detail-purple: #8a13ad;
  --detail-pink: #ff78b8;
  --detail-coral: #ee765f;
  --detail-teal: #25aab2;
  --detail-yellow: #ffd55e;
  --detail-lilac: #d7c2f3;
  --detail-paper: #fffaf5;
  --detail-note: #fff7c8;
  --detail-line: rgba(84, 48, 83, .28);
  --detail-shadow-pink: rgba(244, 155, 199, .28);
  --detail-shadow-teal: rgba(37, 170, 178, .25);
  --detail-gradient: linear-gradient(110deg, #ff8fbd 0%, #ffd86b 22%, #6ed7d0 45%, #c9b8f4 68%, #ff9f7f 88%, #ff8fbd 112%);
}

.detail-page {
  color: var(--detail-copy);
  background: #fffaf6;
}

.detail-page main {
  overflow: clip;
}

/* Detail pages are immediately readable: no reveal/scroll entrance layer. */
.detail-page .reveal,
.detail-page .reveal.is-visible,
.detail-page [data-ca-settle],
.detail-page [data-ca-settle].is-settled {
  opacity: 1 !important;
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* ----------------------------- states ----------------------------- */
.workshop-detail-loading,
.workshop-detail-error,
.party-state {
  width: min(calc(100% - 36px), 760px);
  margin: 90px auto 70px;
  padding: 28px;
  text-align: center;
  border: 0;
  border-radius: 24px 29px 23px 27px;
  background: linear-gradient(130deg, #fff4c8, #fff7f2 52%, #e0f6f2);
  box-shadow: 8px 9px 0 rgba(255, 150, 194, .20);
}

/* ----------------------------- shared hero ----------------------------- */
.workshop-page .workshop-detail-main,
.party-page .party-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 58px;
}

.workshop-page .workshop-detail-hero,
.party-page .party-hero {
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
  padding: 72px 0 66px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: center;
  gap: clamp(34px, 5vw, 66px);
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workshop-page .workshop-detail-copy,
.party-page .party-hero__copy {
  min-width: 0;
}

.workshop-page .workshop-detail-copy h1,
.party-page .party-hero__copy h1 {
  max-width: 760px;
  margin: 10px 0 18px;
  color: var(--detail-ink) !important;
  font-family: "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(3rem, 5.6vw, 5.7rem) !important;
  font-weight: 900;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
  transform: none !important;
  animation: none !important;
}

.workshop-page .workshop-detail-copy > p:not(.eyebrow),
.party-page .party-hero__lead {
  max-width: 690px;
  margin: 0;
  color: var(--detail-copy) !important;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.62;
}

/* Quiet living pill component used for hero chips + section eyebrows. */
@keyframes caDetailPillLive {
  0%, 100% { background-position: 0% 50%; transform: translate3d(0, 0, 0) rotate(var(--pill-r, -.45deg)); }
  50% { background-position: 100% 50%; transform: translate3d(0, -1.5px, 0) rotate(calc(var(--pill-r, -.45deg) * -0.55)); }
}

.detail-page main .eyebrow,
.workshop-page .workshop-detail-meta span,
.party-page .party-hero__chips span,
.party-page .party-occasion-row span {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border: 1px solid rgba(76, 48, 75, .48) !important;
  border-radius: 999px 900px 999px 930px !important;
  color: #633d5b !important;
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  box-shadow: 3px 4px 0 rgba(37, 170, 178, .16) !important;
  font-size: .73rem !important;
  font-weight: 900 !important;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
  --pill-r: -.45deg;
  animation: caDetailPillLive var(--pill-speed, 17s) ease-in-out var(--pill-delay, -4s) infinite !important;
}

.detail-page main .eyebrow:nth-of-type(2),
.workshop-page .workshop-detail-meta span:nth-child(2n),
.party-page .party-hero__chips span:nth-child(2n),
.party-page .party-occasion-row span:nth-child(2n) {
  --pill-r: .45deg;
  --pill-speed: 20.5s;
  --pill-delay: -9s;
}

.workshop-page .workshop-detail-meta span:nth-child(3n),
.party-page .party-hero__chips span:nth-child(3n),
.party-page .party-occasion-row span:nth-child(3n) {
  --pill-r: -.18deg;
  --pill-speed: 22.8s;
  --pill-delay: -13s;
}

.workshop-page .workshop-detail-meta,
.party-page .party-hero__chips,
.party-page .party-occasion-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 24px auto 0;
}

.detail-hero-cta,
.party-page .party-hero__copy > .button {
  width: fit-content !important;
  max-width: 100%;
  margin: 24px auto 0 !important;
  display: flex !important;
}

.workshop-page .workshop-detail-copy,
.party-page .party-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ----------------------------- adaptive taped art frame ----------------------------- */
.workshop-page .workshop-detail-image-wrap,
.party-page .party-hero__visual {
  --detail-art-ratio: 4 / 3;
  position: relative;
  width: min(100%, 520px);
  max-width: 520px;
  aspect-ratio: var(--detail-art-ratio);
  min-height: 0 !important;
  justify-self: center;
  align-self: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(.35deg) !important;
}

.workshop-page .workshop-detail-image-wrap.is-portrait,
.party-page .party-hero__visual.is-portrait { max-width: 390px; }
.workshop-page .workshop-detail-image-wrap.is-square,
.party-page .party-hero__visual.is-square { max-width: 470px; }
.workshop-page .workshop-detail-image-wrap.is-landscape,
.party-page .party-hero__visual.is-landscape { max-width: 560px; }

.detail-art-frame__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(83, 51, 78, .20);
  border-radius: 30px 25px 34px 27px;
  background: rgba(255,255,255,.88);
  box-shadow: 11px 12px 0 var(--detail-shadow-teal), 0 18px 46px rgba(89, 51, 83, .08);
}

.party-page .party-hero__visual .detail-art-frame__viewport {
  box-shadow: 11px 12px 0 var(--detail-shadow-pink), 0 18px 46px rgba(89, 51, 83, .08);
}

.workshop-page .workshop-detail-image,
.party-page .party-hero__visual img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

.workshop-page .workshop-detail-tape,
.party-page .party-detail-tape {
  position: absolute;
  z-index: 8;
  top: -14px;
  left: 50%;
  width: 112px;
  height: 30px;
  display: block;
  background: rgba(255, 222, 128, .76);
  box-shadow: 0 2px 5px rgba(73, 48, 61, .07);
  transform: translateX(-50%) rotate(3deg);
  pointer-events: none;
}

.workshop-page .workshop-detail-sticker { display: none !important; }

.workshop-detail-placeholder,
.party-hero__placeholder {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--detail-purple);
  font-size: 2rem;
}

/* ----------------------------- shared content rhythm ----------------------------- */
.workshop-page .workshop-story-card,
.party-page .party-story,
.party-page .party-pricing,
.workshop-page .workshop-booking-card,
.party-page .party-booking {
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
  padding: 62px 0 72px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workshop-page .workshop-story-card,
.party-page .party-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: clamp(32px, 5vw, 58px);
  align-items: start;
}

.workshop-page .workshop-story-card {
  grid-template-areas:
    "eyebrow inclusions"
    "title inclusions"
    "copy inclusions"
    "facts inclusions";
}
.workshop-page .workshop-story-card > .eyebrow { grid-area: eyebrow; }
.workshop-page .workshop-story-card > h2 { grid-area: title; }
.workshop-page .workshop-story-card > #workshop-detail-description { grid-area: copy; }
.workshop-page .workshop-story-facts { grid-area: facts; }
.workshop-page .workshop-story-inclusions { grid-area: inclusions; }

.workshop-page .workshop-story-card > h2,
.party-page .party-story__copy h2,
.party-page .party-pricing__heading h2,
.workshop-page .workshop-booking-card > h2,
.party-page .party-booking__heading h2 {
  margin: 10px 0 16px;
  color: var(--detail-ink) !important;
  font-family: "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(2.55rem, 4.2vw, 4.6rem) !important;
  font-weight: 900;
  line-height: .98 !important;
  letter-spacing: -.045em;
  text-decoration: none !important;
  transform: none !important;
  animation: none !important;
  text-wrap: balance;
}

.detail-page main p,
.detail-page main li,
.detail-page main dd,
.detail-page main label {
  color: var(--detail-copy);
}

/* Soft taped notes - same component on both pages. */
@keyframes caDetailPaperFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.25deg); }
  50% { transform: translate3d(0, -1px, 0) rotate(.18deg); }
}

.workshop-page .workshop-story-inclusions,
.party-page .party-inclusions-card {
  position: relative;
  overflow: visible !important;
  padding: 34px 31px 28px;
  border: 1px solid rgba(82, 50, 77, .16) !important;
  border-radius: 28px 31px 26px 33px;
  background: var(--detail-note) !important;
  box-shadow: 10px 11px 0 rgba(244, 155, 199, .18) !important;
  animation: caDetailPaperFloat 15s ease-in-out -6s infinite !important;
}

.workshop-page .workshop-story-inclusions::before,
.party-page .party-inclusions-card__tape {
  position: absolute;
  z-index: 5;
  top: -15px;
  left: 50%;
  width: 100px;
  height: 28px;
  display: block;
  background: rgba(255, 222, 128, .74);
  box-shadow: 0 2px 5px rgba(73, 48, 61, .06);
  content: "";
  transform: translateX(-50%) rotate(3deg);
  pointer-events: none;
}

.workshop-page .workshop-story-inclusions > strong,
.party-page .party-inclusions-card > .eyebrow {
  margin-bottom: 13px;
  color: #148e99 !important;
}

.workshop-page #workshop-detail-inclusions,
.party-page #party-inclusions {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
}

.workshop-page #workshop-detail-inclusions li,
.party-page #party-inclusions li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 22px;
  border-bottom: 1px dashed rgba(87, 58, 79, .18);
  color: var(--detail-deep);
  font-weight: 760;
  line-height: 1.42;
}
.workshop-page #workshop-detail-inclusions li:last-child,
.party-page #party-inclusions li:last-child { border-bottom: 0; }
.workshop-page #workshop-detail-inclusions li::before,
.party-page #party-inclusions li::before {
  position: absolute;
  left: 0;
  top: 1.08em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25aab2, #ffd55e);
  box-shadow: 1px 1px 0 rgba(138,19,173,.14);
  content: "";
}

/* Workshop facts - softer than the old outlined box. */
.workshop-page .workshop-story-facts {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.workshop-page .workshop-story-facts > div {
  padding: 13px 15px;
  border: 1px solid rgba(82,50,77,.13);
  border-radius: 18px 16px 20px 17px;
  background: rgba(255,255,255,.76);
  box-shadow: 4px 5px 0 rgba(37,170,178,.10);
}
.workshop-page .workshop-story-facts dt {
  color: #8a13ad;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.workshop-page .workshop-story-facts dd { margin: 3px 0 0; }

/* ----------------------------- party pricing ----------------------------- */
.party-page .party-pricing__heading {
  max-width: 850px;
  margin: 0 auto 34px;
  text-align: center;
}
.party-page .party-pricing__heading .eyebrow { margin-inline: auto; }
.party-page .party-pricing__heading > p:not(.eyebrow) { max-width: 720px; margin-inline: auto; }

.party-page .party-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.party-page .party-band {
  --paper-r: -.35deg;
  padding: 27px 25px;
  border: 1px solid rgba(82, 50, 77, .15) !important;
  border-radius: 24px 20px 26px 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,245,250,.92)) !important;
  box-shadow: 7px 8px 0 rgba(244,155,199,.15) !important;
  transform: rotate(var(--paper-r)) !important;
  animation: caDetailPaperFloat 17s ease-in-out -8s infinite !important;
}
.party-page .party-band:nth-child(2) { --paper-r: .3deg; animation-delay: -12s !important; box-shadow: 7px 8px 0 rgba(37,170,178,.13) !important; }
.party-page .party-band:nth-child(3) { --paper-r: -.15deg; animation-delay: -4s !important; box-shadow: 7px 8px 0 rgba(255,213,94,.18) !important; }
.party-page .party-band > span { color: var(--detail-deep); font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.party-page .party-band h3 { margin: 13px 0 10px; color: var(--detail-ink); font-size: 1.6rem; }
.party-page .party-band > strong { color: var(--detail-deep); font-size: 1.22rem; }
.party-page .party-band p { margin: 12px 0 0; line-height: 1.48; }

/* ----------------------------- booking sections ----------------------------- */
.workshop-page .workshop-booking-card > .eyebrow,
.party-page .party-booking__heading > .eyebrow {
  margin-inline: auto;
}
.workshop-page .workshop-booking-card > h2,
.workshop-page .workshop-booking-intro,
.party-page .party-booking__heading {
  text-align: center;
}
.workshop-page .workshop-booking-intro,
.party-page .party-booking__heading > p:not(.eyebrow) {
  max-width: 720px;
  margin-inline: auto;
}

.workshop-page .workshop-booking-steps {
  max-width: 760px;
  margin: 24px auto;
}

.workshop-page .workshop-session-list,
.party-page .party-band-grid {
  margin-top: 26px;
}

.workshop-page .workshop-session-option__content {
  border: 1px solid rgba(82,50,77,.14) !important;
  border-radius: 19px 16px 21px 17px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 4px 5px 0 rgba(37,170,178,.11) !important;
}

.workshop-page .workshop-checkout-grid,
.party-page .party-booking-desk {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr);
  gap: 24px;
  align-items: start;
}

.workshop-page .workshop-booking-form,
.workshop-page .square-payment-panel,
.party-page .party-booking-form-wrap,
.party-page .party-payment-panel {
  padding: 25px;
  border: 1px solid rgba(82,50,77,.16) !important;
  border-radius: 25px 22px 27px 23px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 7px 8px 0 rgba(37,170,178,.12) !important;
  transform: none !important;
}

.party-page .party-payment-panel { position: sticky; top: 104px; }

.detail-page main :is(input, select, textarea) {
  width: 100%;
  border: 1.5px solid rgba(82,50,77,.25) !important;
  border-radius: 14px !important;
  color: var(--detail-deep);
  background: #fffdfb;
}
.detail-page main :is(input, select, textarea):focus {
  border-color: var(--detail-purple) !important;
  outline: 3px solid rgba(138,19,173,.10) !important;
  outline-offset: 1px;
}

/* Shared primary detail CTA: colourful, stable, calmer than Home. */
.detail-page main .button--primary {
  color: #fff !important;
  border: 1.5px solid rgba(65,38,62,.72) !important;
  border-radius: 17px 15px 19px 16px !important;
  background-image: linear-gradient(105deg, #8a13ad 0%, #d63caa 27%, #25aab2 58%, #ffd55e 82%, #ef7e70 100%) !important;
  background-size: 260% 100% !important;
  box-shadow: 6px 7px 0 rgba(244,155,199,.22) !important;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
  animation: caGradientDrift 18s ease-in-out -7s infinite !important;
  transform: rotate(-.25deg) !important;
  transition: filter .16s ease, scale .12s ease !important;
}
.detail-page main .button--primary:is(:hover, :focus-visible) { color: #fff !important; filter: saturate(1.06) brightness(1.025); }
.detail-page main .button--primary:active { scale: .985; }

/* Square is deliberately simple and trustworthy. */
.square-trust-panel {
  margin-top: 16px;
  padding-top: 15px;
  display: grid;
  justify-items: start;
  gap: 7px;
  border-top: 1px solid rgba(82,50,77,.12);
  color: #6c5a68;
  font-size: .74rem;
  line-height: 1.45;
}
.square-wordmark-link { color: inherit; text-decoration: none; }
.square-wordmark {
  display: inline-block;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.square-trust-panel p { margin: 0; }
.square-trust-panel__link { color: var(--detail-purple); font-weight: 850; text-decoration: none; }
.square-trust-panel__link:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------- compact 26+ note ----------------------------- */
.party-page .party-contact-strip {
  width: min(calc(100% - 40px), 410px) !important;
  max-width: 410px !important;
  margin: 6px auto 76px !important;
  padding: 20px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  border: 1px solid rgba(82,50,77,.14) !important;
  border-radius: 23px 20px 25px 22px !important;
  background: linear-gradient(145deg, #fff6c9, #fffaf2) !important;
  color: var(--detail-deep) !important;
  box-shadow: 7px 8px 0 rgba(244,155,199,.15) !important;
  text-align: center;
}
.party-page .party-contact-strip__copy { display: grid; gap: 3px; justify-items: center; }
.party-page .party-contact-strip__copy strong { color: var(--detail-deep); font-size: 1rem; }
.party-page .party-contact-strip__copy span { color: var(--detail-copy); font-size: .87rem; }
.party-page .party-contact-strip .button { margin: 2px auto 0 !important; }

/* ----------------------------- loaded image fade only ----------------------------- */
.detail-page main img.ca-image-pending { opacity: 0; transition: opacity .22s ease !important; }
.detail-page main img.ca-image-pending.is-loaded { opacity: 1; }

/* ----------------------------- mobile ----------------------------- */
@media (max-width: 900px) {
  .workshop-page .workshop-detail-hero,
  .party-page .party-hero,
  .workshop-page .workshop-story-card,
  .party-page .party-story,
  .workshop-page .workshop-checkout-grid,
  .party-page .party-booking-desk {
    grid-template-columns: 1fr;
  }

  .workshop-page .workshop-detail-hero,
  .party-page .party-hero { padding-top: 52px; gap: 38px; }
  .workshop-page .workshop-detail-copy,
  .party-page .party-hero__copy { align-items: center; text-align: center; }
  .workshop-page .workshop-detail-copy h1,
  .party-page .party-hero__copy h1 { max-width: 760px; }
  .workshop-page .workshop-detail-copy > p:not(.eyebrow),
  .party-page .party-hero__lead { margin-inline: auto; }
  .workshop-page .workshop-detail-image-wrap,
  .party-page .party-hero__visual { order: 2; }

  .workshop-page .workshop-story-card { grid-template-areas: "eyebrow" "title" "copy" "facts" "inclusions"; }
  .party-page .party-story { gap: 34px; }
  .workshop-page .workshop-story-inclusions,
  .party-page .party-inclusions-card { margin-top: 22px; }
  .party-page .party-payment-panel { position: static; }
  .party-page .party-band-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}

@media (max-width: 620px) {
  .workshop-page .workshop-detail-hero,
  .party-page .party-hero,
  .workshop-page .workshop-story-card,
  .party-page .party-story,
  .party-page .party-pricing,
  .workshop-page .workshop-booking-card,
  .party-page .party-booking {
    width: min(calc(100% - 28px), 1180px);
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .workshop-page .workshop-detail-copy h1,
  .party-page .party-hero__copy h1 {
    font-size: clamp(2.65rem, 12.7vw, 4.2rem) !important;
    line-height: .96 !important;
  }

  .workshop-page .workshop-story-card > h2,
  .party-page .party-story__copy h2,
  .party-page .party-pricing__heading h2,
  .workshop-page .workshop-booking-card > h2,
  .party-page .party-booking__heading h2 {
    font-size: clamp(2.15rem, 10vw, 3.4rem) !important;
  }

  .detail-page main .eyebrow { margin-inline: auto; }
  .workshop-page .workshop-detail-meta,
  .party-page .party-hero__chips,
  .party-page .party-occasion-row { justify-content: center; }

  .workshop-page .workshop-detail-image-wrap.is-portrait,
  .party-page .party-hero__visual.is-portrait { max-width: 330px; }
  .workshop-page .workshop-detail-image-wrap.is-square,
  .party-page .party-hero__visual.is-square { max-width: 390px; }
  .workshop-page .workshop-detail-image-wrap.is-landscape,
  .party-page .party-hero__visual.is-landscape { max-width: 100%; }

  .workshop-page .workshop-story-card > .eyebrow,
  .workshop-page .workshop-story-card > h2,
  .workshop-page .workshop-story-card > #workshop-detail-description,
  .party-page .party-story__copy { text-align: center; }

  .workshop-page .workshop-story-facts { grid-template-columns: 1fr; }
  .workshop-page .workshop-story-inclusions,
  .party-page .party-inclusions-card { padding: 31px 22px 24px; }

  .party-page .party-band { transform: none !important; animation-duration: 19s !important; }
  .workshop-page .workshop-booking-form,
  .workshop-page .square-payment-panel,
  .party-page .party-booking-form-wrap,
  .party-page .party-payment-panel { padding: 19px; }

  .party-page .party-contact-strip { width: min(calc(100% - 30px), 390px) !important; margin-bottom: 52px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-page main .eyebrow,
  .workshop-page .workshop-detail-meta span,
  .party-page .party-hero__chips span,
  .party-page .party-occasion-row span,
  .workshop-page .workshop-story-inclusions,
  .party-page .party-inclusions-card,
  .party-page .party-band,
  .detail-page main .button--primary {
    animation: none !important;
    transform: none !important;
    background-position: 50% 50% !important;
  }
}

/* ----------------------------- form/detail utilities ----------------------------- */
.workshop-booking-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.workshop-booking-steps span {
  min-height: 30px;
  padding: 5px 10px 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  color: #6a5262;
  background: rgba(138,19,173,.06);
  font-size: .72rem;
  font-weight: 800;
}
.workshop-booking-steps b {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--detail-purple);
  font-size: .62rem;
}

.workshop-session-option { display: block; margin-bottom: 9px; }
.workshop-session-option input { position: absolute; opacity: 0; pointer-events: none; }
.workshop-session-option__content {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.workshop-session-option input:checked + .workshop-session-option__content {
  border-color: rgba(138,19,173,.55) !important;
  background: linear-gradient(110deg, rgba(255,238,246,.9), rgba(235,249,247,.9)) !important;
  box-shadow: 0 0 0 3px rgba(138,19,173,.08), 4px 5px 0 rgba(37,170,178,.12) !important;
}
.workshop-session-option__content small { color: #796575; }
.workshop-session-availability { color: #148e99; font-weight: 850; }
.workshop-session-option.is-closed { opacity: .62; }

.workshop-booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.workshop-booking-field { display: grid; gap: 6px; }
.workshop-booking-field--wide,
.booking-terms-check,
.workshop-booking-submit,
.workshop-booking-status { grid-column: 1 / -1; }
.workshop-booking-field label,
.party-fields label { font-size: .8rem; font-weight: 850; }
.workshop-booking-field input,
.workshop-booking-field select,
.party-step select,
.party-fields input { min-height: 46px; padding: 9px 11px; font: inherit; }
.workshop-booking-total {
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 14px;
  background: linear-gradient(120deg, #fff3c4, #eef9f7);
}
.workshop-booking-total strong { color: var(--detail-ink); }
.booking-terms-check,
.party-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 12px 13px;
  border-radius: 14px;
  background: #fff7c9;
  font-size: .82rem;
  line-height: 1.45;
}
.booking-terms-check input,
.party-terms-check input { width: auto !important; margin-top: 3px; flex: 0 0 auto; }
.booking-terms-check a,
.party-terms-check a { color: var(--detail-purple); font-weight: 850; }
.workshop-booking-closed,
.workshop-booking-success,
.party-no-times,
.party-success,
.party-payment-placeholder {
  padding: 16px 17px;
  border: 1px solid rgba(82,50,77,.13);
  border-radius: 16px 14px 18px 15px;
  background: linear-gradient(145deg, #fff7c9, #fffaf0);
}
.workshop-booking-success,
.party-success { margin-top: 24px; text-align: center; background: linear-gradient(120deg,#f7d9e8,#fff2bd,#d7f3ef); }
.workshop-booking-status,
.party-payment-status { min-height: 22px; margin: 10px 0 0; font-size: .82rem; }

.square-payment-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.square-payment-panel__heading h3,
.party-payment-panel h3 { margin: 5px 0 8px; color: var(--detail-ink); font-size: 1.9rem; }
.square-payment-panel__heading > strong { color: var(--detail-ink); }
.square-payment-hold { margin: 7px 0 10px; font-size: .78rem; line-height: 1.45; }
.square-card-container { min-height: 72px; }
.square-payment-panel .button,
.party-payment-panel .button { width: 100%; justify-content: center; margin-top: 12px; }

.party-step { padding: 18px 0; border-bottom: 1px dashed rgba(82,50,77,.16); }
.party-step:first-child { padding-top: 0; }
.party-step label { display: block; margin-bottom: 7px; }
.party-help { margin: 8px 0 0; color: #786777; font-size: .8rem; line-height: 1.45; }
.party-help a { color: var(--detail-purple); font-weight: 850; }
.party-price-summary { margin: 10px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.party-price-summary > div { padding: 12px; border-radius: 14px; background: #f6effa; }
.party-price-summary span { display: block; margin-bottom: 4px; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.party-price-summary strong { color: var(--detail-ink); }
.party-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.party-fields > div:last-child { grid-column: 1 / -1; }
.party-payment-placeholder { margin: 13px 0 2px; display: grid; gap: 4px; }
.party-payment-placeholder span { font-size: .82rem; line-height: 1.45; }
.party-no-times { margin-top: 10px; }
.party-no-times p { margin: 5px 0 0; font-size: .82rem; line-height: 1.5; }
.party-no-times a { display: inline-flex; margin-top: 8px; color: var(--detail-purple); font-weight: 850; text-decoration: none; }
.party-no-times a:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .workshop-booking-form { grid-template-columns: 1fr; }
  .workshop-booking-field--wide,
  .booking-terms-check,
  .workshop-booking-submit,
  .workshop-booking-status { grid-column: auto; }
  .party-price-summary { grid-template-columns: 1fr; }
  .party-fields { grid-template-columns: 1fr; }
  .party-fields > div:last-child { grid-column: auto; }
}

/* ============================================================
   Workshop structural reset
   The shared global stylesheet still contains legacy Workshop
   detail-layout rules.  Detail pages load this file last, so keep
   the Workshop page in one clean vertical flow here.
   ============================================================ */
.workshop-page .workshop-detail-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  align-items: initial !important;
}

.workshop-page .workshop-story-card,
.workshop-page .workshop-booking-card {
  position: relative;
  float: none !important;
  clear: both !important;
  min-width: 0 !important;
  max-width: 1180px !important;
}

.workshop-page .workshop-story-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr) !important;
  grid-template-areas:
    "eyebrow inclusions"
    "title inclusions"
    "copy inclusions"
    "facts inclusions" !important;
  align-items: start !important;
}

.workshop-page .workshop-story-card > p:not(.eyebrow) {
  white-space: normal !important;
  min-width: 0 !important;
  max-width: 680px;
}

.workshop-page .workshop-story-facts {
  width: 100% !important;
  min-width: 0 !important;
}

.workshop-page .workshop-story-facts > div {
  min-width: 0 !important;
  display: block !important;
  grid-template-columns: none !important;
}

.workshop-page .workshop-story-facts dt,
.workshop-page .workshop-story-facts dd {
  min-width: 0 !important;
  width: auto !important;
  overflow-wrap: anywhere;
}

.workshop-page .workshop-detail-image-wrap::before {
  display: none !important;
  content: none !important;
}

.workshop-page .workshop-booking-card {
  display: block !important;
}

.workshop-page .workshop-checkout-grid,
.workshop-page .workshop-booking-form,
.workshop-page .square-payment-panel {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  .workshop-page .workshop-story-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "copy"
      "facts"
      "inclusions" !important;
  }
}

/* ==============================================================
   DETAIL PAGE FINAL CONSISTENCY - 2026-08-19
   Workshop + Party follow Home's typography and gradient language,
   while remaining calmer and easier to book from.
============================================================== */

.detail-page {
  --detail-gradient: linear-gradient(
    90deg,
    #ff9acb 0%,
    #ffd55e 22%,
    #25aab2 46%,
    #ead5f4 68%,
    #ea653b 89%,
    #ff9acb 112%
  );
}

/* Home's type system: Georgia for expressive headings, Trebuchet for reading/UI. */
.detail-page main {
  font-family: "Trebuchet MS", Arial, sans-serif !important;
}
.detail-page main :is(h1, h2) {
  font-family: Georgia, "Times New Roman", serif !important;
}
.detail-page main :is(h3, p, li, dt, dd, label, input, select, textarea, button, a) {
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.workshop-page .workshop-detail-copy h1,
.party-page .party-hero__copy h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 5vw, 5.35rem) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}
.workshop-page .workshop-story-card > h2,
.party-page .party-story__copy h2,
.party-page .party-pricing__heading h2,
.workshop-page .workshop-booking-card > h2,
.party-page .party-booking__heading h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.45rem, 3.9vw, 4.1rem) !important;
  line-height: .98 !important;
}

/* Every detail pill uses the same living Crazy Alpaca colour family. */
.detail-page main .eyebrow,
.workshop-page .workshop-detail-meta span,
.party-page .party-hero__chips span,
.party-page .party-occasion-row span,
.party-page .party-band > span,
.workshop-page .workshop-session-availability,
.workshop-page .square-payment-panel__heading > strong {
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  animation: caDetailPillLive var(--pill-speed, 18s) ease-in-out var(--pill-delay, -4s) infinite !important;
}

/* WHAT TO EXPECT now belongs directly to About this workshop. */
.workshop-page .workshop-story-card {
  column-gap: clamp(32px, 5vw, 58px) !important;
  row-gap: 8px !important;
}
.workshop-page .workshop-story-card > .eyebrow {
  margin: 0 0 2px !important;
  align-self: end;
}
.workshop-page .workshop-story-card > h2 {
  margin: 0 0 10px !important;
}
.workshop-page .workshop-story-card > #workshop-detail-description {
  margin: 0 0 8px !important;
}

/* Workshop practical facts become a centred set of animated art-label pills. */
.workshop-page .workshop-story-facts {
  margin: 15px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 9px 10px !important;
}
.workshop-page .workshop-story-facts > div {
  --pill-r: -.35deg;
  --pill-speed: 19s;
  --pill-delay: -4s;
  width: auto !important;
  max-width: 100%;
  min-width: 128px !important;
  padding: 9px 13px !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(76, 48, 75, .25) !important;
  border-radius: 18px 22px 17px 21px !important;
  color: var(--detail-deep);
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  box-shadow: 3px 4px 0 rgba(37,170,178,.12) !important;
  text-align: center;
  animation: caDetailPillLive var(--pill-speed) ease-in-out var(--pill-delay) infinite !important;
}
.workshop-page .workshop-story-facts > div:nth-child(2n) {
  --pill-r: .35deg;
  --pill-speed: 21s;
  --pill-delay: -9s;
}
.workshop-page .workshop-story-facts > div:nth-child(3n) {
  --pill-r: -.15deg;
  --pill-speed: 23s;
  --pill-delay: -13s;
}
.workshop-page .workshop-story-facts > div:last-child {
  min-width: min(100%, 290px) !important;
}
.workshop-page .workshop-story-facts dt {
  color: #633d5b !important;
  font-size: .62rem !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
  line-height: 1.1;
}
.workshop-page .workshop-story-facts dd {
  margin: 3px 0 0 !important;
  color: #4b2f43 !important;
  font-size: .86rem;
  font-weight: 850;
  line-height: 1.28;
  text-align: center;
}

/* CHOOSE A DATE sits immediately above Workshop sessions. */
.workshop-page .workshop-booking-card > .eyebrow {
  margin: 0 auto 7px !important;
}
.workshop-page .workshop-booking-card > h2 {
  margin: 0 auto 10px !important;
}
.workshop-page .workshop-booking-intro {
  margin-top: 0 !important;
}

/* Booking progress: no numbered circles, just three playful gradient labels. */
.workshop-page .workshop-booking-steps {
  max-width: none !important;
  margin: 20px auto 24px !important;
  justify-content: center;
  gap: 9px 10px;
}
.workshop-page .workshop-booking-steps span {
  --pill-r: -.3deg;
  --pill-speed: 18s;
  --pill-delay: -4s;
  min-height: 34px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(76,48,75,.24);
  border-radius: 999px 880px 999px 920px !important;
  color: #57364f !important;
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  box-shadow: 3px 4px 0 rgba(138,19,173,.10);
  font-size: .73rem !important;
  font-weight: 900 !important;
  animation: caDetailPillLive var(--pill-speed) ease-in-out var(--pill-delay) infinite !important;
}
.workshop-page .workshop-booking-steps span:nth-child(2) {
  --pill-r: .32deg;
  --pill-speed: 20.5s;
  --pill-delay: -9s;
}
.workshop-page .workshop-booking-steps span:nth-child(3) {
  --pill-r: -.12deg;
  --pill-speed: 22s;
  --pill-delay: -13s;
}
.workshop-page .workshop-booking-steps b {
  display: none !important;
}

/* Workshop session choices: clear hierarchy, less dead UI, more paper-card character. */
.workshop-page .workshop-session-list {
  max-width: 980px;
  margin: 22px auto 0 !important;
}
.workshop-page .workshop-session-option {
  margin-bottom: 12px;
}
.workshop-page .workshop-session-option__content {
  position: relative;
  overflow: hidden;
  min-height: 94px;
  padding: 16px 18px 16px 20px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 0 !important;
  border-radius: 23px 19px 25px 20px !important;
  background:
    linear-gradient(125deg, rgba(255,246,251,.96), rgba(255,249,222,.94) 47%, rgba(231,249,247,.96)) !important;
  box-shadow: 6px 7px 0 rgba(37,170,178,.11), 0 12px 24px rgba(73,48,61,.06) !important;
}
.workshop-page .workshop-session-option__content::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--detail-gradient);
  background-size: 100% 320%;
  content: "";
  animation: caHomeIntroLineFlow 15s linear infinite;
}
.workshop-page .workshop-session-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.workshop-page .workshop-session-date {
  color: var(--detail-ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.3;
}
.workshop-page .workshop-session-venue {
  color: var(--detail-deep);
  font-size: .88rem;
  font-weight: 800;
}
.workshop-page .workshop-session-address {
  color: #826979 !important;
  font-size: .75rem;
  line-height: 1.35;
}
.workshop-page .workshop-session-availability {
  --pill-r: .25deg;
  --pill-speed: 20s;
  --pill-delay: -8s;
  min-width: max-content;
  padding: 7px 11px;
  border: 1px solid rgba(76,48,75,.20);
  border-radius: 999px;
  color: #4b2f43 !important;
  box-shadow: 3px 4px 0 rgba(138,19,173,.09);
  font-size: .75rem;
  font-weight: 900;
}
.workshop-page .workshop-session-option input:checked + .workshop-session-option__content {
  outline: 2px solid rgba(138,19,173,.20);
  outline-offset: 2px;
  box-shadow: 7px 8px 0 rgba(255,154,203,.18), 0 15px 28px rgba(73,48,61,.08) !important;
}

/* Checkout uses its space more efficiently. */
.workshop-page .workshop-checkout-grid {
  grid-template-columns: minmax(0, 1fr) minmax(290px, .52fr) !important;
  gap: 18px !important;
}
.workshop-page .workshop-booking-form,
.workshop-page .square-payment-panel {
  padding: 21px !important;
}
.workshop-page .workshop-booking-total {
  width: fit-content;
  min-width: 230px;
  margin-left: auto;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  animation: caDetailPillLive 21s ease-in-out -8s infinite !important;
}
.workshop-page .square-payment-panel__heading {
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 7px 12px !important;
}
.workshop-page .square-payment-panel__heading > div {
  flex: 1 1 210px;
}
.workshop-page .square-payment-panel__heading > strong {
  --pill-r: .25deg;
  --pill-speed: 21s;
  --pill-delay: -8s;
  padding: 7px 12px;
  border: 1px solid rgba(76,48,75,.22);
  border-radius: 999px;
  color: #4b2f43 !important;
  box-shadow: 3px 4px 0 rgba(37,170,178,.11);
  font-size: .9rem;
  white-space: nowrap;
}

/* Party pricing + page accents use the same Home type/colour family. */
.party-page .party-band h3,
.party-page .party-payment-panel h3 {
  color: var(--detail-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}
.party-page .party-band > span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid rgba(76,48,75,.22);
  border-radius: 999px;
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  box-shadow: 3px 4px 0 rgba(37,170,178,.10);
}

@media (max-width: 900px) {
  .workshop-page .workshop-story-card {
    row-gap: 8px !important;
  }
  .workshop-page .workshop-story-facts {
    justify-content: center;
  }
  .workshop-page .workshop-checkout-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .workshop-page .workshop-session-option__content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .workshop-page .workshop-session-info {
    justify-items: center;
  }
  .workshop-page .workshop-booking-total {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .workshop-page .workshop-story-facts > div {
    min-width: min(46%, 170px) !important;
    flex: 1 1 140px;
  }
  .workshop-page .workshop-story-facts > div:last-child {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-page .workshop-story-facts > div,
  .workshop-page .workshop-booking-steps span,
  .workshop-page .workshop-session-availability,
  .workshop-page .workshop-booking-total,
  .workshop-page .square-payment-panel__heading > strong,
  .party-page .party-band > span,
  .workshop-page .workshop-session-option__content::before {
    animation: none !important;
    transform: none !important;
    background-position: 50% 50% !important;
  }
}


/* =========================================================
   DETAIL TYPE + PILL PALETTE LOCK - 2026-08-19
   Detail pages use Home's Georgia display face and the exact
   Workshop/Party BOOK NOW colour sequence for every art pill.
========================================================= */
.detail-page {
  --detail-gradient: linear-gradient(
    120deg,
    #8a13ad 0%,
    #ef75b6 32%,
    #ffb253 55%,
    #25aab2 78%,
    #8a13ad 100%
  );
}

/* Match the expressive heading face used on Home. */
.detail-page main :is(h1, h2, h3),
.workshop-page .workshop-detail-copy h1,
.party-page .party-hero__copy h1,
.workshop-page .workshop-story-card > h2,
.workshop-page .workshop-booking-card > h2,
.party-page .party-story__copy h2,
.party-page .party-pricing__heading h2,
.party-page .party-booking__heading h2,
.party-page .party-band h3,
.party-page .party-payment-panel h3 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}

/* Stronger crookedness and the exact BOOK NOW gradient family. */
.detail-page main .eyebrow,
.workshop-page .workshop-detail-meta span,
.party-page .party-hero__chips span,
.party-page .party-occasion-row span,
.party-page .party-band > span,
.workshop-page .workshop-story-facts > div,
.workshop-page .workshop-booking-steps span,
.workshop-page .workshop-session-availability,
.workshop-page .workshop-booking-total,
.workshop-page .square-payment-panel__heading > strong {
  --pill-r: -1.15deg;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
  border: 1.5px solid rgba(45,36,72,.50) !important;
  border-radius: 19px 15px 22px 17px !important;
  box-shadow: 4px 5px 0 rgba(138,19,173,.15) !important;
  animation: caDetailPillLive var(--pill-speed, 18s) ease-in-out var(--pill-delay, -4s) infinite !important;
}

/* Individual resting angles, like the homepage stickers rather than a straight row. */
.detail-page main .eyebrow:nth-of-type(even),
.workshop-page .workshop-detail-meta span:nth-child(even),
.party-page .party-hero__chips span:nth-child(even),
.party-page .party-occasion-row span:nth-child(even),
.workshop-page .workshop-story-facts > div:nth-child(even),
.workshop-page .workshop-booking-steps span:nth-child(even) {
  --pill-r: 1.05deg;
  --pill-speed: 20.5s;
  --pill-delay: -9s;
  border-radius: 15px 22px 17px 20px !important;
}
.workshop-page .workshop-detail-meta span:nth-child(3n),
.party-page .party-hero__chips span:nth-child(3n),
.party-page .party-occasion-row span:nth-child(3n),
.workshop-page .workshop-story-facts > div:nth-child(3n),
.workshop-page .workshop-booking-steps span:nth-child(3n) {
  --pill-r: -.62deg;
  --pill-speed: 22.8s;
  --pill-delay: -13s;
}

/* Keep the small label/value type inside fact pills readable over the strong gradient. */
.workshop-page .workshop-story-facts dt,
.workshop-page .workshop-story-facts dd,
.workshop-page .workshop-session-availability,
.workshop-page .workshop-booking-total,
.workshop-page .square-payment-panel__heading > strong,
.party-page .party-band > span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.workshop-page .workshop-story-facts dt { opacity: .82; }

/* Detail-page primary buttons use the same exact palette too. */
.detail-page main .button--primary {
  background-image: var(--detail-gradient) !important;
  background-size: 320% 100% !important;
}

/* =========================================================
   DETAIL BOOKING READABILITY + STAGGERED COLOUR PHASES
   2026-08-19
   Same Crazy Alpaca palette, but each pill shows a different
   slice of it instead of every chip looking like one rainbow.
========================================================= */

@keyframes caDetailPillPhase {
  0%, 100% {
    background-position: var(--pill-phase-from, 0%) 50%;
    transform: translate3d(0, 0, 0) rotate(var(--pill-r, -.55deg));
  }
  50% {
    background-position: var(--pill-phase-to, 30%) 50%;
    transform: translate3d(0, -1px, 0) rotate(calc(var(--pill-r, -.55deg) * -.62));
  }
}

/* Narrower visible colour slice = more tasteful individual colour identity. */
.detail-page main .eyebrow,
.workshop-page .workshop-detail-meta span,
.party-page .party-hero__chips span,
.party-page .party-occasion-row span,
.party-page .party-band > span,
.workshop-page .workshop-story-facts > div,
.workshop-page .workshop-booking-steps span,
.workshop-page .workshop-session-availability,
.workshop-page .workshop-booking-total,
.workshop-page .square-payment-panel__heading > strong {
  --pill-phase-from: 0%;
  --pill-phase-to: 24%;
  background-size: 520% 100% !important;
  animation-name: caDetailPillPhase !important;
  animation-duration: var(--pill-speed, 20s) !important;
  animation-delay: var(--pill-delay, -3s) !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

/* Phase 2: pink/orange slice. */
.workshop-page .workshop-detail-meta span:nth-child(2),
.party-page .party-hero__chips span:nth-child(2),
.party-page .party-occasion-row span:nth-child(2),
.workshop-page .workshop-story-facts > div:nth-child(2),
.workshop-page .workshop-booking-steps span:nth-child(2),
.party-page .party-band:nth-child(2) > span {
  --pill-phase-from: 22%;
  --pill-phase-to: 48%;
  --pill-delay: -8s;
}

/* Phase 3: orange/teal slice. */
.workshop-page .workshop-detail-meta span:nth-child(3),
.party-page .party-hero__chips span:nth-child(3),
.party-page .party-occasion-row span:nth-child(3),
.workshop-page .workshop-story-facts > div:nth-child(3),
.workshop-page .workshop-booking-steps span:nth-child(3),
.party-page .party-band:nth-child(3) > span,
.workshop-page .workshop-session-availability {
  --pill-phase-from: 44%;
  --pill-phase-to: 70%;
  --pill-delay: -12s;
}

/* Phase 4: teal/purple slice. */
.workshop-page .workshop-detail-meta span:nth-child(4),
.party-page .party-hero__chips span:nth-child(4),
.party-page .party-occasion-row span:nth-child(4),
.workshop-page .workshop-story-facts > div:nth-child(4),
.workshop-page .workshop-booking-total,
.workshop-page .square-payment-panel__heading > strong {
  --pill-phase-from: 66%;
  --pill-phase-to: 92%;
  --pill-delay: -16s;
}

/* Phase 5: purple/pink slice for longer fact rows. */
.workshop-page .workshop-story-facts > div:nth-child(5) {
  --pill-phase-from: 82%;
  --pill-phase-to: 100%;
  --pill-delay: -19s;
}

/* A one-day workshop does not ask people to choose between dates. */
.workshop-page .workshop-booking-card {
  width: min(calc(100% - 40px), 1100px) !important;
  padding-top: 46px !important;
}
.workshop-page .workshop-booking-card > .eyebrow {
  display: flex !important;
  width: fit-content !important;
  margin: 0 auto 8px !important;
  justify-self: center !important;
}
.workshop-page .workshop-booking-card > h2 {
  margin: 0 auto 8px !important;
  text-align: center !important;
}
.workshop-page .workshop-booking-intro {
  max-width: 620px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.workshop-page .workshop-booking-steps {
  margin: 17px auto 20px !important;
}

/* One published session: make the choice feel deliberate and compact. */
.workshop-page .workshop-session-list {
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  margin: 18px auto 0 !important;
}
.workshop-page .workshop-session-option__content {
  min-height: 86px !important;
  padding: 14px 17px 14px 19px !important;
}

/* Checkout belongs to the content, not the full monitor width. */
.workshop-page .workshop-checkout-grid {
  width: min(100%, 980px) !important;
  margin: 24px auto 0 !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr) !important;
  gap: 17px !important;
}
.workshop-page .workshop-booking-form,
.workshop-page .square-payment-panel {
  padding: 19px !important;
}
.workshop-page .workshop-booking-total {
  min-width: 0 !important;
  max-width: 260px;
}
.workshop-page .square-payment-panel__heading > div {
  flex-basis: 165px !important;
}

/* Party contact CTA is a clean button - never a squiggly link. */
.party-page .party-contact-strip .button,
.party-page .party-contact-strip .button:is(:hover, :focus-visible, :active) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.party-page .party-contact-strip .button::before,
.party-page .party-contact-strip .button::after {
  display: none !important;
  content: none !important;
}

/* WHAT TO EXPECT is centred on smaller screens. */
@media (max-width: 900px) {
  .workshop-page .workshop-story-card > .eyebrow {
    display: flex !important;
    width: fit-content !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .workshop-page .workshop-checkout-grid {
    width: min(100%, 660px) !important;
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-page main .eyebrow,
  .workshop-page .workshop-detail-meta span,
  .party-page .party-hero__chips span,
  .party-page .party-occasion-row span,
  .party-page .party-band > span,
  .workshop-page .workshop-story-facts > div,
  .workshop-page .workshop-booking-steps span,
  .workshop-page .workshop-session-availability,
  .workshop-page .workshop-booking-total,
  .workshop-page .square-payment-panel__heading > strong {
    animation: none !important;
    transform: rotate(var(--pill-r, 0deg)) !important;
  }
}


/* =========================================================
   DETAIL PAGE GRADIENT CONSISTENCY - VISIBLE + STAGGERED
   Every pill/eyebrow uses the same Crazy Alpaca palette, but
   different components occupy different colour moments so a
   row never reads as cloned rainbow buttons.
========================================================= */
@keyframes caDetailPaletteDrift {
  0%,100% {
    background-position: 0% 50%;
    transform: translate3d(0,0,0) rotate(var(--pill-r,-.7deg));
  }
  50% {
    background-position: 100% 50%;
    transform: translate3d(0,-1px,0) rotate(calc(var(--pill-r,-.7deg) * -.72));
  }
}

/* Five related slices from the site palette. */
.detail-page {
  --detail-pill-a: linear-gradient(105deg,#8a13ad 0%,#df4dad 42%,#ff8c78 100%);
  --detail-pill-b: linear-gradient(105deg,#ee765f 0%,#ffd55e 48%,#57c8bd 100%);
  --detail-pill-c: linear-gradient(105deg,#ffd55e 0%,#25aab2 48%,#7565c8 100%);
  --detail-pill-d: linear-gradient(105deg,#25aab2 0%,#7765c9 48%,#8a13ad 100%);
  --detail-pill-e: linear-gradient(105deg,#8a13ad 0%,#ff6cae 52%,#ffd55e 100%);
}

/* Base animated sticker. */
.detail-page main .eyebrow,
.workshop-page .workshop-detail-meta span,
.party-page .party-hero__chips span,
.party-page .party-occasion-row span,
.party-page .party-band > span,
.workshop-page .workshop-story-facts > div,
.workshop-page .workshop-booking-steps span,
.workshop-page .workshop-session-availability,
.workshop-page .workshop-booking-total,
.workshop-page .square-payment-panel__heading > strong {
  --pill-r: -.9deg;
  --pill-gradient: var(--detail-pill-a);
  background-image: var(--pill-gradient) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50%;
  animation: caDetailPaletteDrift var(--pill-speed,15.5s) ease-in-out var(--pill-delay,-4s) infinite !important;
}

/* Party page: each named section deliberately starts in a different colour family. */
.party-page .party-hero__copy > .eyebrow { --pill-gradient: var(--detail-pill-a); --pill-r:-1.05deg; --pill-speed:14.6s; --pill-delay:-3.2s; }
.party-page .party-story__copy > .eyebrow { --pill-gradient: var(--detail-pill-b); --pill-r:.7deg; --pill-speed:17.2s; --pill-delay:-8.3s; }
.party-page .party-inclusions-card > .eyebrow { --pill-gradient: var(--detail-pill-c); --pill-r:-.55deg; --pill-speed:18.4s; --pill-delay:-12.1s; }
.party-page .party-pricing__heading > .eyebrow { --pill-gradient: var(--detail-pill-d); --pill-r:.85deg; --pill-speed:16.8s; --pill-delay:-6.7s; }
.party-page .party-booking__heading > .eyebrow { --pill-gradient: var(--detail-pill-e); --pill-r:-.8deg; --pill-speed:15.9s; --pill-delay:-10.9s; }
.party-page .party-payment-panel > .eyebrow { --pill-gradient: var(--detail-pill-b); --pill-r:.65deg; --pill-speed:17.6s; --pill-delay:-14.2s; }

.party-page .party-hero__chips span:nth-child(1),
.party-page .party-occasion-row span:nth-child(5n+1) { --pill-gradient:var(--detail-pill-a); --pill-r:-1deg; --pill-delay:-2s; }
.party-page .party-hero__chips span:nth-child(2),
.party-page .party-occasion-row span:nth-child(5n+2) { --pill-gradient:var(--detail-pill-b); --pill-r:.9deg; --pill-delay:-7s; }
.party-page .party-hero__chips span:nth-child(3),
.party-page .party-occasion-row span:nth-child(5n+3) { --pill-gradient:var(--detail-pill-c); --pill-r:-.6deg; --pill-delay:-11s; }
.party-page .party-hero__chips span:nth-child(4),
.party-page .party-occasion-row span:nth-child(5n+4) { --pill-gradient:var(--detail-pill-d); --pill-r:1.05deg; --pill-delay:-15s; }
.party-page .party-occasion-row span:nth-child(5n) { --pill-gradient:var(--detail-pill-e); --pill-r:-.75deg; --pill-delay:-18s; }
.party-page .party-band:nth-child(1) > span { --pill-gradient:var(--detail-pill-a); --pill-r:-.8deg; --pill-delay:-2s; }
.party-page .party-band:nth-child(2) > span { --pill-gradient:var(--detail-pill-c); --pill-r:.8deg; --pill-delay:-9s; }
.party-page .party-band:nth-child(3) > span { --pill-gradient:var(--detail-pill-d); --pill-r:-.55deg; --pill-delay:-14s; }

/* Workshop page gets the same palette choreography. */
.workshop-page .workshop-detail-copy > .eyebrow { --pill-gradient:var(--detail-pill-a); --pill-r:-.95deg; --pill-delay:-2.5s; }
.workshop-page .workshop-story-card > .eyebrow { --pill-gradient:var(--detail-pill-b); --pill-r:.75deg; --pill-delay:-7.5s; }
.workshop-page .workshop-booking-card > .eyebrow { --pill-gradient:var(--detail-pill-d); --pill-r:-.7deg; --pill-delay:-12.5s; }
.workshop-page .square-payment-panel__heading > .eyebrow { --pill-gradient:var(--detail-pill-e); --pill-r:.65deg; --pill-delay:-16s; }

.workshop-page .workshop-detail-meta span:nth-child(1),
.workshop-page .workshop-story-facts > div:nth-child(1),
.workshop-page .workshop-booking-steps span:nth-child(1) { --pill-gradient:var(--detail-pill-a); --pill-r:-1deg; --pill-delay:-2s; }
.workshop-page .workshop-detail-meta span:nth-child(2),
.workshop-page .workshop-story-facts > div:nth-child(2),
.workshop-page .workshop-booking-steps span:nth-child(2) { --pill-gradient:var(--detail-pill-b); --pill-r:.9deg; --pill-delay:-7s; }
.workshop-page .workshop-detail-meta span:nth-child(3),
.workshop-page .workshop-story-facts > div:nth-child(3),
.workshop-page .workshop-booking-steps span:nth-child(3) { --pill-gradient:var(--detail-pill-c); --pill-r:-.65deg; --pill-delay:-11s; }
.workshop-page .workshop-detail-meta span:nth-child(4),
.workshop-page .workshop-story-facts > div:nth-child(4) { --pill-gradient:var(--detail-pill-d); --pill-r:1deg; --pill-delay:-15s; }
.workshop-page .workshop-story-facts > div:nth-child(5) { --pill-gradient:var(--detail-pill-e); --pill-r:-.75deg; --pill-delay:-18s; }
.workshop-page .workshop-session-availability { --pill-gradient:var(--detail-pill-c); --pill-r:.8deg; --pill-delay:-8s; }
.workshop-page .workshop-booking-total { --pill-gradient:var(--detail-pill-d); --pill-r:-.7deg; --pill-delay:-13s; }
.workshop-page .square-payment-panel__heading > strong { --pill-gradient:var(--detail-pill-e); --pill-r:.7deg; --pill-delay:-17s; }

@media (prefers-reduced-motion: reduce) {
  .detail-page main .eyebrow,
  .workshop-page .workshop-detail-meta span,
  .party-page .party-hero__chips span,
  .party-page .party-occasion-row span,
  .party-page .party-band > span,
  .workshop-page .workshop-story-facts > div,
  .workshop-page .workshop-booking-steps span,
  .workshop-page .workshop-session-availability,
  .workshop-page .workshop-booking-total,
  .workshop-page .square-payment-panel__heading > strong {
    animation: none !important;
    transform: rotate(var(--pill-r,0deg)) !important;
    background-position: 50% 50% !important;
  }
}

/* =========================================================
   MOBILE + ACCESSIBILITY + BOOKING UX - 19 AUG 2026
   Customer-facing hardening without changing payment logic.
========================================================= */
.detail-page :is(input, select, button, a):focus-visible {
  outline: 3px solid #174fb8;
  outline-offset: 3px;
}

.detail-page :is(input, select)[aria-invalid="true"] {
  border-color: #a82432 !important;
  box-shadow: 0 0 0 3px rgba(168, 36, 50, .12) !important;
  background-color: #fff8f8 !important;
}

.detail-page :is(input, select)[aria-invalid="false"] {
  border-color: rgba(82, 50, 77, .24);
}

.booking-terms-check:has(input[aria-invalid="true"]),
.party-terms-check:has(input[aria-invalid="true"]) {
  border: 2px solid #a82432;
  background: #fff1f1;
}

.workshop-booking-status,
.party-payment-status,
.party-form-status {
  min-height: 0;
  margin: 10px 0 0;
  padding: 0;
  border-radius: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.workshop-booking-status:not(:empty),
.party-payment-status:not(:empty),
.party-form-status:not(:empty) {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(37, 170, 178, .28);
  background: #effbf9;
  color: #285e60;
}

.workshop-booking-status[data-type="error"]:not(:empty),
.party-payment-status[data-type="error"]:not(:empty),
.party-form-status[data-type="error"]:not(:empty) {
  border-color: rgba(168, 36, 50, .32);
  background: #fff1f1;
  color: #8a1f2b;
}

.party-form-status {
  width: 100%;
}

.workshop-booking-success:focus,
.party-success:focus,
.workshop-detail-error:focus,
.party-state--error:focus {
  outline: 3px solid #174fb8;
  outline-offset: 5px;
}

.square-payment-panel[aria-busy="true"],
.party-payment-panel[aria-busy="true"] {
  position: relative;
}

.square-payment-panel[aria-busy="true"]::after,
.party-payment-panel[aria-busy="true"]::after {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a13ad, #ff6cae, #ffd55e, #25aab2, #8a13ad);
  background-size: 220% 100%;
  content: "";
  animation: caCheckoutProgress 1.35s linear infinite;
}

@keyframes caCheckoutProgress {
  to { background-position: -220% 0; }
}

.button.is-processing {
  cursor: progress;
}

.button.is-processing::before {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: caCheckoutSpin .7s linear infinite;
}

@keyframes caCheckoutSpin {
  to { transform: rotate(360deg); }
}

.workshop-page #workshop-booking,
.party-page #party-booking {
  scroll-margin-top: 92px;
}

.workshop-page .workshop-session-option__content,
.party-page :is(.party-step select, .party-fields input),
.workshop-page :is(.workshop-booking-field input, .workshop-booking-field select) {
  border: 1px solid rgba(82, 50, 77, .24);
}

@media (pointer: coarse) {
  .detail-page :is(.button, button, select, input:not([type="checkbox"])) {
    min-height: 48px;
  }

  .booking-terms-check,
  .party-terms-check {
    min-height: 48px;
  }

  .booking-terms-check input,
  .party-terms-check input {
    width: 22px !important;
    height: 22px;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .workshop-page .workshop-booking-card,
  .party-page .party-booking {
    width: min(calc(100% - 22px), 1180px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .workshop-page .workshop-booking-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .workshop-page .workshop-booking-field--wide,
  .workshop-page .booking-terms-check,
  .workshop-page .workshop-booking-submit,
  .workshop-page .workshop-booking-status {
    grid-column: 1 !important;
  }

  .workshop-page .workshop-booking-form,
  .workshop-page .square-payment-panel,
  .party-page .party-booking-form-wrap,
  .party-page .party-payment-panel {
    padding: 17px !important;
    border-radius: 19px !important;
  }

  .workshop-page :is(.workshop-booking-field input, .workshop-booking-field select),
  .party-page :is(.party-step select, .party-fields input) {
    min-height: 50px !important;
    padding: 11px 12px !important;
    font-size: 16px !important;
  }

  .workshop-page .workshop-session-option__content {
    min-height: 96px !important;
    padding: 15px !important;
    align-items: flex-start;
    flex-direction: column;
  }

  .workshop-page .workshop-session-availability {
    align-self: flex-start;
  }

  .workshop-page .workshop-booking-steps {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workshop-page .workshop-booking-steps span {
    min-height: 42px;
    padding: 7px 8px;
    justify-content: center;
    text-align: center;
  }

  .party-page .party-price-summary {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .party-page .party-price-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .party-page .party-price-summary span {
    margin: 0;
  }

  .party-page .party-payment-panel .button,
  .workshop-page .square-payment-panel .button,
  .workshop-page .workshop-booking-submit {
    min-height: 52px;
    font-size: .98rem;
  }

  .square-card-container {
    min-height: 86px;
  }

  .square-trust-panel {
    font-size: .76rem !important;
  }
}

@media (max-width: 390px) {
  .workshop-page .workshop-booking-steps {
    grid-template-columns: 1fr;
  }

  .workshop-page .workshop-booking-steps span {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .square-payment-panel[aria-busy="true"]::after,
  .party-payment-panel[aria-busy="true"]::after,
  .button.is-processing::before {
    animation: none !important;
  }

  .square-payment-panel[aria-busy="true"]::after,
  .party-payment-panel[aria-busy="true"]::after {
    background-position: 50% 50%;
  }
}


/* PERFORMANCE + TICKET DELIVERY POLISH - 2026-08-19 */
.workshop-ticket-email-note {
  display: grid;
  gap: 4px;
  margin: 10px 0 12px;
  padding: 12px 13px;
  border: 1px solid rgba(37, 170, 178, .24);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(215,243,239,.82), rgba(255,248,251,.94));
  color: #614b58;
  box-shadow: 3px 4px 0 rgba(37,170,178,.08);
}
.workshop-ticket-email-note strong {
  color: #52204f;
  font-size: .86rem;
  line-height: 1.35;
}
.workshop-ticket-email-note span {
  font-size: .76rem;
  line-height: 1.5;
}

/* Reserve a stable art frame before Firestore images decode to reduce layout shift. */
.workshop-page .workshop-detail-image-wrap,
.party-page .party-hero__visual {
  aspect-ratio: 4 / 3 !important;
  max-width: 520px !important;
}
.workshop-page .workshop-detail-image-wrap.is-portrait,
.workshop-page .workshop-detail-image-wrap.is-square,
.workshop-page .workshop-detail-image-wrap.is-landscape,
.party-page .party-hero__visual.is-portrait,
.party-page .party-hero__visual.is-square,
.party-page .party-hero__visual.is-landscape {
  max-width: 520px !important;
}

/* 2026-08-19 Reliability & Decision Clarity */
.detail-loading-shell {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 4vw, 42px);
  min-height: 420px;
}
.detail-skeleton {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: clamp(22px, 4vw, 52px);
  width: min(1120px, 100%);
  margin: 0 auto;
}
.detail-skeleton__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 26px;
}
.detail-skeleton__copy span,
.detail-skeleton__art {
  position: relative;
  overflow: hidden;
  background: #eee6ef;
}
.detail-skeleton__copy span { height: 18px; border-radius: 999px; }
.detail-skeleton__copy span:nth-child(1) { width: 32%; height: 13px; }
.detail-skeleton__copy span:nth-child(2) { width: 82%; height: 58px; border-radius: 15px; }
.detail-skeleton__copy span:nth-child(3) { width: 92%; }
.detail-skeleton__copy span:nth-child(4) { width: 63%; }
.detail-skeleton__art { min-height: 330px; border-radius: 30px; }
.detail-skeleton__copy span::after,
.detail-skeleton__art::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.82) 48%, transparent 70%);
  animation: ca-detail-skeleton 1.45s ease-in-out infinite;
}
@keyframes ca-detail-skeleton { to { transform: translateX(100%); } }
.detail-loading-copy {
  text-align: center;
  color: #4d3f53;
}
.detail-loading-copy > p { margin: 8px auto 0; max-width: 620px; line-height: 1.5; }
.detail-loading-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
}
.detail-loading-actions a,
.workshop-booking-closed__actions a,
.party-no-times__actions a {
  color: #6e3aa3;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.detail-recovery-actions { flex-wrap: wrap; }
.workshop-booking-closed__actions,
.party-no-times__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
}

.transaction-review {
  margin: 0 0 18px;
  padding: 16px;
  border: 2px solid rgba(82, 57, 94, .16);
  border-radius: 18px;
  background: #fffdfd;
  box-shadow: 0 8px 24px rgba(70, 48, 78, .07);
}
.transaction-review__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.transaction-review__heading strong { font-size: 1rem; color: #3f2d46; }
.transaction-review__heading span { font-size: .78rem; color: #6a596e; text-align: right; }
.transaction-review dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.transaction-review dl > div {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f8f3f9;
}
.transaction-review dt {
  margin: 0;
  color: #76647a;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.transaction-review dd {
  margin: 3px 0 0;
  color: #35283a;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.transaction-review__wide { grid-column: 1 / -1; }
.transaction-review--party { margin-top: 12px; }

@media (max-width: 720px) {
  .detail-skeleton { grid-template-columns: 1fr; }
  .detail-skeleton__art { min-height: 250px; }
  .transaction-review__heading { align-items: flex-start; flex-direction: column; }
  .transaction-review__heading span { text-align: left; }
  .transaction-review dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .detail-loading-shell { padding: 18px 14px; }
  .detail-skeleton__art { min-height: 210px; }
  .transaction-review dl { grid-template-columns: 1fr; }
  .transaction-review__wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-skeleton__copy span::after,
  .detail-skeleton__art::after { animation: none; display: none; }
}

/* Workshop review now belongs immediately below the selected session rather
   than nesting a second card inside the Square payment card. */
.workshop-transaction-review {
  margin: 14px 0 2px;
}

@media (min-width: 951px) {
  .workshop-transaction-review {
    padding: 18px 20px;
  }
  .workshop-transaction-review dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .workshop-transaction-review .transaction-review__wide {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   FINAL BOOKING CONSOLIDATION - 2026-08-20
   One visual booking surface per flow. Existing DOM ids/payment hooks stay
   unchanged so Square and Firebase behaviour are not rewritten.
========================================================= */

/* Workshop: the outer booking card is the only card. */
.workshop-page .workshop-transaction-review {
  margin: 18px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.workshop-page .workshop-checkout-grid {
  width: min(100%, 900px) !important;
  margin: 20px auto 0 !important;
  display: block !important;
}

.workshop-page .workshop-booking-form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.workshop-page .square-payment-panel {
  position: static !important;
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px dashed rgba(73, 48, 61, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.workshop-page .square-payment-panel__heading,
.workshop-page .workshop-ticket-email-note,
.workshop-page .square-payment-hold,
.workshop-page .square-card-container,
.workshop-page .square-payment-panel > .button,
.workshop-page .square-payment-panel > .workshop-booking-status,
.workshop-page .square-trust-panel {
  width: min(100%, 680px);
  margin-left: auto;
  margin-right: auto;
}

/* Party: guest/date/details/payment live inside one booking card. */
.party-page .party-booking-desk {
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
  display: block !important;
}

.party-page .party-booking-form-wrap {
  width: 100% !important;
}

.party-page .party-payment-panel--inline {
  position: static !important;
  margin: 24px 0 0 !important;
  padding: 22px 0 0 !important;
  border: 0 !important;
  border-top: 1px dashed rgba(45, 36, 72, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.party-page .party-payment-panel--inline > #party-payment-copy {
  margin: 0 0 12px !important;
  color: #675d70;
  font-size: .9rem;
  line-height: 1.45;
}

.party-page .party-payment-panel--inline .party-payment-placeholder {
  margin-top: 0 !important;
}

.party-page .party-payment-panel--inline .square-card-container,
.party-page .party-payment-panel--inline > .button,
.party-page .party-payment-panel--inline .party-payment-status,
.party-page .party-payment-panel--inline .square-trust-panel {
  width: min(100%, 680px);
}

@media (max-width: 650px) {
  .workshop-page .workshop-checkout-grid,
  .party-page .party-booking-desk {
    width: 100% !important;
  }

  .workshop-page .square-payment-panel,
  .party-page .party-payment-panel--inline {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }
}

/* =========================================================
   WORKSHOP PAGE SIMPLIFICATION - 2026-08-20
   Poster stays in the /workshops/ catalogue. The detail page becomes a
   clean two-column story followed by one unified booking surface.
========================================================= */

.workshop-page .workshop-detail-main {
  width: min(calc(100% - 48px), 1260px);
  padding-top: clamp(48px, 6vw, 78px);
}

.workshop-page .workshop-detail-hero--about-split {
  display: grid !important;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  gap: clamp(30px, 5vw, 72px) !important;
  align-items: start !important;
  padding: clamp(30px, 4vw, 52px) !important;
}

.workshop-page .workshop-detail-copy {
  min-width: 0;
  align-self: start;
  padding: clamp(8px, 1.5vw, 18px) 0 !important;
}

.workshop-page .workshop-detail-copy h1 {
  max-width: 8.5ch;
  margin-bottom: 26px !important;
}

.workshop-page .workshop-detail-copy .detail-hero-cta {
  margin-top: 4px !important;
}

.workshop-page .workshop-story-card--hero {
  margin: 0 !important;
  padding: clamp(24px, 3vw, 36px) !important;
  display: block !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 16px 40px rgba(78,48,74,.07) !important;
}

.workshop-page .workshop-story-card--hero::before,
.workshop-page .workshop-story-card--hero::after {
  opacity: .28 !important;
}

.workshop-page .workshop-story-card--hero > h2 {
  margin: 4px 0 12px !important;
  font-size: clamp(2rem, 3.1vw, 3.25rem) !important;
}

.workshop-page .workshop-story-card--hero > #workshop-detail-description {
  max-width: 68ch;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

.workshop-page .workshop-story-inclusions {
  margin-top: 22px !important;
}

.workshop-page .workshop-story-facts--at-a-glance {
  margin-top: 22px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.workshop-page .workshop-story-facts--at-a-glance > div {
  min-width: 0;
  padding: 11px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,247,251,.92) !important;
}

.workshop-page .workshop-story-facts--at-a-glance dt {
  font-size: .68rem !important;
}

.workshop-page .workshop-story-facts--at-a-glance dd {
  margin-top: 3px !important;
  overflow-wrap: anywhere;
}

.workshop-page .workshop-detail-body--booking-only {
  display: block !important;
  margin-top: clamp(28px, 4vw, 46px) !important;
}

.workshop-page .workshop-booking-card--unified {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3.5vw, 42px) !important;
  border-radius: 32px !important;
}

.workshop-page .workshop-booking-card--unified > .eyebrow,
.workshop-page .workshop-booking-card--unified > h2 {
  width: min(100%, 1120px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.workshop-page .workshop-booking-card--unified > h2 {
  margin-top: 4px !important;
  margin-bottom: 24px !important;
  font-size: clamp(2.1rem, 3.5vw, 3.5rem) !important;
}

.workshop-page .workshop-booking-flow {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.22fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(82,50,77,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.66);
}

.workshop-page .workshop-booking-stage {
  min-width: 0;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.workshop-page .workshop-booking-stage + .workshop-booking-stage {
  border-left: 1px solid rgba(82,50,77,.10) !important;
}

.workshop-page .workshop-booking-stage > .eyebrow,
.workshop-page .workshop-booking-stage .square-brand-eyebrow {
  margin: 0 0 14px !important;
  color: var(--detail-purple) !important;
}

.workshop-page .workshop-booking-stage--details:has(> form[hidden]) {
  display: none !important;
}

.workshop-page .workshop-session-list {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.workshop-page .workshop-session-option {
  margin: 0 !important;
  padding: 13px !important;
  border-radius: 15px !important;
}

.workshop-page .workshop-session-date {
  font-size: .92rem !important;
}

.workshop-page .workshop-session-venue,
.workshop-page .workshop-session-address,
.workshop-page .workshop-session-availability {
  font-size: .75rem !important;
}

.workshop-page .workshop-booking-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 11px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workshop-page .workshop-booking-field,
.workshop-page .booking-terms-check {
  min-width: 0;
}

.workshop-page .workshop-booking-form .booking-terms-check,
.workshop-page .workshop-booking-form .workshop-booking-submit,
.workshop-page .workshop-booking-form .workshop-booking-status {
  grid-column: 1 / -1;
}

.workshop-page .workshop-booking-field label {
  font-size: .74rem !important;
}

.workshop-page .workshop-booking-field input,
.workshop-page .workshop-booking-field select {
  min-height: 44px !important;
}

.workshop-page .square-payment-panel.workshop-booking-stage--square {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  padding: 22px !important;
  border-top: 0 !important;
}

.workshop-page .square-payment-panel__heading,
.workshop-page .workshop-ticket-email-note,
.workshop-page .square-payment-hold,
.workshop-page .square-card-container,
.workshop-page .square-payment-panel > .button,
.workshop-page .square-payment-panel > .workshop-booking-status,
.workshop-page .square-trust-panel {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.workshop-page .square-payment-panel__heading {
  margin-bottom: 12px !important;
}

.workshop-page .square-brand-eyebrow .square-wordmark {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  font-family: Arial, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

.workshop-page .square-payment-panel__heading h3 {
  margin: 4px 0 0 !important;
  color: var(--detail-ink) !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  line-height: 1.04 !important;
}

.workshop-page .workshop-ticket-email-note {
  margin-top: 14px !important;
  padding: 12px 13px !important;
  border-radius: 14px !important;
  background: rgba(255,247,251,.88) !important;
}

.workshop-page .square-payment-hold {
  margin-top: 12px !important;
  color: #675d70 !important;
  font-size: .78rem !important;
  line-height: 1.45 !important;
}

.workshop-page .square-card-container {
  margin-top: 14px !important;
}

.workshop-page .square-trust-panel--friendly {
  margin-top: 14px !important;
  padding-top: 12px !important;
  gap: 5px !important;
  font-size: .72rem !important;
}

.workshop-page .workshop-booking-closed,
.workshop-page .workshop-booking-success {
  width: min(100%, 1120px);
  margin: 18px auto 0 !important;
}

@media (max-width: 980px) {
  .workshop-page .workshop-detail-hero--about-split {
    grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr) !important;
    gap: 28px !important;
  }

  .workshop-page .workshop-booking-flow {
    grid-template-columns: 1fr 1fr !important;
  }

  .workshop-page .workshop-booking-stage--square {
    grid-column: 1 / -1;
    border-left: 0 !important;
    border-top: 1px solid rgba(82,50,77,.10) !important;
  }
}

@media (max-width: 720px) {
  .workshop-page .workshop-detail-main {
    width: min(calc(100% - 28px), 680px);
    padding-top: 32px;
  }

  .workshop-page .workshop-detail-hero--about-split {
    display: block !important;
    padding: 22px !important;
  }

  .workshop-page .workshop-detail-copy {
    padding: 0 !important;
  }

  .workshop-page .workshop-detail-copy h1 {
    max-width: none;
    margin-bottom: 18px !important;
  }

  .workshop-page .workshop-story-card--hero {
    margin-top: 24px !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .workshop-page .workshop-story-facts--at-a-glance {
    grid-template-columns: 1fr 1fr !important;
  }

  .workshop-page .workshop-booking-card--unified {
    padding: 20px 14px 22px !important;
    border-radius: 24px !important;
  }

  .workshop-page .workshop-booking-card--unified > .eyebrow,
  .workshop-page .workshop-booking-card--unified > h2 {
    padding-left: 6px;
    padding-right: 6px;
  }

  .workshop-page .workshop-booking-flow {
    grid-template-columns: 1fr !important;
    border-radius: 20px;
  }

  .workshop-page .workshop-booking-stage {
    grid-column: auto !important;
    padding: 18px !important;
  }

  .workshop-page .workshop-booking-stage + .workshop-booking-stage,
  .workshop-page .workshop-booking-stage--square {
    border-left: 0 !important;
    border-top: 1px solid rgba(82,50,77,.10) !important;
  }

  .workshop-page .workshop-booking-form {
    grid-template-columns: 1fr !important;
  }

  .workshop-page .workshop-booking-form .booking-terms-check,
  .workshop-page .workshop-booking-form .workshop-booking-submit,
  .workshop-page .workshop-booking-form .workshop-booking-status {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .workshop-page .workshop-story-facts--at-a-glance {
    grid-template-columns: 1fr !important;
  }
}

.workshop-page .detail-skeleton--workshop {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
}
.workshop-page .detail-skeleton__copy--about {
  min-height: 250px;
  align-content: center;
}
@media (max-width: 720px) {
  .workshop-page .detail-skeleton--workshop { grid-template-columns: 1fr !important; }
  .workshop-page .detail-skeleton__copy--about { min-height: 170px; }
}

/* Collapse unused booking columns for free / closed workshop states. */
.workshop-page .workshop-booking-flow:has(.square-payment-panel[hidden]) {
  grid-template-columns: 1fr 1fr;
}
.workshop-page .workshop-booking-flow:has(.workshop-booking-stage--details > form[hidden]) {
  grid-template-columns: 1fr;
}
@media (max-width: 720px) {
  .workshop-page .workshop-booking-flow:has(.square-payment-panel[hidden]),
  .workshop-page .workshop-booking-flow:has(.workshop-booking-stage--details > form[hidden]) {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   WORKSHOP DETAIL - TITLE / NOTE SPLIT + TWO-COLUMN TICKETING
   20 Aug 2026 refinement: keep the catalogue poster off the
   detail page, put the workshop story under the title, and
   remove repeated session/review UI from checkout.
========================================================= */
.workshop-page .workshop-detail-hero--info-split {
  width: min(calc(100% - 40px), 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 76px) 0 clamp(28px, 4vw, 44px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr) !important;
  align-items: start !important;
  gap: clamp(34px, 5vw, 64px) !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy {
  display: block !important;
  text-align: left !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy > .eyebrow {
  margin: 0 0 18px !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1 {
  max-width: 10ch !important;
  margin: 0 !important;
}

.workshop-page .workshop-detail-lead {
  max-width: 72ch !important;
  margin: 24px 0 0 !important;
  color: var(--detail-copy) !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  line-height: 1.68 !important;
  white-space: pre-line;
}

.workshop-page .workshop-story-facts--hero {
  margin: 26px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.workshop-page .workshop-story-facts--hero > div {
  min-width: 0;
  padding: 11px 13px !important;
  border: 1px solid rgba(82,50,77,.10) !important;
  border-radius: 15px !important;
  background: rgba(255,247,251,.86) !important;
  box-shadow: none !important;
}

.workshop-page .workshop-story-facts--hero dt {
  font-size: .64rem !important;
}

.workshop-page .workshop-story-facts--hero dd {
  margin-top: 3px !important;
  font-size: .83rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.workshop-page .workshop-story-inclusions--hero {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 34px 31px 26px !important;
  align-self: start;
  animation: none !important;
  transform: rotate(.35deg) !important;
}

.workshop-page .workshop-story-inclusions--hero::before {
  content: none !important;
}

.workshop-page .workshop-story-inclusions__tape {
  position: absolute;
  z-index: 5;
  top: -15px;
  left: 50%;
  width: 100px;
  height: 28px;
  display: block;
  background: rgba(255, 222, 128, .74);
  box-shadow: 0 2px 5px rgba(73, 48, 61, .06);
  transform: translateX(-50%) rotate(3deg);
  pointer-events: none;
}

.workshop-page .workshop-detail-body--booking-only {
  width: min(calc(100% - 40px), 1040px) !important;
  margin: 0 auto !important;
  padding: 0 0 66px !important;
}

.workshop-page .workshop-booking-card--unified {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workshop-page .workshop-booking-card--unified > .workshop-booking-square-eyebrow {
  margin: 0 auto 12px !important;
  text-transform: none !important;
}

.workshop-page .workshop-booking-square-eyebrow .square-wordmark {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

.workshop-page .workshop-booking-card--unified > h2 {
  width: 100% !important;
  margin: 0 auto 24px !important;
  text-align: center;
  font-size: clamp(2.25rem, 4.4vw, 4.25rem) !important;
}

.workshop-page .workshop-session-list[hidden] {
  display: none !important;
}

.workshop-page .workshop-booking-flow--two-column {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(82,50,77,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage {
  min-width: 0;
  height: 100%;
  padding: clamp(20px, 2.6vw, 28px) !important;
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage--square {
  border-left: 1px solid rgba(82,50,77,.10) !important;
  border-top: 0 !important;
}

.workshop-page .workshop-booking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 12px !important;
}

.workshop-page .workshop-booking-session-select,
.workshop-page .workshop-booking-form .booking-terms-check,
.workshop-page .workshop-booking-form .booking-updates-check,
.workshop-page .workshop-booking-form .workshop-booking-privacy,
.workshop-page .workshop-booking-form .workshop-booking-submit,
.workshop-page .workshop-booking-form .workshop-booking-status {
  grid-column: 1 / -1 !important;
}

.workshop-page .booking-updates-check {
  padding: 12px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(37,170,178,.15);
  border-radius: 15px;
  background: rgba(229,248,247,.64);
  color: var(--detail-copy);
  font-size: .79rem;
  line-height: 1.4;
}

.workshop-page .booking-updates-check input,
.workshop-page .booking-terms-check input {
  margin-top: .14em;
}

.workshop-page .workshop-booking-privacy {
  margin: -2px 2px 0 !important;
  color: rgba(75,47,67,.68) !important;
  font-size: .72rem !important;
  line-height: 1.48 !important;
}

.workshop-page .square-payment-panel.workshop-booking-stage--square {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(20px, 2.6vw, 28px) !important;
}

.workshop-page .square-payment-panel__heading {
  margin: 0 0 10px !important;
}

.workshop-page .square-payment-panel__heading h3 {
  margin: 0 !important;
  font-size: clamp(1.75rem, 2.4vw, 2.35rem) !important;
}

.workshop-page .workshop-ticket-email-note {
  margin: 8px 0 12px !important;
  padding: 11px 12px !important;
}

.workshop-page .square-card-container {
  min-height: 88px !important;
  margin: 2px 0 10px !important;
}

.workshop-page .square-payment-panel > .button {
  margin-top: 4px !important;
}

.workshop-page .square-payment-hold {
  order: 5;
  margin: 10px 0 0 !important;
  font-size: .73rem !important;
}

.workshop-page .square-payment-panel > .workshop-booking-status {
  order: 6;
}

.workshop-page .square-trust-panel--friendly {
  order: 7;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

@media (max-width: 900px) {
  .workshop-page .workshop-detail-hero--info-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr) !important;
    gap: 28px !important;
  }

  .workshop-page .workshop-story-facts--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .workshop-page .workshop-detail-main {
    width: 100% !important;
    padding-top: 0 !important;
  }

  .workshop-page .workshop-detail-hero--info-split {
    width: min(calc(100% - 28px), 680px) !important;
    padding: 38px 0 26px !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy {
    text-align: left !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy > .eyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1 {
    max-width: none !important;
    font-size: clamp(2.7rem, 13vw, 4.25rem) !important;
  }

  .workshop-page .workshop-detail-lead {
    margin-top: 18px !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
  }

  .workshop-page .workshop-story-facts--hero {
    margin-top: 20px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .workshop-page .workshop-story-inclusions--hero {
    width: min(100%, 520px) !important;
    margin: 4px auto 0 !important;
    transform: none !important;
  }

  .workshop-page .workshop-detail-body--booking-only {
    width: min(calc(100% - 20px), 680px) !important;
  }

  .workshop-page .workshop-booking-card--unified {
    padding: 18px 4px 28px !important;
  }

  .workshop-page .workshop-booking-flow--two-column {
    grid-template-columns: 1fr !important;
    border-radius: 20px;
  }

  .workshop-page .workshop-booking-flow--two-column .workshop-booking-stage--square {
    border-left: 0 !important;
    border-top: 1px solid rgba(82,50,77,.10) !important;
  }

  .workshop-page .workshop-booking-form {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 460px) {
  .workshop-page .workshop-story-facts--hero {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .workshop-page .workshop-story-facts--hero > div {
    padding: 10px !important;
  }

  .workshop-page .workshop-booking-form {
    grid-template-columns: 1fr !important;
  }

  .workshop-page .workshop-booking-session-select,
  .workshop-page .workshop-booking-form .booking-terms-check,
  .workshop-page .workshop-booking-form .booking-updates-check,
  .workshop-page .workshop-booking-form .workshop-booking-privacy,
  .workshop-page .workshop-booking-form .workshop-booking-submit,
  .workshop-page .workshop-booking-form .workshop-booking-status {
    grid-column: auto !important;
  }
}

/* =========================================================
   SQUARE PAYMENT TRANSITION
   Full-screen transaction feedback without backdrop-filter.
========================================================= */
.square-payment-progress[hidden] { display: none !important; }
.square-payment-progress {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,154,203,.28), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(37,170,178,.22), transparent 36%),
    #fff9f8;
}
.square-payment-progress__card {
  width: min(92vw, 410px);
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 42px 30px;
  text-align: center;
  border: 1px solid rgba(82,50,77,.10);
  border-radius: 34px;
  background: rgba(255,255,255,.94);
  box-shadow: 12px 14px 0 rgba(255,154,203,.18), 0 20px 48px rgba(79,43,71,.09);
}
.square-payment-progress__mark {
  width: 112px;
  height: 112px;
  overflow: visible;
}
.square-payment-progress__outer,
.square-payment-progress__inner,
.square-payment-progress__check {
  fill: none;
  stroke: #171717;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.square-payment-progress__outer {
  stroke-dasharray: 310;
  animation: square-mark-redraw 1.9s ease-in-out infinite;
}
.square-payment-progress__inner {
  stroke-dasharray: 110;
  animation: square-mark-redraw 1.9s .18s ease-in-out infinite;
}
.square-payment-progress__check {
  opacity: 0;
  stroke: #25aab2;
  stroke-dasharray: 75;
  stroke-dashoffset: 75;
}
.square-payment-progress__word {
  font-size: 1.3rem !important;
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
}
.square-payment-progress__card > strong {
  color: #79009b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  line-height: 1.05;
}
.square-payment-progress__card > span:last-child {
  max-width: 30ch;
  color: rgba(75,47,67,.72);
  font-size: .9rem;
  line-height: 1.55;
}
.square-payment-progress.is-complete .square-payment-progress__outer,
.square-payment-progress.is-complete .square-payment-progress__inner {
  animation: none;
  opacity: .12;
}
.square-payment-progress.is-complete .square-payment-progress__check {
  opacity: 1;
  animation: square-check-draw .45s ease forwards;
}
@keyframes square-mark-redraw {
  0%, 12% { stroke-dashoffset: 0; opacity: 1; }
  47% { stroke-dashoffset: 310; opacity: .18; }
  58% { stroke-dashoffset: -310; opacity: .18; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes square-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .square-payment-progress__outer,
  .square-payment-progress__inner { animation: none !important; }
  .square-payment-progress.is-complete .square-payment-progress__check { animation: none !important; stroke-dashoffset: 0; }
}

/* =========================================================
   DETAIL LAYOUT CORRECTION - 20 AUG 2026
   Workshop + party pages: compact information first, taped note beside it,
   facts underneath, then a tight transaction area. These rules intentionally
   sit last so legacy decorative sizing cannot collapse phone columns.
========================================================= */

/* ---------- Workshop: title/description + sticky note + fact strip ---------- */
.workshop-page .workshop-detail-hero--info-split {
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr) !important;
  grid-template-areas:
    "workshop-copy workshop-note"
    "workshop-facts workshop-facts" !important;
  gap: 26px clamp(30px, 4vw, 58px) !important;
  align-items: start !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy {
  grid-area: workshop-copy;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1 {
  width: 100% !important;
  max-width: 11ch !important;
  margin: 0 !important;
  font-size: clamp(3.35rem, 5.5vw, 5.9rem) !important;
  line-height: .91 !important;
  text-wrap: balance;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-lead {
  width: 100% !important;
  max-width: 68ch !important;
  margin: 18px 0 0 !important;
  font-size: clamp(.98rem, 1.22vw, 1.08rem) !important;
  line-height: 1.62 !important;
  white-space: normal !important;
}

.workshop-page .workshop-story-inclusions--hero {
  grid-area: workshop-note;
  position: relative !important;
  width: min(100%, 390px) !important;
  min-width: 0 !important;
  margin: 10px auto 0 !important;
  padding: 31px 26px 23px !important;
  align-self: start !important;
  justify-self: center !important;
  transform: rotate(.25deg) !important;
}

.workshop-page .workshop-story-inclusions--hero > strong {
  display: block;
  margin: 0 0 13px;
  color: #168d94;
  font-size: .92rem;
}

.workshop-page .workshop-story-inclusions--hero ul {
  margin-bottom: 0 !important;
}

.workshop-page .workshop-story-facts--hero {
  grid-area: workshop-facts;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 2px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.workshop-page .workshop-story-facts--hero > div,
.workshop-page .workshop-story-facts--hero > div:nth-child(n) {
  position: static !important;
  min-width: 0 !important;
  min-height: 68px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(82, 50, 77, .14) !important;
  border-radius: 15px !important;
  color: #4b2f43 !important;
  background: #fff5fa !important;
  box-shadow: 2px 3px 0 rgba(138, 19, 173, .06) !important;
  text-align: center !important;
  transform: none !important;
  translate: none !important;
  rotate: 0deg !important;
  animation: none !important;
}

.workshop-page .workshop-story-facts--hero dt {
  margin: 0 !important;
  color: #7a168f !important;
  font-size: .61rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

.workshop-page .workshop-story-facts--hero dd {
  margin: 4px 0 0 !important;
  color: #4b2f43 !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* ---------- Workshop transaction: remove the phone-sized dead air ---------- */
.workshop-page .workshop-detail-body--booking-only {
  padding-top: 10px !important;
}

.workshop-page .workshop-booking-card--unified > h2 {
  margin-bottom: 16px !important;
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage {
  align-content: start !important;
}

.workshop-page .square-payment-panel__heading,
.workshop-page .workshop-ticket-email-note,
.workshop-page .square-card-container,
.workshop-page .square-payment-hold,
.workshop-page .square-trust-panel--friendly {
  flex: 0 0 auto;
}

/* ---------- Party: hero + what you're booking become one section ---------- */
.party-page .party-hero--info-split {
  width: min(calc(100% - 40px), 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(48px, 6vw, 74px) 0 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr) !important;
  grid-template-areas:
    "party-copy party-note"
    "party-facts party-facts" !important;
  gap: 26px clamp(30px, 4vw, 58px) !important;
  align-items: start !important;
}

.party-page .party-hero--info-split .party-hero__copy {
  grid-area: party-copy;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  text-align: left !important;
}

.party-page .party-hero--info-split .party-hero__copy > .eyebrow {
  margin: 0 0 16px !important;
}

.party-page .party-hero--info-split .party-hero__copy h1 {
  width: 100% !important;
  max-width: 11ch !important;
  margin: 0 !important;
  font-size: clamp(3.2rem, 5.4vw, 5.7rem) !important;
  line-height: .92 !important;
}

.party-page .party-hero--info-split .party-hero__lead {
  width: 100% !important;
  max-width: 70ch !important;
  margin: 18px 0 0 !important;
  font-size: clamp(.98rem, 1.22vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

.party-page .party-hero--info-split .party-occasion-row {
  width: 100% !important;
  margin: 17px 0 0 !important;
  justify-content: flex-start !important;
}

.party-page .party-hero--info-split .party-hero__copy > .button {
  margin: 20px 0 0 !important;
}

.party-page .party-inclusions-card--hero {
  grid-area: party-note;
  position: relative !important;
  width: min(100%, 390px) !important;
  min-width: 0 !important;
  margin: 10px auto 0 !important;
  padding: 31px 26px 23px !important;
  align-self: start !important;
  justify-self: center !important;
  transform: rotate(.25deg) !important;
  animation: none !important;
}

.party-page .party-inclusions-card--hero > strong {
  display: block;
  margin: 0 0 13px;
  color: #168d94;
  font-size: .92rem;
}

.party-page .party-hero--info-split > .party-hero__chips {
  grid-area: party-facts;
  width: 100% !important;
  margin: 2px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.party-page .party-hero--info-split > .party-hero__chips span {
  animation: none !important;
  transform: none !important;
  rotate: 0deg !important;
}

.party-page .party-pricing {
  padding-top: 34px !important;
}

.party-page .party-band-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.party-page .party-band,
.party-page .party-band:nth-child(n) {
  min-width: 0;
  padding: 20px 18px !important;
  transform: none !important;
  animation: none !important;
}

.party-page .party-band h3 {
  margin: 10px 0 8px !important;
  font-size: 1.34rem !important;
}

.party-page .party-band > strong {
  font-size: 1.02rem !important;
}

.party-page .party-band p {
  margin-top: 8px !important;
  font-size: .8rem !important;
}

.party-page .party-band--custom {
  display: grid;
  align-content: center;
  justify-items: start;
  background: linear-gradient(145deg, #fff5c7, #fff8ef) !important;
  box-shadow: 7px 8px 0 rgba(37, 170, 178, .13) !important;
}

.party-page .party-band--custom > b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #4b2f43;
  background: #ffd55e;
  font-size: 1rem;
}

.party-page .party-band--custom a {
  margin-top: 10px;
  color: #7a168f;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  text-underline-offset: 3px;
}

.party-page .party-booking-progress {
  display: none !important;
}

/* ---------- Phone corrections ---------- */
@media (max-width: 720px) {
  .detail-page main {
    overflow: hidden !important;
  }

  .workshop-page .workshop-detail-main,
  .party-page .party-main {
    padding-bottom: 0 !important;
  }

  .workshop-page .workshop-detail-hero--info-split,
  .party-page .party-hero--info-split {
    width: min(calc(100% - 30px), 680px) !important;
    padding: 34px 0 22px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .workshop-page .workshop-detail-hero--info-split {
    grid-template-areas:
      "workshop-copy"
      "workshop-note"
      "workshop-facts" !important;
  }

  .party-page .party-hero--info-split {
    grid-template-areas:
      "party-copy"
      "party-note"
      "party-facts" !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy,
  .party-page .party-hero--info-split .party-hero__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1,
  .party-page .party-hero--info-split .party-hero__copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(2.8rem, 12vw, 4rem) !important;
    line-height: .93 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-lead,
  .party-page .party-hero--info-split .party-hero__lead {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px !important;
    font-size: .96rem !important;
    line-height: 1.55 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy > .eyebrow,
  .party-page .party-hero--info-split .party-hero__copy > .eyebrow {
    margin: 0 0 14px !important;
  }

  .workshop-page .workshop-story-inclusions--hero,
  .party-page .party-inclusions-card--hero {
    width: min(100%, 460px) !important;
    margin: 4px auto 0 !important;
    padding: 29px 22px 21px !important;
    transform: none !important;
  }

  .workshop-page .workshop-story-facts--hero {
    width: 100% !important;
    margin-top: 2px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .workshop-page .workshop-story-facts--hero > div,
  .workshop-page .workshop-story-facts--hero > div:nth-child(n) {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 9px 8px !important;
  }

  .workshop-page .workshop-story-facts--hero dt {
    font-size: .58rem !important;
  }

  .workshop-page .workshop-story-facts--hero dd {
    font-size: .73rem !important;
    line-height: 1.24 !important;
  }

  .party-page .party-hero--info-split .party-occasion-row,
  .party-page .party-hero--info-split > .party-hero__chips {
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .party-page .party-hero--info-split .party-hero__copy > .button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .party-page .party-pricing,
  .party-page .party-booking {
    width: min(calc(100% - 30px), 680px) !important;
    padding-top: 28px !important;
    padding-bottom: 34px !important;
  }

  .party-page .party-band-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .party-page .party-band,
  .party-page .party-band:nth-child(n) {
    padding: 16px 13px !important;
  }

  .party-page .party-band h3 {
    font-size: 1.05rem !important;
  }

  .party-page .party-band > strong {
    font-size: .86rem !important;
  }

  .party-page .party-band p,
  .party-page .party-band--custom a {
    font-size: .72rem !important;
  }

  .workshop-page .workshop-detail-body--booking-only {
    width: min(calc(100% - 22px), 680px) !important;
    padding: 4px 0 22px !important;
  }

  .workshop-page .workshop-booking-card--unified {
    padding: 10px 0 18px !important;
  }

  .workshop-page .workshop-booking-card--unified > .workshop-booking-square-eyebrow {
    margin-bottom: 8px !important;
  }

  .workshop-page .workshop-booking-card--unified > h2 {
    margin: 0 auto 12px !important;
    font-size: clamp(2rem, 9.5vw, 2.9rem) !important;
    line-height: .98 !important;
  }

  .workshop-page .workshop-booking-flow--two-column {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  .workshop-page .workshop-booking-flow--two-column .workshop-booking-stage,
  .workshop-page .square-payment-panel.workshop-booking-stage--square {
    height: auto !important;
    min-height: 0 !important;
    padding: 15px !important;
  }

  .workshop-page .workshop-booking-form {
    gap: 8px !important;
  }

  .workshop-page .square-payment-panel__heading {
    margin: 0 0 5px !important;
  }

  .workshop-page .square-payment-panel__heading h3 {
    font-size: clamp(1.55rem, 7.3vw, 2rem) !important;
    line-height: 1 !important;
  }

  .workshop-page .workshop-ticket-email-note {
    margin: 4px 0 7px !important;
    padding: 9px 10px !important;
  }

  .workshop-page .workshop-ticket-email-note span {
    margin-top: 2px !important;
    font-size: .7rem !important;
    line-height: 1.35 !important;
  }

  .workshop-page .square-card-container {
    min-height: 78px !important;
    margin: 0 0 7px !important;
  }

  .workshop-page .square-payment-panel > .button {
    margin: 0 !important;
  }

  .workshop-page .square-payment-hold {
    margin: 6px 0 0 !important;
  }

  .workshop-page .square-trust-panel--friendly {
    margin-top: 7px !important;
    padding-top: 7px !important;
    gap: 4px !important;
  }

  .workshop-page .square-trust-panel--friendly p,
  .workshop-page .square-trust-panel--friendly a {
    font-size: .68rem !important;
    line-height: 1.35 !important;
  }

  .detail-page .site-footer {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .party-page .party-band-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   SPRINT 4 - DETAIL PAGE CONSISTENCY + MOBILE HIERARCHY
   Record Painting / Mirror Party are the reference templates.
   Practical decision facts lead on mobile; inclusions stay secondary.
========================================================= */

/* One shared hero title scale keeps long Workshop and Party names predictable. */
.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1,
.party-page .party-hero--info-split .party-hero__copy h1 {
  font-size: clamp(3.3rem, 5.45vw, 5.8rem) !important;
  line-height: .92 !important;
}

/* Party actions are independent grid items so desktop and mobile can use
   different information orders without duplicating content. */
.party-page .party-hero--info-split {
  grid-template-areas:
    "party-copy party-note"
    "party-occasions party-note"
    "party-cta party-note"
    "party-facts party-facts" !important;
  row-gap: 14px !important;
}

.party-page .party-hero--info-split .party-occasion-row--hero {
  grid-area: party-occasions;
  width: 100% !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  align-self: start;
}

.party-page .party-hero--info-split .party-hero__cta {
  grid-area: party-cta;
  width: fit-content !important;
  max-width: 100%;
  margin: 2px 0 0 !important;
  align-self: start;
  justify-self: start;
}

/* Facts are the decision layer. The note is intentionally secondary. */
.workshop-page .workshop-story-facts--hero dt {
  font-size: .67rem !important;
}
.workshop-page .workshop-story-facts--hero dd {
  font-size: .84rem !important;
  line-height: 1.3 !important;
}

@media (max-width: 720px) {
  /* Workshop: title -> facts -> inclusions -> ticketing. */
  .workshop-page .workshop-detail-hero--info-split {
    grid-template-areas:
      "workshop-copy"
      "workshop-facts"
      "workshop-note" !important;
  }

  /* Party: title -> commitment facts -> suitable-for -> booking action -> inclusions. */
  .party-page .party-hero--info-split {
    grid-template-areas:
      "party-copy"
      "party-facts"
      "party-occasions"
      "party-cta"
      "party-note" !important;
    row-gap: 14px !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1,
  .party-page .party-hero--info-split .party-hero__copy h1 {
    font-size: clamp(2.8rem, 12vw, 4rem) !important;
    line-height: .93 !important;
  }

  .workshop-page .workshop-story-facts--hero {
    margin-top: 0 !important;
  }

  .workshop-page .workshop-story-facts--hero dt {
    font-size: .67rem !important;
    letter-spacing: .055em !important;
  }

  .workshop-page .workshop-story-facts--hero dd {
    font-size: .84rem !important;
    line-height: 1.28 !important;
  }

  .workshop-page .workshop-story-inclusions--hero,
  .party-page .party-inclusions-card--hero {
    margin-top: 4px !important;
  }

  .party-page .party-hero--info-split > .party-hero__chips {
    margin-top: 0 !important;
    justify-content: flex-start !important;
  }

  .party-page .party-hero--info-split .party-occasion-row--hero {
    margin-top: 0 !important;
    justify-content: flex-start !important;
  }

  .party-page .party-hero--info-split .party-hero__cta {
    width: 100% !important;
    min-height: 48px;
    margin: 2px 0 0 !important;
    justify-self: stretch;
    justify-content: center;
  }
}


/* =========================================================
   SPRINT 5 - BOOKING UX + ACCESSIBILITY + REGRESSION QA
   Reconnects existing booking-summary/progress hooks and keeps payment gated
   behind a valid customer configuration without changing Square/Firebase APIs.
========================================================= */

.party-page .party-booking-progress {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: -6px 0 22px !important;
}

.party-page .party-booking-progress span {
  min-height: 52px;
  padding: 8px 9px;
}

.party-page .party-booking-progress em {
  font-size: .72rem;
  line-height: 1.12;
  white-space: normal;
}

.party-page .party-price-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.party-page .party-price-summary__wide {
  grid-column: span 2;
}

.party-page .transaction-review--party {
  margin: 16px 0 18px;
  border-color: color-mix(in srgb, var(--party-accent) 35%, #5d4765 18%);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--party-accent) 52%, white);
}

.party-page .party-form-heading {
  margin: 20px 0 2px;
  padding-top: 18px;
  border-top: 1px dashed rgba(45, 36, 72, .22);
}

.party-page .party-form-heading .eyebrow { margin-bottom: 5px; }
.party-page .party-form-heading h3 { margin: 0; font-size: 1.2rem; line-height: 1.18; }

.workshop-page .workshop-transaction-review {
  display: block;
  margin: 4px 0 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(82, 57, 94, .14) !important;
  border-radius: 15px !important;
  background: #fffdfd !important;
  box-shadow: none !important;
}

.workshop-page .workshop-transaction-review .transaction-review__heading { margin-bottom: 9px; }
.workshop-page .workshop-transaction-review dl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.workshop-page .workshop-transaction-review .transaction-review__wide { grid-column: 1 / -1 !important; }

@media (max-width: 720px) {
  .party-page .party-booking-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: -4px !important;
  }

  .party-page .party-price-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .party-page .party-price-summary__wide { grid-column: 1 / -1; }

  .party-page .transaction-review--party dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .party-page .transaction-review--party .transaction-review__wide {
    grid-column: 1 / -1 !important;
  }

  .workshop-page .workshop-booking-privacy {
    font-size: .74rem !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 359px) {
  .party-page .party-booking-progress { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* =========================================================
   REFINEMENT SPRINT B - WORKSHOP DETAIL + CHECKOUT
   20 Aug 2026. Centred story, visible fact gradients and a
   vertical details -> review -> payment journey. Square APIs,
   booking ids and ticket redirect hooks are intentionally unchanged.
========================================================= */

/* Hero: title and taped note form one centred pair; facts sit beneath. */
.workshop-page .workshop-detail-hero--info-split {
  width: min(calc(100% - 44px), 1120px) !important;
  padding: clamp(42px, 5vw, 66px) 0 clamp(30px, 4vw, 46px) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr) !important;
  grid-template-areas:
    "workshop-copy workshop-note"
    "workshop-facts workshop-facts" !important;
  column-gap: clamp(30px, 4vw, 54px) !important;
  row-gap: clamp(28px, 3vw, 38px) !important;
  align-items: center !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy {
  text-align: center !important;
  align-self: center !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy > .eyebrow {
  margin: 0 auto 16px !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1 {
  max-width: 11ch !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.workshop-page .workshop-detail-hero--info-split .workshop-detail-lead {
  max-width: 62ch !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
}

.workshop-page .workshop-story-inclusions--hero {
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

/* The practical information is a genuine colour layer, not near-white cards. */
.workshop-page .workshop-story-facts--hero {
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.workshop-page .workshop-story-facts--hero > div,
.workshop-page .workshop-story-facts--hero > div:nth-child(n) {
  min-height: 104px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(76, 48, 75, .18) !important;
  border-radius: 20px 18px 22px 19px !important;
  box-shadow: 5px 6px 0 rgba(84, 60, 96, .09) !important;
  text-align: center !important;
}

.workshop-page .workshop-story-facts--hero > div:nth-child(1) {
  background: linear-gradient(135deg, #ffe0eb 0%, #fff0bf 100%) !important;
}
.workshop-page .workshop-story-facts--hero > div:nth-child(2) {
  background: linear-gradient(135deg, #f2ddff 0%, #ffdfea 100%) !important;
}
.workshop-page .workshop-story-facts--hero > div:nth-child(3) {
  background: linear-gradient(135deg, #dff6ed 0%, #fff0be 100%) !important;
}
.workshop-page .workshop-story-facts--hero > div:nth-child(4) {
  background: linear-gradient(135deg, #dff3ff 0%, #e7dffd 100%) !important;
}
.workshop-page .workshop-story-facts--hero > div:nth-child(5) {
  background: linear-gradient(135deg, #ffe1ee 0%, #dff6f0 100%) !important;
}
.workshop-page .workshop-story-facts--hero > div:nth-child(6) {
  background: linear-gradient(135deg, #ebe0ff 0%, #ffe1cd 100%) !important;
}

.workshop-page .workshop-story-facts--hero dt {
  color: #73138d !important;
  font-size: .68rem !important;
}

.workshop-page .workshop-story-facts--hero dd {
  margin-top: 6px !important;
  color: #4b2f43 !important;
  font-size: .9rem !important;
  font-weight: 820 !important;
  line-height: 1.35 !important;
}

/* Checkout: remove the split-screen shell and make each stage its own surface. */
.workshop-page .workshop-detail-body--booking-only {
  width: min(calc(100% - 36px), 920px) !important;
  padding: 6px 0 70px !important;
}

.workshop-page .workshop-booking-card--unified {
  max-width: 920px !important;
  padding: 22px 0 34px !important;
}

.workshop-page .workshop-booking-card--unified > h2 {
  max-width: 760px;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

.workshop-page .workshop-booking-flow--two-column {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage,
.workshop-page .square-payment-panel.workshop-booking-stage--square {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(22px, 3.2vw, 32px) !important;
  border: 1px solid rgba(76, 48, 75, .16) !important;
  border-radius: 26px 23px 28px 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,251,.92)) !important;
  box-shadow: 8px 9px 0 rgba(37,170,178,.10) !important;
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage--details {
  border-left: 1px solid rgba(76, 48, 75, .16) !important;
}

.workshop-page .workshop-booking-flow--two-column .workshop-booking-stage--square {
  margin: 0 !important;
  border-top: 1px solid rgba(76, 48, 75, .16) !important;
  border-left: 1px solid rgba(76, 48, 75, .16) !important;
  background: linear-gradient(145deg, rgba(255,253,248,.98), rgba(246,249,255,.94)) !important;
  box-shadow: 8px 9px 0 rgba(244,155,199,.13) !important;
}

.workshop-page .workshop-booking-stage--details > .eyebrow {
  margin: 0 auto 18px !important;
}

.workshop-page .workshop-booking-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.workshop-page .workshop-booking-field--places {
  grid-column: 1 / -1 !important;
  width: min(100%, 280px);
  justify-self: center;
}

/* Your booking becomes a colourful, readable summary rather than grey utility UI. */
.workshop-page .workshop-transaction-review {
  margin: 6px 0 8px !important;
  padding: 18px !important;
  border: 1px solid rgba(96, 57, 103, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff1f7 0%, #fff5cf 33%, #e4f7f1 67%, #ece5ff 100%) !important;
  box-shadow: 5px 6px 0 rgba(138, 19, 173, .08) !important;
}

.workshop-page .workshop-transaction-review .transaction-review__heading {
  margin-bottom: 13px !important;
  justify-content: center !important;
  text-align: center !important;
}

.workshop-page .workshop-transaction-review .transaction-review__heading strong {
  color: #6f1787 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
}

.workshop-page .workshop-transaction-review dl {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.workshop-page .workshop-transaction-review dl > div {
  padding: 13px 14px !important;
  border: 1px solid rgba(83, 54, 86, .10);
  border-radius: 16px !important;
  background: rgba(255,255,255,.72) !important;
}

.workshop-page .workshop-transaction-review .transaction-review__wide {
  grid-column: 1 / -1 !important;
}

.workshop-page .workshop-transaction-review .transaction-review__total {
  background: linear-gradient(135deg, #e7d9ff, #ffd9ee) !important;
  border-color: rgba(138,19,173,.18) !important;
}

.workshop-page .workshop-transaction-review .transaction-review__total dd {
  color: #7b1496 !important;
  font-size: 1.08rem !important;
}

.workshop-page .workshop-transaction-review .transaction-review__availability {
  background: linear-gradient(135deg, #dff6ef, #fff0bd) !important;
  border-color: rgba(37,170,178,.18) !important;
}

.workshop-page .workshop-transaction-review dt {
  color: #705973 !important;
  font-size: .7rem !important;
}

.workshop-page .workshop-transaction-review dd {
  color: #4b2f43 !important;
  font-size: .92rem !important;
}

.workshop-page .booking-terms-check,
.workshop-page .booking-updates-check {
  border-radius: 17px !important;
}

/* Payment is centred and visually connected: card -> action -> trust. */
.workshop-page .square-payment-panel__heading {
  width: 100% !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
}

.workshop-page .square-payment-panel__heading h3 {
  margin: 0 !important;
  color: #81159b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.workshop-page .workshop-ticket-email-note {
  width: min(100%, 640px) !important;
  margin: 0 auto 12px !important;
  padding: 13px 15px !important;
  text-align: center;
}

.workshop-page .workshop-ticket-email-note strong {
  font-size: .9rem !important;
}

.workshop-page .workshop-ticket-email-note span {
  font-size: .79rem !important;
}

.workshop-page .workshop-ticket-email-note small {
  color: #735d70;
  font-size: .7rem;
  line-height: 1.4;
}

.workshop-page .square-card-container {
  width: min(100%, 640px) !important;
  min-height: 58px !important;
  margin: 0 auto 8px !important;
}

.workshop-page .square-payment-panel > .button {
  width: min(100%, 640px) !important;
  min-height: 54px;
  margin: 0 auto !important;
}

.workshop-page .square-payment-hold {
  width: min(100%, 640px) !important;
  margin: 7px auto 0 !important;
  text-align: center;
}

.workshop-page .square-payment-panel > .workshop-booking-status {
  width: min(100%, 640px) !important;
  margin: 5px auto 0 !important;
  text-align: center;
}

.workshop-page .square-trust-panel--friendly {
  width: min(100%, 640px) !important;
  margin: 10px auto 0 !important;
  padding-top: 10px !important;
  text-align: center;
}

.workshop-page .square-trust-panel--friendly > strong {
  display: block;
  margin-bottom: 4px;
  color: #3f2d46;
  font-size: .82rem;
}

.workshop-page .square-trust-panel--friendly p {
  font-size: .73rem;
  line-height: 1.45;
}

/* Mobile returns to the natural story order: title -> Included -> facts. */
@media (max-width: 720px) {
  .workshop-page .workshop-detail-hero--info-split {
    width: min(calc(100% - 28px), 680px) !important;
    padding: 32px 0 26px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "workshop-copy"
      "workshop-note"
      "workshop-facts" !important;
    gap: 18px !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy,
  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy h1,
  .workshop-page .workshop-detail-hero--info-split .workshop-detail-lead {
    text-align: center !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy > .eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .workshop-page .workshop-story-inclusions--hero {
    width: min(100%, 460px) !important;
    margin: 4px auto 2px !important;
  }

  .workshop-page .workshop-story-facts--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .workshop-page .workshop-story-facts--hero > div,
  .workshop-page .workshop-story-facts--hero > div:nth-child(n) {
    min-height: 84px !important;
    padding: 12px 10px !important;
  }

  .workshop-page .workshop-story-facts--hero dd {
    font-size: .82rem !important;
  }

  .workshop-page .workshop-detail-body--booking-only {
    width: min(calc(100% - 22px), 680px) !important;
    padding-bottom: 34px !important;
  }

  .workshop-page .workshop-booking-card--unified {
    padding: 12px 0 20px !important;
  }

  .workshop-page .workshop-booking-flow--two-column {
    gap: 16px !important;
  }

  .workshop-page .workshop-booking-flow--two-column .workshop-booking-stage,
  .workshop-page .square-payment-panel.workshop-booking-stage--square {
    padding: 18px !important;
  }

  .workshop-page .workshop-booking-form {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  .workshop-page .workshop-booking-field--places {
    grid-column: 1 !important;
    width: 100%;
  }
}

@media (max-width: 390px) {
  .workshop-page .workshop-story-facts--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .workshop-page .workshop-story-facts--hero > div,
  .workshop-page .workshop-story-facts--hero > div:nth-child(n) {
    min-height: 80px !important;
    padding: 11px 8px !important;
  }

  .workshop-page .workshop-story-facts--hero dt {
    font-size: .64rem !important;
  }

  .workshop-page .workshop-story-facts--hero dd {
    font-size: .78rem !important;
  }
}

/* =========================================================
   REFINEMENT SPRINT C - PARTY DETAIL + SIMPLIFIED BOOKING
   21 Aug 2026. One continuous party journey: hero -> people -> time ->
   review -> details -> payment. Duplicate package/progress layers removed.
========================================================= */

.party-page .party-journey-shell {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 9% 17%, rgba(255, 213, 94, .18), transparent 28rem),
    radial-gradient(circle at 90% 52%, rgba(114, 216, 208, .16), transparent 29rem),
    linear-gradient(180deg, #fffaf3 0%, #fff7fb 49%, #fbf8ff 100%);
  padding-bottom: clamp(46px, 6vw, 78px);
}

.party-page .party-hero--info-split {
  padding-bottom: 22px !important;
  grid-template-areas:
    "party-copy party-note"
    "party-occasions party-note"
    "party-facts party-facts" !important;
}

.party-page .party-booking {
  width: min(calc(100% - 44px), 1120px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 10px 0 0 !important;
}

.party-page .party-booking__heading {
  width: min(100%, 850px);
  max-width: none !important;
  margin: 0 auto 24px !important;
  text-align: center;
}

.party-page .party-booking__heading > .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

.party-page .party-booking__heading h2 {
  margin: 8px auto 0 !important;
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.2vw, 5rem) !important;
  line-height: .94 !important;
  text-align: center;
}

.party-page .party-booking-desk {
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.party-page .party-booking-form-wrap {
  width: 100% !important;
  padding: 0 !important;
  display: grid !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.party-page .party-setup-section,
.party-page .party-customer-form,
.party-page .party-payment-panel--inline {
  border: 1px solid rgba(74, 48, 70, .16) !important;
  border-radius: 25px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--party-accent) 34%, white) !important;
}

.party-page .party-setup-section {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1fr);
  grid-template-areas:
    "setup-heading setup-control"
    "setup-heading setup-help";
  gap: 9px 24px;
  align-items: center;
}

.party-page .party-setup-section__heading {
  grid-area: setup-heading;
  display: grid;
  align-content: center;
  gap: 8px;
  cursor: pointer;
}

.party-page .party-setup-section__heading .eyebrow {
  width: fit-content;
  margin: 0 !important;
}

.party-page .party-setup-section__heading > strong {
  color: #4b2f43;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  line-height: 1.02;
}

.party-page .party-setup-section > select {
  grid-area: setup-control;
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  border: 1px solid rgba(89, 61, 87, .22);
  border-radius: 15px;
  background: #fffdfd;
}

.party-page .party-setup-section > .party-help,
.party-page .party-setup-section > .party-no-times {
  grid-area: setup-help;
  margin: 0 !important;
}

.party-page .party-help--selection {
  color: #5e4a5b !important;
  font-size: .86rem !important;
  font-weight: 750;
  line-height: 1.4 !important;
}

/* One financial truth panel. */
.party-page .transaction-review--party {
  margin: 0 !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border: 2px solid rgba(92, 64, 91, .2) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg,
      rgba(255, 231, 244, .96) 0%,
      rgba(255, 244, 201, .96) 34%,
      rgba(226, 249, 242, .96) 67%,
      rgba(239, 231, 252, .96) 100%) !important;
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--party-accent) 52%, white) !important;
}

.party-page .transaction-review--party .transaction-review__heading {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0 0 18px !important;
  text-align: center;
}

.party-page .transaction-review--party .transaction-review__heading .eyebrow {
  margin: 0 !important;
}

.party-page .transaction-review--party .transaction-review__heading > strong {
  color: #80149a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.party-page .transaction-review--party dl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.party-page .transaction-review--party dl > div {
  min-width: 0;
  padding: 14px 15px !important;
  border: 1px solid rgba(89, 61, 87, .11);
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.party-page .transaction-review--party .transaction-review__wide {
  grid-column: 1 / -1 !important;
}

.party-page .transaction-review--party dt {
  color: #7a6878 !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.party-page .transaction-review--party dd {
  margin: 5px 0 0 !important;
  color: #4b2f43 !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.party-page .transaction-review--party .transaction-review__total {
  background: linear-gradient(135deg, #ffe3f2, #fff0bd) !important;
}

.party-page .transaction-review--party .transaction-review__deposit {
  background: linear-gradient(135deg, #fff0bd, #dff8f3) !important;
}

.party-page .transaction-review--party .transaction-review__balance {
  background: linear-gradient(135deg, #dff8f3, #eee4fb) !important;
}

.party-page .transaction-review--party .transaction-review__total dd,
.party-page .transaction-review--party .transaction-review__deposit dd {
  color: #7c168f !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
}

.party-page .party-customer-form {
  padding: 24px !important;
}

.party-page .party-form-heading {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: center;
}

.party-page .party-form-heading .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

.party-page .party-form-heading h3 {
  margin-top: 8px !important;
  color: #4b2f43;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
}

.party-page .party-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.party-page .party-fields > div,
.party-page .party-fields input {
  min-width: 0;
}

.party-page .party-payment-panel--inline {
  position: static !important;
  width: min(100%, 760px) !important;
  margin: 2px auto 0 !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-top: 1px solid rgba(74, 48, 70, .16) !important;
  text-align: center;
}

.party-page .party-payment-panel--inline > .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

.party-page .party-payment-panel--inline h3 {
  margin: 9px auto 8px !important;
  color: #81159b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
}

.party-page .party-payment-panel--inline > #party-payment-copy {
  width: min(100%, 640px);
  margin: 0 auto 10px !important;
  text-align: center;
}

.party-page .party-payment-panel--inline .party-payment-placeholder,
.party-page .party-payment-panel--inline .square-card-container,
.party-page .party-payment-panel--inline > .button,
.party-page .party-payment-panel--inline .party-payment-status,
.party-page .party-payment-panel--inline .square-trust-panel--friendly {
  width: min(100%, 640px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.party-page .party-payment-panel--inline .square-card-container {
  min-height: 58px !important;
  margin-bottom: 8px !important;
  text-align: left;
}

.party-page .party-payment-panel--inline > .button {
  min-height: 54px;
  margin-top: 0 !important;
}

.party-page .party-payment-panel--inline .party-payment-status {
  margin-top: 6px !important;
}

.party-page .party-payment-panel--inline .square-trust-panel--friendly {
  margin-top: 10px !important;
  padding-top: 10px !important;
  text-align: center;
}

.party-page .party-payment-panel--inline .square-trust-panel--friendly > strong {
  display: block;
  margin-bottom: 4px;
  color: #3f2d46;
  font-size: .82rem;
}

.party-page .party-payment-panel--inline .square-trust-panel--friendly p,
.party-page .party-payment-panel--inline .square-trust-panel--friendly a {
  font-size: .73rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .party-page .party-journey-shell {
    padding-bottom: 42px;
  }

  .party-page .party-hero--info-split {
    grid-template-areas:
      "party-copy"
      "party-note"
      "party-facts"
      "party-occasions" !important;
    padding-bottom: 16px !important;
  }

  .party-page .party-hero--info-split .party-hero__copy,
  .party-page .party-hero--info-split .party-hero__copy h1,
  .party-page .party-hero--info-split .party-hero__lead {
    text-align: center !important;
  }

  .party-page .party-hero--info-split .party-hero__copy > .eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .party-page .party-hero--info-split > .party-hero__chips,
  .party-page .party-hero--info-split .party-occasion-row--hero {
    justify-content: center !important;
  }

  .party-page .party-booking {
    width: min(calc(100% - 28px), 680px) !important;
    padding-top: 8px !important;
  }

  .party-page .party-booking__heading {
    margin-bottom: 18px !important;
  }

  .party-page .party-booking__heading h2 {
    font-size: clamp(2.3rem, 10vw, 3.5rem) !important;
  }

  .party-page .party-booking-desk,
  .party-page .party-booking-form-wrap {
    width: 100% !important;
  }

  .party-page .party-setup-section {
    padding: 18px !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "setup-heading"
      "setup-control"
      "setup-help";
    gap: 10px;
  }

  .party-page .party-setup-section__heading {
    justify-items: center;
    text-align: center;
  }

  .party-page .party-setup-section__heading .eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .party-page .party-help,
  .party-page .party-no-times {
    text-align: center;
  }

  .party-page .transaction-review--party {
    padding: 18px !important;
  }

  .party-page .transaction-review--party dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .party-page .transaction-review--party .transaction-review__wide {
    grid-column: 1 / -1 !important;
  }

  .party-page .party-customer-form,
  .party-page .party-payment-panel--inline {
    padding: 18px !important;
  }

  .party-page .party-fields {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .party-page .transaction-review--party dl {
    grid-template-columns: 1fr !important;
  }

  .party-page .transaction-review--party .transaction-review__wide {
    grid-column: auto !important;
  }
}

/* =========================================================
   FINAL REGRESSION PATCH - WORKSHOP FACT TEXT CONTRAST
   Older gradient-pill rules set -webkit-text-fill-color to
   white. Restore the intended Sprint B dark text explicitly.
========================================================= */
.workshop-page .workshop-story-facts--hero dt {
  color: #7a168f !important;
  -webkit-text-fill-color: #7a168f !important;
}

.workshop-page .workshop-story-facts--hero dd {
  color: #4b2f43 !important;
  -webkit-text-fill-color: #4b2f43 !important;
}

/* =========================================================
   VISUAL ALIGNMENT PATCH - CENTRED WORKSHOP STORY + COMPACT PAYMENT
   Presentation only. Square/Firebase/ticket hooks and payment state logic
   remain unchanged.
========================================================= */
@media (min-width: 721px) {
  .workshop-page .workshop-detail-hero--info-split {
    width: min(calc(100% - 48px), 1040px) !important;
    max-width: 1040px !important;
    grid-template-columns: minmax(0, 620px) minmax(300px, 360px) !important;
    column-gap: clamp(28px, 3vw, 40px) !important;
    justify-content: center !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-copy {
    width: 100% !important;
    max-width: 620px !important;
    justify-self: end !important;
  }

  .workshop-page .workshop-detail-hero--info-split .workshop-detail-lead {
    max-width: 56ch !important;
  }

  .workshop-page .workshop-story-inclusions--hero {
    width: min(100%, 360px) !important;
    justify-self: start !important;
  }

  .workshop-page .workshop-story-facts--hero {
    width: 100% !important;
    max-width: 1040px !important;
  }
}

/* No replacement payment headline: the QR note is the first visible item. */
.workshop-page .square-payment-panel.workshop-booking-stage--square {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(16px, 2.2vw, 22px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: start !important;
  gap: 0 !important;
}

.workshop-page .square-payment-panel__heading {
  display: none !important;
}

.workshop-page .workshop-ticket-email-note {
  width: min(100%, 640px) !important;
  margin: 0 auto 14px !important;
  padding: 11px 13px !important;
  line-height: 1.35 !important;
}

.workshop-page .workshop-ticket-email-note strong {
  font-size: .88rem !important;
}

.workshop-page .workshop-ticket-email-note span {
  margin-top: 3px !important;
  font-size: .77rem !important;
  line-height: 1.38 !important;
}

.workshop-page .workshop-ticket-email-note small {
  margin-top: 5px !important;
  font-size: .69rem !important;
  line-height: 1.35 !important;
}

.workshop-page .square-card-container {
  width: min(100%, 640px) !important;
  min-height: 58px !important;
  margin: 0 auto 16px !important;
}

.workshop-page .square-payment-panel > .button {
  width: min(100%, 640px) !important;
  min-height: 54px !important;
  margin: 0 auto !important;
}

.workshop-page .square-payment-hold {
  width: min(100%, 640px) !important;
  margin: 7px auto 0 !important;
  text-align: center !important;
}

.workshop-page .square-payment-panel > .workshop-booking-status {
  width: min(100%, 640px) !important;
  margin: 4px auto 0 !important;
  text-align: center !important;
}

.workshop-page .square-trust-panel--friendly {
  width: min(100%, 640px) !important;
  margin: 18px auto 0 !important;
  padding-top: 10px !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .workshop-page .square-payment-panel.workshop-booking-stage--square {
    padding: 15px !important;
  }

  .workshop-page .workshop-ticket-email-note {
    margin-bottom: 13px !important;
    padding: 10px 11px !important;
  }

  .workshop-page .square-card-container {
    min-height: 58px !important;
    margin-bottom: 15px !important;
  }

  .workshop-page .square-trust-panel--friendly {
    margin-top: 17px !important;
  }
}

/* =========================================================
   PARTY FIXED PACKAGE SELECTOR + 50/50 CHECKOUT
   21 Aug 2026. Fixed guest-band packages, concise Square checkout.
========================================================= */
.party-page .party-setup-section--packages {
  display: block !important;
  padding: clamp(20px, 3vw, 28px) !important;
}

.party-page .party-setup-section--packages .party-setup-section__heading {
  display: grid !important;
  justify-items: center;
  gap: 7px;
  margin-bottom: 18px;
  text-align: center;
}

.party-page .party-tier-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.party-page .party-tier-option {
  appearance: none;
  min-width: 0;
  min-height: 142px;
  padding: 14px 10px 12px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px solid rgba(83, 52, 78, .18);
  border-radius: 19px;
  background: rgba(255, 255, 255, .9);
  color: #4b2f43;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 3px 4px 0 rgba(80, 44, 75, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.party-page .party-tier-option:hover {
  transform: translateY(-2px);
  border-color: rgba(128, 20, 154, .42);
}

.party-page .party-tier-option:focus-visible {
  outline: 3px solid rgba(37, 170, 178, .34);
  outline-offset: 3px;
}

.party-page .party-tier-option.is-selected {
  border: 2px solid #8a13ad;
  background: linear-gradient(145deg, #fff0f8 0%, #fff4c9 48%, #e4f8f4 100%);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--party-accent) 45%, white);
  transform: translateY(-2px);
}

.party-page .party-tier-option__name {
  color: #7d1498;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.02;
}

.party-page .party-tier-option__guests {
  color: #6d5968;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.party-page .party-tier-option > strong {
  color: #2d2448;
  font-size: 1.22rem;
  font-weight: 950;
}

.party-page .party-tier-option > small {
  color: #6d5968;
  font-size: .67rem;
  font-weight: 750;
  line-height: 1.28;
}

.party-page .party-guest-count-row {
  width: min(100%, 560px);
  margin: 18px auto 0;
  padding-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
  gap: 14px;
  align-items: center;
  border-top: 1px dashed rgba(90, 61, 85, .18);
}

.party-page .party-guest-count-row label {
  display: grid;
  gap: 3px;
  text-align: left;
}

.party-page .party-guest-count-row label > strong {
  color: #4b2f43;
  font-size: .88rem;
}

.party-page .party-guest-count-row label > span {
  color: #776472;
  font-size: .72rem;
  line-height: 1.35;
}

.party-page .party-guest-count-row select {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid rgba(89, 61, 87, .22);
  border-radius: 14px;
  background: #fffdfd;
  color: #4b2f43;
  font: inherit;
  font-weight: 800;
}

.party-page .party-setup-section--packages > .party-help {
  width: min(100%, 700px);
  margin: 12px auto 0 !important;
  text-align: center;
}

.party-page .party-payment-panel--inline {
  padding: clamp(20px, 3vw, 26px) !important;
}

.party-page .party-payment-panel--inline h3 {
  margin-bottom: 14px !important;
  font-size: clamp(1.9rem, 3.6vw, 2.65rem) !important;
}

.party-page .party-payment-split {
  width: min(100%, 640px);
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.party-page .party-payment-split > div {
  min-width: 0;
  padding: 13px 14px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(91, 60, 84, .12);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff0f8, #fff8d8);
}

.party-page .party-payment-split > div:last-child {
  background: linear-gradient(135deg, #e7faf5, #f1e9fb);
}

.party-page .party-payment-split span {
  color: #755f70;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.party-page .party-payment-split strong {
  color: #7d1498;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.party-page .party-payment-panel--inline > #party-payment-copy {
  margin-bottom: 12px !important;
  color: #604c5b;
  font-size: .86rem;
  line-height: 1.45;
}

.party-page .party-payment-panel--inline .party-payment-placeholder {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  padding: 13px 15px !important;
}

.party-page .party-payment-panel--inline .square-card-container {
  margin-top: 2px !important;
  margin-bottom: 12px !important;
}

.party-page .party-payment-panel--inline > .button {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .party-page .party-tier-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .party-page .party-tier-option {
    min-height: 126px;
    padding: 12px 8px;
  }

  .party-page .party-tier-option:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }

  .party-page .party-guest-count-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .party-page .party-guest-count-row label {
    text-align: center;
  }

  .party-page .party-payment-split {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .party-page .party-tier-option__name {
    font-size: 1rem;
  }

  .party-page .party-tier-option > strong {
    font-size: 1.08rem;
  }

  .party-page .party-payment-split {
    grid-template-columns: 1fr;
  }
}