/*
 Theme Name:   Stovepipe-child
 Template:     astra
 Version:      1.0.0
*/

:root {
  --color-ink: #4a3428;
  --color-ink-soft: #67574d;
  --color-ivory: #f5efe0;
  --color-paper: #fffbf0;
  --color-cream: #e8dcc4;
  --color-gold: #ebd1a0;
  --color-green: #3d5a3c;
  --color-green-deep: #2c3539;
  --color-plum: #312529;
  --color-sienna: #a0522d;
  --color-line: #dfd0b4;
  --shadow-soft: 0 20px 70px rgba(49, 37, 41, 0.18);
  --radius: 8px;
  --content-width: 1120px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  color: var(--color-ink);
  background: var(--color-plum);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-plum);
  line-height: 1.55;
}

body,
button,
input {
  font: inherit;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 20;
  transform: translateY(-150%);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.9rem max(1rem, calc((100vw - var(--content-width)) / 2));
  background: rgba(44, 53, 57, 0.97);
  border-bottom: 1px solid rgba(232, 220, 196, 0.22);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 18rem;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 8.25rem;
  height: auto;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  color: var(--color-paper);
  font-size: 1rem;
}

.brand small {
  color: var(--color-cream);
  font-size: 0.82rem;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav-links a {
  border-radius: var(--radius);
  color: var(--color-cream);
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(232, 220, 196, 0.12);
  color: var(--color-paper);
  outline: none;
}

.nav-links a[aria-current="page"] {
  background: rgba(232, 220, 196, 0.16);
  color: var(--color-paper);
}

.nav-item {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-cream);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  cursor: pointer;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
  background: rgba(232, 220, 196, 0.12);
  color: var(--color-paper);
  outline: none;
}

.nav-dropdown-toggle.current {
  background: rgba(232, 220, 196, 0.16);
  color: var(--color-paper);
}

.nav-caret {
  font-size: 0.6rem;
  transition: transform 0.15s ease;
}

.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  /* No margin-top: a gap here would be a dead zone the cursor falls through
     when moving from the toggle down into the menu, closing it before it's
     reached. padding-top gives the same visual breathing room but stays
     part of the hoverable box, so :hover / :focus-within never lapses. */
  top: 100%;
  left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 11.5rem;
  border: 1px solid rgba(232, 220, 196, 0.28);
  border-radius: var(--radius);
  background: var(--color-green-deep);
  padding: 0.7rem 0.4rem 0.4rem;
  box-shadow: var(--shadow-soft);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown {
  display: flex;
}

.nav-dropdown a {
  border-radius: calc(var(--radius) - 2px);
  color: var(--color-cream);
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(232, 220, 196, 0.14);
  color: var(--color-paper);
  outline: none;
}

.nav-dropdown a[aria-current="page"] {
  background: rgba(232, 220, 196, 0.16);
  color: var(--color-paper);
}

.hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: center;
  padding: 6rem max(1rem, calc((100vw - var(--content-width)) / 2));
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(49, 37, 41, 0.78) 0%, rgba(49, 37, 41, 0.5) 42%, rgba(49, 37, 41, 0.02) 76%),
    url("assets/masculine-library-plants-hero.png");
  background-position: center;
  background-size: cover;
  color: var(--color-paper);
}

.hero-copy {
  max-width: 44rem;
}

.hero h1 {
  /* Explicit color, not inherited: the theme sets its own global h1
     color, and a direct rule on the element always wins over an
     inherited one, so without this the homepage heading rendered in
     the theme's dark text color instead of the light color the rest
     of the hero uses (same issue fixed on .page-hero h1 below). */
  color: var(--color-paper);
}

