/*
  Kellie's Table Website Styles
  Simple, warm, clean layout.

  Palette:
  Cream:          #FAF7F2
  Soft White:     #FFFFFF
  Charcoal:       #333333
  Reading Blue:   #0D6BAB
  Kitchen Green:  #5FA85F
  Art Orange:     #FE7803
  Photo Terracotta: #B96A56
  CTA Coral:      #D9776A
*/


/* -----------------------------
   Global Variables
----------------------------- */

:root {
  /* Colors */
  --cream: #FAF7F2;
  --white: #FFFFFF;
  --charcoal: #333333;

  /* Service colors */
  --reading-primary: #0D6BAB;
  --reading-secondary: #5F89B3;
  --reading-primary-rgb: 13, 107, 171;
  --reading-secondary-rgb: 95, 137, 179;
  --kitchen-primary: #5FA85F;
  --kitchen-secondary: #739B73;
  --kitchen-primary-rgb: 95, 168, 95;
  --kitchen-secondary-rgb: 115, 155, 115;
  --art-primary: #FE7803;
  --art-secondary: #D9784B;
  --art-primary-rgb: 254, 120, 3;
  --art-secondary-rgb: 217, 120, 75;
  --photobooks-primary: #B96A56;
  --photobooks-secondary: #C98A79;
  --photobooks-primary-rgb: 185, 106, 86;
  --photobooks-secondary-rgb: 201, 138, 121;

  /* Course/workshop structure block accent (top border, pills) and pricing
     accent (pricing-card values) — defaults to kitchen since the ABCs
     Course Structure is the original use; pages with a different service
     color override this one variable (see #embroidery-structure,
     #embroidery-pricing, #reading-pricing) instead of duplicating the
     component. Uses each service's SECONDARY tone — primary stays
     reserved for main icons/artwork. */
  --structure-accent: var(--kitchen-secondary);
  --structure-accent-rgb: var(--kitchen-secondary-rgb);

  --blue: var(--reading-primary);          /* Reading */
  --green: var(--kitchen-primary);         /* Kitchen */
  --yellow: var(--art-primary);            /* Art */
  --coral: var(--photobooks-primary);      /* Photo Books */

  /* General CTA */
  --cta: #C98272;
  --orange: #C98272;        /* alias for --cta, backward compat */

  /* Hover states */
  --hover-blue: #0B5E96;
  --hover-green: #559755;
  --hover-yellow: #D96600;
  --hover-coral: #A06830;
  --hover-cta: #B57567;
  --hover-orange: #B57567;  /* alias for --hover-cta */
  --hover-salmon: #A06830;  /* alias for --hover-coral */

  /* Active states (darker than hover) */
  --active-blue: #094F7F;
  --active-green: #4B864B;
  --active-yellow: #B85600;
  --active-cta: #A56B5D;
  --active-orange: #A56B5D; /* alias for --active-cta */

  /* Typography */
  --font-editorial: Georgia, "Times New Roman", serif;
  --font-interface:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.75rem;
  --font-size-3xl: 3.75rem;

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-small: 1.45;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.5rem;   /* small inline or stacked gap */
  --space-2: 0.875rem; /* compact component spacing */
  --space-3: 1.5rem;   /* standard component spacing */
  --space-4: 2.5rem;   /* large component or subsection spacing */
  --space-5: 4rem;     /* standard section spacing */
  --space-6: 6rem;     /* large page-level spacing */

  /* Layout */
  --max-width: 1120px;
  --content-width: var(--max-width);
  --prose-width: 680px;
  --mobile-page-padding: 1rem;
  --desktop-page-padding: 2rem;
  --transition: 0.2s ease;
  --section-space: clamp(2.75rem, 6vw, 4.5rem);
  --section-space-sm: clamp(1.75rem, 4vw, 2.75rem);
  --content-pad: clamp(1rem, 4vw, 2rem);
  --radius-card: 0px;

  /* Cards and effects */
  --card-border: #DED9D2;
  --divider: #E6E0D9;
  --card-shadow: 0 2px 8px rgba(45, 40, 35, 0.06);
  --soft-border: var(--card-border);
  --footer-bg: #f2f4f3;
}


/* -----------------------------
   Basic Reset
----------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-editorial);
  line-height: var(--line-height-body);
  overflow-x: hidden;
}


/* -----------------------------
   Typography
----------------------------- */

h1,
h2,
h3 {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h2 {
  font-size: 1.35rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

.text-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--hover-blue);
}

.eyebrow {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  font-variant: small-caps;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}

.subtitle {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.motto-line {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  opacity: 0.86;
}

.motto-line em {
  font-style: italic;
}

.hero-text {
  font-size: 0.95rem;
}

.heart {
  color: var(--orange);
  line-height: 1;
  display: flex;
  justify-content: center;
}

.heart-svg-icon {
  display: block;
  width: 4rem;
  height: auto;
  margin: 0 auto;
}

.hero-heart {
  margin: 1.15rem 0 0.6rem;
}

.hero-heart .heart-svg-icon {
  width: 4.35rem;
}

.service-hero-heart {
  margin: 0.25rem 0 0;
}

.service-hero-heart .heart-svg-icon {
  width: 3.1rem;
}

.about-heart {
  margin: 0.35rem 0 1.25rem;
}

.about-heart .heart-svg-icon {
  width: 3.35rem;
}

.contact-heart {
  margin: -0.25rem 0 0.45rem;
}

.contact-heart .heart-svg-icon {
  width: 3rem;
}

.split-content .contact-heart + .subtitle {
  margin-top: 0;
}

.keepsake-heart {
  margin: 0 0 0.85rem;
}

.keepsake-heart .heart-svg-icon {
  width: 3.75rem;
}


/* -----------------------------
   Header
----------------------------- */

.site-header {
  background: var(--cream);
  padding: 1.25rem 2rem;
}

.header-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-inline: clamp(2rem, 8vw, 8rem);
}

.logo {
  width: clamp(135px, 14vw, 200px);
  height: auto;
  display: block;
  padding-bottom: 0.3rem;
}

.logo-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

.main-nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: center;
  align-self: end;
  /*padding-bottom: clamp(0.85rem, 1.2vw, 1.15rem);*/
  font-size: 1.05rem;
}

.main-nav-left {
  grid-column: 1;
  grid-row: 1;
  justify-content: space-between;
}

.main-nav-right {
  grid-column: 3;
  grid-row: 1;
  justify-content: space-between;
}

.main-nav a,
.mobile-nav a {
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.mobile-nav {
  display: none;
}

.nav-toggle {
  display: none;
}

.burger {
  display: none;
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--charcoal);
  transition: var(--transition);
}


/* -----------------------------
   Hero Section
----------------------------- */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
}

.hero-centered {
  text-align: center;
}


/* -----------------------------
   Landing Page Cards
----------------------------- */

.card-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  padding-top: 1.5rem;
}

.table-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  text-align: center;
  padding-bottom: 1.5rem;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.table-card > .arrow {
  margin-top: auto;
  padding-top: 1.75rem;
}

.table-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eee9df;
  overflow: hidden;
  margin-bottom: 1rem;
}

.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-icon {
  width: min(10.75rem, 72%);
  aspect-ratio: 12 / 7;
  margin: 0 auto 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
}

.table-logo-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--white);
}

.section-logo-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.reading-card-icon {
  color: var(--reading-secondary);
}

.kitchen-card-icon {
  color: var(--kitchen-secondary);
}

.art-card-icon {
  color: var(--art-secondary);
}

.photo-book-svg-icon {
  width: 6.75rem;
  height: auto;
  display: block;
  object-fit: contain;
}

.section-logo-icon-wrap .photo-book-svg-icon {
  width: 82%;
  height: 82%;
  margin: auto;
}

.table-card h2 {
  margin: 0.9rem 0 0.65rem;
  font-weight: var(--font-weight-regular);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.table-card p {
  max-width: 220px;
  margin: 0 auto 0.75rem;
  color: rgba(42, 38, 34, 0.78);
  font-weight: var(--font-weight-regular);
  font-size: 0.95rem;
  line-height: 1.55;
}

.arrow {
  font-size: 1.2rem;
}


/* -----------------------------
   Split Interior Pages
----------------------------- */

.split-page {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-block: var(--space-5);
  padding-inline: var(--desktop-page-padding);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}

.split-content {
  width: 100%;
  min-width: 0;
  text-align: center;
  max-width: 430px;
  margin: 0 auto;
}

.contact-split {
  grid-template-columns: 1.25fr 1fr;
}

.contact-split .split-content {
  max-width: 520px;
}

.about-copy {
  text-align: left;
}

.split-content h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: normal;
  text-transform: none;
}

.section-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-logo-icon-wrap {
  width: 10.5rem;
  max-width: 100%;
  aspect-ratio: 12 / 7;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.kitchen-color {
  color: var(--kitchen-primary);
}

.blue-color {
  color: var(--reading-primary);
}

.orange-color {
  color: var(--orange);
}

.yellow-color {
  color: var(--art-primary);
}

.photobook-color {
  color: var(--photobooks-primary);
}

.reading-secondary-color {
  color: var(--reading-secondary);
}

.kitchen-secondary-color {
  color: var(--kitchen-secondary);
}

.art-secondary-color {
  color: var(--art-secondary);
}

.photobook-secondary-color {
  color: var(--photobooks-secondary);
}

.photobook-card-heading {
  display: block;
  margin-bottom: 0.5rem;
}

.photobook-card-heading h2 {
  color: var(--charcoal);
  margin-bottom: 0;
}

.photobook-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.photobook-card-link:hover {
  opacity: 0.9;
}

/* Inline SVG icons. They use currentColor, so parent color classes control them. */
.svg-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-block;
  color: inherit;
}

.small-svg-icon {
  width: 4.45rem;
  height: 4.45rem;
}

.book-svg-icon {
  stroke: currentColor;
  fill: none;
  overflow: visible;
}

.apron-svg-icon {
  stroke: currentColor;
  fill: none;
  overflow: visible;
  transform: translateY(-0.1rem);
}

.pencil-svg-icon {
  stroke: currentColor;
  fill: none;
  overflow: visible;
  transform: translateY(-0.05rem);
  width: 3rem;
  height: 3rem;
}

#support-areas .support-card .support-card-icon {
  height: 4.5rem;
  flex: 0 0 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.75rem;
  line-height: 1;
}

#support-areas .support-card .support-card-letters {
  display: block;
  font-size: 3.15rem;
  line-height: 1;
}

#support-areas .support-card .support-card-icon .small-svg-icon {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  transform: none;
}

#support-areas .support-card .support-card-icon .book-svg-icon {
  width: 4.2rem;
  height: 3.1rem;
}

#support-areas .support-card .support-card-icon .pencil-svg-icon {
  width: 3.45rem;
  height: 3.45rem;
}

#support-areas .support-card > h2 {
  margin: 0 0 0.5rem;
}

#support-areas .support-card > .small-note {
  margin: 0 0 1.25rem;
}

#support-areas .support-card > ul {
  margin-top: 0;
}

.split-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eee9df;
  overflow: hidden;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ABCs of Cooking Course only */

.abc-hero-image {

  aspect-ratio: 1 / 1; /* Try 3/2, 5/4, or 16/9 */

}

.abc-hero-image img {

  object-position: 50% 29%;

}

.photobook-hero-image {
  background: transparent;
  aspect-ratio: 1 / 1;

}

.photobook-hero-image img {
  object-fit: contain;
}


