/*
 * Section-library layout CSS (Phase 5a.2). Shared verbatim by the static
 * mockups AND the WP starter theme, so both sides render sections from the
 * same rules. TOKEN-ONLY RULE: every colour, font, size, spacing and radius
 * value is a --wp--preset--* / --wp--custom--* / --wp--style--global--* var
 * reference. Permitted literals are structural only: 0, auto, %, fr,
 * borders up to 2px, line-height ratios, aspect ratios, opacity and media
 * query breakpoints. bin/lint.php enforces this.
 */

/* ── WP block-gap neutraliser (must stay FIRST: it deliberately loses
   specificity ties to every component rule below) ──────────────────────
   Inside library trees ALL vertical rhythm comes from lib-* rules — the
   mockup DOM has no block gap, so the WP render must not add one. Any
   later lib-* rule that sets a margin wins the (0,1,0) tie by order. */
.lib-section :where(.is-layout-flow, .is-layout-constrained) > :where(*),
.lib-header :where(.is-layout-flow, .is-layout-constrained) > :where(*) { margin-block-start: 0; }
.lib-section li,
.lib-header li { margin-block-start: 0; }
.lib-section blockquote { margin: 0; padding: 0; border: none; }

/* ── Canonical button rule (also FIRST on purpose: lib-button--ghost and
   every section-scoped button override below must win its ties) ─────────
   Button blocks render the link as .wp-element-button, the mockup as
   .lib-button — one rule, both DOMs. */
.lib-button,
.wp-element-button {
  display: inline-block;
  background: var(--wp--custom--button--background);
  color: var(--wp--custom--button--text);
  border: var(--wp--custom--button--border);
  border-radius: var(--wp--custom--button--radius);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--wp--custom--button--weight);
  text-transform: var(--wp--custom--button--transform);
  text-decoration: none;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  cursor: pointer;
}

/* ── Section frame: full-width band, inner measure ─────────────────────── */
.lib-section {
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}
.lib-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}
.lib-inner--content {
  max-width: var(--wp--style--global--content-size);
}
.lib-section--surface { background: var(--wp--preset--color--neutral-surface); }
.lib-section--primary {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--neutral-base);
}
.lib-section--primary a { color: var(--wp--preset--color--neutral-base); }
.lib-section--dark {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--neutral-base);
}
.lib-section--dark a { color: var(--wp--preset--color--neutral-base); }

.lib-kicker {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--button--weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--wp--preset--spacing--10);
}
.lib-lede {
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 var(--wp--preset--spacing--40);
}
.lib-section--primary .lib-lede,
.lib-section--dark .lib-lede { color: var(--wp--preset--color--neutral-border); }

/* ── header-nav ────────────────────────────────────────────────────────── */
.lib-header {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--neutral-border);
  background: var(--wp--preset--color--neutral-base);
}
.lib-header .lib-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
}
.lib-logo {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--button--weight);
  color: var(--wp--preset--color--neutral-text);
  text-decoration: none;
}
.lib-nav {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
}
.lib-nav a {
  color: var(--wp--preset--color--neutral-text);
  font-size: var(--wp--preset--font-size--medium);
  text-decoration: none;
}
.lib-nav a:hover { color: var(--wp--preset--color--primary); }
/* the nav CTA is a button: keep the button text colour (the `.lib-nav a` rule above outranks `.lib-button`) — seen as an
   unreadable navy-on-navy "Book an appointment" in the 3 Sep 2026 Harbourlight evaluation PDF (hosting-phase6.md §6.21.4) */