.page-hero {
  min-height: 48svh;
  display: flex;
  align-items: center;
  padding: 5.5rem 0;
  color: var(--color-paper);
  background-image:
    linear-gradient(90deg, rgba(49, 37, 41, 0.86) 0%, rgba(49, 37, 41, 0.64) 46%, rgba(49, 37, 41, 0.18) 100%),
    url("assets/masculine-library-plants-hero.png");
  background-position: center;
  background-size: cover;
  /* Full-bleed: break out of Astra's centered .ast-container so the
     background spans the full viewport width edge-to-edge. The section's
     own .section-inner child still centers/pads the actual content via
     its existing width: min(var(--content-width), calc(100% - 2rem)). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Per-page hero photos. Each page-hero <section> already carries a
   second class alongside "page-hero" (e.g. class="page-hero
   services-hero") -- add a rule here targeting that same combination
   to swap just that page's photo, using the same gradient overlay so
   the text stays readable. To change a hero photo yourself: drop the
   new image in assets/, then update (or add) the matching rule below
   with its filename. The compound selector (.page-hero plus the
   page's own class) is what lets this win over the single default
   photo set on the plain .page-hero rule above, regardless of order. */
.page-hero.services-hero {
  background-image:
    linear-gradient(90deg, rgba(49, 37, 41, 0.86) 0%, rgba(49, 37, 41, 0.64) 46%, rgba(49, 37, 41, 0.18) 100%),
    url("assets/Outdoor_workbench.png");
}

.page-hero.writings-hero {
  background-image:
    linear-gradient(90deg, rgba(49, 37, 41, 0.86) 0%, rgba(49, 37, 41, 0.64) 46%, rgba(49, 37, 41, 0.18) 100%),
    url("assets/Cabin_Writing_Desk.png");
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: 2.5rem;
  align-items: end;
}

.page-hero-copy {
  max-width: 50rem;
}

.page-hero .eyebrow {
  color: var(--color-gold);
}

.page-hero h1 {
  font-size: 3.8rem;
  /* Explicit color, not inherited: the theme sets its own global h1
     color, and a direct rule on the element always wins over an
     inherited one, so without this the heading rendered in the theme's
     dark text color instead of the light color the rest of the hero uses. */
  color: var(--color-paper);
}

.service-jump-panel {
  display: grid;
  gap: 0.7rem;
}

.service-jump-panel a {
  border: 1px solid rgba(232, 220, 196, 0.38);
  border-radius: var(--radius);
  background: rgba(49, 37, 41, 0.22);
  color: var(--color-paper);
  min-height: 3.4rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
}

.service-jump-panel a:hover,
.service-jump-panel a:focus-visible {
  background: rgba(232, 220, 196, 0.15);
  outline: none;
}

.project-hero {
  min-height: 54svh;
}

/* Plain/bland hero variant — no photo, just a solid background.
   Used on pages like the CV, Cart, and Checkout where the photographic
   hero isn't wanted. The compound selector (two classes) beats the
   plain .page-hero rule and its mobile-breakpoint override regardless
   of source order. cv-hero is kept as an alias so the CV page's markup
   doesn't need to change. */
.page-hero.cv-hero,
.page-hero.plain-hero {
  background-image: none;
  background-color: var(--color-plum);
}

.project-identity {
  border: 1px solid rgba(232, 220, 196, 0.38);
  border-radius: var(--radius);
  background: rgba(49, 37, 41, 0.28);
  padding: 1.1rem;
}

.project-identity p:last-child {
  margin-bottom: 0;
  color: rgba(255, 251, 240, 0.88);
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--color-sienna);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: var(--color-gold);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.35rem;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.45rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 0.55rem;
  font-size: 1.08rem;
  line-height: 1.25;
}

.hero-lede {
  max-width: 38rem;
  color: rgba(255, 251, 240, 0.92);
  font-size: 1.22rem;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
  padding: 0.72rem 1rem;
  text-decoration: none;
}

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

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--color-sienna);
  outline: none;
}

.button-secondary {
  background: rgba(255, 250, 243, 0.14);
  border-color: rgba(255, 250, 243, 0.55);
  color: var(--color-paper);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(255, 250, 243, 0.25);
  outline: none;
}

.contact-actions .button-secondary {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-paper);
}

.button-secondary.light {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-paper);
}

.hero-prompts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2rem;
  max-width: 44rem;
  color: rgba(255, 251, 240, 0.86);
  font-size: 0.95rem;
}

.hero-prompts span {
  font-weight: 700;
}

.hero-prompts a {
  border: 1px solid rgba(232, 220, 196, 0.42);
  border-radius: var(--radius);
  padding: 0.45rem 0.62rem;
  text-decoration: none;
}

.hero-prompts a:hover,
.hero-prompts a:focus-visible {
  background: rgba(232, 220, 196, 0.18);
  outline: none;
}

.section-inner {
  width: min(var(--content-width), calc(100% - 2rem));
  margin: 0 auto;
}

.prompt-strip {
  background: var(--color-green-deep);
  color: var(--color-paper);
  padding: 2.5rem 0;
}

.prompt-strip .eyebrow {
  color: var(--color-gold);
}

.prompt-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2rem;
  align-items: start;
}

.prompt-grid h2 {
  margin-bottom: 0;
  font-size: 2rem;
}

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

.prompt-list a {
  min-height: 4.5rem;
  border: 1px solid rgba(232, 220, 196, 0.28);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  padding: 0.85rem;
  color: var(--color-paper);
  text-decoration: none;
}

.prompt-list a:hover,
.prompt-list a:focus-visible {
  border-color: rgba(232, 220, 196, 0.72);
  background: rgba(232, 220, 196, 0.08);
  outline: none;
}

.content-section,
.assistant-section {
  padding: 5.5rem 0;
}

.content-section {
  background: var(--color-paper);
}

.muted {
  background: var(--color-ivory);
}

.two-column,
.about-layout,
.assistant-layout,
.contact-layout,
.fees-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 3rem;
  align-items: start;
}

.reverse {
  grid-template-columns: 1.18fr 0.82fr;
}

.about-layout,
.about-layout.reverse {
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
}

.section-heading {
  max-width: 34rem;
}

.section-heading p,
.copy-block p,
.info-cards p,
.policy-grid p,
.contact-layout p,
.service-actions-grid p,
.site-footer p {
  color: var(--color-ink-soft);
}

