/* ============================================================
   WORDPRESS + THEME ADDITIONS
   Layered on top of theme.css (the design system). Everything
   here either supports markup WordPress generates, or styles a
   component the static design did not include.
   ============================================================ */

/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--cream);
  clip: auto !important;
  clip-path: none;
  color: var(--ink-deep);
  display: block;
  font-size: 0.9rem;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100001;
  border-radius: 4px;
  box-shadow: var(--shadow-elevated);
}

.skip-link:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* The focus ring is switched off by request. The rule is kept as the single
   place that decides this, rather than scattering `outline: none` per
   component; restoring the ring means restoring the two declarations below.
   Nothing else about an input or a button changes — only the outline.

     outline: 2px solid var(--focus-ring);
     outline-offset: 3px;

   The on-dark variant that recoloured this ring over the ink-blue bands has
   nothing left to recolour and is removed with it. */
:focus-visible {
  outline: none;
}

/* Restore a real cursor when the pen is switched off, and for anyone
   who has asked for reduced motion. */
body.yb-no-cursor,
body.yb-no-cursor * {
  cursor: auto !important;
}

body.yb-no-cursor a,
body.yb-no-cursor button {
  cursor: pointer !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body,
  body * {
    cursor: auto !important;
  }

  .cursor-pen,
  .particle {
    display: none !important;
  }
}

body.yb-no-loader .main-content {
  opacity: 1;
  transform: none;
}

/* Locking the scroll removes the scrollbar, and the page reflows into the
   width it leaves behind — on a tablet, where the drawer covers half the
   viewport, that shift is plainly visible beside the panel. Pin the body to
   the width it had before the lock so only the scrolling stops. */
body.yb-overlay-open,
body.yb-nav-open {
  overflow: hidden;
  width: 100%;
  padding-right: var(--yb-scrollbar-width, 0px);
}

/* ------------------------------------------------------------
   HEADER ADDITIONS
   ------------------------------------------------------------ */
.yb-announcement {
  position: relative;
  z-index: 1001;
  background: var(--ink-deep);
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.yb-announcement-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.yb-announcement-text {
  margin: 0;
}

.yb-announcement-link {
  color: var(--gold-light);
  font-weight: 500;
}

.yb-announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0.7;
}

.yb-announcement-close:hover {
  opacity: 1;
}

/* The bar pushes the fixed navbar down. */
.yb-announcement~.main-content .navbar,
body:has(.yb-announcement) .navbar {
  top: 38px;
}

/* The design's bar carried a brand and a menu; the theme adds icon buttons and
   a CTA, so the three groups need explicit shrink rules or they overflow the
   fixed 60/76px bar and spill into the hero below. */
.navbar {
  gap: 16px;
  flex-wrap: nowrap;
}

.nav-brand {
  flex: 0 0 auto;
  min-width: 0;
}

.nav-brand-name,
.nav-brand-tagline {
  white-space: nowrap;
}

.nav-links {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.nav-links>.menu-item>.nav-link {
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.nav-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--border-light);
}

.nav-contact-item,
.nav-social-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s var(--ease-smooth);
}

.nav-contact-item:hover,
.nav-social-item:hover {
  color: var(--ink-deep);
}

.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-deep);
  font-size: var(--btn-icon-font);
  text-decoration: none;
  transition: background 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.nav-icon-btn:hover {
  background: rgba(26, 39, 68, 0.06);
  transform: translateY(-1px);
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--ink-deep);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nav-badge.is-empty {
  display: none;
}

/* The navbar is height-constrained, so the CTA uses the compact size — but it
   uses it at every viewport. It used to step down again at 1400px before
   disappearing at 900px, which made it the only button on screen that changed
   size twice on the way down. */
.nav-cta {
  margin-left: 10px;
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  min-height: var(--btn-min-h-sm);
  box-sizing: border-box;
  font-size: var(--btn-font-sm);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* .btn-primary is the glass-on-hero treatment — white text on a translucent
   white fill. The navbar is always parchment, so the CTA needs a solid fill
   there whichever button style the option picks. */
.navbar .nav-cta.btn-primary {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar .nav-cta.btn-primary::before {
  background: var(--gold);
}

.navbar .nav-cta.btn-primary:hover {
  border-color: var(--gold);
  color: var(--ink-deep);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.22);
}

/* Submenus */
.nav-links .menu-item {
  position: relative;
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s var(--ease-elegant);
  z-index: 20;
}

/* The last couple of top-level items sit close to the navbar's right edge
   (.nav-actions crowds the same row), so a left-anchored panel there runs
   past the viewport and is clipped or covers the icon cluster beside it.
   Anchoring those to the right edge of their own item keeps the panel
   fully on screen without touching how any other submenu is positioned. */
.nav-links>.menu-item:nth-last-child(-n+2).has-submenu>.nav-submenu {
  left: auto;
  right: 0;
}

.nav-links .menu-item:hover>.nav-submenu,
.nav-links .menu-item:focus-within>.nav-submenu,
.nav-links .menu-item.submenu-open>.nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-submenu .nav-link {
  display: block;
  padding: 9px 20px;
  border-radius: 0;
}

/* A centred rule under a full-width dropdown row reads as a divider, so the
   submenu marks its states with a gold edge and a tinted row instead. */
.nav-submenu .nav-link::after {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease-smooth), background-color 0.25s var(--ease-smooth);
}