/* -----------------------------
   Buttons
----------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0.9rem 1.7rem;
  min-height: 52px;
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible,
.text-link:focus-visible,
.table-card:focus-visible,
.moments-preview-card:focus-visible,
.footer-icons a:focus-visible {
  outline: 3px solid rgba(217, 119, 106, 0.55);
  outline-offset: 4px;
}

.button-orange {
  background: var(--yellow);
  color: var(--white);
}

.button-orange:hover { background: var(--hover-yellow); }
.button-orange:active { background: var(--active-yellow); }

.button-blue {
  background: var(--blue);
}

.button-blue:hover { background: var(--hover-blue); }
.button-blue:active { background: var(--active-blue); }

.button-green {
  background: var(--green);
}

.button-green:hover { background: var(--hover-green); }
.button-green:active { background: var(--active-green); }

.button-coral {
  background: var(--cta);
}

.button-coral:hover { background: var(--hover-cta); }
.button-coral:active { background: var(--active-cta); }


/* -----------------------------
   Label Emphasis
   Small uppercase labels/badges/tags/step indicators stay in the
   editorial serif (inherited from body) but gain weight + tracking so
   they read as UI chrome rather than body copy.
----------------------------- */

.course-summary-stat span,
.simple-pricing .small-note:first-child,
#embroidery-structure .class-meta span,
#abcs-course-structure .lesson-card-section h4,
#standalone-cooking-lessons .lesson-card-section h4,
#embroidery-structure .lesson-card-section h4,
.abc-booking-terms-label,
.abc-course-code,
.abc-course-class-tag,
.abc-form-section-label,
.abc-selection-label,
.abc-status-pending,
.reg-lesson-status,
.abc-flow-step-number,
.reg-choice-badge {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
}


/* -----------------------------
   Contact Form
----------------------------- */

.contact-form {
  display: grid;
  gap: 0.75rem;
  text-align: left;
  margin-top: 1.5rem;
}

.contact-form label:not(.checkbox-label) {
  display: block;
  margin-top: 0.35rem;
  margin-bottom: -0.35rem;
  font-size: 0.9rem;
  font-weight: bold;
  opacity: 0.85;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #d7c9bb;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.9rem 0.95rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--charcoal);
  box-shadow: 0 3px 10px rgba(75, 55, 45, 0.06);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(51, 51, 51, 0.62);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--cta);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(217, 119, 106, 0.18);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.form-success {
  color: var(--green);
  font-weight: bold;
}

.form-error {
  color: var(--orange);
  font-weight: bold;
}

.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.contact-thankyou-page {
  min-height: 55vh;
}

.thankyou-next-step {
  max-width: 520px;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--section-alt, #f9f5f0);
  border-radius: var(--radius-card);
  text-align: center;
}

.thankyou-next-step h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.thankyou-next-step p {
  font-size: 0.95rem;
  color: var(--text-muted, #555);
  margin-bottom: 1.25rem;
}

.thankyou-next-step .center-button {
  margin-bottom: 1rem;
}

.thankyou-already-signed {
  font-size: 0.82rem !important;
  color: var(--muted, #888) !important;
  margin-bottom: 0 !important;
}


/* -----------------------------
   Footer
----------------------------- */

.site-footer {
  background: var(--footer-bg);
  text-align: center;
  padding: 1.5rem 2rem;
  font-size: 0.85rem;
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.footer-icons a:hover {
  color: var(--orange);
}


/* -----------------------------
   Responsive Layout
----------------------------- */

@media (max-width: 800px) {
  .site-header {
    padding: 1rem 2rem;
    position: relative;
  }

  .header-inner {
    min-height: 90px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-inline: 0;
    position: relative;
  }

  .logo-link {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .logo {
    width: clamp(120px, 36vw, 170px);
  }

  .burger {
    display: flex;
  }

  .nav-toggle:checked + .burger span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
  }

  .nav-toggle:checked + .burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .burger span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
  }

  .main-nav {
    display: none;
  }

  .main-nav-left,
  .main-nav-right {
    grid-column: auto;
    grid-row: auto;
  }

  .mobile-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    left: 0;
    background: var(--cream);
    border: 1px solid var(--soft-border);
    padding: 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  .nav-toggle:checked ~ .mobile-nav {
    display: flex;
  }

  .main-nav-left {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .main-nav-right {
    top: calc(100% + 13.35rem);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .split-page {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2rem;
  }

  .split-image {
    order: -1;
  }

  h1 {
    letter-spacing: 0.12em;
  }
}

.education-list {
  margin: 1.5rem 0;
  text-align: left;
}

.education-list h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.education-list ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* -----------------------------
   Simple Interior Pages
----------------------------- */

.simple-page {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-space) var(--content-pad);
}

.page-intro {
  width: 100%;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto var(--section-space-sm);
  text-align: center;
}

.page-intro h1 {
  font-size: clamp(2.75rem, 5vw, var(--font-size-3xl));
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
  text-transform: none;
}

.page-intro h2 {
  font-size: clamp(1.9rem, 3.5vw, var(--font-size-2xl));
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  text-transform: none;
}


/* -----------------------------
   Rates Page
----------------------------- */

.rates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.info-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: 2rem;
  text-align: center;
}

.info-card h2 {
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.info-card p {
  color: rgba(42, 38, 34, 0.78);
  font-weight: var(--font-weight-regular);
  line-height: 1.55;
}

.info-card > .arrow,
.info-card > .center-button {
  margin-top: auto;
  padding-top: 1.75rem;
}

.info-card ul {
  text-align: left;
  margin: 1.25rem 0;
  padding-left: 1.25rem;
}

.info-card li {
  margin-bottom: 0.5rem;
}

.small-note {
  font-size: 0.9rem;
  opacity: 0.8;
}

.center-button {
  text-align: center;
  margin-top: 2rem;
}

.page-bottom-cta {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}

.page-bottom-cta .center-button {
  margin-top: 0;
}


/* -----------------------------
   FAQ Page
----------------------------- */

.faq-section {
  max-width: 820px;
  margin: 0 auto 2.5rem;
}

.faq-section h2 {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

details {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
}

summary {
  cursor: pointer;
  font-weight: bold;
  outline-offset: 4px;
}

details p {
  margin-top: 0.75rem;
  margin-bottom: 0;
}


/* -----------------------------
   Mobile
----------------------------- */

@media (max-width: 800px) {
  .rates-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   Kitchen Table Page
----------------------------- */

.reading-hero,
.kitchen-hero,
.art-hero,
.photobook-hero {
  padding-bottom: 2rem;
}

#support-areas,
#about-cooking-classes,
#art-overview,
#photobook-process,
#embroidery-overview {
  padding-top: var(--space-4);
}

.button-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.kitchen-page-section,
.art-page-section {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.kitchen-page-section .page-intro,
.art-page-section .page-intro {
  margin-bottom: var(--space-3);
}

.kitchen-about-copy {
  width: 100%;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.kitchen-about-copy p {
  margin-bottom: 0.9rem;
}

.kitchen-about-copy .subtitle {
  margin-bottom: 1rem;
}

.kitchen-program-grid,
.art-program-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 840px;
  margin: 2.25rem auto 0;
  align-items: stretch;
}

.kitchen-program-grid .info-card,
.art-program-grid .info-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.8rem;
}

#art-programs .art-program-grid .section-icon {
  height: 5.25rem;
  margin-bottom: 1rem;
}

#art-programs .art-program-grid .section-icon img {
  max-height: 4.45rem;
  width: auto;
}

.kitchen-program-grid h3,
.art-program-grid h3 {
  font-size: 1.35rem;
}

.kitchen-program-grid ul,
.art-program-grid ul {
  margin-bottom: 1.25rem;
}

.kitchen-program-grid .center-button,
.art-program-grid .center-button {
  margin-top: auto;
  padding-top: 0.75rem;
}

.abc-section-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin-left: auto;
  margin-right: auto;
  border: 3.5px solid currentColor;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: bold;
  font-family: Georgia, "Times New Roman", serif;
}

.kitchen-program-grid .abc-section-icon {
  color: #739b73ff;
  border-width: 3.5px;
  font-weight: 700;
}

.hospitality-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  text-align: left;
}

.hospitality-intro {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hospitality-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 1.35rem;
}

.hospitality-principles div {
  border-top: 3px solid var(--kitchen-primary);
  background: rgba(250, 247, 242, 0.58);
  padding: 1rem;
}

.hospitality-principles h3 {
  color: var(--charcoal);
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
}

.hospitality-principles p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

.kitchen-practices-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 620px;
  margin: 0 auto 1.25rem;
  padding: 0;
  list-style: none;
}

.kitchen-practices-list li {
  position: relative;
  margin: 0;
  padding: 0.45rem 0.75rem 0.45rem 1.9rem;
  border-bottom: 1px solid var(--divider);
}

.kitchen-practices-list li::before {
  content: "✓";
  position: absolute;
  left: 0.55rem;
  color: var(--kitchen-secondary);
  font-weight: bold;
}

.kitchen-practices-list + .small-note {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.kitchen-simple-pricing-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.kitchen-simple-pricing-section .simple-pricing {
  max-width: 720px;
}

.simple-pricing .small-note:first-child {
  margin-bottom: 0.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.simple-pricing.kitchen-pricing-card {
  max-width: 640px;
}

.simple-pricing.kitchen-pricing-card h2 {
  margin-bottom: 0.4rem;
}

.kitchen-pricing-rows {
  margin: 0 0 1.1rem;
}

.kitchen-pricing-rows .pricing-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  margin: 0 0 0.3rem;
}

.kitchen-pricing-rows .pricing-row:last-child {
  margin-bottom: 0;
}

.pricing-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}

.pricing-label {
  font-weight: 600;
}

.pricing-price {
  font-weight: 500;
  font-size: 1.05em;
}

.pricing-unit {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.7;
}

.kitchen-pricing-group-note {
  margin-bottom: 0.4rem;
}

.course-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 880px;
  margin: 2rem auto 0;
}

.course-summary-stat {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  min-height: 7.25rem;
  padding: 1rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-summary-stat strong,
.course-summary-stat span {
  display: block;
}

.course-summary-stat strong {
  color: var(--kitchen-primary);
  font-size: 1.35rem;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}

.course-summary-stat span {
  font-size: 0.82rem;
  opacity: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#abcs-course-structure .lesson-list,
#standalone-cooking-lessons .lesson-list,
#embroidery-structure .lesson-list {
  max-width: 940px;
}

#abcs-course-structure .lesson-group,
#standalone-cooking-lessons .lesson-group,
#embroidery-structure .lesson-group {
  position: relative;
  margin-bottom: 2.5rem;
  padding: 1.75rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--card-border);
  border-top: 4px solid var(--structure-accent);
}

#abcs-course-structure .lesson-group:not(:last-child)::after,
#standalone-cooking-lessons .lesson-group:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.15rem;
  width: 1px;
  height: 2rem;
  background: var(--divider);
}

#abcs-course-structure .lesson-group-header,
#embroidery-structure .lesson-group-header {
  max-width: 46rem;
  margin: 0 auto 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--divider);
  text-align: center;
}

#abcs-course-structure .lesson-group-header .section-icon,
#embroidery-structure .lesson-group-header .section-icon {
  margin-bottom: 0.5rem;
}

#abcs-course-structure .lesson-group-header h2,
#embroidery-structure .lesson-group-header h2 {
  margin: 0.6rem 0 0.65rem;
  color: var(--charcoal);
  font-size: clamp(1.85rem, 2.8vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

#abcs-course-structure .class-meta,
#embroidery-structure .class-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
  margin: 0 0 1rem;
}

#abcs-course-structure .class-meta span,
#embroidery-structure .class-meta span {
  white-space: nowrap;
  padding: 0.3rem 0.75rem;
  background: rgba(var(--structure-accent-rgb), 0.12);
  border: 1px solid rgba(var(--structure-accent-rgb), 0.3);
  border-radius: 999px;
  color: var(--structure-accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#abcs-course-structure .class-description,
#embroidery-structure .class-description {
  max-width: 38rem;
  margin: 0 auto;
}

#abcs-course-structure .lesson-grid,
#standalone-cooking-lessons .lesson-grid,
#embroidery-structure .lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Embroidery Workshop Structure has 4 cards with more content per card
   (icon + project + longer skills list) than the 3-across ABC/cooking
   grids, so 4 narrow columns read cramped at this container width — a
   balanced 2x2 stays comfortably readable at desktop and tablet alike. */