.profile-image {
  float: right;
  width: min(18rem, 42%);
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid var(--color-paper);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  margin: 0 0 1rem 1.5rem;
}

.service-grid,
.info-cards,
.policy-grid {
  display: grid;
  gap: 1rem;
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.two-column .service-grid {
  margin-top: 0;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 3rem;
  align-items: start;
}

.service-detail .copy-block {
  max-width: 48rem;
}

.service-detail .copy-block p + p {
  margin-top: 1.05rem;
}

.service-grid article,
.info-cards article,
.policy-grid article,
.assistant-panel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
}

.service-grid article,
.info-cards article,
.policy-grid article {
  padding: 1.15rem;
}

.check-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.check-list li {
  border-left: 3px solid var(--color-sienna);
  padding-left: 0.8rem;
}

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

.large-detail {
  color: var(--color-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.38rem;
  line-height: 1.2;
}

.assistant-section {
  background: #efe5d2;
}

.assistant-panel {
  padding: 1rem;
}

.assistant-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  padding: 0 0 0.85rem;
}

.status-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--color-green);
}

.message {
  margin: 1rem 0;
  border-radius: var(--radius);
  padding: 1rem;
}

.message-assistant {
  background: var(--color-ivory);
  color: var(--color-ink);
}

.quick-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.quick-prompts button {
  min-height: 3.2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  padding: 0.6rem 0.7rem;
  text-align: left;
}

.quick-prompts button:hover,
.quick-prompts button:focus-visible {
  border-color: var(--color-sienna);
  outline: none;
}

.assistant-form label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}

input {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.72rem 0.85rem;
}

input:focus {
  border-color: var(--color-sienna);
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.18);
  outline: none;
}

.assistant-note {
  margin: 0.85rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.88rem;
}

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

.policy-grid .section-heading {
  grid-row: span 2;
}

.contact-layout {
  align-items: center;
}

/* WPForms contact form (form ID 67, embedded via do_shortcode on the
   home page) -- restyled here to match the site's own inputs/buttons
   instead of WPForms' default look. Scoped to .contact-form-wrap so it
   doesn't affect any other WPForms instance elsewhere on the site. */
.contact-form-wrap {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}

.contact-form-wrap .wpforms-container {
  margin: 0;
}

.contact-form-wrap .wpforms-field-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Sublabels ("First" / "Last" under the Name field's two inputs) sit
   below their input, not above it, so they get their own lighter,
   smaller treatment instead of matching the main field labels. */
.contact-form-wrap .wpforms-field-sublabel {
  display: block;
  margin-top: 0.35rem;
  margin-bottom: 0;
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  font-weight: 400;
}

.contact-form-wrap .wpforms-required-label {
  color: var(--color-sienna);
}

.contact-form-wrap .wpforms-field {
  margin-bottom: 1.1rem;
  padding: 0;
}

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea,
.contact-form-wrap select {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.72rem 0.85rem;
  font: inherit;
}

.contact-form-wrap textarea {
  min-height: 7rem;
  resize: vertical;
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.contact-form-wrap select:focus {
  border-color: var(--color-sienna);
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.18);
  outline: none;
}

.contact-form-wrap .wpforms-field-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  width: 100% !important;
}

/* WPForms sets each Name sub-field's width/float inline (based on its
   own admin field-size setting), which fights with the grid layout
   above and is what was squeezing/misaligning the First and Last
   boxes. !important resets both so the grid columns are the only
   thing controlling width. */
.contact-form-wrap .wpforms-field-row-block {
  width: 100% !important;
  float: none !important;
  margin: 0 0 1.1rem !important;
}

/* WPForms' own auto-placement was putting "First" in column 2 and
   "Last" on a second row instead of side by side in one row -- pinning
   both blocks to explicit grid cells sidesteps whatever WPForms/RTL
   logic was reordering them and guarantees First-then-Last, one row. */
.contact-form-wrap .wpforms-field-row-block:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.contact-form-wrap .wpforms-field-row-block:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.contact-form-wrap .wpforms-submit-container {
  margin-top: 0.5rem;
}

.contact-form-wrap button[type="submit"],
.contact-form-wrap .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  /* !important: WPForms' own form-styling settings can inject their
     own button color via an ID-scoped rule, which otherwise wins over
     a plain class selector like this one. */
  background: var(--color-green) !important;
  color: var(--color-cream) !important;
  cursor: pointer;
  font-weight: 700;
  padding: 0.72rem 1.4rem;
}

.contact-form-wrap button[type="submit"]:hover,
.contact-form-wrap .wpforms-submit:hover {
  background: var(--color-sienna) !important;
}

.contact-form-wrap .wpforms-error {
  margin-top: 0.3rem;
  color: var(--color-sienna);
  font-size: 0.85rem;
}

.contact-form-wrap .wpforms-confirmation-container-full {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ivory);
  color: var(--color-ink);
  padding: 1.25rem;
}