.nav-submenu .nav-link:hover::after,
.nav-submenu .nav-link.active::after {
  transform: scaleY(1);
}

.nav-submenu .nav-link:hover {
  background: rgba(26, 39, 68, 0.05);
}

.nav-submenu .nav-link.active {
  background: rgba(201, 169, 110, 0.12);
}

.nav-submenu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   SEARCH OVERLAY
   ------------------------------------------------------------ */
.yb-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(250, 246, 240, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 24px;
  overflow-y: auto;
}

.yb-search-overlay[hidden] {
  display: none;
}

.yb-search-inner {
  width: min(760px, 100%);
  text-align: center;
}

.yb-search-close {
  position: absolute;
  top: 28px;
  right: 32px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-deep);
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.yb-search-form {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.yb-search-form .subscribe-input {
  flex: 1;
}

.yb-search-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  text-align: left;
}

.yb-search-list li+li {
  border-top: 1px solid var(--border-light);
}

.yb-search-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 6px;
  transition: background 0.25s var(--ease-smooth);
}

.yb-search-list a:hover {
  background: rgba(26, 39, 68, 0.04);
}

.yb-search-thumb img {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.yb-search-type {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.yb-search-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.yb-search-empty {
  margin-top: 24px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */
.yb-breadcrumbs {
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.yb-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.yb-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yb-breadcrumbs li:nth-child(2){
  word-break: break-word;
}
.yb-breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

.yb-breadcrumbs a:hover {
  color: var(--ink-deep);
}

.breadcrumb-sep {
  color: var(--gold);
}

/* Inside the ink-blue page hero the muted body colours all but vanish. */
.page-hero .yb-breadcrumbs {
  color: rgba(255, 255, 255, 0.6);
}

.page-hero .yb-breadcrumbs a {
  color: rgba(255, 255, 255, 0.72);
}

.page-hero .yb-breadcrumbs a:hover {
  color: var(--gold-light);
}

.page-hero .yb-breadcrumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.9);
}

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

/* ------------------------------------------------------------
   PAGE HERO — banner image variant
   The template sets background-image inline, which beats the gradient in
   .page-hero's background shorthand. Without sizing and a scrim the image
   tiles at its natural size behind white text.
   ------------------------------------------------------------ */
.page-hero.has-image {
  background-color: var(--ink-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(26, 39, 68, 0.78) 0%,
      rgba(26, 39, 68, 0.62) 45%,
      rgba(26, 39, 68, 0.82) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */
.yb-form-wrap {
  width: 100%;
}

.yb-form-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-deep);
  margin-bottom: 18px;
}

.yb-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.yb-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.yb-form--inline .yb-form-field {
  flex: 1 1 240px;
  min-width: 0;
}

.yb-form--inline .yb-form-field label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

.yb-form--inline .yb-form-status {
  flex: 1 0 100%;
}

.yb-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.yb-form-field label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.yb-required {
  color: var(--gold);
}

.yb-form-field.has-error .subscribe-input {
  border-color: #b4453d;
  background: rgba(180, 69, 61, 0.03);
}

/*
 * The same treatment where WordPress and WooCommerce build the form: the
 * validation script adds .has-error and the message span to those rows too.
 */
.form-row.has-error input,
.form-row.has-error textarea,
.form-row.has-error select,
.form-row.has-error .select2-selection,
.comment-form-author.has-error input,
.comment-form-email.has-error input,
.comment-form-comment.has-error textarea {
  border-color: #b4453d;
  background: rgba(180, 69, 61, 0.03);
}

.yb-field-error {
  display: block;
  font-size: 0.74rem;
  color: #b4453d;
  min-height: 1em;
  text-align: left;
  margin-top: 3px;
}

.yb-field-error:empty {
  display: none;
}

/* Optional per-field hint, set under Form Submissions > Form Text. */
.yb-field-help {
  display: block;
  font-size: 0.78rem;
  color: #6b6b6b;
  text-align: left;
  margin-top: 0.15rem;
}

/* The honeypot must be reachable by nothing a human uses. */
.yb-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.yb-form-submit {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.yb-form-submit.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

.yb-form-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 249, 240, 0.4);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: ybSpin 0.7s linear infinite;
}

.yb-form-submit.is-loading .yb-form-spinner {
  display: inline-block;
}

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

.yb-form-status {
  margin: 0;
  font-size: 0.88rem;
  min-height: 1.2em;
}

.yb-form-status.is-success {
  color: #2f6b4f;
}

.yb-form-status.is-error {
  color: #b4453d;
  text-align: left;
}

#ybMiniCart .section-divider {
  display: none;
}

#ybMiniCart .yb-mini-cart-empty svg {
  margin: 0 auto 15px auto;

}