#embroidery-structure .lesson-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#abcs-course-structure .lesson-card,
#standalone-cooking-lessons .lesson-card,
#embroidery-structure .lesson-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  padding: 1.25rem 1.35rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

#embroidery-structure .lesson-card-icon {
  display: block;
  height: 58px;
  width: auto;
  margin: 0 auto 0.75rem;
}

#abcs-course-structure .lesson-card h3,
#standalone-cooking-lessons .lesson-card h3,
#embroidery-structure .lesson-card h3 {
  display: flex;
  align-items: flex-start;
  min-height: 2.6em;
  margin: 0 0 0.85rem;
  color: var(--charcoal);
  font-size: 1.02rem;
  line-height: 1.3;
}

#embroidery-structure .lesson-card h3 {
  justify-content: center;
  text-align: center;
}

#embroidery-structure .lesson-card-section {
  text-align: left;
}

#abcs-course-structure .lesson-card-section + .lesson-card-section,
#standalone-cooking-lessons .lesson-card-section + .lesson-card-section,
#embroidery-structure .lesson-card-section + .lesson-card-section {
  margin-top: 0.9rem;
}

#abcs-course-structure .lesson-card-section h4,
#standalone-cooking-lessons .lesson-card-section h4,
#embroidery-structure .lesson-card-section h4 {
  margin: 0 0 0.4rem;
  color: var(--kitchen-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#abcs-course-structure .lesson-points,
#standalone-cooking-lessons .lesson-points,
#embroidery-structure .lesson-points {
  margin: 0;
  padding-left: 1.15rem;
}

#abcs-course-structure .lesson-points li,
#standalone-cooking-lessons .lesson-points li,
#embroidery-structure .lesson-points li {
  font-size: 0.92rem;
  line-height: 1.4;
}

#abcs-course-structure .lesson-points li + li,
#standalone-cooking-lessons .lesson-points li + li,
#embroidery-structure .lesson-points li + li {
  margin-top: 0.3rem;
}

#standalone-cooking-lessons .lesson-card p {
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Compound selector (not just .standalone-pricing-card) so this reliably
   wins over the later, equal-specificity .simple-pricing { max-width:
   680px } base rule regardless of source order. */
.simple-pricing.standalone-pricing-card {
  max-width: 760px;
}

.standalone-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.35rem;
}

.standalone-price-card {
  padding: 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--card-border);
  text-align: center;
}

.standalone-price-card h3 {
  color: var(--charcoal);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.standalone-price-card .pricing-price {
  margin-bottom: 0;
  color: var(--structure-accent);
  font-size: 1.45rem;
  line-height: 1.15;
}

.standalone-price-card .pricing-unit {
  display: block;
  margin-bottom: 0.4rem;
  white-space: normal;
}

.standalone-price-card .small-note {
  margin-bottom: 0;
}

#cooking-lessons-overview {
  padding-top: 2rem;
  padding-bottom: 1.75rem;
}

#cooking-lessons-overview .page-intro,
#embroidery-overview .page-intro {
  margin-bottom: 1.75rem;
}

#cooking-lessons-overview .course-summary-grid,
#embroidery-overview .course-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
  max-width: 657px;
}

#standalone-cooking-lessons {
  padding-top: 1.25rem;
  padding-bottom: 1.2rem;
}

#standalone-cooking-lessons .page-intro {
  margin-bottom: 1rem;
}

#standalone-cooking-lessons .lesson-group {
  margin-bottom: 0;
  padding: 1.35rem;
}

#standalone-cooking-lessons .lesson-card {
  padding: 1.05rem 1.15rem;
}

#standalone-cooking-lessons .lesson-card h3 {
  margin-bottom: 0.95rem;
}

#standalone-cooking-lessons .lesson-card-section + .lesson-card-section {
  margin-top: 0.7rem;
}

#standalone-cooking-lessons .lesson-card-section h4 {
  margin-bottom: 0.25rem;
}

#standalone-cooking-lessons .lesson-card p {
  margin-bottom: 0;
}

.standalone-pricing-section {
  padding-top: 1rem;
  padding-bottom: 0.9rem;
}

/* Compound .simple-pricing.X selectors below (not just .standalone-pricing-
   card / .service-scheduling-panel alone) so these reliably win over the
   later, equal-specificity .simple-pricing base rules regardless of source
   order. */
.simple-pricing.standalone-pricing-card,
.simple-pricing.service-scheduling-panel {
  padding: 1.45rem 1.75rem;
}

.simple-pricing.standalone-pricing-card h2,
.simple-pricing.service-scheduling-panel h2 {
  margin-bottom: 0.55rem;
}

.standalone-pricing-card > p,
.service-scheduling-panel > p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.standalone-pricing-card > .small-note,
.service-scheduling-panel > .small-note {
  margin-bottom: 0;
}

.standalone-pricing-card .standalone-pricing-grid {
  margin-top: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Scheduling/Availability/Timeline panel — shares .simple-pricing's chrome
   (background, shadow, centering) and the .simple-pricing-{service} border
   color already used by that page's pricing panel, just at a deliberately
   quieter weight (no pricing-price accent numbers, no card grid) so it
   reads as pricing's secondary sibling rather than a competing section. */
.simple-pricing.service-scheduling-panel {
  max-width: 760px;
}

.standalone-scheduling-note {
  padding-top: 0.35rem;
  padding-bottom: 1rem;
}

.standalone-scheduling-note .agreement-note {
  max-width: 620px;
  margin: 0 auto 0.65rem;
}

.standalone-scheduling-note .agreement-note:last-child {
  margin-bottom: 0;
}

.standalone-related-course {
  padding-top: 1rem;
  padding-bottom: 1.75rem;
}

.standalone-related-course .page-intro {
  margin-bottom: 0;
}

/* Bottom-of-page rhythm for direct-service pages (ABCs, Stand-Alone Cooking
   Lessons, Embroidery, Reading, Photo Books). IDs are used here — rather
   than the .standalone-pricing-section / .simple-page / .page-bottom-cta
   classes alone — because those classes are also reused by other pages
   (or, for pricing vs. scheduling, by two sections on the same page) where
   this tighter rhythm shouldn't apply. */
#abcs-scheduling,
#cooking-lessons-scheduling,
#embroidery-scheduling,
#reading-scheduling,
#photobook-scheduling {
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
}

#abcs-pricing,
#cooking-lessons-pricing,
#embroidery-pricing,
#reading-pricing,
#photobook-pricing {
  padding-bottom: 1.75rem;
}

#abcs-cta,
#cooking-lessons-cta,
#embroidery-cta,
#reading-cta,
#photobook-cta {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

#abcs-footer,
#cooking-lessons-footer,
#embroidery-footer,
#photobook-footer {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* Reading Table has no related-service link, so its footer follows the CTA
   directly and picks up the CTA's own 32px rhythm instead of the 48-56px
   used after a related-service link. */
#reading-footer {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

/* Modifier for pages with only two pricing tiers (Embroidery, Reading,
   ABCs) — narrows the shared 4-column standalone-pricing-grid to a pair.
   Placed before the responsive blocks below so their mobile 1-column
   override reliably wins at equal selector specificity (source order, not
   just media-query position, decides the cascade when specificity ties). */
.standalone-pricing-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* Modifier for pages with three pricing tiers (Photo Books). */
.standalone-pricing-grid--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  #abcs-course-structure .lesson-grid,
  #standalone-cooking-lessons .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standalone-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #abcs-course-structure .lesson-grid,
  #standalone-cooking-lessons .lesson-grid,
  #embroidery-structure .lesson-grid {
    grid-template-columns: 1fr;
  }

  #abcs-course-structure .lesson-card h3,
  #standalone-cooking-lessons .lesson-card h3,
  #embroidery-structure .lesson-card h3 {
    min-height: 0;
  }

  #abcs-course-structure .lesson-card,
  #standalone-cooking-lessons .lesson-card,
  #embroidery-structure .lesson-card {
    padding: 1.1rem 1.15rem;
  }

  #standalone-cooking-lessons .lesson-card {
    padding: 1rem;
  }

  #abcs-course-structure .lesson-group-header,
  #embroidery-structure .lesson-group-header {
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .kitchen-program-grid,
  .art-program-grid,
  .hospitality-principles {
    grid-template-columns: 1fr;
  }

  .course-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-summary-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .kitchen-program-grid,
  .art-program-grid {
    max-width: 420px;
  }

  .hospitality-panel,
  #abcs-course-structure .lesson-group,
  #standalone-cooking-lessons .lesson-group {
    padding: 1.25rem;
  }

  .standalone-pricing-grid {
    grid-template-columns: 1fr;
  }

  .standalone-pricing-grid--pair {
    grid-template-columns: 1fr;
    max-width: 260px;
  }

  .standalone-pricing-grid--trio {
    grid-template-columns: 1fr;
    max-width: 260px;
  }

  #cooking-lessons-overview {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

  #standalone-cooking-lessons {
    padding-top: 1.35rem;
  }

  #standalone-cooking-lessons .lesson-group {
    padding: 1.15rem;
  }

  .kitchen-hero .split-content h1,
  .art-hero .split-content h1 {
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .kitchen-hero .split-content,
  .art-hero .split-content {
    max-width: 20rem;
  }

  .kitchen-hero .motto-line,
  .art-hero .motto-line {
    max-width: 18rem;
    font-size: 0.92rem;
    text-wrap: balance;
  }

  #cooking-lessons-overview .course-summary-stat span,
  #embroidery-overview .course-summary-stat span {
    font-size: 0.72rem;
  }

  #cooking-lessons-overview .page-intro,
  #embroidery-overview .page-intro,
  .standalone-pricing-card > p,
  .standalone-scheduling-note .agreement-note,
  .standalone-related-course .page-intro {
    max-width: 18rem;
  }

  #cooking-lessons-overview .course-summary-grid,
  #embroidery-overview .course-summary-grid {
    grid-template-columns: 1fr;
    max-width: 18rem;
  }

  .standalone-pricing-section {
    padding-top: 1rem;
  }

  .standalone-pricing-card {
    padding: 1.35rem 1.25rem;
  }

  .standalone-scheduling-note {
    padding-bottom: 1rem;
  }

  .kitchen-practices-list {
    grid-template-columns: 1fr;
  }

  .page-bottom-cta .center-button {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
  }

  .page-bottom-cta .button {
    width: min(100%, 280px);
    text-align: center;
  }
}

/* -----------------------------
   Art Table Page & Embroidery Workshop
   (shared layout classes are reused/aliased above in the Kitchen Table
   Page block; only genuinely Art-specific overrides live here)
----------------------------- */

#art-programs .art-program-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--max-width);
}

#art-programs .art-program-grid .info-card-link {
  grid-column: 1 / -1;
  width: min(100%, 460px);
  justify-self: center;
}

@media (max-width: 800px) {
  #art-programs .art-program-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
  }
}

#embroidery-overview .course-summary-stat strong {
  color: var(--art-primary);
}

/* Swaps the shared Course Structure and pricing-card components (see
   --structure-accent, defined near the other service color tokens) from
   kitchen to embroidery terracotta, without duplicating either
   component's rules. */
#embroidery-structure,
#embroidery-pricing {
  --structure-accent: var(--art-secondary);
  --structure-accent-rgb: var(--art-secondary-rgb);
}

#embroidery-structure .lesson-card-section h4 {
  color: var(--art-secondary);
}

/* Swaps the shared pricing-card component's accent to Reading blue. */
#reading-pricing {
  --structure-accent: var(--reading-secondary);
}

/* Swaps the shared pricing-card component's accent to Photo Books
   terracotta-pink. */
#photobook-pricing {
  --structure-accent: var(--photobooks-secondary);
}

.photobook-page-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.process-grid .info-card {
  min-height: 260px;
}

.process-grid .info-card {
  position: relative;
}

.process-grid .info-card:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.05rem;
  transform: translate(50%, -50%);
  color: var(--photobooks-secondary);
  font-size: 2rem;
  line-height: 1;
  z-index: 2;
}