.service-actions-grid {
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 0.7fr);
  gap: 3rem;
  align-items: center;
}

.project-workspace {
  background: var(--color-paper);
  padding: 0 0 5.5rem;
}

.project-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
  min-width: 0;
}

.project-sidebar {
  position: sticky;
  top: 5rem;
  min-height: calc(100svh - 5rem);
  border-right: 1px solid var(--color-line);
  background: var(--color-green-deep);
  color: var(--color-paper);
  margin-left: calc((100vw - min(var(--content-width), calc(100vw - 2rem))) / -2);
  padding: 1.25rem 1rem 1.5rem max(1rem, calc((100vw - var(--content-width)) / 2));
}

.project-sidebar-title {
  border-bottom: 1px solid rgba(232, 220, 196, 0.25);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.project-sidebar-title strong,
.project-sidebar-title span {
  display: block;
}

.project-sidebar-title strong {
  line-height: 1.25;
}

.project-sidebar-title span {
  color: rgba(232, 220, 196, 0.78);
  font-size: 0.88rem;
  margin-top: 0.25rem;
}

.project-nav {
  display: grid;
  gap: 0.25rem;
}

.project-nav a {
  border-radius: var(--radius);
  color: var(--color-cream);
  padding: 0.58rem 0.7rem;
  text-decoration: none;
}

.project-nav a:hover,
.project-nav a:focus-visible {
  background: rgba(232, 220, 196, 0.12);
  color: var(--color-paper);
  outline: none;
}

.project-main {
  min-width: 0;
  padding-top: 4.5rem;
}

.project-section {
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
  padding: 0 0 4.8rem;
  scroll-margin-top: 6.25rem;
}

.project-section + .project-section {
  padding-top: 4.8rem;
}

.project-section > p:not(.eyebrow),
.project-lede {
  max-width: 48rem;
  color: var(--color-ink-soft);
  font-size: 1.06rem;
}

.project-callout {
  border-left: 4px solid var(--color-green);
  background: var(--color-ivory);
  margin: 2rem 0;
  padding: 1.15rem 1.25rem;
}

.project-callout p {
  color: var(--color-ink-soft);
  margin-bottom: 0;
}

.mini-grid,
.assumption-list,
.life-cycle,
.literature-grid,
.tool-grid,
.update-log {
  display: grid;
  gap: 1rem;
}

.mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.mini-grid article,
.assumption-list article,
.life-cycle article,
.literature-grid article,
.tool-grid article,
.update-log article {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
  padding: 1rem;
}

.mini-grid p,
.assumption-list p,
.life-cycle p,
.literature-grid p,
.tool-grid p,
.update-log p {
  color: var(--color-ink-soft);
  margin-bottom: 0;
}

.assumption-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0;
}

.life-cycle {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  counter-reset: life-cycle;
}

.life-cycle article {
  background: var(--color-ivory);
}

.life-cycle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-cream);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

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

.domain-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
  padding: 0.2rem 1rem 0.85rem;
}

.domain-card summary {
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 700;
  list-style-position: inside;
  padding: 0.85rem 0 0.85rem 0.4rem;
}

.domain-card summary:focus-visible {
  color: var(--color-sienna);
  outline: none;
}

.domain-card dl {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-top: 0.9rem;
}

.domain-card dt {
  color: var(--color-green);
  font-weight: 700;
}

.domain-card dd {
  color: var(--color-ink-soft);
  margin: 0 0 0.55rem;
}

.table-wrap {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
}

.crosswalk-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.crosswalk-table th,
.crosswalk-table td {
  border-bottom: 1px solid var(--color-line);
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.crosswalk-table th:nth-child(1),
.crosswalk-table td:nth-child(1) {
  width: 23%;
}

.crosswalk-table th:nth-child(2),
.crosswalk-table td:nth-child(2) {
  width: 37%;
}

.crosswalk-table th:nth-child(3),
.crosswalk-table td:nth-child(3) {
  width: 40%;
}

.crosswalk-table th {
  background: var(--color-green-deep);
  color: var(--color-paper);
  font-weight: 700;
}

.crosswalk-table td {
  color: var(--color-ink-soft);
}

.crosswalk-table tbody tr:last-child td {
  border-bottom: 0;
}

.literature-grid,
.tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
}

.roadmap-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: roadmap;
}

.roadmap-list li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ivory);
  counter-increment: roadmap;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem;
}

.roadmap-list li::before {
  content: counter(roadmap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-cream);
  font-weight: 700;
}

.roadmap-list strong,
.roadmap-list span {
  display: block;
}

.roadmap-list span {
  color: var(--color-ink-soft);
  margin-top: 0.2rem;
}

.update-log {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}