#ybMiniCart .yb-mini-cart-empty .woocommerce-mini-cart__empty-message {
  margin-bottom: 10px;
}

/* Inherits the shared .btn size; it previously squashed its vertical padding
   to 10px, making it shorter than the same button anywhere else. */

/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */
.yb-empty {
  text-align: center;
  padding: 48px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.yb-empty-icon {
  font-size: 2.6rem;
  color: var(--gold);
  display: block;
  margin: 0 auto 18px;
}

.yb-empty-heading {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--ink-deep);
  margin-bottom: 10px;
}

.yb-empty-text {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.yb-searchform {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}

.yb-searchform .subscribe-input {
  flex: 1;
}

/* Every standalone search field (site search form, header overlay, blog
   filter) uses one even inset: the same 18px from the left edge to the
   text, from the text to the browser's clear (X), and from the X to the
   right edge. Before, each field set its own sides and the blog filter
   left the X flush against the last character. */
.subscribe-input[type="search"] {
  padding-left: 18px;
  padding-right: 18px;
  min-width: 0;
}

.subscribe-input[type="search"]::-webkit-search-cancel-button {
  margin-left: 18px;
  cursor: pointer;
}

/* ------------------------------------------------------------
   SEARCH CLEAR BUTTON (added by theme.js)

   The native X only shows on hover/focus and reserves no space, so
   long text ran beneath it and toward the search icon. theme.js swaps
   it for a real button in a fixed slot: the field's right padding is
   sized to hold that slot, so text stops short of it whether or not
   the X is showing. Fields without JS keep the native X above.
   ------------------------------------------------------------ */
.yb-search-field {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

/* Slot: 12px to the edge + 24px button + 8px before the text. */
.yb-search-field > .subscribe-input {
  display: block;
  width: 100%;
  padding-right: 44px;
  text-overflow: ellipsis;
}

.yb-search-field > .subscribe-input::-webkit-search-cancel-button,
.wp-block-search__inside-wrapper.has-clear .wp-block-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.yb-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}

.yb-search-clear:hover,
.yb-search-clear:focus-visible {
  background: rgba(26, 39, 68, 0.06);
  color: var(--ink-deep);
}

.yb-search-clear svg {
  width: 14px;
  height: 14px;
}

/* Hidden, not removed, so the slot stays reserved while empty. */
.yb-search-clear.is-hidden {
  visibility: hidden;
}

.yb-search-field > .yb-search-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* The submit button inherited the full-size button tokens, including the
   200px width floor, so it outweighed the field. Step it down to the small
   button scale; the field drops to the same height so the pair stays level. */
.yb-searchform .subscribe-btn,
.yb-search-form .subscribe-btn {
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  min-height: var(--btn-min-h-sm);
  min-width: 0;
  font-size: var(--btn-font-sm);
}

.yb-searchform .subscribe-input,
.yb-search-form .subscribe-input {
  min-height: var(--btn-min-h-sm);
  padding-top: var(--btn-pad-y-sm);
  padding-bottom: var(--btn-pad-y-sm);
}

/* ------------------------------------------------------------
   CORE SEARCH BLOCK (sidebar widget)

   The widget areas take core's Search block, which the theme had
   never styled: it rendered a bare full-width text field with a
   dark "Search" button beside it, in neither the theme's shape nor
   its palette. It also inherited the shared button width floor,
   which pushed the submit button to 200px and squeezed the input
   down to a stub.

   The design puts the control in one bordered field with the icon
   inside it, so the wrapper carries the border and the input and
   button sit flush within — matching `.yb-searchform`, which the
   theme's own template already renders that way.
   ------------------------------------------------------------ */
/* Both button positions land here. Core's `button-inside` variant adds its
   own grey border and 4px of padding to this wrapper; those come through
   `:where()` at zero specificity, so these plain selectors replace them and
   the two variants render identically. */
.wp-block-search__inside-wrapper,
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--btn-radius);
  background: var(--cream, #fff);
  overflow: hidden;
  transition: border-color 0.25s var(--ease-smooth);
}

.wp-block-search__inside-wrapper:focus-within {
  border-color: var(--gold);
}

/* The field fills the wrapper; the wrapper draws the frame, so the
   input itself carries no border, background or focus ring. */
.wp-block-search .wp-block-search__input,
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: var(--btn-pad-y) 14px;
  min-height: var(--btn-min-h);
  box-sizing: border-box;
  border: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  color: var(--ink-deep);
}

.wp-block-search .wp-block-search__input:focus {
  outline: none;
  box-shadow: none;
}

/* One even 15px step across the field: frame to text, text to the
   browser's clear (X), X to the search glyph, glyph to frame. The icon
   button supplies 15px on its own (11px either side of the 18px glyph
   inside its 40px box, plus its 4px right margin), so the input keeps
   only 4px on the right to make the X-to-glyph gap match. */
.wp-block-search .wp-block-search__input,
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
  padding-left: 15px;
  padding-right: 4px;
}