.lib-nav a.lib-button, .lib-nav a.lib-button:hover { color: var(--wp--custom--button--text); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.lib-hero {
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
  text-align: center;
}
.lib-hero h1 {
  font-size: var(--wp--preset--font-size--huge);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lib-hero .lib-lede { margin-inline: auto; }
.lib-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  flex-wrap: wrap;
}
.lib-button--ghost,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: none;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

/* ── logo-strip ────────────────────────────────────────────────────────── */
.lib-logo-strip {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--neutral-border);
  border-bottom: 1px solid var(--wp--preset--color--neutral-border);
}
.lib-logo-strip .lib-kicker {
  text-align: center;
  color: var(--wp--preset--color--neutral-muted);
  margin-bottom: var(--wp--preset--spacing--30);
}
.lib-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--60);
  flex-wrap: wrap;
}
.lib-logo-mark {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--button--weight);
  color: var(--wp--preset--color--neutral-muted);
  opacity: 0.75;
  white-space: nowrap;
}

/* ── feature-grid ──────────────────────────────────────────────────────── */
.lib-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-card {
  background: var(--wp--preset--color--neutral-base);
  border: 1px solid var(--wp--preset--color--neutral-border);
  border-radius: var(--wp--custom--radius--surface);
  padding: var(--wp--preset--spacing--40);
}
.lib-card h3 {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 var(--wp--preset--spacing--10);
}
.lib-card p {
  color: var(--wp--preset--color--neutral-muted);
  margin: 0;
}
.lib-card-icon {
  width: var(--wp--preset--spacing--50);
  height: var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius--control);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--neutral-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--large);
  margin-bottom: var(--wp--preset--spacing--20);
}

/* ── media placeholder (mockup-only image stand-in) ────────────────────── */
/* With a real image (5b.3 assembly injects <img class="lib-media-img">),
   the file fills the placeholder's box exactly — same aspect, same radius. */
.lib-media img.lib-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.lib-media {
  background: var(--wp--preset--color--neutral-border);
  border-radius: var(--wp--custom--radius--surface);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--xx-large);
}

/* ── text-image-about ──────────────────────────────────────────────────── */
.lib-about .lib-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}
.lib-about h2 {
  font-size: var(--wp--preset--font-size--xx-large);
}
.lib-about .lib-lede { margin-bottom: var(--wp--preset--spacing--20); }
.lib-about p {
  color: var(--wp--preset--color--neutral-muted);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lib-about-facts {
  list-style: none;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--10);
}
.lib-about-facts li {
  padding-left: var(--wp--preset--spacing--40);
  position: relative;
}
.lib-about-facts li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--button--weight);
}

/* ── stats-band ────────────────────────────────────────────────────────── */
.lib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
  text-align: center;
}
.lib-stat-value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--huge);
  font-weight: var(--wp--custom--button--weight);
  line-height: 1.1;
  color: var(--wp--preset--color--accent);
}
.lib-stat-label {
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--neutral-border);
  margin-top: var(--wp--preset--spacing--10);
}

/* ── testimonial-band ──────────────────────────────────────────────────── */
.lib-testimonial {
  text-align: center;
}
.lib-testimonial blockquote {
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size);
}
.lib-testimonial blockquote p {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.lib-testimonial-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}
.lib-avatar {
  width: var(--wp--preset--spacing--70);
  height: var(--wp--preset--spacing--70);
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--neutral-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--wp--custom--button--weight);
}
.lib-testimonial-who {
  text-align: left;
}
.lib-testimonial-name {
  display: block;
  font-weight: var(--wp--custom--button--weight);
}
.lib-testimonial-role {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--neutral-muted);
}

/* ── gallery ───────────────────────────────────────────────────────────── */
.lib-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-gallery-grid figure {
  margin: 0;
}
.lib-gallery-grid figcaption {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--neutral-muted);
  margin-top: var(--wp--preset--spacing--10);
}