.update-log span {
  display: block;
  color: var(--color-sienna);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.action-list {
  display: grid;
  gap: 0.75rem;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.document-grid a {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  min-height: 5rem;
  padding: 1rem;
  text-decoration: none;
}

.document-grid a:hover,
.document-grid a:focus-visible {
  border-color: var(--color-sienna);
  outline: none;
}

.calendly-wrap {
  margin-top: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
}

.calendly-wrap .calendly-inline-widget {
  width: 100%;
}

/* Services page -- Pricing & Booking (real WooCommerce products,
   grouped by service category, each linking straight to the cart). */
.pricing-group + .pricing-group {
  margin-top: 3rem;
}

.pricing-group-title {
  margin: 0 0 1.25rem;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 0.5rem;
  color: var(--color-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
  padding: 1.25rem;
}

.pricing-card h4 {
  margin: 0 0 0.4rem;
  color: var(--color-ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

.pricing-amount {
  margin: 0 0 0.6rem;
  color: var(--color-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
}

.pricing-card p:not(.pricing-amount) {
  flex-grow: 1;
  margin-bottom: 1rem;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

.pricing-card .button {
  align-self: flex-start;
}

.media-grid,
.blog-grid,
.faq-grid {
  display: grid;
  gap: 1rem;
}

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

.video-card,
.article-card,
.faq-grid article {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
  padding: 1rem;
}

.video-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-green-deep);
  margin-bottom: 1rem;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--color-green-deep);
  color: var(--color-paper);
  text-decoration: none;
}

.video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(0.92) brightness(0.82);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.video-link span {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  border: 1px solid rgba(232, 220, 196, 0.52);
  border-radius: var(--radius);
  background: rgba(49, 37, 41, 0.72);
  padding: 0.55rem 0.75rem;
  font-weight: 700;
}

.video-link:hover img,
.video-link:focus-visible img {
  transform: scale(1.03);
  filter: saturate(0.95) contrast(0.98) brightness(0.9);
}

.video-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

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

.book-cover-wrap {
  display: flex;
  justify-content: center;
}

.book-cover {
  width: min(100%, 22rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: block;
}

.book-copy {
  max-width: 45rem;
}

.blog-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2rem;
}

.article-card h3 a {
  color: var(--color-ink);
  text-decoration: none;
}

.article-card h3 a:hover,
.article-card h3 a:focus-visible {
  color: var(--color-sienna);
  outline: none;
}

.article-card span,
.article-meta {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.article-shell {
  background: var(--color-paper);
  padding: 5.5rem 0;
}

.article-content {
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
}

.article-content h1 {
  color: var(--color-ink);
  font-size: 3.45rem;
}

.article-content h2 {
  margin-top: 2.25rem;
  font-size: 2rem;
}

.article-content p {
  color: var(--color-ink-soft);
}

.article-lede {
  color: var(--color-ink);
  font-size: 1.22rem;
}

.back-link {
  display: inline-block;
  color: var(--color-sienna);
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.cv-sub-heading {
  margin: 2.25rem 0 0.5rem;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 0.4rem;
  color: var(--color-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.cv-sub-heading:first-of-type {
  margin-top: 0.5rem;
}

.cv-list {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.25rem;
}

.cv-item {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 1.1rem;
}

.cv-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cv-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.cv-item-title {
  color: var(--color-ink);
  font-weight: 700;
}

.cv-item-org {
  margin-top: 0.2rem;
  color: var(--color-ink-soft);
  font-style: italic;
}

.cv-item-date {
  color: var(--color-sienna);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.cv-item ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: var(--color-ink-soft);
}

.cv-item ul li {
  margin-bottom: 0.3rem;
}

.cv-item p {
  color: var(--color-ink-soft);
}

.cv-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.cv-table th,
.cv-table td {
  border-bottom: 1px solid var(--color-line);
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.cv-table th {
  background: var(--color-green-deep);
  color: var(--color-paper);
  font-weight: 700;
}

.cv-table td {
  color: var(--color-ink-soft);
}

.cv-table tbody tr:nth-child(even) {
  background: var(--color-ivory);
}

.cv-table tbody tr:last-child td {
  border-bottom: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--color-sienna);
  color: var(--color-paper);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 0.3rem;
}

@media print {
  .site-header,
  .skip-link,
  .project-sidebar,
  .site-footer,
  .page-hero .hero-actions,
  .project-identity {
    display: none !important;
  }

  body,
  .page-hero,
  .content-section,
  .muted {
    background: #fff !important;
    color: #000 !important;
  }

  .page-hero {
    min-height: auto;
    padding: 1rem 0;
    color: #000 !important;
  }

  .page-hero h1,
  .page-hero .eyebrow,
  .page-hero .hero-lede {
    color: #000 !important;
  }

  .project-main {
    padding-top: 0;
  }

  .project-layout {
    display: block;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
  }

  .cv-item,
  .project-section {
    break-inside: avoid;
  }
}

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-green-deep);
  color: var(--color-paper);
  padding: 2rem 0;
}

.site-footer p {
  margin-bottom: 0;
  color: rgba(232, 220, 196, 0.82);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand {
    min-width: 0;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .hero {
    min-height: 76svh;
    padding-top: 5rem;
    padding-bottom: 4rem;
    background-position: 58% center;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }

  .prompt-grid,
  .two-column,
  .about-layout,
  .reverse,
  .page-hero-grid,
  .service-detail-grid,
  .service-actions-grid,
  .project-layout,
  .assistant-layout,
  .contact-layout,
  .fees-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .info-cards,
  .policy-grid,
  .document-grid,
  .media-grid,
  .book-feature,
  .blog-grid,
  .faq-grid,
  .mini-grid,
  .assumption-list,
  .life-cycle,
  .domain-grid,
  .literature-grid,
  .tool-grid,
  .update-log {
    grid-template-columns: 1fr;
  }

  .project-sidebar {
    position: static;
    min-height: auto;
    margin-left: 0;
    border-right: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1rem;
  }

  .project-main {
    padding-top: 3.5rem;
  }

  .project-section,
  .project-section + .project-section {
    padding-top: 3.7rem;
    padding-bottom: 3.7rem;
    scroll-margin-top: 1rem;
  }

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

  .page-hero h1 {
    font-size: 3rem;
  }

  .policy-grid .section-heading {
    grid-row: auto;
  }

  .profile-image {
    float: none;
    width: min(15rem, 70%);
    margin: 0 0 1.5rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    position: relative;
  }

  .nav-links a {
    padding-left: 0;
  }

  .hero {
    min-height: 72svh;
    background-image:
      linear-gradient(90deg, rgba(49, 37, 41, 0.82) 0%, rgba(49, 37, 41, 0.45) 100%),
      url("assets/masculine-library-plants-hero.png");
  }

  h1 {
    font-size: 2.45rem;
  }

  .page-hero {
    min-height: auto;
    padding: 3.8rem 0;
    background-image:
      linear-gradient(90deg, rgba(49, 37, 41, 0.88) 0%, rgba(49, 37, 41, 0.58) 100%),
      url("assets/masculine-library-plants-hero.png");
  }

  /* Same per-page photo swap as the desktop rules above, just with
     this breakpoint's stronger gradient (needed again here since this
     rule shares the same specificity as .page-hero and comes later in
     the file, so without it the mobile view would fall back to the
     default photo). */
  .page-hero.services-hero {
    background-image:
      linear-gradient(90deg, rgba(49, 37, 41, 0.88) 0%, rgba(49, 37, 41, 0.58) 100%),
      url("assets/Outdoor_workbench.png");
  }

  .page-hero.writings-hero {
    background-image:
      linear-gradient(90deg, rgba(49, 37, 41, 0.88) 0%, rgba(49, 37, 41, 0.58) 100%),
      url("assets/Cabin_Writing_Desk.png");
  }

  .page-hero h1 {
    font-size: 2.35rem;
  }

  .article-content h1 {
    font-size: 2.45rem;
  }

  .hero-lede {
    font-size: 1.06rem;
  }

  .content-section,
  .assistant-section {
    padding: 3.7rem 0;
  }

  .prompt-list,
  .quick-prompts,
  .input-row,
  .contact-form-wrap .wpforms-field-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap .wpforms-field-row-block:nth-child(1),
  .contact-form-wrap .wpforms-field-row-block:nth-child(2) {
    grid-column: 1;
    grid-row: auto;
  }

  .project-nav {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .hero-prompts a {
    width: 100%;
  }
}

/* =========================================================================
   WooCommerce — Cart & Checkout
   -------------------------------------------------------------------------
   page-cart.php and page-checkout.php render the real [woocommerce_cart]
   and [woocommerce_checkout] shortcodes, so all of WooCommerce's own
   markup, class names, and behavior (AJAX cart updates, coupon handling,
   shipping calculation, payment gateway fields, validation) stay intact.
   These rules only override WooCommerce's default visual styling to
   match the rest of the site, scoped under .cart-shell / .checkout-shell
   (the wrapper sections in those two templates) so nothing else that
   uses WooCommerce styling elsewhere is affected.
   ========================================================================= */

/* Astra narrows the main content column on WooCommerce's Cart/Checkout
   pages specifically (a built-in "reading width" layout it applies
   whenever the woocommerce-page/woocommerce-cart/woocommerce-checkout
   body classes are present), which squeezed everything on these two
   pages into roughly half the page width and threw off the full-bleed
   hero math below. Forcing #main back to full width here matches every
   other page on the site. */
body.woocommerce-page main#main,
body.woocommerce-cart main#main,
body.woocommerce-checkout main#main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* The plain (solid-color, no photo) hero variant doesn't need the
   viewport-width full-bleed breakout that .page-hero uses for its
   photo background -- that trick depends on the parent container being
   exactly viewport-centered, which WooCommerce/Astra's layout above
   doesn't reliably guarantee. Resetting it here is simpler and immune
   to that, and looks identical since it's a flat color either way. */
.page-hero.plain-hero {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.cart-shell,
.checkout-shell {
  background: var(--color-paper);
  padding: 4rem 0 5.5rem;
}

/* Notices: "coupon applied", validation errors, etc. */
.cart-shell .woocommerce-error,
.cart-shell .woocommerce-message,
.cart-shell .woocommerce-info,
.checkout-shell .woocommerce-error,
.checkout-shell .woocommerce-message,
.checkout-shell .woocommerce-info {
  list-style: none;
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius);
  background: var(--color-ivory);
  color: var(--color-ink);
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.94rem;
}

.cart-shell .woocommerce-error,
.checkout-shell .woocommerce-error {
  border-left-color: var(--color-sienna);
}

.cart-shell .woocommerce-error a,
.cart-shell .woocommerce-message a,
.cart-shell .woocommerce-info a,
.checkout-shell .woocommerce-error a,
.checkout-shell .woocommerce-message a,
.checkout-shell .woocommerce-info a,
.checkout-shell .showcoupon {
  /* WooCommerce/the theme's default link color on these is a pale
     near-white, meant for a dark surface -- invisible against our
     light ivory notice boxes (e.g. the "Click here to enter your
     code" coupon toggle on checkout). Forced to a visible, on-brand
     color instead. */
  color: var(--color-sienna) !important;
  font-weight: 700;
}

/* Empty cart state */
.cart-shell .cart-empty,
.cart-shell .return-to-shop {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ivory);
  padding: 2rem;
  text-align: center;
  color: var(--color-ink-soft);
}

.cart-shell .return-to-shop .button {
  margin-top: 1rem;
}

/* Shared table look for the cart table and the checkout order-review table */
.cart-shell table.shop_table,
.checkout-shell table.shop_table {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  border-collapse: collapse;
  background: var(--color-paper);
  box-shadow: 0 8px 32px rgba(49, 37, 41, 0.06);
  font-size: 0.94rem;
  overflow: hidden;
}

.cart-shell table.shop_table thead th,
.checkout-shell table.shop_table thead th {
  background: var(--color-green-deep);
  color: var(--color-paper);
  font-weight: 700;
  text-align: left;
  padding: 0.9rem 1rem;
}

.cart-shell table.shop_table td,
.checkout-shell table.shop_table td {
  border-bottom: 1px solid var(--color-line);
  padding: 1rem;
  vertical-align: middle;
  color: var(--color-ink-soft);
}

.cart-shell table.shop_table tr:last-child td,
.checkout-shell table.shop_table tr:last-child td {
  border-bottom: 0;
}

.cart-shell .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink-soft) !important;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none !important;
}

.cart-shell .product-remove a.remove:hover {
  border-color: var(--color-sienna);
  color: var(--color-sienna) !important;
  background: var(--color-ivory);
}

.cart-shell .product-thumbnail img {
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid var(--color-line);
  border-radius: calc(var(--radius) - 2px);
  object-fit: cover;
  background: var(--color-ivory);
}

.cart-shell .product-name a,
.checkout-shell .product-name a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}

.cart-shell .product-name a:hover,
.checkout-shell .product-name a:hover {
  color: var(--color-sienna);
}

.cart-shell .product-name .variation,
.checkout-shell .product-name .variation {
  margin-top: 0.35rem;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}

.cart-shell .product-price .woocommerce-Price-amount,
.cart-shell .product-subtotal .woocommerce-Price-amount,
.checkout-shell .woocommerce-Price-amount {
  color: var(--color-ink);
  font-family: Georgia, "Times New Roman", serif;
}

/* Quantity stepper input */
.cart-shell .quantity .qty {
  width: 4rem;
  min-height: 2.6rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.5rem 0.6rem;
  font: inherit;
  text-align: center;
}

.cart-shell .quantity .qty:focus {
  border-color: var(--color-sienna);
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.18);
  outline: none;
}

/* Coupon field + Update cart, inside the table footer */
.cart-shell .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.cart-shell .coupon label {
  display: none;
}

.cart-shell .coupon input#coupon_code,
.checkout-shell .checkout_coupon input {
  min-height: 2.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.6rem 0.85rem;
  font: inherit;
}

.cart-shell table.shop_table tfoot td {
  background: var(--color-ivory);
}

.cart-shell table.shop_table tfoot .button,
.cart-shell .actions .button {
  margin-top: 0.6rem;
}

/* Generic WooCommerce buttons everywhere inside cart/checkout */
.cart-shell .button,
.checkout-shell .button,
.checkout-shell #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-green);
  color: var(--color-cream);
  cursor: pointer;
  font-weight: 700;
  padding: 0.72rem 1.4rem;
  text-decoration: none;
}

.cart-shell .button:hover,
.checkout-shell .button:hover,
.checkout-shell #place_order:hover {
  background: var(--color-sienna);
  color: var(--color-cream);
}

.cart-shell .button.disabled,
.cart-shell .button:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Cart totals box + proceed-to-checkout */
.cart-shell .cart_totals {
  max-width: 26rem;
  margin-left: auto;
  margin-top: 2.5rem;
}

.cart-shell .cart_totals h2 {
  font-size: 1.4rem;
}

.cart-shell .cart_totals table.shop_table th {
  background: transparent;
  color: var(--color-ink-soft);
  font-weight: 700;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
}

.cart-shell .cart_totals table.shop_table td {
  padding: 0.85rem 0;
  text-align: right;
}

.cart-shell .cart_totals .order-total .woocommerce-Price-amount {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-ink);
}