.wp-block-search .wp-block-search__input::-webkit-search-cancel-button {
  margin-left: 15px;
  cursor: pointer;
}

/* With the theme's clear button in place the row is three columns:
   text, clear (X), search icon. The field ends 8px before the X, and
   the X keeps its column even while hidden, so text never reaches it. */
.wp-block-search__inside-wrapper.has-clear .wp-block-search__input {
  padding-right: 8px;
  text-overflow: ellipsis;
}

.wp-block-search__inside-wrapper > .yb-search-clear {
  flex: 0 0 auto;
}

/* Icon button inside the field. `min-width` is reset because the
   shared floor is meant for text buttons, not a square icon. */
.wp-block-search .wp-block-search__button,
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  min-width: 0;
  height: var(--btn-icon-size);
  min-height: 0;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--ink-medium);
  cursor: pointer;
  transition: color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus-visible {
  background: rgba(26, 39, 68, 0.06);
  color: var(--ink-deep);
}

.wp-block-search .wp-block-search__button svg {
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  fill: currentColor;
}

/* A button configured with a text label instead of an icon gets the
   glyph drawn here, so the widget looks the same either way. */
.wp-block-search .wp-block-search__button:not(.has-icon) {
  font-size: 0;
}

.wp-block-search .wp-block-search__button:not(.has-icon)::after {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--yb-search-icon) center / contain no-repeat;
  mask: var(--yb-search-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------
   SEARCH RESULTS
   Search is the only listing that mixes card types — posts, pages,
   products and services all land in the same grid — so the cards
   need a shared footprint here that they never need elsewhere.
   ------------------------------------------------------------ */

/* The re-search field sat flush on the first row of cards. Give it the
   same breathing room the insights filter row uses. */
.search-again {
  max-width: 460px;
  margin: 0 auto 46px;
}

/* Grid rows stretch every card to the tallest in the row; without this
   the shorter cards ended in a block of dead white space. */
.search-results-grid>* {
  display: flex;
  flex-direction: column;
}

.search-results-grid .post-card-image,
.search-results-grid .service-card-image,
.search-results-grid .book-cover-img {
  flex: none;
}

.search-results-grid .post-card-body,
.search-results-grid .service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Seat every call to action on one baseline across the row. */
.search-results-grid .post-card-link {
  margin-top: auto;
  align-self: flex-start;
}

.search-results-grid .book-buy-links {
  margin-top: auto;
  padding-top: 4px;
}

/* The book card is drawn for the 2-up books grid; in the 3-up results
   grid its cover and padding tower over the post cards beside it. */
.search-results-grid .book-card {
  padding: 24px 22px;
}

.search-results-grid .book-cover-img {
  width: 132px;
  height: 198px;
  margin-bottom: 18px;
}

/* Trim the product summary to the post-card excerpt's three lines.
   The genre and price lines carry classes; the summary does not. */
.search-results-grid .book-card>p:not([class]) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------
   PAGE + POST CONTENT
   ------------------------------------------------------------ */
.page-content {
  max-width: 820px;
  margin: 0 auto;
}

.article-layout.is-full {
  grid-template-columns: 1fr;
}

.article-layout.is-full .article-sidebar {
  display: none;
}

.article-body img,
.page-content img {
  border-radius: 6px;
  height: auto;
}

.article-body .alignleft,
.page-content .alignleft {
  float: left;
  margin: 6px 28px 18px 0;
}

.article-body .alignright,
.page-content .alignright {
  float: right;
  margin: 6px 0 18px 28px;
}

.article-body .aligncenter,
.page-content .aligncenter {
  display: block;
  margin-inline: auto;
}

.article-body .alignwide {
  width: min(1100px, 92vw);
  margin-inline: calc(50% - min(550px, 46vw));
}

.article-body blockquote,
.page-content blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 3px solid var(--gold);
  background: var(--parchment-warm);
  font-style: italic;
  color: var(--ink-deep);
}

.article-body table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.article-body th,
.article-body td,
.page-content th,
.page-content td {
  border: 1px solid var(--border-light);
  padding: 10px 14px;
  text-align: left;
}

.article-body th,
.page-content th {
  background: var(--parchment-warm);
  font-family: var(--font-display);
}

.wp-caption,
figure.wp-block-image {
  max-width: 100%;
}

.wp-caption-text,
figcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
}

.page-links {
  margin: 28px 0;
  font-size: 0.9rem;
}

.page-links a {
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin: 0 3px;
  text-decoration: none;
}

.article-share-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 6px;
}

.yb-copy-link {
  background: none;
  border: 0;
  color: inherit;
  padding: 6px;
}

.yb-copy-link.is-copied {
  color: var(--gold);
}

/* Post navigation */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* margin: 30px 0; */
  margin: 0px 0;
}

.article-nav-item {
  display: block;
  padding: 22px 26px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-bg);
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.article-nav-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.article-nav-next {
  text-align: right;
}

.article-nav-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.article-nav-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-deep);
}

/* Sidebar */
.sidebar-author-photo {
  border-radius: 50%;
  margin: 0 auto 14px;
  display: block;
}