@media (max-width: 800px) {
  .process-grid .info-card:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 50%;
    bottom: -1.15rem;
    transform: translateX(50%);
    font-size: 1.8rem;
  }
}

.lesson-list {
  max-width: 900px;
  margin: 0 auto;
}

.lesson-group {
  margin-bottom: 2.5rem;
}

.lesson-group h2,
.lesson-group h3 {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.lesson-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
}

.lesson-card h3,
.lesson-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.lesson-card h3 {
  border-bottom: 0;
  padding-bottom: 0;
}

.lesson-card p:last-child {
  margin-bottom: 0;
}

.keepsake-section {
  padding-top: 1rem;
}

.keepsake-card {
  max-width: 760px;
  margin: 0 auto;
}

/* Shared "whole card navigates elsewhere" treatment — a plain informational
   nav card (icon/heading/copy/price list) wrapped entirely in one <a>, with
   the same restrained hover lift used by the homepage's .table-card, plus a
   trailing .arrow span. Used by the homepage Keepsake Photo Books card, the
   Pricing page's four service cards, and Kitchen Table's ABCs Cooking
   Course card, so this hover effect is defined once instead of per page. */
.info-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.info-card-link:hover,
.info-card-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.keepsake-price {
  display: inline-block;
  margin: 0 auto 1rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(var(--kitchen-primary-rgb), 0.5);
  background: rgba(var(--kitchen-primary-rgb), 0.12);
  color: var(--kitchen-primary);
  font-size: 0.92rem;
  font-weight: bold;
}

.keepsake-home-section {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.rates-keepsake-card {
  margin-top: 1.5rem;
}

.rates-keepsake-card ul {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-contact-note {
  text-align: center;
  margin-top: 2rem;
}


/* -----------------------------
   Kind Words / Testimonials
----------------------------- */

.kind-words-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.kind-words-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 1.75rem;
  text-align: center;
}

.testimonial-quote {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-name {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: 0;
}

.kind-words-button {
  margin-top: 2rem;
}

.kind-words-page {
  padding-top: 3rem;
}

.kind-words-page-grid {
  margin-bottom: 3rem;
}

.kind-words-note {
  margin-bottom: 0;
}

.moments-preview-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.moments-preview-intro {
  margin-bottom: 1.5rem;
}

.kind-words-section .page-intro h1,
.moments-preview-intro h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.moments-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.moments-preview-card {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--soft-border);
  box-shadow: 0 6px 18px rgba(75, 55, 45, 0.1);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.moments-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(75, 55, 45, 0.14);
  opacity: 0.95;
}

.moments-preview-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.moments-preview-button {
  margin-top: 2rem;
}

.photo-gallery-section {
  margin: 3rem auto 3.5rem;
}

.photo-gallery-intro {
  margin-bottom: 1.25rem;
}

.photo-gallery-intro h2 {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.masonry-gallery {
  columns: 3 220px;
  column-gap: 1rem;
  max-width: 950px;
  margin: 0 auto;
}

.masonry-gallery img {
  width: 100%;
  display: block;
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(75, 55, 45, 0.12);
}

.masonry-gallery img:nth-child(3n) {
  border-radius: 28px;
}

.masonry-gallery img:nth-child(4n) {
  margin-top: 1.25rem;
}

.masonry-gallery img:nth-child(5n) {
  border-radius: 12px;
}

@media (max-width: 800px) {
  .kind-words-grid,
  .moments-preview-grid {
    grid-template-columns: 1fr;
  }

  .photo-gallery-section {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 640px) {
  .masonry-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    columns: auto;
  }

  .masonry-gallery img {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
  }

  .masonry-gallery img:nth-child(4n) {
    margin-top: 0;
  }
}

.home-bottom-cta {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.home-bottom-cta .page-intro {
  margin-bottom: 0;
}


/* FAQ table of contents */
.faq-toc {
  margin-bottom: 2.5rem;
}

.faq-toc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .faq-toc-list {
    grid-template-columns: 1fr;
  }
}

.faq-toc-list a {
  display: block;
  background: var(--white);
  border: 1px solid var(--card-border);
  margin-bottom: 0;
  padding: 1rem 1.25rem;
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}

.faq-toc-list a:hover,
.faq-toc-list a:focus-visible {
  background: rgba(255, 255, 255, 0.82);
}

/* -----------------------------
   Shop Page
----------------------------- */

.shop-page {
  padding-top: 3rem;
}

.shop-intro {
  margin-bottom: 2.5rem;
}

.shop-section {
  margin-bottom: 3.5rem;
}

.shop-section-heading {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.shop-section-heading h2 {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.shop-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: var(--card-shadow);
}

.shop-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
  object-fit: cover;
  background: #eee9df;
}

.shop-card-muted {
  background: rgba(255, 255, 255, 0.72);
}

.shop-image-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee9df;
  color: var(--charcoal);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  overflow: hidden;
}

.shop-image-placeholder span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  border: 1px solid rgba(51, 51, 51, 0.22);
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.72);
}

.shop-book-placeholder {
  background: linear-gradient(135deg, rgba(var(--kitchen-primary-rgb), 0.24), rgba(250, 247, 242, 0.95));
}

.shop-apron-placeholder {
  background: linear-gradient(135deg, rgba(var(--photobooks-primary-rgb), 0.24), rgba(250, 247, 242, 0.95));
}

.shop-sticker-placeholder {
  background: linear-gradient(135deg, rgba(var(--reading-primary-rgb), 0.24), rgba(250, 247, 242, 0.95));
}

.shop-utensil-placeholder {
  background: linear-gradient(135deg, rgba(var(--art-primary-rgb), 0.18), rgba(250, 247, 242, 0.95));
}

.shop-card-content {
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.shop-category {
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.shop-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.65rem;
}

.shop-price {
  margin-top: auto;
  margin-bottom: 1rem;
  font-weight: bold;
}

.shop-bottom-note {
  margin-bottom: 0;
  padding-top: 1rem;
}

@media (max-width: 800px) {
  .shop-grid,
  .shop-grid-three {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   Family Agreement
----------------------------- */

.parent-agreement-page {
  padding-top: 2rem;
}

.agreement-page-intro {
  margin-bottom: 2rem;
}

.agreement-page-intro h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
}

.agreement-page-intro .subtitle {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.agreement-section {
  max-width: 860px;
  margin: 0 auto 1rem;
  scroll-margin-top: 2rem;
}

.agreement-accordion {
  background: var(--white);
  border: 1px solid var(--card-border);
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.agreement-accordion-summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 5.25rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: rgba(255, 255, 255, 0.78);
}

.agreement-accordion-summary::-webkit-details-marker {
  display: none;
}

.agreement-summary-icon {
  width: 4.2rem;
  height: 4.2rem;
  display: block;
  object-fit: contain;
  justify-self: center;
}

.agreement-summary-icon-photo {
  width: 4.45rem;
  height: 4.45rem;
}

.agreement-accordion-summary::after {
  content: "⌄";
  font-size: 1.35rem;
  line-height: 1;
  transition: transform var(--transition);
}

.agreement-accordion[open] .agreement-accordion-summary::after {
  transform: rotate(180deg);
}

.agreement-accordion-summary strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

.agreement-accordion-summary small {
  display: block;
  max-width: 620px;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--charcoal);
  opacity: 0.82;
}

.agreement-summary-coral {
  border-left: 0.2rem solid var(--coral);
}

.agreement-summary-cta {
  border-left: 0.2rem solid var(--cta);
}

.agreement-summary-green {
  border-left: 0.2rem solid var(--kitchen-primary);
}

.agreement-summary-blue {
  border-left: 0.2rem solid var(--reading-primary);
}

.agreement-summary-orange {
  border-left: 0.2rem solid var(--art-primary);
}

.agreement-card {
  background: var(--white);
  border-top: 1px solid var(--divider);
  padding: 1.35rem 1.5rem;
}

.agreement-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.agreement-card p:last-child {
  margin-bottom: 0;
}

.agreement-sign-card {
  max-width: 760px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  text-align: center;
  background: var(--white);
  border: 2px solid #d9b38c;
  scroll-margin-top: 2rem;
}

@media (max-width: 640px) {
  .agreement-accordion-summary {
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
  }

  .agreement-summary-icon {
    width: 3.25rem;
    height: 3.25rem;
  }

  .agreement-summary-icon-photo {
    width: 3.45rem;
    height: 3.45rem;
  }

  .agreement-accordion-summary strong {
    font-size: 1.1rem;
  }

  .agreement-card {
    padding: 1.2rem 1.25rem;
  }
}

.parent-agreement-form-page {
  padding-top: 3rem;
}

.family-agreement-form {
  max-width: 900px;
  margin: 0 auto;
}

.agreement-form-shell {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.agreement-form-panel,
.agreement-form-subpanel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--card-border);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.agreement-form-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  text-align: left;
}

.agreement-service-requested-panel {
  grid-template-columns: 1fr;
}

.agreement-service-requested-panel .agreement-form-panel-content {
  width: 100%;
}

.agreement-service-requested-panel h2 small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  opacity: 0.75;
}

.agreement-form-panel-content {
  width: 100%;
}

.agreement-form-heading-with-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  text-align: left;
  margin-bottom: 1rem;
}

.agreement-form-heading-icon {
  width: 2.8rem;
  height: 2.8rem;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.agreement-form-heading-icon-photo {
  width: 3rem;
  height: 3rem;
}


.agreement-form-panel-green,
.agreement-form-panel-orange,
.agreement-form-panel-blue,
.agreement-form-panel-coral,
.agreement-form-panel-signature {
  border-left: 1px solid var(--divider);
}

.agreement-form-grid,
.agreement-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.35rem;
}

.agreement-form-grid,
.agreement-signature-grid,
.agreement-check-list,
.agreement-panel-note,
.family-agreement-form .form-field,
.family-agreement-form .checkbox-label {
  text-align: left;
}


.form-field-full {
  grid-column: 1 / -1;
}

.family-agreement-form input,
.family-agreement-form select,
.family-agreement-form textarea {
  width: 100%;
  border: 1px solid #ded2c4;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.78rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--charcoal);
}

.family-agreement-form textarea {
  min-height: 105px;
  resize: vertical;
}

.checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem !important;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.checkbox-label input {
  width: auto;
  margin-top: 0.25rem;
  flex: 0 0 auto;
}

.agreement-service-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 0.75rem;
}

.agreement-service-choice {
  align-items: center;
  margin-bottom: 0 !important;
  padding: 0.75rem 0.85rem;
  background: rgba(250, 247, 242, 0.55);
  border: 1px solid var(--card-border);
  min-width: 0;
}

.agreement-service-choice span:last-child {
  min-width: 0;
}

.agreement-service-choice input {
  margin-top: 0;
}

.agreement-service-choice-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.agreement-service-choice-icon-photo {
  width: 2.55rem;
  height: 2.55rem;
}

.agreement-service-choice-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 0.22);
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.78);
  color: var(--charcoal);
  font-weight: bold;
  flex: 0 0 auto;
}