.cart-shell .wc-proceed-to-checkout {
  margin-top: 1.25rem;
}

.cart-shell .wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

/* Checkout: billing/shipping field layout */
.checkout-shell h3 {
  margin-top: 2rem;
  font-size: 1.3rem;
}

.checkout-shell .col2-set,
.checkout-shell .col-2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

.checkout-shell .form-row {
  margin-bottom: 1.1rem;
  display: block;
}

/* WooCommerce pairs some fields (First/Last name, City/State, etc.) by
   floating two .form-row elements side by side within the same row. */
.checkout-shell .form-row-first {
  float: left;
  width: 48%;
}

.checkout-shell .form-row-last {
  float: right;
  width: 48%;
}

.checkout-shell .form-row-wide {
  clear: both;
}

/* Match the shipping-method and payment-method radio buttons to the
   site's palette instead of the browser's default blue. */
.cart-shell input[type="radio"],
.cart-shell input[type="checkbox"],
.checkout-shell input[type="radio"],
.checkout-shell input[type="checkbox"] {
  accent-color: var(--color-sienna);
}

.checkout-shell .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.checkout-shell .form-row abbr.required {
  color: var(--color-sienna);
  text-decoration: none;
}

.checkout-shell .form-row input.input-text,
.checkout-shell .form-row textarea,
.checkout-shell .form-row select,
.checkout-shell .select2-selection {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.6rem 0.85rem;
  font: inherit;
}