.sidebar-author-role,
.sidebar-post-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sidebar-author-bio {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.sidebar-post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-post-list li+li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.sidebar-post-list a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}

.sidebar-post-list img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.sidebar-post-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.35;
}

/* ------------------------------------------------------------
   COMMENTS
   ------------------------------------------------------------ */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  list-style: none;
  margin: 18px 0 0 32px;
  padding: 0;
}

.comment-body {
  padding: 22px 26px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-bg);
  margin-bottom: 18px;
}

/* Core's walker nests the author block, the date and the moderation notice
   inside a <footer class="comment-meta">. It is a plain block: the rows stack.
   (theme.css also defines `.comment-meta`, for its own `.comment-item` list —
   that copy is scoped there so it no longer flattens this one into columns.) */
.comment-body .comment-meta {
  display: block;
  margin-bottom: 12px;
}

/* Avatar and name share the first line; "says:" wraps onto the next. A row
   flex container will not break a line on its own — `display: block` or
   `width: 100%` on a child does nothing while the parent is `nowrap` — so the
   wrap is enabled here and the span is given a full-width basis below. */
.comment-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

/* get_avatar() emits width/height attributes, but the flex row will still
   shrink the image below them when the name is long. */
.comment-author img,
.comment-author .avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.comment-author .fn {
  min-width: 0;
}

/* `flex-basis: 100%` pushes the span past the end of the first line, so it
   lands on its own row under the avatar and name. The `gap` above already
   provides the vertical spacing between the two rows. */
.comment-author .says {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.comment-author .fn {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: normal;
  color: var(--ink-deep);
}

.comment-metadata {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.comment-metadata a {
  color: inherit;
  text-decoration: none;
}

/* Shown only while a comment is unapproved — which is exactly what a visitor
   sees straight after posting, so it is the first impression of this list.
   Core emits it as a bare <em> with no styling of its own. */
.comment-awaiting-moderation {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 2px solid var(--gold);
  background: var(--parchment-warm, rgba(201, 169, 110, 0.1));
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-medium);
}

/* Long words and pasted URLs otherwise push the card wider than the column. */
.comment-content {
  color: var(--text-secondary);
  line-height: 1.75;
  overflow-wrap: break-word;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-reply-link {
  font-size: 0.82rem;
  color: var(--ink-medium);
}

.comment-respond {
  margin-top: 40px;
}

.comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Grid items are blockified, so the name and email fields cannot sit side by
   side on a percentage width — they take one track each and the rest of the
   form spans both. */
.comment-form>* {
  grid-column: 1 / -1;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email {
  grid-column: auto;
  width: auto;
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.comment-form label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Required asterisk. Core emits `<span class="required">*</span>` next to the
   name and email labels, and the comment field now carries one too, but the
   theme only ever styled `.required` inside WooCommerce checkout — so on this
   form the glyph inherited the label's muted grey and read as punctuation.
   Gold matches the checkout treatment. `aria-hidden` is deliberately not set:
   the form already carries core's "Required fields are marked *" note, which
   is what gives the glyph its meaning. */
.comment-form .required {
  color: var(--gold);
  text-decoration: none;
}

/* The consent checkbox reads as a sentence, not as a field label. */
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 9px;
}

.comment-form .comment-form-cookies-consent input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.comment-form .comment-form-cookies-consent label {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------
   SECTIONS ADDED BY THE THEME
   ------------------------------------------------------------ */

/* ---- Post cards: the design draws these as plain text, WordPress wraps
   the title and image in links, so strip the anchor defaults back off. ---- */
.post-card-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
}

.post-card-title a:hover,
.post-card-title a:focus {
  color: inherit;
  text-decoration: none;
}

.post-card-date {
  white-space: nowrap;
}

.post-card-date svg {
  flex: 0 0 auto;
  color: var(--gold);
}

/* ---- Book cards: the design's <h3> and cover are plain, WordPress links them
   through to the product, so strip the anchor defaults back off. ---- */
.book-cover-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.book-card h3 a,
.book-card h3 a:hover,
.book-card h3 a:focus {
  color: inherit;
  text-decoration: none;
}

/* .book-card > p beats .book-price on specificity, so restate the gold line. */
.book-card>p.book-price {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}

.section-footer-cta {
  text-align: center;
  margin-top: 44px;
}

.about-cta,
.series-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.categories-grid,
.features-grid,
.team-grid,
.gallery-grid {
  display: grid;
  gap: 26px;
  max-width: 1240px;
  margin: 0 auto;
}

.categories-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.features-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.category-card {
  display: block;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  text-decoration: none;
  transition: all 0.4s var(--ease-elegant);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--gold);
}

.category-card-image {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--parchment-deep);
}

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

.category-card-body {
  display: block;
  padding: 18px 20px;
}

.category-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-deep);
}

.category-card-count {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.feature-card,
.mission-card {
  padding: 30px 28px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
  transition: all 0.4s var(--ease-elegant);
}

.feature-card:hover,
.mission-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold-pale);
}