/* ── cta-band ──────────────────────────────────────────────────────────── */
.lib-cta {
  text-align: center;
}
.lib-cta h2 {
  font-size: var(--wp--preset--font-size--xx-large);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lib-cta .lib-lede { margin-inline: auto; }
.lib-section--primary .lib-button,
.lib-section--primary .wp-element-button {
  background: var(--wp--preset--color--neutral-base);
  color: var(--wp--preset--color--primary);
  /* keep the 2px geometry of the canonical button, colour only */
  border-color: transparent;
}

/* ── footer ────────────────────────────────────────────────────────────── */
.lib-footer {
  font-size: var(--wp--preset--font-size--small);
}
.lib-footer .lib-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
}
.lib-footer h4 {
  font-size: var(--wp--preset--font-size--medium);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lib-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--10);
}
.lib-footer a { text-decoration: none; }
.lib-footer a:hover { text-decoration: underline; }
.lib-footer-legal {
  max-width: var(--wp--style--global--wide-size);
  margin: var(--wp--preset--spacing--50) auto 0;
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--neutral-muted);
  color: var(--wp--preset--color--neutral-border);
}

/* ── team-grid ─────────────────────────────────────────────────────────── */
.lib-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-team-card {
  text-align: center;
}
.lib-team-card h3 { margin-bottom: 0; }
.lib-avatar--large {
  width: var(--wp--preset--spacing--70);
  height: var(--wp--preset--spacing--70);
  font-size: var(--wp--preset--font-size--large);
  margin: 0 auto var(--wp--preset--spacing--20);
}
.lib-card .lib-team-role {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--wp--preset--spacing--10);
}

/* ── pricing-table ─────────────────────────────────────────────────────── */
.lib-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
  align-items: start;
}
.lib-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  text-align: center;
}
.lib-price-card h3 { margin: 0; }
.lib-price-card .lib-button { align-self: center; }
.lib-price-card--featured {
  border: 2px solid var(--wp--preset--color--primary);
  position: relative;
}
.lib-card .lib-price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--neutral-base);
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--button--weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--wp--custom--radius--control);
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  margin: 0;
  white-space: nowrap;
}
.lib-price { margin: 0; }
.lib-price-amount {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: var(--wp--custom--button--weight);
}
.lib-price-period {
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--small);
}
.lib-price-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--neutral-muted);
}
.lib-price-features li::before {
  content: "\2713";
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--button--weight);
  margin-right: var(--wp--preset--spacing--10);
}

/* ── faq ───────────────────────────────────────────────────────────────── */
.lib-faq-list {
  margin-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--neutral-border);
}
.lib-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--neutral-border);
  padding: var(--wp--preset--spacing--20) 0;
}
.lib-faq-item summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--button--weight);
}
.lib-faq-item p {
  color: var(--wp--preset--color--neutral-muted);
  margin: var(--wp--preset--spacing--20) 0 0;
}

/* ── blog-list ─────────────────────────────────────────────────────────── */
.lib-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-blog-card { padding: var(--wp--preset--spacing--30); }
.lib-media--wide {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--wp--preset--spacing--20);
}
.lib-card .lib-blog-date {
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--wp--preset--spacing--10);
}
.lib-blog-card h3 { font-size: var(--wp--preset--font-size--large); }
.lib-blog-card h3 a {
  color: var(--wp--preset--color--neutral-text);
  text-decoration: none;
}
.lib-blog-card h3 a:hover { color: var(--wp--preset--color--primary); }
.lib-blog-card p { margin-bottom: var(--wp--preset--spacing--20); }
.lib-blog-more {
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--button--weight);
  text-decoration: none;
}
.lib-blog-more:hover { text-decoration: underline; }

/* ── contact-form ──────────────────────────────────────────────────────── */
.lib-contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--wp--preset--spacing--60);
  margin-top: var(--wp--preset--spacing--50);
  align-items: start;
}
.lib-form { margin: 0; }
.lib-field { margin: 0 0 var(--wp--preset--spacing--30); }
.lib-field label {
  display: block;
  font-weight: var(--wp--custom--button--weight);
  margin-bottom: var(--wp--preset--spacing--10);
}
.lib-field input,
.lib-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--wp--preset--color--neutral-base);
  color: var(--wp--preset--color--neutral-text);
  border: 1px solid var(--wp--preset--color--neutral-border);
  border-radius: var(--wp--custom--radius--control);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  padding: var(--wp--preset--spacing--20);
}
.lib-field input:focus,
.lib-field textarea:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 0;
}
.lib-contact-details h3 { font-size: var(--wp--preset--font-size--large); }
.lib-contact-details p { color: var(--wp--preset--color--neutral-muted); }
.lib-contact-list {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--10);
}
.lib-contact-label {
  display: inline-block;
  min-width: var(--wp--preset--spacing--70);
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── map-address ───────────────────────────────────────────────────────── */
.lib-map-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}
.lib-media--map { aspect-ratio: 16 / 10; }
.lib-address {
  font-style: normal;
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 var(--wp--preset--spacing--30);
}