.checkout-shell .form-row textarea {
  min-height: 6rem;
  resize: vertical;
}

.checkout-shell .form-row input:focus,
.checkout-shell .form-row textarea:focus,
.checkout-shell .form-row select:focus {
  border-color: var(--color-sienna);
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.18);
  outline: none;
}

.checkout-shell .woocommerce-additional-fields {
  margin-top: 1rem;
}

/* Order review table on checkout */
.checkout-shell #order_review_heading {
  margin-top: 2.5rem;
}

.checkout-shell .woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.checkout-shell .cart-subtotal th,
.checkout-shell .shipping th,
.checkout-shell .order-total th {
  text-align: left;
  color: var(--color-ink-soft);
  font-weight: 700;
}

.checkout-shell .cart-subtotal td,
.checkout-shell .shipping td,
.checkout-shell .order-total td {
  text-align: right;
}

.checkout-shell .order-total .woocommerce-Price-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* Payment methods */
.checkout-shell ul.wc_payment_methods {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ivory);
  overflow: hidden;
}

.checkout-shell li.wc_payment_method {
  border-bottom: 1px solid var(--color-line);
  padding: 1rem 1.25rem;
}

.checkout-shell li.wc_payment_method:last-child {
  border-bottom: 0;
}

.checkout-shell li.wc_payment_method label {
  color: var(--color-ink);
  font-weight: 700;
}