.feature-icon,
.mission-icon,
.contact-card-icon,
.service-card-icon {
  display: inline-block;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 14px;
}

.feature-title,
.mission-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-deep);
  margin-bottom: 8px;
}

.feature-text {
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Services */
.services-grid .service-card,
.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  transition: all 0.4s var(--ease-elegant);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.service-card-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.service-card-body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.service-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}

.service-card-title a {
  color: var(--ink-deep);
  text-decoration: none;
}

.service-card-excerpt {
  color: var(--text-secondary);
  font-size: 0.92rem;
  flex: 1;
}

.service-card-price {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.05rem;
}

.service-facts {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.service-fact-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.service-fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-deep);
}

/* Process + timeline */
.process-list,
.timeline {
  list-style: none;
  counter-reset: yb-step;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
}

.process-step,
.timeline-item {
  position: relative;
  padding: 0 0 34px 42px;
  border-left: 1px solid var(--border-light);
}

.process-step::before,
.timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
}

.process-step:last-child,
.timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.process-step-number,
.timeline-year {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.process-step-title,
.timeline-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.process-step-text,
.timeline-text {
  color: var(--text-secondary);
}

/* Counters */
.counters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.counter-value,
.counter-suffix {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--ink-deep);
  line-height: 1;
}

.counter-suffix {
  color: var(--gold);
}

.counter-label {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Team */
.team-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  transition: all 0.4s var(--ease-elegant);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.team-card-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.team-card-body {
  padding: 22px 22px 26px;
  text-align: center;
}

.team-card-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink-deep);
}

.team-card-name a {
  color: inherit;
  text-decoration: none;
}

.team-card-role {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 4px 0 10px;
}

.team-card-bio {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.team-card-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 1rem;
}

.team-card-social a {
  color: var(--text-muted);
  transition: color 0.3s var(--ease-smooth);
}

.team-card-social a:hover {
  color: var(--ink-deep);
}

/* Gallery */
.gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease-elegant);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.yb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(26, 39, 68, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.yb-lightbox.is-open {
  display: flex;
}

.yb-lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}

.yb-lightbox figcaption {
  color: var(--cream);
  margin-top: 14px;
}

.yb-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 249, 240, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 1.4rem;
}

/* Log out confirmation (theme.js, logoutConfirm). Stacked just under the
   fountain-pen cursor (100000) so the pointer stays visible over it, and
   above the navbar and every other overlay. */
.yb-confirm {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(26, 39, 68, 0.55);
  backdrop-filter: blur(3px);
  animation: yb-confirm-in 0.2s var(--ease-smooth);
}

.yb-confirm[hidden] {
  display: none;
}

.yb-confirm-panel {
  width: 100%;
  max-width: 400px;
  padding: 34px 30px 30px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--cream);
  box-shadow: var(--shadow-elevated);
  text-align: center;
  outline: none;
}

.yb-confirm-question {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-deep);
}

.yb-confirm-actions {
  display: flex;
  gap: 12px;
}

/* The two answers share the row; the theme's 200px button minimum would
   push them past a phone-width panel. */
.yb-confirm-actions .btn {
  flex: 1 1 0;
  min-width: 0;
}

@keyframes yb-confirm-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yb-confirm {
    animation: none;
  }
}

/* Accordion */
.accordion {
  max-width: 860px;
  margin: 0 auto;
}

.accordion-item {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--card-bg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-smooth);
}

.accordion-item.is-open {
  border-color: var(--gold-pale);
}

.accordion-heading {
  margin: 0;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink-deep);
  line-height: 1.4;
}

.accordion-icon {
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.3s var(--ease-smooth);
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel-inner {
  padding: 0 24px 22px;
  color: var(--text-secondary);
}

.career-title {
  display: block;
}

.career-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 44px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: start;
}

.contact-cards {
  display: grid;
  gap: 18px;
}

.contact-card,
.contact-hours {
  padding: 24px 26px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--card-bg);
}

.contact-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.contact-card-text {
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.contact-hours {
  margin-top: 18px;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.map-embed iframe {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

/* Legal */
.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}

.legal-layout.is-full {
  grid-template-columns: 1fr;
  max-width: 820px;
}

.legal-toc {
  position: sticky;
  top: 100px;
}

.legal-toc-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.legal-toc-list li+li {
  margin-top: 8px;
}

.legal-toc-list a {
  color: var(--text-secondary);
  text-decoration: none;
}

.legal-toc-list a:hover {
  color: var(--ink-deep);
}

.legal-updated {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.legal-body h2 {
  scroll-margin-top: 110px;
}

/* Filters + pagination */
.insights-search {
  max-width: 520px;
  margin: 0 auto 24px;
}

.insights-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}

.posts-grid.is-loading,
.products.is-loading {
  opacity: 0.55;
  transition: opacity 0.2s;
}

.yb-filter-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
}

.load-more-wrap {
  text-align: center;
  margin-top: 40px;
}

.insights-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-icon-size);
  min-height: var(--btn-icon-size);
  padding: 0 10px;
  margin: 0 3px;
  box-sizing: border-box;
  border: var(--btn-border) solid var(--border-light);
  border-radius: var(--btn-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s var(--ease-smooth);
}