.agreement-submit-button {
  display: block;
  width: min(100%, 420px);
  margin: 1.75rem auto 0;
  background: var(--cta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 760px) {
  .parent-agreement-form-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .family-agreement-form {
    max-width: 100%;
  }

  .agreement-form-panel,
  .agreement-form-subpanel {
    padding: 1.1rem;
  }

  .agreement-form-panel,
  .agreement-form-grid,
  .agreement-signature-grid {
    grid-template-columns: 1fr;
  }

  .agreement-service-choice-grid {
    grid-template-columns: 1fr;
  }

  .agreement-service-choice {
    padding: 0.7rem 0.75rem;
  }

  .agreement-service-choice-icon,
  .agreement-service-choice-mark {
    width: 2.05rem;
    height: 2.05rem;
  }

  .agreement-service-choice-icon-photo {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.simple-pricing-section {
  padding-top: 0;
  padding-bottom: 2.5rem;
}

.simple-pricing {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 2rem;
}

.simple-pricing h2 {
  margin-bottom: 0.75rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.simple-pricing p:last-child {
  margin-bottom: 0;
}

.simple-pricing-blue {
  border-color: var(--reading-secondary);
}

.simple-pricing-green {
  border-color: var(--kitchen-secondary);
}

.simple-pricing-orange {
  border-color: var(--art-secondary);
}

.simple-pricing-photobook {
  border-color: var(--photobooks-secondary);
}

.service-bundle-note-section {
  padding-top: 0;
  padding-bottom: 2.5rem;
}

.service-bundle-note-card {
  max-width: 720px;
  margin: 0 auto;
  border-color: var(--kitchen-primary);
  background: rgba(255, 255, 255, 0.78);
}

.service-bundle-note-card h2 {
  margin-bottom: 0.65rem;
}

.service-bundle-note-card p:last-child {
  margin-bottom: 0;
}


.agreement-note {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}

/* The Family Agreement link inside this note uses the shared .text-link
   class (see kitchen.php/reading.php/art.php/photobooks.php) rather than a
   page-local color/underline rule, so this styling is never duplicated. */


/* -----------------------------
   ABCs of Cooking Course — Registration
----------------------------- */

.abc-empty-state {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.abc-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.abc-course-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.abc-booking-terms,
.abc-form-terms-summary {
  max-width: 760px;
  margin: 0 auto 2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-card);
  background: var(--white);
}

.abc-booking-terms h2 {
  text-align: center;
  margin: 0 0 0.8rem;
  font-size: 1.35rem;
}

.abc-booking-terms-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem 1.4rem;
}

.abc-booking-terms-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 0 0 0.35rem;
}

.abc-booking-terms .abc-pricing {
  margin: 0;
}

.abc-booking-terms .abc-pricing-row {
  justify-content: flex-start;
}

.abc-booking-terms-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.abc-booking-terms-list li + li {
  margin-top: 0.3rem;
}

/* Still used by abc-booking-confirmation.php's "Class A/B/C" label. */
.abc-course-code {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cta);
}

.abc-course-title {
  margin: 0 0 0.5rem;
}

.info-card .abc-lesson-list {
  list-style: none;
  text-align: center;
  margin: 0.25rem 0 0.75rem;
  padding-left: 0;
  width: 100%;
}

.info-card .abc-lesson-list li {
  margin-bottom: 0.6rem;
  display: flex;
  flex-direction: column;
}

.abc-lesson-date {
  font-weight: bold;
}

.abc-lesson-time {
  font-size: 0.9rem;
  opacity: 0.8;
}

.abc-pricing {
  width: 100%;
  display: grid;
  gap: 0.15rem;
  margin: 0 0 0.5rem;
}

.abc-pricing-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.95rem;
}

.abc-pricing-tier {
  font-weight: 600;
  opacity: 0.8;
}

.abc-pricing-amount {
  font-weight: 700;
}

.abc-pricing-note {
  font-size: 0.78rem;
  opacity: 0.65;
  text-align: center;
  margin: 0.3rem 0 0;
}

.abc-course-spots {
  color: var(--green);
  font-weight: bold;
  margin: 0 0 0.6rem;
}

.abc-course-spots-full {
  color: var(--orange);
}

.abc-btn-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.abc-course-class-info {
  width: 100%;
  margin: 0.1rem 0 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--divider);
  text-align: center;
}

.abc-course-class-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin: 0 0 0.15rem;
}

.abc-course-class-value {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

.abc-course-class-value.is-unassigned {
  font-weight: 500;
  font-style: italic;
  opacity: 0.75;
}

.abc-course-class-note {
  font-size: 0.82rem;
  opacity: 0.75;
  margin: 0.4rem 0 0;
}

.abc-register-heading {
  text-align: center;
  margin-bottom: 1rem;
}

/* Compact "you're registering for..." summary — replaces repeating the full
   course card inside the registration section. */
.abc-course-summary-compact {
  max-width: 420px;
  margin: 0 auto 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-card);
  background: var(--white);
  text-align: center;
}

.abc-course-summary-compact h3 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
}

.abc-course-summary-compact .abc-lesson-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.6rem;
  display: grid;
  gap: 0.35rem;
}

.abc-course-summary-compact .abc-lesson-list li {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.abc-course-summary-compact .abc-lesson-date {
  font-weight: 600;
}

.abc-course-summary-compact .abc-lesson-time {
  opacity: 0.75;
}

.abc-course-summary-compact .abc-pricing {
  font-size: var(--font-size-base);
  margin: 0.5rem 0 0.15rem;
}

.abc-course-summary-compact .abc-course-spots {
  margin: 0 0 0.5rem;
}

.abc-course-summary-compact .abc-course-class-info {
  margin: 0.4rem 0 0.5rem;
  padding-top: 0.5rem;
}

.abc-form-terms-summary {
  max-width: none;
  margin: 0.35rem 0 0.2rem;
  padding: 0.85rem 1rem;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.72);
}

.abc-form-terms-summary .abc-booking-terms-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.abc-form-terms-summary .abc-pricing-row {
  justify-content: flex-start;
  font-size: 0.9rem;
}

.abc-form-terms-summary .abc-booking-terms-list {
  font-size: 0.86rem;
}

.abc-form-errors p {
  margin: 0 0 0.4rem;
}

.abc-agreement-notice {
  margin-top: 0.25rem;
}

/* Small label grouping the Student / Parent fields, so the long form reads
   as a few short steps rather than one undifferentiated list of inputs. */
.abc-form-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 1rem 0 -0.15rem;
}

.abc-form-section-label:first-child {
  margin-top: 0;
}

.abc-registration-form {
  display: grid;
  gap: 0.65rem;
  text-align: left;
  max-width: 480px;
  margin: 0 auto;
}

.abc-registration-form label:not(.checkbox-label) {
  display: block;
  margin-top: 0.3rem;
  margin-bottom: -0.3rem;
  font-size: 0.9rem;
  font-weight: bold;
  opacity: 0.85;
}

/* Root cause of the "huge empty white box" radio/checkbox bug: this used to
   read `.abc-registration-form input` with no type exclusion, so it matched
   every <input> in the form — including radios and checkboxes — and (at
   equal specificity, later in the cascade than `.checkbox-label input`)
   stretched them to width:100% with text-input padding/border/shadow. */
.abc-registration-form input:not([type="checkbox"]):not([type="radio"]),
.abc-registration-form textarea {
  width: 100%;
  border: 1px solid #d7c9bb;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.85rem 0.9rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--charcoal);
  box-shadow: 0 3px 10px rgba(75, 55, 45, 0.06);
}

.abc-registration-form input:not([type="checkbox"]):not([type="radio"]):focus,
.abc-registration-form textarea:focus,
.abc-registration-form select:focus {
  outline: none;
  border-color: var(--cta);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(217, 119, 106, 0.18);
}

.abc-registration-form textarea {
  min-height: 90px;
  resize: vertical;
}

.abc-registration-form .button {
  justify-self: center;
  margin-top: 0.4rem;
}

.abc-confirmation-card {
  max-width: 480px;
  margin: 0 auto 2rem;
}

/* Keeps the post-card "please review the Family Agreement" note centered
   like the rest of this page — the card itself centers via margin:auto,
   which text-align doesn't affect, so this only reaches the loose text. */
.abc-booking-confirmation-page {
  text-align: center;
}

.abc-status-pending {
  font-weight: bold;
  color: var(--orange);
}

/* Compact, accessible class-choice cards (fieldset of radios). Each label
   is the whole clickable card: a native radio (always visible, native
   focus ring included) plus a short description, no giant empty boxes. */
.abc-class-choice-fieldset {
  border: none;
  padding: 0;
  margin: 0.25rem 0;
  display: grid;
  gap: 0.6rem;
}

.abc-class-choice-fieldset legend {
  font-size: 0.9rem;
  font-weight: bold;
  opacity: 0.85;
  padding: 0;
  margin-bottom: 0.4rem;
}

.abc-class-choice-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid #d7c9bb;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.abc-class-choice-option:hover {
  border-color: var(--cta);
}

.abc-class-choice-option:has(input:checked) {
  border-color: var(--cta);
  background: rgba(217, 119, 106, 0.08);
  box-shadow: 0 0 0 1px var(--cta);
}

.abc-class-choice-option:focus-within {
  outline: 3px solid rgba(217, 119, 106, 0.55);
  outline-offset: 2px;
}

.abc-class-choice-option input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--cta);
}

.abc-class-choice-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.abc-class-choice-title {
  font-weight: 700;
  font-size: 0.98rem;
}

.abc-class-choice-name {
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0.85;
}

.abc-class-choice-desc {
  font-size: 0.86rem;
  opacity: 0.75;
}

.abc-class-choice-prereq {
  font-size: 0.8rem;
  opacity: 0.65;
  font-style: italic;
}

/* Prerequisite checkbox: visible and usable with no JavaScript at all
   (CSS-only auto-hide when Class A is selected — the one case where it
   never applies). */
#abc-class-a-prereq {
  display: block;
}

.abc-registration-form:has(input[name="selected_course_code"][value="A"]:checked) #abc-class-a-prereq {
  display: none;
}

@media (max-width: 700px) {
  .abc-course-grid {
    grid-template-columns: 1fr;
  }

  .abc-booking-terms-grid {
    grid-template-columns: 1fr;
  }

  .abc-registration-form,
  .abc-course-summary-compact {
    max-width: 100%;
  }

  .abc-registration-form .button {
    width: 100%;
  }

  .abc-class-choice-option {
    padding: 0.7rem 0.8rem;
  }
}

/* Mockup-aligned refinement layer for the public ABC registration flow. */
.abc-registration-experience {
  --abc-panel-bg: rgba(255, 255, 255, 0.82);
  --abc-panel-border: rgba(185, 106, 86, 0.22);
  --abc-green-soft: rgba(95, 168, 95, 0.1);
  text-align: left;
}