/* ── shared product price (woo) ────────────────────────────────────────── */
.lib-product-price,
.lib-card .lib-product-price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--button--weight);
  color: var(--wp--preset--color--neutral-text);
  margin: 0 0 var(--wp--preset--spacing--10);
}
.lib-product-price--large,
.lib-card .lib-product-price--large {
  font-size: var(--wp--preset--font-size--xx-large);
  margin-bottom: var(--wp--preset--spacing--30);
}
.lib-product-price del {
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--medium);
  margin-right: var(--wp--preset--spacing--10);
}
.lib-product-price ins {
  text-decoration: none;
  color: var(--wp--preset--color--accent);
}

/* ── product-grid (woo) ────────────────────────────────────────────────── */
.lib-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  text-align: center;
}
.lib-product-card .lib-media--square {
  margin-bottom: var(--wp--preset--spacing--10);
  text-decoration: none;
}
.lib-media--square { aspect-ratio: 1 / 1; }
.lib-product-card h3 {
  font-size: var(--wp--preset--font-size--medium);
  margin: 0;
}
.lib-product-card h3 a {
  color: var(--wp--preset--color--neutral-text);
  text-decoration: none;
}
.lib-product-card h3 a:hover { color: var(--wp--preset--color--primary); }
.lib-product-card .lib-button {
  align-self: center;
  margin-top: auto;
}

/* ── featured-product (woo) ────────────────────────────────────────────── */
.lib-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}
.lib-featured-actions { justify-content: flex-start; }

/* ── category-tiles (woo) ──────────────────────────────────────────────── */
.lib-category-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}
.lib-category-tile {
  position: relative;
  display: block;
  text-decoration: none;
}
.lib-category-tile .lib-media { aspect-ratio: 4 / 3; }
.lib-category-label {
  position: absolute;
  left: var(--wp--preset--spacing--20);
  bottom: var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--neutral-base);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--button--weight);
  padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  border-radius: var(--wp--custom--radius--control);
}
.lib-category-count {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--neutral-border);
}

/* ── product-detail (woo) ──────────────────────────────────────────────── */
.lib-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}
.lib-thumb-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--20);
  margin-top: var(--wp--preset--spacing--20);
}
.lib-media--thumb {
  aspect-ratio: 1 / 1;
  font-size: var(--wp--preset--font-size--medium);
}
.lib-product-detail h2 {
  font-size: var(--wp--preset--font-size--xx-large);
  margin: 0 0 var(--wp--preset--spacing--10);
}
.lib-rating {
  color: var(--wp--preset--color--accent);
  margin: 0 0 var(--wp--preset--spacing--20);
}
.lib-rating-count {
  color: var(--wp--preset--color--neutral-muted);
  font-size: var(--wp--preset--font-size--small);
}
.lib-detail-desc {
  color: var(--wp--preset--color--neutral-muted);
  margin: 0 0 var(--wp--preset--spacing--30);
}
.lib-buy-row {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
}
.lib-buy-row input {
  width: var(--wp--preset--spacing--70);
  text-align: center;
  background: var(--wp--preset--color--neutral-base);
  color: var(--wp--preset--color--neutral-text);
  border: 1px solid var(--wp--preset--color--neutral-border);
  border-radius: var(--wp--custom--radius--control);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  padding: var(--wp--preset--spacing--10);
}
.lib-buy-row input:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 0;
}
.lib-product-meta {
  list-style: none;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: var(--wp--preset--spacing--20) 0 0;
  border-top: 1px solid var(--wp--preset--color--neutral-border);
  display: grid;
  gap: var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--neutral-muted);
}