.insights-pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.insights-pagination .page-numbers.current {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
}

.insights-pagination a.page-numbers:hover {
  border-color: var(--gold);
  color: var(--ink-deep);
}

.insights-count {
  text-align: center;
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-top: 18px;
}

/* Footer additions */
.footer-cta-band {
  background: var(--ink-deep);
  color: var(--cream);
  padding: 54px 24px;
}

.footer-cta-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-cta-heading {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
}

.footer-cta-text {
  color: rgba(255, 249, 240, 0.75);
  margin-top: 6px;
}

.footer-newsletter {
  margin-top: 26px;
}

.footer-newsletter-form .subscribe-input {
  min-width: 0;
}

.footer-payments {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-hours {
  margin-top: 10px;
}

/* The design printed the contact details as plain text; the theme makes them
   mailto/tel/map links, which without this fall back to the browser's blue
   underline in the middle of the ink-blue footer. */
.footer-contact-item a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-item a:hover {
  color: var(--gold);
}

.footer-contact-item address {
  font-style: normal;
}

/* Error page */
.error-inner {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Stars */
.yb-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  font-size: 14px;
}

.yb-star.is-empty {
  opacity: 0.28;
}

.yb-star-count {
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Toasts */
.yb-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 100002;
  padding: 13px 24px;
  border-radius: 6px;
  background: var(--ink-deep);
  color: var(--cream);
  font-size: 0.9rem;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transition: all 0.35s var(--ease-elegant);
  max-width: min(460px, 90vw);
}

.yb-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.yb-toast--error {
  background: #8f3931;
}

.yb-spinner {
  width: 28px;
  height: 28px;
  margin: 40px auto;
  border: 2px solid var(--border-light);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: ybSpin 0.8s linear infinite;
}

.woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs .additional_information_tab {
  background: transparent;
  color: var(--ink-deep);
  border: 1px solid rgba(26, 39, 68, 0.2);
}

.woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs .reviews_tab {
  background: transparent;
  color: var(--ink-deep);
  border: 1px solid rgba(26, 39, 68, 0.2);
}

#coupon-error-notice {
  display: none;
}

/* ------------------------------------------------------------
   RESPONSIVE — NAVBAR
   The bar carries more than the design's did, so it condenses in two
   steps before handing over to the drawer.
   ------------------------------------------------------------ */
@media (max-width: 1400px) {
  .navbar {
    padding: 0 28px;
    gap: 10px;
  }

  .nav-brand-tagline {
    display: none;
  }

  .nav-link {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  /* Only the spacing tightens here; the button keeps its size. */
  .nav-cta {
    margin-left: 6px;
  }

  .nav-actions {
    gap: 2px;
  }
}

/* Eight menu items plus four icon buttons stop fitting well before the
   design's 768px drawer breakpoint. */
@media (max-width: 1180px) {
  /* Off-canvas drawer. Hidden with a transform (not `right: -100%`) plus
     `visibility`, so its links are out of the tab order while closed. It
     scrolls on its own when the menu is taller than a short/landscape screen,
     and the top padding keeps the first item clear of the bar and its toggle. */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: var(--parchment);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 96px 20px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease-smooth), visibility 0s linear 0.4s;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s var(--ease-smooth), visibility 0s;
  }

  .page-id-12 .section.page-section {
    padding-top: 0;
  }

  .nav-links .nav-link {
    font-size: 0.95rem;
    padding: 10px 16px;
  }

  /* Top-level links only: the panel is a centred column, so they take the
     full width and the current one reads as a block rather than a word.
     Submenu links are indented and left-flowing, so they keep their own
     alignment. */
  .nav-links>.menu-item>.nav-link {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Current page. The walker already marks it `.active` (and `aria-current`),
     but the only styling for that was the desktop bar's gold underline —
     a `::after` inset to `left/right: 16px` and pinned to `bottom: 4px`,
     drawn for a short link in a horizontal row. Stretched across a 260px
     column item it read as a stray hairline, so the state was effectively
     invisible here. A filled row and a gold edge carry it instead. */
  .nav-links>.menu-item>.nav-link.active {
    background: rgba(201, 169, 110, 0.16);
    border-radius: 6px;
    color: var(--ink-deep);
    font-weight: 600;
  }

  /* The underline does not survive the move to a full-width row; the fill
     above replaces it. (Submenu links keep their own active treatment, which
     already reads correctly in the panel.) */
  .nav-links>.menu-item>.nav-link.active::after {
    display: none;
  }

  /* Keeps the current item distinct from whatever is being tapped. */
  .nav-links>.menu-item>.nav-link.active:hover {
    background: rgba(201, 169, 110, 0.24);
  }

  /* An ancestor of the current page — a parent whose submenu holds it — is
     marked but not as strongly as the page itself. */
  .nav-links .menu-item.current-menu-ancestor>.nav-link:not(.active),
  .nav-links .menu-item.current-menu-parent>.nav-link:not(.active) {
    color: var(--ink-deep);
    font-weight: 500;
  }

  /* Positioned so the z-index applies: the X stays above the open drawer. */
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1001;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

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

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* The drawer is a column, so the desktop submenu popover has to unstack. */
  .nav-submenu-toggle {
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 6px;
  }

  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    display: none;
    padding: 0 0 0 16px;
  }

  .nav-links .menu-item.submenu-open>.nav-submenu {
    display: block;
  }
}