.abc-registration-hero {
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.abc-registration-hero h1 {
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  letter-spacing: 0;
  text-transform: none;
}

.abc-registration-hero .subtitle {
  max-width: 680px;
  margin-inline: auto;
  font-size: 1.12rem;
}

.abc-registration-hero-icon {
  width: clamp(5.5rem, 12vw, 9rem);
  height: auto;
  justify-self: center;
}

.abc-registration-layout {
  width: min(100%, var(--max-width));
  margin: 1.1rem auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 1.25rem;
  align-items: start;
}

.abc-registration-feature-strip {
  width: min(100%, var(--max-width));
  margin: 0 auto 1.35rem;
  padding: 1rem 1.35rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border: 1px solid var(--abc-panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(75, 55, 45, 0.045);
}

.abc-registration-feature {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

.abc-registration-feature + .abc-registration-feature {
  border-left: 1px solid var(--divider);
  padding-left: 1rem;
}

.abc-registration-feature img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.abc-registration-feature p {
  margin: 0;
  font-size: 0.94rem;
}

.abc-registration-feature-title {
  color: var(--green);
  font-weight: 700;
}

.abc-empty-state {
  border: 1px solid var(--abc-panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(75, 55, 45, 0.045);
}

.abc-registration-main {
  display: grid;
  gap: 1rem;
}

.abc-flow-step {
  border: 1px solid var(--abc-panel-border);
  border-radius: 8px;
  background: var(--abc-panel-bg);
  box-shadow: 0 12px 30px rgba(75, 55, 45, 0.055);
  overflow: hidden;
  scroll-margin-top: 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.abc-flow-step.is-active {
  border-color: rgba(95, 168, 95, 0.42);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(75, 55, 45, 0.075);
}

.abc-flow-step-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 1.25rem 1.45rem 1.15rem;
}

.abc-flow-step-number {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  line-height: 1;
}

.abc-flow-step.is-complete .abc-flow-step-number {
  font-size: 0;
}

.abc-flow-step.is-complete .abc-flow-step-number::before {
  content: "✓";
  font-size: 1rem;
}

.abc-flow-step-title-wrap h2 {
  margin: 0 0 0.15rem;
  font-size: 1.28rem;
  color: #173044;
}

.abc-flow-step-title-wrap {
  min-width: 0;
}

.abc-flow-step-title-wrap p {
  margin: 0;
  overflow-wrap: anywhere;
}

.abc-flow-step-summary {
  display: none;
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--green);
}

.abc-flow-step.is-complete .abc-flow-step-summary:not(:empty) {
  display: block;
}

.abc-step-edit {
  border: 0;
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  background: rgba(95, 168, 95, 0.08);
  color: var(--green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.abc-flow-step.is-active .abc-step-edit,
.abc-flow-step.is-pending .abc-step-edit {
  display: none;
}

.abc-step-edit:hover,
.abc-step-edit:focus-visible {
  color: var(--hover-green);
  background: rgba(95, 168, 95, 0.14);
  box-shadow: 0 0 0 3px rgba(95, 168, 95, 0.12);
  outline: none;
}

.abc-flow-step-body {
  max-height: 2600px;
  opacity: 1;
  padding: 0 1.45rem 1.45rem;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}

.abc-flow-step.is-complete .abc-flow-step-body,
.abc-flow-step.is-pending .abc-flow-step-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.abc-course-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.05rem;
  margin-bottom: 0;
}

.abc-course-card {
  min-height: 100%;
  border-color: var(--abc-panel-border);
  background: rgba(255, 255, 255, 0.72);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.abc-course-card:hover,
.abc-course-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(95, 168, 95, 0.5);
  box-shadow: 0 14px 30px rgba(75, 55, 45, 0.08);
}

.abc-course-card.is-selected {
  border-color: var(--green);
  background: var(--abc-green-soft);
  box-shadow: inset 0 0 0 1px var(--green), 0 12px 24px rgba(75, 55, 45, 0.06);
}

.abc-course-card.is-selected::after {
  content: "✓";
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
}

.abc-registration-form {
  max-width: none;
  gap: 1rem;
}

.abc-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
}

.abc-field-grid label,
.abc-field-grid textarea,
.abc-field-grid .abc-agreement-notice,
.abc-field-grid .checkbox-label,
.abc-field-grid .abc-form-terms-summary,
.abc-field-grid .button {
  grid-column: 1 / -1;
}

.abc-registration-form input:not([type="checkbox"]):not([type="radio"]),
.abc-registration-form textarea,
.abc-registration-form select {
  border-radius: 6px;
  border-color: #d9cabe;
  background: rgba(255, 255, 255, 0.94);
}

.abc-registration-form input:not([type="checkbox"]):not([type="radio"]):hover,
.abc-registration-form textarea:hover,
.abc-registration-form select:hover {
  border-color: rgba(217, 119, 106, 0.58);
}

.abc-registration-form input:not([type="checkbox"]):not([type="radio"]):user-invalid,
.abc-registration-form textarea:user-invalid {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(254, 120, 3, 0.14);
}

.abc-class-choice-fieldset {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.abc-class-choice-fieldset legend {
  grid-column: 1 / -1;
}

.abc-class-choice-option {
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1rem 1.15rem;
}

.abc-class-choice-option input[type="radio"] {
  order: 2;
  margin-top: 0.35rem;
  accent-color: var(--green);
}

.abc-class-choice-option:has(input:checked) {
  border-color: var(--green);
  background: var(--abc-green-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}

.abc-registration-sidebar {
  position: sticky;
  top: 1rem;
}

.abc-selection-card {
  min-height: 520px;
  padding: 1.45rem 1.3rem;
  border: 1px solid var(--abc-panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(75, 55, 45, 0.055);
}

.abc-selection-card h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border);
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 700;
}

.abc-selection-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--divider);
}

.abc-selection-item img {
  width: 2.1rem;
  height: 2.1rem;
  object-fit: contain;
}

.abc-selection-label {
  margin: 0 0 0.15rem;
  color: var(--green);
  font-weight: 700;
}

.abc-selection-value {
  margin: 0;
  line-height: 1.45;
}

.abc-help-card {
  margin-top: 1.1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(95, 168, 95, 0.24);
  border-radius: 8px;
  background: rgba(95, 168, 95, 0.07);
}

.abc-help-card-blue {
  border-color: rgba(13, 107, 171, 0.2);
  background: rgba(13, 107, 171, 0.06);
}

.abc-help-card p {
  margin: 0;
  font-size: 0.92rem;
}

.abc-help-card p + p {
  margin-top: 0.35rem;
}

.abc-help-title {
  color: var(--green);
  font-weight: 700;
}

.abc-form-errors {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(254, 120, 3, 0.28);
  border-radius: 8px;
  background: rgba(254, 120, 3, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .abc-flow-step,
  .abc-flow-step-body,
  .abc-course-card {
    transition: none;
  }

  .abc-course-card:hover,
  .abc-course-card:focus-within {
    transform: none;
  }
}

@media (max-width: 980px) {
  .abc-registration-layout {
    grid-template-columns: 1fr;
  }

  .abc-registration-feature-strip {
    grid-template-columns: 1fr;
  }

  .abc-registration-feature + .abc-registration-feature {
    border-left: 0;
    border-top: 1px solid var(--divider);
    padding-left: 0;
    padding-top: 1rem;
  }

  .abc-registration-sidebar {
    position: static;
    order: 2;
  }

  .abc-selection-card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .abc-registration-experience {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden;
  }

  .abc-registration-hero,
  .abc-registration-feature-strip,
  .abc-registration-layout,
  .abc-empty-state {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .abc-registration-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .abc-registration-hero h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.15rem);
    overflow-wrap: anywhere;
  }

  .abc-registration-hero .subtitle {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .abc-registration-hero h1,
  .abc-registration-hero .subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .abc-registration-hero-icon {
    justify-self: center;
  }

  .abc-flow-step-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
    gap: 0.7rem;
  }

  .abc-step-edit {
    grid-column: 2;
    justify-self: start;
  }

  .abc-flow-step-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .abc-field-grid,
  .abc-class-choice-fieldset {
    grid-template-columns: 1fr;
  }

  .abc-selection-card {
    padding: 1.2rem 1rem;
  }

  .abc-registration-feature-strip {
    padding: 1rem;
  }

  .abc-registration-feature {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.7rem;
    justify-items: stretch;
  }

  .abc-registration-feature img {
    width: 1.75rem;
    height: 1.75rem;
  }

  .abc-registration-feature p,
  .abc-empty-state p,
  .abc-registration-experience .text-link {
    overflow-wrap: anywhere;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-feature p {
    max-width: 32ch;
  }
}

/* -----------------------------------------------------------------------
   Class Registration — Kellie's Table visual identity
   Scoped entirely to [data-reg-flow] (unique to class-registration.php;
   abc-booking.php's own flow uses [data-abc-flow] instead) so none of this
   touches abc-booking.php's presentation. Goal: this page should feel like
   a Kellie's Table page first and a Kitchen Table page second — neutral,
   calm, editorial by default, with the selected service's color introduced
   only once it's actually chosen (mirroring how the Family Agreement page
   keeps its accordions neutral until a service's border-left accent marks
   it). See agreement.php's .agreement-accordion / .agreement-summary-* for
   the reference pattern this borrows.
----------------------------------------------------------------------- */

/* Feature strip: informative text, not a promotional box. */
.abc-registration-experience[data-reg-flow] .abc-registration-feature-strip {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider);
}

.abc-registration-experience[data-reg-flow] .abc-registration-feature-title {
  color: var(--charcoal);
  font-weight: var(--font-weight-semibold);
}

/* Step cards: flat and calm, matching .agreement-form-panel rather than
   the shadowed/tinted treatment abc-booking.php uses for its own flow. */
.abc-registration-experience[data-reg-flow] .abc-flow-step {
  border-color: var(--card-border);
  box-shadow: none;
  background: var(--white);
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-active {
  border-color: rgba(217, 119, 106, 0.34);
  background: linear-gradient(90deg, rgba(217, 119, 106, 0.08), var(--white) 0.72rem);
  box-shadow: none;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step-head {
  align-items: start;
  gap: 0.8rem;
  padding: 0.95rem var(--space-4) 0.88rem;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step-body {
  padding: 0 var(--space-4) 1.1rem;
  transform: translateY(0);
  transition: opacity 240ms ease-out, transform 240ms ease-out, padding 240ms ease-out;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-head,
.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending .abc-flow-step-head {
  padding-block: 0.78rem;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending {
  background: rgba(255, 255, 255, 0.72);
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending .abc-flow-step-number,
.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending .abc-flow-step-title-wrap {
  opacity: 0.58;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-body,
.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending .abc-flow-step-body {
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .abc-registration-experience[data-reg-flow] .abc-flow-step-body {
    transition: none;
    transform: none;
  }
}

/* Quieter step indicator, matching the Family Agreement accordion's
   restraint — an outlined number rather than a solid filled circle, muted
   further (not bright green) once a step is complete. */
.abc-registration-experience[data-reg-flow] .abc-flow-step-number {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  margin-top: 0.05rem;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--charcoal);
  font-weight: var(--font-weight-semibold);
  font-size: 0.86rem;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-number::before {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-active .abc-flow-step-number {
  border-color: var(--cta);
  color: var(--cta);
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-number {
  border-color: var(--card-border);
  color: var(--charcoal);
  opacity: 0.65;
  font-size: 0;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-number::before {
  font-size: 0.92rem;
  font-weight: var(--font-weight-regular);
}

/* The whole header of a completed step reopens it — see class-registration.js's
   reopenStep()/keydown handler, which toggle role="button"/tabindex onto
   .abc-flow-step-head for exactly this state. */
.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-head {
  cursor: pointer;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-head:hover {
  background: rgba(75, 55, 45, 0.02);
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-head:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-active .abc-flow-step-head,
.abc-registration-experience[data-reg-flow] .abc-flow-step.is-pending .abc-flow-step-head {
  cursor: default;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step-summary {
  color: var(--charcoal);
  margin-top: 0.12rem;
  font-size: 0.94rem;
  font-weight: var(--font-weight-regular);
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-complete .abc-flow-step-title-wrap > p:not(.abc-flow-step-summary) {
  display: none;
}

.abc-registration-experience[data-reg-flow] .abc-step-edit {
  color: var(--cta);
  background: rgba(217, 119, 106, 0.08);
}

.abc-registration-experience[data-reg-flow] .abc-step-edit:hover,
.abc-registration-experience[data-reg-flow] .abc-step-edit:focus-visible {
  color: var(--hover-cta);
  background: rgba(217, 119, 106, 0.14);
  box-shadow: 0 0 0 3px rgba(217, 119, 106, 0.12);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option input[type="radio"] {
  accent-color: var(--cta);
}

/* Service selection is the primary interaction — give it a little more
   breathing room than a generic choice card. */
.abc-registration-experience[data-reg-flow] .reg-service-card,
.abc-registration-experience[data-reg-flow] .reg-offering-card {
  justify-content: center;
  padding: 1.05rem 0.95rem 1.1rem;
}

.abc-registration-experience[data-reg-flow] .reg-service-card {
  min-height: 10.2rem;
}

.abc-registration-experience[data-reg-flow] .reg-offering-card {
  min-height: 9.85rem;
}

.abc-registration-experience[data-reg-flow] .reg-service-card input[type="radio"],
.abc-registration-experience[data-reg-flow] .reg-offering-card input[type="radio"] {
  position: absolute;
  top: 0.68rem;
  right: 0.68rem;
  order: initial;
  margin: 0;
}

.abc-registration-experience[data-reg-flow] .reg-service-fieldset .reg-choice-icon {
  width: 4.45rem;
  height: 3.25rem;
}

/* Neutral by default (the .abc-class-choice-option base rule's coral
   accent already covers this); once a specific service is chosen — either
   directly (Step 1) or via its offering (Step 2, data-service) — that
   service's own color takes over so the page stops reading as green by
   default and instead reflects what the family actually picked. */
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="kitchen"]:checked),
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="kitchen"]:checked) {
  border-color: var(--kitchen-secondary);
  background: rgba(var(--kitchen-secondary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px var(--kitchen-secondary);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="art"]:checked),
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="art"]:checked) {
  border-color: var(--art-secondary);
  background: rgba(var(--art-secondary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px var(--art-secondary);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="reading"]:checked),
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="reading"]:checked) {
  border-color: var(--reading-secondary);
  background: rgba(var(--reading-secondary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px var(--reading-secondary);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="kitchen"]:checked)::after,
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="kitchen"]:checked)::after {
  background: var(--kitchen-secondary);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="art"]:checked)::after,
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="art"]:checked)::after {
  background: var(--art-secondary);
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[value="reading"]:checked)::after,
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input[data-service="reading"]:checked)::after {
  background: var(--reading-secondary);
}

/* Sidebar: lighter and flatter, matching the Agreement page's card style. */
.abc-registration-experience[data-reg-flow] .abc-selection-card {
  border-color: var(--card-border);
  box-shadow: none;
  background: var(--white);
}

.abc-registration-experience[data-reg-flow] .abc-selection-card h2 {
  margin-bottom: 0.55rem;
  padding-bottom: 0.62rem;
  color: var(--charcoal);
  font-weight: var(--font-weight-regular);
  font-size: 1.22rem;
}

.abc-registration-experience[data-reg-flow] .abc-selection-label {
  margin-bottom: 0.05rem;
  color: var(--charcoal);
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
}

.abc-registration-experience[data-reg-flow] .abc-help-card,
.abc-registration-experience[data-reg-flow] .abc-help-card-blue {
  border-color: var(--card-border);
  background: var(--cream);
}

.abc-registration-experience[data-reg-flow] .reg-schedule-note {
  border-color: var(--card-border);
  background: var(--cream);
}

.abc-registration-experience[data-reg-flow] .reg-lesson-row.is-selected {
  border-color: var(--cta);
  background: rgba(217, 119, 106, 0.06);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 106, 0.35);
}

/* Square corners throughout, matching the rest of the site (see
   .agreement-accordion / .agreement-form-panel, neither of which round
   their corners) rather than the 8px card radius abc-booking.php's flow
   uses. Circular elements (step-number badges, choice-card checkmarks) are
   an intentional shape, not a "card corner," so they're untouched. */
.abc-registration-experience[data-reg-flow] .abc-flow-step,
.abc-registration-experience[data-reg-flow] .abc-selection-card,
.abc-registration-experience[data-reg-flow] .abc-class-choice-option,
.abc-registration-experience[data-reg-flow] .abc-help-card,
.abc-registration-experience[data-reg-flow] .reg-lesson-row,
.abc-registration-confirmation .abc-confirmation-card {
  border-radius: 0;
}

/* Sidebar "Class / Activity" icon: a neutral heart until an offering is
   chosen, then the exact icon already established for that class/activity
   on its own public page (see inc/class_registrations.php's CLASS_OFFERINGS
   'icon' key — the single source of truth every icon reference here reads
   from, so there is never a second icon system to keep in sync). */
.abc-registration-experience[data-reg-flow] .reg-offering-icon-stack {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 1.8rem;
  min-height: 1.65rem;
}

.abc-registration-experience[data-reg-flow] .reg-offering-icon {
  display: none;
}

.abc-registration-experience[data-reg-flow] .reg-offering-icon-default {
  display: block;
}

.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="standalone-cooking"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-a"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-b"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-c"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="embroidery-workshop"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="embroidery-drop-in"]:checked) .reg-offering-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="reading-request"]:checked) .reg-offering-icon-default {
  display: none;
}

.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="standalone-cooking"]:checked) .reg-offering-icon-standalone-cooking,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-a"]:checked) .reg-offering-icon-abc-a,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-b"]:checked) .reg-offering-icon-abc-b,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="abc-c"]:checked) .reg-offering-icon-abc-c,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="embroidery-workshop"]:checked) .reg-offering-icon-embroidery-workshop,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="embroidery-drop-in"]:checked) .reg-offering-icon-embroidery-drop-in,
.abc-registration-experience[data-reg-flow]:has(input[name="offering"][value="reading-request"]:checked) .reg-offering-icon-reading-request {
  display: block;
}