/* ── WP block-pattern pairing (5a.3) ───────────────────────────────────────
   The block patterns in patterns/ render the same sections through core
   blocks, so a handful of selectors differ from the mockup DOM: button
   blocks wrap their link in .wp-block-button(s) divs, some mockup divs
   become paragraphs, and is-style-outline stands in for lib-button--ghost.
   These rules make both DOM shapes render identically. Token-only, like
   everything else in this file. NOTE: no angle brackets anywhere in this
   file — it is also injected as WP global-styles custom CSS, and core's
   validator rejects CSS containing markup. The canonical button rule
   lives at the TOP of this file so component overrides win their ties. */
/* heading rhythm pinned identically on both DOMs: WP's block-gap rules
   zero the heading bottom margin the mockup base styles provide, and
   theme global styles drift letter-spacing off the mockup's default */
.lib-section :where(h1, h2, h3, h4, h5, h6),
.lib-header :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--wp--preset--spacing--20); letter-spacing: normal; text-wrap: wrap; }
/* theme global styles put a 2px border on solid button links; the border
   is the button token's to own (outline stays (0,3,0) above this) */
.wp-block-button__link.wp-element-button { border: var(--wp--custom--button--border); }
.lib-cta .wp-block-buttons { justify-content: center; }
.lib-price-card .wp-block-buttons { align-self: center; }
.lib-product-card .wp-block-buttons { align-self: center; margin-top: auto; }
.lib-stats p { margin: 0; }
.lib-stats p.lib-stat-label { margin-top: var(--wp--preset--spacing--10); }
.lib-blog-card p.lib-blog-readmore { margin: 0; }
.lib-blog-readmore a {
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--button--weight);
  text-decoration: none;
}
.lib-blog-readmore a:hover { text-decoration: underline; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lib-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-footer .lib-inner { grid-template-columns: 1fr 1fr; }
  .lib-about .lib-inner { grid-template-columns: 1fr; }
  .lib-stats { grid-template-columns: repeat(2, 1fr); }
  .lib-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-team-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-pricing-grid { grid-template-columns: 1fr; }
  .lib-blog-grid { grid-template-columns: 1fr; }
  .lib-contact-grid { grid-template-columns: 1fr; }
  .lib-map-grid { grid-template-columns: 1fr; }
  .lib-product-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-featured-grid { grid-template-columns: 1fr; }
  .lib-category-tiles { grid-template-columns: repeat(2, 1fr); }
  .lib-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lib-feature-grid { grid-template-columns: 1fr; }
  .lib-footer .lib-inner { grid-template-columns: 1fr; }
  .lib-hero h1 { font-size: var(--wp--preset--font-size--xx-large); }
  .lib-stats { grid-template-columns: 1fr; }
  .lib-gallery-grid { grid-template-columns: 1fr; }
  .lib-logo-row { gap: var(--wp--preset--spacing--40); }
  .lib-team-grid { grid-template-columns: 1fr; }
  .lib-product-grid { grid-template-columns: 1fr; }
  .lib-category-tiles { grid-template-columns: 1fr; }
}

/* ── flow last-child margin trim — MUST STAY LAST ─────────────────────────
   Exact mirror of WP core's ":root :where(.is-layout-flow) > :last-child
   { margin-block-end: 0 }". Both that rule and this one are specificity
   (0,2,0) — :root/:last-child and .lib-section/:last-child each count one
   class-level selector — so both DOMs trim trailing margins identically,
   beating single-class rules like .lib-lede and losing to nothing core
   doesn't also lose to. */
.lib-section > :last-child,
.lib-header > :last-child,
.lib-section :where(div, blockquote) > :last-child,
.lib-header :where(div) > :last-child { margin-block-end: 0; }