@media (max-width: 560px) {
  .navbar {
    padding: 0 16px;
    gap: 8px;
  }

  .nav-brand {
    gap: 9px;
  }

  .nav-brand-name {
    font-size: 0.9rem;
    letter-spacing: 0;
  }

  .navbar .nav-logo,
  .navbar.scrolled .nav-logo {
    width: 27px;
    height: 27px;
  }

  /* Was 27x34 with an inherited border-radius: 50%, which rendered the icon
     buttons as ellipses on small phones. Square, so circles stay circles. */
  .nav-icon-btn {
    width: var(--btn-icon-size-sm);
    height: var(--btn-icon-size-sm);
  }

  .hero-description {
    margin: 0 auto 20px;
  }
}

/* Search, cart and the menu toggle are the ones that have to survive on a
   narrow phone; the rest of the account links live in the drawer and footer. */
@media (max-width: 480px) {

  /* .yb-wishlist-button,
  .yb-account-button {
    display: none;
  } */
}

/* Small phones (320–400px). The brand and the action group are both
   `flex: 0 0 auto` with nowrap text, so at 320px the row needed ~344px of a
   288px box and the menu toggle — last in the row — was pushed off-screen.
   The brand name now gives way (ellipsis) instead of the controls, and the
   icon buttons and gutters step down just enough to fit. */
@media (max-width: 400px) {
  .navbar {
    padding: 0 12px;
    gap: 6px;
  }

  .nav-brand {
    flex: 0 1 auto;
    gap: 8px;
  }

  .nav-brand .nav-logo {
    flex-shrink: 0;
  }

  .nav-brand-text {
    min-width: 0;
    overflow: hidden;
  }

  .nav-brand-name {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-actions {
    flex: 0 0 auto;
    gap: 0;
    margin-left: auto;
  }

  .nav-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .nav-badge {
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    font-size: 0.6rem;
  }

  /* Keeps a ~40px tap target and never shrinks out of the row. */
  .nav-toggle {
    flex-shrink: 0;
    padding: 9px;
    margin-left: 2px;
  }
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

  .contact-layout,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }

  .nav-contact {
    display: none;
  }
}

@media (max-width: 991px) {
  .footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 26px;
  }
}

@media (max-width: 900px) {
  .nav-cta {
    display: none;
  }

  .nav-submenu-toggle {
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 6px;
  }


  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    display: none;
    padding: 0 0 0 16px;
  }

  .nav-links .menu-item.submenu-open>.nav-submenu {
    display: block;
  }

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

  .article-nav-next {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .yb-announcement-inner {
    padding: 9px 40px 9px 16px;
    font-size: 0.76rem;
  }

  .footer-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .comment-form .comment-form-author,
  .comment-form .comment-form-email {
    grid-column: 1 / -1;
    width: 100%;
  }

  .comment-respond {
    margin-top: 10px;
  }

  .service-facts {
    gap: 20px;
  }

  .counter-value,
  .counter-suffix {
    font-size: 2.2rem;
  }

  .yb-search-overlay {
    padding-top: 8vh;
  }

  .yb-search-form {
    flex-direction: column;
  }

  /* Wishlist only (the "wishlist page gap" fix). Unscoped, it left 130px of
     empty space under every page template on phones. */
  .page-id-12 #primary .section.page-section {
    padding-bottom: 130px;
  }

  .woocommerce-account #primary .section.page-section {
    padding-bottom: 0px;
  }

  /* Home only: these CTA rows sit left of their column on desktop, which reads
     as off-centre once the section stacks on phones. */
  .home .about-cta,
  .home .series-cta {
    justify-content: center;
  }
}

/* Desktop table only — below 768px YITH swaps in the `.mobile` list, where
   the button is styled full width in woocommerce.css instead. */
.page-id-12 .wishlist_table:not(.mobile) .product-add-to-cart a {
  display: table !important;
  margin: 0 0 5px !important;
  text-align: left;
  margin-bottom: 10px;
}

@media (max-width: 320px) {
  /* Keep a small gutter rather than zero: at this width the prose was
     running edge to edge. The `.section` rule below already removes the
     48px outer layer, so 12px here is the whole gutter. */
  .article-wrap {
    padding: 0 12px;
  }

  .article-nav {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Sides only: this used to be `padding: 0 10px`, which also removed the
     top and bottom padding so neighbouring sections ran into each other. */
  .section,
  .testimonials-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-main .section.article-section .article-wrap .article-layout {
    display: block;
  }
}

textarea#comment {
  resize: none;
}