/* Sidebar "Service" icon: same neutral-then-reveal pattern as the
   Class/Activity icon above, keyed on the Step 1 service radio instead of
   the offering radio. */
.abc-registration-experience[data-reg-flow] .reg-service-icon-stack {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 1.8rem;
  min-height: 1.65rem;
}

.abc-registration-experience[data-reg-flow] .reg-service-icon {
  display: none;
}

.abc-registration-experience[data-reg-flow] .reg-service-icon-default {
  display: block;
}

.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="kitchen"]:checked) .reg-service-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="art"]:checked) .reg-service-icon-default,
.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="reading"]:checked) .reg-service-icon-default {
  display: none;
}

.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="kitchen"]:checked) .reg-service-icon-kitchen,
.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="art"]:checked) .reg-service-icon-art,
.abc-registration-experience[data-reg-flow]:has(input[name="service"][value="reading"]:checked) .reg-service-icon-reading {
  display: block;
}

.abc-registration-experience[data-reg-flow] .abc-help-title {
  color: var(--charcoal);
  font-weight: var(--font-weight-semibold);
}

/* Rhythm: match the Agreement pages' generous section-to-section spacing
   rather than the tighter stacking abc-booking.php uses for its own flow.
   Tightened from --space-5 now that the feature strip (originally between
   the hero and this margin) is temporarily not rendered — see the
   commented-out block in class-registration.php. */