.checkout-shell .payment_box {
  margin-top: 0.85rem;
  border-radius: var(--radius);
  background: var(--color-paper);
  padding: 1rem;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

.checkout-shell .payment_box p:last-child {
  margin-bottom: 0;
}

.checkout-shell .place-order {
  margin-top: 1.5rem;
}

.checkout-shell #place_order {
  width: 100%;
  min-height: 3.2rem;
  font-size: 1.05rem;
}

.checkout-shell .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1rem;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

/* Responsive: collapse both tables to stacked "label: value" rows,
   matching how WooCommerce's own shop_table_responsive behavior works,
   just restyled. */
@media (max-width: 700px) {
  .cart-shell table.shop_table thead,
  .checkout-shell table.shop_table thead {
    display: none;
  }

  .cart-shell table.shop_table,
  .cart-shell table.shop_table tbody,
  .cart-shell table.shop_table tr,
  .cart-shell table.shop_table td,
  .checkout-shell table.shop_table,
  .checkout-shell table.shop_table tbody,
  .checkout-shell table.shop_table tr,
  .checkout-shell table.shop_table td {
    display: block;
    width: 100%;
  }

  .cart-shell table.shop_table tr,
  .checkout-shell table.shop_table tr {
    border-bottom: 1px solid var(--color-line);
    padding: 0.75rem 1rem;
  }

  .cart-shell table.shop_table td,
  .checkout-shell table.shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    padding: 0.4rem 0;
    text-align: right;
  }

  .cart-shell table.shop_table td[data-title]::before,
  .checkout-shell table.shop_table td[data-title]::before {
    content: attr(data-title);
    color: var(--color-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
  }

  .checkout-shell .col2-set,
  .checkout-shell .col-2-set {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cart-shell .cart_totals {
    max-width: none;
  }
}