.abc-registration-experience[data-reg-flow] .abc-registration-hero {
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-layout {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 316px);
  gap: 1.55rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-main {
  gap: 0.72rem;
}

.abc-registration-experience[data-reg-flow] .abc-selection-card {
  padding: 1.2rem 1.08rem 1.05rem;
}

.abc-registration-experience[data-reg-flow] .abc-selection-item {
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.82rem 0;
}

@media (max-width: 980px) {
  .abc-registration-experience[data-reg-flow] .abc-registration-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* -----------------------------------------------------------------------
   Class Registration (Phase 2) — generalized Kitchen/Art/Reading
   registration wizard (class-registration.php). Builds directly on the
   .abc-flow-step / .abc-registration-* / .abc-class-choice-* component
   system above (originally built for abc-booking.php's own progressive
   flow) rather than duplicating it — those classes are now shared by both
   pages. This block only adds what that system didn't already have: an
   icon slot on choice cards, offering-group grids that flex to any card
   count, lesson-date selectors, and the Reading preference fields.
----------------------------------------------------------------------- */

/* Visually hidden but still announced — used for the Step 1 fieldset
   legend, which is redundant with the step heading for sighted users but
   required for the fieldset to have an accessible name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reg-choice-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  margin: 0 auto 0.25rem;
}

.reg-service-card,
.reg-offering-card {
  position: relative;
}

.reg-service-fieldset .reg-choice-icon {
  width: 4.35rem;
  height: 3.25rem;
  margin-bottom: 0.4rem;
}

.reg-choice-badge {
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 0.4rem;
  display: inline-grid;
  place-items: center;
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-option.is-selected::after,
.abc-registration-experience[data-reg-flow] .abc-class-choice-option:has(input:checked)::after {
  content: "✓";
  width: 1.32rem;
  height: 1.32rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--green);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
}

.reg-service-card .abc-class-choice-title,
.reg-offering-card .abc-class-choice-title {
  color: var(--charcoal);
  line-height: 1.25;
}

.reg-service-card .abc-class-choice-desc,
.reg-offering-card .abc-class-choice-desc {
  max-width: 15rem;
  margin-inline: auto;
  line-height: 1.45;
}

/* Offering cards vary in count per service (Kitchen has four, Art has one
   today) — auto-fit rather than the fixed three-column service grid. */
.reg-offering-group {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.8rem;
}

.reg-offering-group[hidden],
.reg-reading-preferences[hidden],
.reg-lesson-row[hidden],
[data-role="lesson-selectors"][hidden],
[data-role="availability-note"][hidden] {
  display: none;
}

.reg-offering-card {
  justify-content: flex-start;
}

.reg-offering-card .abc-class-choice-prereq {
  margin-top: 0.25rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(222, 217, 210, 0.85);
}

.reg-schedule-note {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(95, 168, 95, 0.2);
  border-radius: 8px;
  background: rgba(95, 168, 95, 0.06);
}

.reg-lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  padding: 0.9rem;
  border: 1px solid rgba(222, 217, 210, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.reg-lesson-row-main {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.reg-lesson-row.is-selected {
  border-color: rgba(95, 168, 95, 0.42);
  background: rgba(95, 168, 95, 0.07);
  box-shadow: inset 0 0 0 1px rgba(95, 168, 95, 0.18);
}

.reg-lesson-row:last-of-type {
  margin-bottom: 0;
}

.reg-lesson-row label {
  font-weight: bold;
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0;
}

.abc-registration-form select {
  width: 100%;
  border: 1px solid #d9cabe;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  min-height: 3rem;
  padding: 0.72rem 2.1rem 0.72rem 0.85rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--charcoal);
  box-shadow: 0 3px 10px rgba(75, 55, 45, 0.06);
}

.abc-registration-form select:hover {
  border-color: rgba(217, 119, 106, 0.58);
}

.abc-registration-form select:focus {
  outline: none;
  border-color: var(--cta);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(217, 119, 106, 0.18);
}

.abc-registration-form select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(250, 247, 242, 0.76);
}

.reg-lesson-status {
  margin: 0;
  font-size: 0.85rem;
  min-height: 1.2em;
  padding-left: 6.25rem;
  color: rgba(51, 51, 51, 0.72);
}

.reg-lesson-status.is-loading {
  color: var(--reading-primary);
  font-weight: 700;
}

.reg-lesson-status.is-empty {
  color: #6f655d;
  font-weight: 600;
}

.reg-lesson-status.is-error {
  color: var(--art-primary);
  font-weight: 600;
}

.reg-availability-note {
  margin-top: 0.5rem;
}

.reg-availability-note .abc-help-title {
  margin-bottom: 0.25rem;
}

.reg-reading-preferences {
  border: 1px solid rgba(13, 107, 171, 0.14);
  border-radius: 8px;
  padding: 1rem;
  margin: 0;
  display: grid;
  gap: 0.65rem;
  background: rgba(13, 107, 171, 0.035);
}

.reg-reading-preferences legend {
  padding: 0 0.25rem;
  color: var(--reading-primary);
  font-weight: 700;
}

.reg-reading-note {
  margin: 0;
}

.reg-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.reg-day-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d7c9bb;
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  min-height: 44px;
  margin: 0;
  background: rgba(255, 255, 255, 0.68);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.reg-day-checkbox:has(input:checked) {
  border-color: var(--reading-primary);
  background: rgba(13, 107, 171, 0.08);
  box-shadow: inset 0 0 0 1px rgba(13, 107, 171, 0.18);
}

.reg-day-checkbox:focus-within {
  outline: 3px solid rgba(13, 107, 171, 0.25);
  outline-offset: 2px;
}

.reg-day-checkbox input {
  accent-color: var(--reading-primary);
}

.reg-reading-continue {
  justify-self: start;
  border: 1px solid rgba(13, 107, 171, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--reading-primary);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.reg-reading-continue:hover,
.reg-reading-continue:focus-visible {
  border-color: var(--reading-primary);
  background: var(--white);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 107, 171, 0.14);
}

.reg-info-divider {
  padding-top: 0.85rem;
  border-top: 1px solid var(--divider);
}

.reg-sidebar-line {
  display: block;
  line-height: 1.38;
}

.reg-sidebar-line + .reg-sidebar-line {
  margin-top: 0.35rem;
}

.reg-footer-note {
  width: min(100%, var(--max-width));
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

.reg-footer-note-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.reg-privacy-note {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: -0.25rem;
  color: rgba(51, 51, 51, 0.72);
}

.abc-registration-experience[data-reg-flow] {
  max-width: none;
  box-sizing: border-box;
  padding-top: clamp(1.75rem, 3vw, 2.8rem);
}

.abc-registration-experience[data-reg-flow] .abc-registration-hero h1 {
  font-size: clamp(2.05rem, 3.45vw, 3.18rem);
  line-height: 1.08;
}

.abc-registration-experience[data-reg-flow] .abc-registration-hero .subtitle {
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.48;
}

.abc-registration-experience[data-reg-flow] .abc-registration-hero-icon {
  width: clamp(3.25rem, 6.2vw, 4.5rem);
}

.abc-registration-experience[data-reg-flow] .abc-registration-form input:not([type="checkbox"]):not([type="radio"]),
.abc-registration-experience[data-reg-flow] .abc-registration-form select {
  min-height: 2.85rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-form input:not([type="checkbox"]):not([type="radio"]),
.abc-registration-experience[data-reg-flow] .abc-registration-form textarea {
  padding: 0.68rem 0.82rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-hero,
.abc-registration-experience[data-reg-flow] .abc-registration-feature-strip,
.abc-registration-experience[data-reg-flow] .abc-registration-layout,
.abc-registration-experience[data-reg-flow] .reg-footer-note,
.abc-registration-experience[data-reg-flow] .abc-form-errors {
  max-width: var(--max-width);
}

.abc-registration-experience[data-reg-flow] .abc-selection-card {
  min-height: auto;
}

.abc-registration-experience[data-reg-flow] .abc-selection-item:last-of-type {
  border-bottom: 0;
}

.abc-registration-experience[data-reg-flow] .abc-help-card {
  line-height: 1.48;
  margin-top: 0.88rem;
  padding: 0.82rem 0.88rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-form .button {
  min-height: 2.8rem;
  padding-inline: 2.4rem;
  box-shadow: 0 10px 22px rgba(201, 130, 114, 0.18);
}

.abc-registration-experience[data-reg-flow] .abc-registration-form .button:hover,
.abc-registration-experience[data-reg-flow] .abc-registration-form .button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(201, 130, 114, 0.22);
}

.abc-registration-experience[data-reg-flow] .abc-selection-value {
  overflow-wrap: anywhere;
  font-size: 0.94rem;
  line-height: 1.36;
}

.abc-registration-experience[data-reg-flow] .abc-registration-feature > div,
.abc-registration-experience[data-reg-flow] .abc-class-choice-body {
  max-width: 100%;
}

.abc-registration-experience[data-reg-flow] .abc-registration-feature p,
.abc-registration-experience[data-reg-flow] .abc-class-choice-title,
.abc-registration-experience[data-reg-flow] .abc-class-choice-desc,
.abc-registration-experience[data-reg-flow] .abc-class-choice-prereq {
  white-space: normal;
  overflow-wrap: anywhere;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step-title-wrap h2 {
  margin-bottom: 0.1rem;
  font-size: 1.18rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.18;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step.is-active .abc-flow-step-title-wrap h2 {
  color: #173044;
}

.abc-registration-experience[data-reg-flow] .abc-flow-step-title-wrap > p:not(.abc-flow-step-summary) {
  font-size: 0.98rem;
  line-height: 1.36;
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-fieldset {
  gap: 0.72rem;
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-body {
  display: grid;
  justify-items: center;
  gap: 0.14rem;
}

.abc-registration-experience[data-reg-flow] .reg-choice-icon {
  margin-bottom: 0.18rem;
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-title {
  font-size: 1.02rem;
  line-height: 1.18;
}

.abc-registration-experience[data-reg-flow] .abc-class-choice-desc,
.abc-registration-experience[data-reg-flow] .abc-class-choice-prereq {
  font-size: 0.92rem;
  line-height: 1.32;
}

.abc-registration-experience[data-reg-flow] .reg-offering-card .abc-class-choice-prereq {
  width: 100%;
  margin-top: 0.28rem;
  padding-top: 0.38rem;
}

.abc-registration-experience[data-reg-flow] .abc-selection-item img,
.abc-registration-experience[data-reg-flow] .reg-service-icon,
.abc-registration-experience[data-reg-flow] .reg-offering-icon {
  width: 1.62rem;
  height: 1.62rem;
}

.abc-registration-experience[data-reg-flow] .reg-lesson-row {
  gap: 0.32rem;
  margin-bottom: 0.68rem;
  padding: 0.78rem 0.82rem;
}

.abc-registration-experience[data-reg-flow] .reg-lesson-row-main {
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.68rem;
}

.abc-registration-experience[data-reg-flow] .abc-registration-form select {
  min-height: 2.85rem;
  padding: 0.66rem 2rem 0.66rem 0.8rem;
  box-shadow: none;
}

.abc-registration-experience[data-reg-flow] .reg-lesson-status {
  padding-left: 5.93rem;
  line-height: 1.35;
}

.abc-registration-experience[data-reg-flow] *,
.abc-registration-experience[data-reg-flow] *::before,
.abc-registration-experience[data-reg-flow] *::after {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 720px) {
  .reg-footer-note {
    flex-direction: column;
    gap: 0.25rem;
  }

  .abc-registration-experience[data-reg-flow] {
    padding-inline: 1rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step,
  .abc-registration-experience[data-reg-flow] .abc-selection-card,
  .abc-registration-experience[data-reg-flow] .abc-class-choice-option,
  .abc-registration-experience[data-reg-flow] .reg-lesson-row,
  .abc-registration-experience[data-reg-flow] .reg-reading-preferences {
    box-sizing: border-box;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero {
    margin-bottom: 1.15rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero h1 {
    font-size: clamp(1.65rem, 7.6vw, 2.15rem);
    max-width: 10.5em;
    overflow-wrap: anywhere;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero .subtitle {
    max-width: 31ch;
    margin-inline: auto;
    line-height: 1.44;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-feature-strip,
  .abc-registration-experience[data-reg-flow] .abc-flow-step,
  .abc-registration-experience[data-reg-flow] .abc-selection-card {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .reg-service-fieldset .reg-choice-icon {
    width: 3.8rem;
    height: 2.9rem;
  }

  .reg-lesson-row {
    padding: 0.75rem 0.7rem;
  }

  .reg-lesson-row-main {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .reg-lesson-status {
    padding-left: 0;
  }

  .abc-registration-experience[data-reg-flow] .reg-lesson-row-main {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .abc-registration-experience[data-reg-flow] .reg-lesson-status {
    padding-left: 0;
  }

  .reg-checkbox-row {
    gap: 0.45rem;
  }

  .reg-day-checkbox {
    min-height: 2.5rem;
  }
}

@media (max-width: 540px) {
  .button-row,
  .center-button,
  .reg-confirmation-actions {
    align-items: stretch;
  }

  .button-row .button,
  .center-button .button,
  .reg-confirmation-actions .button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding-inline: 1rem;
  }

  .simple-page,
  .abc-registration-experience[data-reg-flow] {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .abc-flow-step-head,
  .abc-flow-step-body,
  .abc-selection-card,
  .abc-registration-feature-strip {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .page-intro h1,
  .page-intro h2,
  .split-content h1 {
    overflow-wrap: anywhere;
  }
}

.abc-registration-confirmation {
  max-width: 780px;
  text-align: center;
}

.abc-registration-confirmation .page-intro {
  margin-bottom: 1.5rem;
}

.reg-confirmation-icon {
  width: 3.5rem;
  height: auto;
  margin: 0 auto 1rem;
  opacity: 0.9;
}

.abc-registration-confirmation .abc-confirmation-card {
  max-width: 560px;
  padding: 1.35rem;
  border-color: rgba(95, 168, 95, 0.24);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(75, 55, 45, 0.055);
}

.abc-registration-confirmation .abc-confirmation-card h2 {
  margin-bottom: 0.75rem;
  color: #173044;
  font-size: 1.2rem;
}

.reg-confirmation-offering-icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin: 0 auto 0.75rem;
}

.abc-registration-confirmation .abc-lesson-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.abc-registration-confirmation .abc-lesson-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--divider);
}

.abc-registration-confirmation .abc-lesson-list li:last-child {
  border-bottom: 0;
}

.abc-registration-confirmation .abc-status-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  margin: 0.35rem 0 0;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(201, 130, 114, 0.28);
  border-radius: 999px;
  background: rgba(201, 130, 114, 0.08);
  color: var(--active-cta);
}

.reg-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 1.2rem;
}

.reg-confirmation-actions .button {
  margin: 0;
  background: var(--cta);
  color: var(--white);
  border-color: var(--cta);
}

.reg-confirmation-actions .button:hover,
.reg-confirmation-actions .button:focus-visible {
  background: var(--hover-cta);
  border-color: var(--hover-cta);
  color: var(--white);
}

@media (max-width: 540px) {
  .abc-registration-confirmation {
    text-align: left;
    max-width: 100%;
    overflow-x: hidden;
  }

  .reg-confirmation-icon {
    margin-left: 0;
  }

  .reg-confirmation-actions {
    justify-content: flex-start;
    align-items: stretch;
  }

  .abc-registration-confirmation .page-intro h1 {
    max-width: 9.5ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.9rem, 9vw, 2.25rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  .abc-registration-confirmation .page-intro p,
  .reg-confirmation-actions .text-link {
    overflow-wrap: anywhere;
  }

  .abc-registration-confirmation .page-intro p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  .reg-confirmation-actions .text-link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 540px) {
  .abc-registration-experience[data-reg-flow] {
    padding-inline: 0.75rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero {
    justify-items: center;
    text-align: center;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-feature-strip,
  .abc-registration-experience[data-reg-flow] .abc-flow-step,
  .abc-registration-experience[data-reg-flow] .abc-selection-card {
    width: 100%;
    max-width: 100%;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-head {
    gap: 0.65rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-title-wrap h2 {
    font-size: 1.08rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero h1 {
    max-width: 8.2em;
    font-size: 1.72rem;
    line-height: 1.14;
    margin-inline: auto;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero .subtitle {
    max-width: 25ch;
    font-size: 0.98rem;
    margin-inline: auto;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero-icon {
    width: 3.75rem;
    justify-self: center;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-head {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    padding: 0.85rem 0.8rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-body {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-number {
    width: 1.75rem;
    height: 1.75rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-class-choice-option {
    padding: 0.92rem 0.8rem 1rem;
  }

  .abc-registration-experience[data-reg-flow] .reg-service-card,
  .abc-registration-experience[data-reg-flow] .reg-offering-card {
    min-height: 8.9rem;
  }
}

@media (max-width: 360px) {
  .abc-registration-experience[data-reg-flow] {
    padding-inline: 0.5rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero h1 {
    font-size: 1.62rem;
    max-width: 8.25em;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-hero .subtitle {
    max-width: 25ch;
  }

  .abc-registration-experience[data-reg-flow] .abc-registration-feature-strip {
    padding: 0.85rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-head {
    padding-inline: 0.7rem;
  }

  .abc-registration-experience[data-reg-flow] .abc-flow-step-body {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}

.lesson-points {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.lesson-points li + li {
    margin-top: 0.35rem;
}

.photo-book-home-icon {
    width: 5rem;
    height: 5rem;
}

@media (max-width: 360px) {
  body,
  main,
  .simple-page,
  .hero,
  .card-grid,
  .split-page,
  .page-intro,
  .info-card,
  .table-card,
  .abc-registration-experience[data-reg-flow],
  .abc-registration-experience[data-reg-flow] .abc-registration-hero,
  .abc-registration-experience[data-reg-flow] .abc-registration-feature-strip,
  .abc-registration-experience[data-reg-flow] .abc-registration-layout,
  .abc-registration-experience[data-reg-flow] .abc-flow-step,
  .abc-registration-experience[data-reg-flow] .abc-selection-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero,
  .card-grid,
  .split-page,
  .simple-page {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .info-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .button {
    max-width: 100%;
    white-space: normal;
  }
}