/* Hide excerpt on page */
.page-header-excerpt,
.coa-index-document .page-header-excerpt {
  display: none !important;
}
body.page-id-154 #content,
body.page-id-153 #content,
body.page-template-page-blank #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


  .coa-index-document {
    --coa-black: #1c1025;
    --coa-dark-purple: #301639;
    --coa-purple: #6d2777;
    --coa-light-grey: #fafafa;
    --coa-white: #fefefe;

    --coa-hero-bg: var(--coa-black);
    --coa-hero-text: var(--coa-white);
    --coa-hero-muted: rgba(254, 254, 254, 0.55);
    --coa-hero-accent: #b071bd;

    --coa-body-bg: var(--coa-light-grey);
    --coa-body-subtle: #f2f0f4;
    --coa-card-bg: var(--coa-white);
    --coa-text: var(--coa-black);
    --coa-text-muted: #6b6b6b;
    --coa-accent: var(--coa-purple);
    --coa-border: #e8e4ec;

    /* Inherit the theme's typography (Kadence body + heading fonts) instead
     of forcing Cormorant Garamond / SF Mono. */
    --coa-mono: inherit;
    --coa-serif: inherit;
    --coa-radius: 4px;

    font-family: inherit;
    line-height: 1.5;
    color: var(--coa-text);
    background: var(--coa-light-grey);

    /* Full-bleed inside Kadence's constrained container */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .coa-index-document *,
  .coa-index-document *::before,
  .coa-index-document *::after {
    box-sizing: border-box;
  }

  .coa-index-document a {
    color: inherit;
  }
  .coa-index-document button {
    font: inherit;
    cursor: pointer;
  }

  /* Hidden state used by client-side filter — works against Kadence loop items
   tagged with .coa-card OR Kadence's default .kb-query-item / .kadence-post-loop-item */
  .coa-index-document .coa-card[hidden],
  .coa-index-document .kb-query-item[hidden],
  .coa-index-document .kadence-post-loop-item[hidden] {
    display: none !important;
  }

  .coa-index-document .coa-no-results {
    display: none;
  }
  .coa-index-document.coa-has-no-results .coa-no-results {
    display: block;
  }
  .coa-index-document.coa-has-no-results .coa-index-grid,
  .coa-index-document.coa-has-no-results .kb-query-loop,
  .coa-index-document.coa-has-no-results .kb-grid-wrap-flex,
  .coa-index-document.coa-has-no-results [data-coa-grid] {
    display: none !important;
  }
  .coa-index-document.coa-has-no-results .coa-index-load-wrap {
    display: none;
  }

  .coa-index-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* ============ HERO ============ */
  .coa-index-hero {
    background: var(--coa-hero-bg);
    color: var(--coa-hero-text);
    padding: 4rem 2rem 5rem;
  }
  .coa-index-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .coa-index-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coa-hero-muted);
  }
  .coa-index-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .coa-index-breadcrumb a {
    text-decoration: none;
    transition: color 0.2s;
  }
  .coa-index-breadcrumb a:hover {
    color: var(--coa-hero-accent);
  }
  .coa-index-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.5;
  }

  .coa-index-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: clamp(2.75rem, 6.5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0 0 2rem;
    color: var(--coa-hero-text);
    max-width: 14ch;
  }
  .coa-index-title em {
    font-style: italic;
    color: var(--coa-hero-accent);
    font-weight: 500;
  }

  .coa-index-lede {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--coa-hero-muted);
    max-width: 52ch;
    margin: 0;
  }

  /* ============ LOOKUP ============ */
  .coa-index-lookup {
    background: var(--coa-hero-bg);
    color: var(--coa-hero-text);
    padding: 0 2rem 5rem;
  }
  .coa-index-lookup-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
    gap: 4rem;
    align-items: start;
    padding-top: 3.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .coa-index-eyebrow {
    display: inline-block;
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-text-muted);
    margin-bottom: 1.25rem;
  }
  .coa-index-eyebrow-dark {
    color: var(--coa-hero-muted);
  }

  .coa-index-lookup-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    color: var(--coa-hero-text);
  }

  .coa-index-lookup-help {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    color: var(--coa-hero-muted);
    margin: 0 0 1rem;
  }
  .coa-index-lookup-help code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    color: var(--coa-hero-accent);
  }

  .coa-index-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .coa-index-example {
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    background: transparent;
    color: var(--coa-hero-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--coa-radius);
    padding: 0.45rem 0.7rem;
    transition: all 0.18s;
  }
  .coa-index-example:hover {
    color: var(--coa-hero-text);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
  }

  .coa-index-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--coa-radius);
    overflow: hidden;
    transition:
      border-color 0.2s,
      background 0.2s;
  }
  .coa-index-form:focus-within {
    border-color: rgba(176, 113, 189, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }

  .coa-index-input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 1.4rem 1.5rem;
    font-family: var(--coa-mono);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--coa-hero-text);
    outline: none;
    min-width: 0;
  }
  .coa-index-input::placeholder {
    color: rgba(254, 254, 254, 0.3);
  }

  .coa-index-submit {
    flex-shrink: 0;
    background: var(--coa-hero-text);
    color: var(--coa-black);
    border: 0;
    padding: 0 2rem;
    font-family: var(--coa-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition:
      background 0.18s,
      color 0.18s;
  }
  .coa-index-submit:hover {
    background: var(--coa-hero-accent);
    color: var(--coa-white);
  }
  .coa-index-submit-arrow {
    width: 14px;
    height: 14px;
  }

  /* ============ METHOD ============ */
  .coa-index-method {
    background: var(--coa-black);
    color: var(--coa-hero-text);
    padding: 6rem 2rem;
  }
  .coa-index-method-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .coa-index-method-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5rem;
    align-items: center;
    margin-bottom: 5rem;
  }

  .coa-index-method-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 2rem;
    color: var(--coa-hero-text);
  }
  .coa-index-method-title em {
    font-style: italic;
    color: var(--coa-hero-accent);
    font-weight: 500;
  }

  .coa-index-method-lede {
    font-size: inherit;
    line-height: 1.7;
    color: var(--coa-hero-muted);
    margin: 0;
    max-width: 48ch;
  }

  .coa-index-chromatogram {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--coa-radius);
    padding: 1.25rem 1.25rem 0.5rem;
    aspect-ratio: 16 / 8;
    display: flex;
    flex-direction: column;
  }
  .coa-index-chromatogram-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--coa-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-hero-muted);
    margin-bottom: 0.5rem;
  }
  .coa-index-chromatogram-stat {
    color: var(--coa-hero-accent);
  }
  .coa-index-chromatogram-svg {
    flex: 1;
    width: 100%;
    height: auto;
  }

  /* !important on padding/list-style because Kadence/WordPress applies default
   ol/ul indentation (~32px left) which would make the top/bottom borders
   sit narrower than the section. */
  .coa-index-document .coa-index-method-grid,
  .coa-index-document ol.coa-index-method-grid {
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }
  .coa-index-document .coa-index-method-card {
    padding: 2.25rem 1.75rem;
    margin: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none !important;
  }
  .coa-index-document .coa-index-method-card::marker {
    content: none !important;
  }
  .coa-index-document .coa-index-method-card:last-child {
    border-right: 0;
  }

  /* Method grid responsive — 4 cols desktop, 2 cols tablet, 1 col mobile.
   Higher specificity than the original media queries because we beat
   them with the .coa-index-document ol. prefix above. */
  @media (max-width: 960px) {
    .coa-index-document .coa-index-method-grid,
    .coa-index-document ol.coa-index-method-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .coa-index-document .coa-index-method-card {
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    .coa-index-document .coa-index-method-card:nth-child(2n) {
      border-right: 0;
    }
    .coa-index-document .coa-index-method-card:nth-child(1),
    .coa-index-document .coa-index-method-card:nth-child(2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  @media (max-width: 640px) {
    .coa-index-document .coa-index-method-grid,
    .coa-index-document ol.coa-index-method-grid {
      grid-template-columns: 1fr !important;
    }
    .coa-index-document .coa-index-method-card {
      border-right: 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1.75rem 0;
    }
    .coa-index-document .coa-index-method-card:last-child {
      border-bottom: 0 !important;
    }
  }

  .coa-index-method-num {
    display: block;
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--coa-hero-accent);
    margin-bottom: 1.5rem;
  }
  .coa-index-method-card-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.005em;
    margin: 0 0 0.85rem;
    color: var(--coa-hero-text);
  }
  .coa-index-method-card p {
    font-size: inherit;
    line-height: 1.65;
    color: var(--coa-hero-muted);
    margin: 0;
  }

  /* ============ RELEASES ============ */
  .coa-index-releases {
    background: var(--coa-light-grey);
    color: var(--coa-text);
    padding: 6rem 2rem;
  }
  .coa-index-releases-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .coa-index-releases-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .coa-index-releases-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--coa-text);
  }
  .coa-index-releases-meta {
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-text-muted);
  }

  .coa-no-results {
    background: var(--coa-white);
    border: 1px solid var(--coa-border);
    border-radius: var(--coa-radius);
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  .coa-no-results p {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--coa-text);
  }
  .coa-no-results-hint {
    font-size: 0.85rem;
    color: var(--coa-text-muted) !important;
  }
  .coa-no-results code {
    font-family: var(--coa-mono);
    background: var(--coa-body-subtle);
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }
  .coa-no-results a {
    color: var(--coa-accent);
    text-decoration: underline;
  }

  /* Archive (REST API) search results — appear when local filter has 0 matches
   and a 3+ char query returns hits from /wp-json/wp/v2/coa?search=... */
  .coa-archive-results {
    display: none;
    width: 100%;
    margin-bottom: 2rem;
  }
  .coa-has-archive-results .coa-archive-results,
  .coa-index-document.coa-has-archive-results .coa-archive-results {
    display: block !important;
  }
  .coa-has-archive-results .coa-no-results,
  .coa-index-document.coa-has-archive-results .coa-no-results {
    display: none !important;
  }
  .coa-has-archive-results #coa-grid,
  .coa-index-document.coa-has-archive-results #coa-grid {
    display: none !important;
  }

  .coa-archive-results-status,
  .coa-archive-results-label {
    margin: 0 0 1.25rem;
    font-family: var(--coa-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-text-muted);
  }
  .coa-archive-results-loading .coa-archive-results-status::after {
    content: " ";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--coa-accent);
    margin-left: 0.4em;
    animation: coa-pulse 1s ease-in-out infinite;
    vertical-align: middle;
  }
  @keyframes coa-pulse {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
  }

  /* Archive search results — full cards matching the latest-releases grid.
   Now that ACF meta is registered for REST, we have all the fields needed
   (image, purity, lot, date, PDF) to render proper visual cards. */
  .coa-index-document .coa-archive-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (max-width: 960px) {
    .coa-index-document .coa-archive-results-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 640px) {
    .coa-index-document .coa-archive-results-grid {
      grid-template-columns: 1fr;
    }
  }

  .coa-index-document .coa-archive-card {
    background: var(--coa-card-bg);
    border: 1px solid var(--coa-border);
    border-radius: var(--coa-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
      border-color 0.2s,
      transform 0.2s,
      box-shadow 0.2s;
    margin: 0;
    padding: 0;
  }
  .coa-index-document .coa-archive-card:hover {
    border-color: rgba(109, 39, 119, 0.35);
    box-shadow: 0 8px 24px rgba(28, 16, 37, 0.06);
    transform: translateY(-2px);
  }

  .coa-index-document .coa-archive-card-media {
    position: relative;
    display: block;
    background: var(--coa-body-subtle);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    text-decoration: none;
  }
  .coa-index-document .coa-archive-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    margin: 0;
    border-radius: 0;
    transition: transform 0.4s ease;
  }
  .coa-index-document .coa-archive-card:hover .coa-archive-card-media img {
    transform: scale(1.02);
  }
  .coa-index-document .coa-archive-card-purity {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    background: var(--coa-white);
    color: var(--coa-text);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem;
    border-radius: var(--coa-radius);
    border: 1px solid var(--coa-border);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
  }
  .coa-index-document .coa-archive-card-purity::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ea86a;
    display: inline-block;
  }
  .coa-index-document .coa-archive-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-text-muted);
    background: repeating-linear-gradient(
      135deg,
      var(--coa-body-subtle) 0,
      var(--coa-body-subtle) 14px,
      #ece7ef 14px,
      #ece7ef 28px
    );
  }

  .coa-index-document .coa-archive-card-body {
    padding: 1.5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .coa-index-document .coa-archive-card-title {
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--coa-text);
  }
  .coa-index-document .coa-archive-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
  }
  .coa-index-document .coa-archive-card-meta p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--coa-text-muted);
    line-height: 1.4;
  }

  .coa-index-document .coa-archive-card-actions {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--coa-border);
    margin: 0;
    padding: 0;
  }
  .coa-index-document .coa-archive-card-btn {
    flex: 1 1 0;
    text-align: center;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 1rem 0.5rem;
    transition:
      color 0.18s,
      background 0.18s;
  }
  .coa-index-document .coa-archive-card-btn-primary {
    color: var(--coa-text);
  }
  .coa-index-document .coa-archive-card-btn-primary:hover {
    color: var(--coa-accent);
  }
  .coa-index-document .coa-archive-card-btn-ghost {
    color: var(--coa-text-muted);
  }
  .coa-index-document .coa-archive-card-btn-ghost:hover {
    color: var(--coa-text);
  }

  /* ============ KADENCE QUERY LOOP CARD STYLES ============
   Card visual styling only. We do NOT force grid on the wrapper — Kadence
   handles its own column layout via the block's "Columns" control. Forcing
   grid here would conflict with Kadence's nested wrapper structure and
   crush the cards into a single 1/3-width column on desktop. */

  .coa-index-document .coa-card {
    background: var(--coa-card-bg);
    border: 1px solid var(--coa-border);
    border-radius: var(--coa-radius);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    transition:
      border-color 0.2s,
      transform 0.2s,
      box-shadow 0.2s;
    padding: 0 !important;
  }
  .coa-index-document .coa-card:hover {
    border-color: rgba(109, 39, 119, 0.35);
    box-shadow: 0 8px 24px rgba(28, 16, 37, 0.06);
    transform: translateY(-2px);
  }

  .coa-index-document .coa-card .coa-card-media {
    position: relative;
    display: block;
    background: var(--coa-body-subtle);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    text-decoration: none;
  }
  .coa-index-document .coa-card .coa-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }
  .coa-index-document .coa-card:hover .coa-card-media img {
    transform: scale(1.02);
  }

  .coa-index-document .coa-card .coa-card-purity {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    background: var(--coa-white);
    color: var(--coa-text);
    font-family: var(--coa-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.6rem;
    border-radius: var(--coa-radius);
    border: 1px solid var(--coa-border);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .coa-index-document .coa-card .coa-card-purity::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ea86a;
    display: inline-block;
  }

  .coa-index-document .coa-card .coa-card-body {
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
  }
  .coa-index-document .coa-card .coa-card-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.005em;
    color: var(--coa-text);
  }
  .coa-index-document .coa-card .coa-card-meta {
    font-family: var(--coa-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--coa-text-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }
  .coa-index-document .coa-card .coa-card-meta-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coa-text);
    font-weight: 600;
  }
  .coa-index-document .coa-card .coa-card-meta-value {
    color: var(--coa-text-muted);
  }
  .coa-index-document .coa-card .coa-card-dot {
    color: var(--coa-border);
  }

  .coa-index-document .coa-card .coa-card-actions {
    display: flex;
    gap: 0;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--coa-border);
  }
  .coa-index-document .coa-card .coa-card-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-family: var(--coa-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.85rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition:
      color 0.18s,
      background 0.18s;
    border-radius: var(--coa-radius);
    color: var(--coa-text);
  }
  .coa-index-document .coa-card .coa-card-btn-primary {
    color: var(--coa-text);
  }
  .coa-index-document .coa-card .coa-card-btn-primary:hover {
    color: var(--coa-accent);
  }
  .coa-index-document .coa-card .coa-card-btn-ghost {
    color: var(--coa-text-muted);
  }
  .coa-index-document .coa-card .coa-card-btn-ghost:hover {
    color: var(--coa-text);
  }
  .coa-index-document .coa-card .coa-card-btn-icon {
    width: 12px;
    height: 12px;
  }

  /* ============ KADENCE OVERRIDES ============
   Kadence's Query Loop, Image, and Advanced Button blocks ship with their own
   styles that win on specificity. These rules force the COA card visuals back
   to the v6 design — equal-height cards, 4:3 cropped previews, ghost buttons. */

  /* 1. Equal-height cards so the action row aligns across the row.
      Kadence Query Card defaults to height:auto, which lets cards size to
      their content and produces uneven button placement. */
  .coa-index-document .coa-card,
  .coa-index-document article.coa-card,
  .coa-index-document .kb-query-card.coa-card,
  .coa-index-document .wp-block-kadence-query-card.coa-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Force the media wrapper to be a 4:3 cropped frame.
      Without this, COA scans render at their natural portrait ratio (very tall)
      and the cards become uneven. */
  .coa-index-document .coa-card .coa-card-media,
  .coa-index-document .coa-card a.coa-card-media,
  .coa-index-document .coa-card .wp-block-button.coa-card-media,
  .coa-index-document
    .coa-card
    .wp-block-button.coa-card-media
    .wp-block-button__link {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--coa-body-subtle) !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .coa-index-document .coa-card .coa-card-media .wp-block-image,
  .coa-index-document .coa-card .coa-card-media figure,
  .coa-index-document .coa-card .coa-card-media .kb-image-wrap,
  .coa-index-document .coa-card .coa-card-media .wp-block-kadence-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .coa-index-document .coa-card .coa-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 3. Body section grows to fill remaining card height so the button row
      sticks to the bottom of every card regardless of title length. */
  .coa-index-document .coa-card .coa-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 4. Meta line: force inline display so "Lot ... · Date ..." stays on one row.
      Kadence may wrap each ACF field in its own <p> with default margins —
      reset margins and let them flow inline. */
  .coa-index-document .coa-card .coa-card-meta,
  .coa-index-document .coa-card p.coa-card-meta {
    margin: 0 !important;
    display: block !important;
    font-family: var(--coa-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    color: var(--coa-text-muted) !important;
  }

  /* 5. Override Kadence Advanced Button default purple fill.
      We want flat ghost-style links inside .coa-card-actions, sharing a
      thin top border that visually unifies the two CTAs. */
  .coa-index-document .coa-card .coa-card-actions {
    display: flex !important;
    gap: 0 !important;
    margin: 0 !important;
    padding-top: 0.9rem !important;
    border-top: 1px solid var(--coa-border) !important;
  }

  .coa-index-document .coa-card .coa-card-btn,
  .coa-index-document .coa-card a.coa-card-btn,
  .coa-index-document .coa-card .wp-block-button.coa-card-btn,
  .coa-index-document
    .coa-card
    .wp-block-button
    .wp-block-button__link.coa-card-btn,
  .coa-index-document .coa-card .kb-button.coa-card-btn,
  .coa-index-document
    .coa-card
    .wp-block-kadence-advancedbtn.coa-card-btn
    .kb-btn-style-fill {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.85rem 0.5rem !important;
    font-family: var(--coa-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .coa-index-document .coa-card .coa-card-btn-primary,
  .coa-index-document .coa-card a.coa-card-btn-primary,
  .coa-index-document
    .coa-card
    .wp-block-button.coa-card-btn-primary
    .wp-block-button__link {
    color: var(--coa-text) !important;
  }
  .coa-index-document .coa-card .coa-card-btn-primary:hover,
  .coa-index-document .coa-card a.coa-card-btn-primary:hover,
  .coa-index-document
    .coa-card
    .wp-block-button.coa-card-btn-primary
    .wp-block-button__link:hover {
    color: var(--coa-accent) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .coa-index-document .coa-card .coa-card-btn-ghost,
  .coa-index-document .coa-card a.coa-card-btn-ghost,
  .coa-index-document
    .coa-card
    .wp-block-button.coa-card-btn-ghost
    .wp-block-button__link {
    color: var(--coa-text-muted) !important;
  }
  .coa-index-document .coa-card .coa-card-btn-ghost:hover,
  .coa-index-document .coa-card a.coa-card-btn-ghost:hover,
  .coa-index-document
    .coa-card
    .wp-block-button.coa-card-btn-ghost
    .wp-block-button__link:hover {
    color: var(--coa-text) !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ============ FIX: KADENCE QUERY LOOP STRUCTURE OVERRIDES ============
   When you add the "coa-card" class to Kadence's Query Card block, the class
   ends up on the OUTER GRID WRAPPER (which contains all loop items), not on
   each individual card. Each card is actually a <li class="kb-query-item">.
   These rules target those <li>s for the per-card visuals, and reset any
   card-like styling on the wrapper. */

  /* The wrapper (.coa-card here = grid container, not a card). Strip card
   chrome so it just acts as a layout container. */
  .coa-index-document .coa-card,
  .coa-index-document .wp-block-kadence-query-card.coa-card {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    display: block !important;
  }
  .coa-index-document .coa-card:hover,
  .coa-index-document .wp-block-kadence-query-card.coa-card:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Each <li> IS the actual card. Kadence emits class "kb-query-item" + the
   post type class "type-coa" on every loop item. Apply card chrome here. */
  .coa-index-document .kb-query-grid-wrap {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .coa-index-document .kb-query-item,
  .coa-index-document li.kb-query-item,
  .coa-index-document li.kb-query-item.kb-query-block-post,
  .coa-index-document .kb-query-item.type-coa {
    background: var(--coa-card-bg) !important;
    border: 1px solid var(--coa-border) !important;
    border-radius: var(--coa-radius) !important;
    overflow: hidden !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition:
      border-color 0.2s,
      transform 0.2s,
      box-shadow 0.2s !important;
  }
  .coa-index-document .kb-query-item:hover {
    border-color: rgba(109, 39, 119, 0.35) !important;
    box-shadow: 0 8px 24px rgba(28, 16, 37, 0.06) !important;
    transform: translateY(-2px) !important;
  }

  /* The Kadence Column directly inside the <li> — Kadence wraps everything in
   another column (.kt-inside-inner-col). Make it a flex column too so the
   action row can use margin-top:auto to stick to the bottom. */
  .coa-index-document .kb-query-item > .wp-block-kadence-column,
  .coa-index-document
    .kb-query-item
    > .wp-block-kadence-column
    > .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  /* The actions row sticks to the bottom of every card */
  .coa-index-document .kb-query-item .coa-card-actions,
  .coa-index-document .kb-query-item .kb-row-layout-wrap.coa-card-actions {
    margin-top: auto !important;
  }

  /* Kadence Advanced Button containers should sit side-by-side in the
   actions row. The inner column gets two .wp-block-kadence-advancedbtn
   children — flex them. */
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-column
    > .kt-inside-inner-col {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-advancedbtn {
    flex: 1 1 0 !important;
    margin: 0 !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-advancedbtn
    .kb-button {
    width: 100% !important;
  }

  /* Strip the inner-col padding on the body and media so the card edges go to 0 */
  .coa-index-document .kb-query-item .coa-card-media > .kt-inside-inner-col {
    padding: 0 !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-body
    > .kt-row-column-wrap
    > .wp-block-kadence-column
    > .kt-inside-inner-col {
    padding: 1.4rem 1.5rem !important;
  }

  /* ============ FINAL STYLING POLISH ============
   Targets the remaining visual issues after the structure is working:
   1. Force the COA preview image to a 4:3 cropped frame (top-aligned)
   2. Tighten the lot + reported_date meta line into a compact stack
   3. Force the buttons to share the action row equally and render flat */

  /* 1. Media area — clamp to 4:3, image fills via object-fit cover */
  .coa-index-document .kb-query-item .coa-card-media {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--coa-body-subtle) !important;
  }
  .coa-index-document .kb-query-item .coa-card-media > .kt-inside-inner-col,
  .coa-index-document .kb-query-item .coa-card-media .kt-inside-inner-col {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .coa-index-document .kb-query-item .coa-card-media figure,
  .coa-index-document .kb-query-item .coa-card-media .wp-block-kadence-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .coa-index-document .kb-query-item .coa-card-media figure img,
  .coa-index-document .kb-query-item .coa-card-media img.kb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  /* Re-position the purity badge so it overlays the image instead of pushing it down */
  .coa-index-document .kb-query-item .coa-card-purity {
    position: absolute !important;
    top: 0.85rem !important;
    left: 0.85rem !important;
    z-index: 2 !important;
    margin: 0 !important;
  }
  /* Section link overlay covers the whole 4:3 frame */
  .coa-index-document .kb-query-item .coa-card-media .kb-section-link-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
  }

  /* 2. Meta line — force tight inline layout, no big gap between lot and date.
      Kadence's group block with is-layout-flex sometimes adds a 1.5rem gap. */
  .coa-index-document .kb-query-item .coa-card-meta,
  .coa-index-document .kb-query-item .wp-block-group.coa-card-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .coa-index-document .kb-query-item .coa-card-meta > p,
  .coa-index-document
    .kb-query-item
    .coa-card-meta
    .wp-block-kadence-advancedheading {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--coa-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    color: var(--coa-text-muted) !important;
    line-height: 1.4 !important;
  }

  /* 3. Action row — buttons fill the row equally, render as flat ghost links
      with a top border separating them from the body. */
  .coa-index-document .kb-query-item .coa-card-actions {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--coa-border) !important;
  }
  .coa-index-document .kb-query-item .coa-card-actions .kt-row-column-wrap {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-column {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-column
    > .kt-inside-inner-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-advancedbtn {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    .wp-block-kadence-advancedbtn
    .kb-button,
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    a.kb-button.coa-card-btn {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 0.5rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--coa-text) !important;
    font-family: var(--coa-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }
  .coa-index-document .kb-query-item .coa-card-actions a.coa-card-btn-primary {
    color: var(--coa-text) !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    a.coa-card-btn-primary:hover {
    color: var(--coa-accent) !important;
    background: transparent !important;
  }
  .coa-index-document .kb-query-item .coa-card-actions a.coa-card-btn-ghost {
    color: var(--coa-text-muted) !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    a.coa-card-btn-ghost:hover {
    color: var(--coa-text) !important;
    background: transparent !important;
  }
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    a.kb-button
    .kt-btn-inner-text {
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
  }

  /* ============ STRIP NESTED KADENCE PADDING ============
   Kadence Row Layout + Column blocks each ship with their own default padding.
   When stacked (Row Layout wrap > kt-row-column-wrap > Column > inner-col),
   that's 4 layers of padding adding up to ~70px around the actual content,
   which is what's creating the giant empty zone in the body. Zero them all
   out, then apply padding ONCE on the .coa-card-body element itself. */

  /* Outer column wrapping the whole card — image, body, and actions all need
   to sit edge-to-edge of the card. */
  .coa-index-document .kb-query-item > .wp-block-kadence-column,
  .coa-index-document
    .kb-query-item
    > .wp-block-kadence-column
    > .kt-inside-inner-col {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Body — strip every layer of default Kadence padding from INNER wrappers
   (not the body itself), then apply our own padding on .coa-card-body. */
  .coa-index-document .kb-query-item .coa-card-body > .kt-row-column-wrap,
  .coa-index-document
    .kb-query-item
    .coa-card-body
    > .kt-row-column-wrap
    > .wp-block-kadence-column,
  .coa-index-document
    .kb-query-item
    .coa-card-body
    > .kt-row-column-wrap
    > .wp-block-kadence-column
    > .kt-inside-inner-col {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .coa-index-document .kb-query-item .coa-card-body,
  .coa-index-document .kb-query-item .coa-card-body.kb-row-layout-wrap,
  .coa-index-document
    .kb-query-item
    div.coa-card-body.wp-block-kadence-rowlayout {
    padding: 1.5rem !important;
    margin: 0 !important;
  }

  /* The meta wrapper has `alignfull` which makes WordPress span it 100vw —
   that's why the inspector showed it at 2067px wide. Clamp to its parent. */
  .coa-index-document .kb-query-item .coa-card-meta,
  .coa-index-document .kb-query-item .coa-card-meta.alignfull,
  .coa-index-document .kb-query-item div.wp-block-group.alignfull.coa-card-meta,
  .coa-index-document .kb-query-item .wp-block-group.coa-card-meta.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  /* Title — kill default heading margins so the meta sits right below */
  .coa-index-document .kb-query-item .coa-card-title,
  .coa-index-document .kb-query-item h3.coa-card-title {
    margin: 0 0 0.85rem 0 !important;
    padding: 0 !important;
  }

  /* Action row — strip Kadence's nested padding too, keep just the top border */
  .coa-index-document .kb-query-item .coa-card-actions.kb-row-layout-wrap,
  .coa-index-document .kb-query-item .coa-card-actions > .kt-row-column-wrap,
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    > .kt-row-column-wrap
    > .wp-block-kadence-column,
  .coa-index-document
    .kb-query-item
    .coa-card-actions
    > .kt-row-column-wrap
    > .wp-block-kadence-column
    > .kt-inside-inner-col {
    padding: 0 !important;
    margin: 0 !important;
  }
  .coa-index-document .kb-query-item .coa-card-actions {
    border-top: 1px solid var(--coa-border) !important;
  }

  /* ============ EYEBROW + HEADING SPACING ============
   Kadence/theme defaults inject ~60px top-margin on headings, which creates a
   huge gap between the small mono eyebrow and the serif heading. These rules
   force a consistent, tight rhythm:  eyebrow ‚Üí 0.75rem gap ‚Üí heading. */

  /* Eyebrows — small mono uppercase labels */
  .coa-index-document .coa-index-eyebrow,
  .coa-index-document span.coa-index-eyebrow {
    margin: 0 0 0.6rem 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }

  /* Breadcrumb (Home / Verify COA) — was 2.5rem bottom, way too much */
  .coa-index-document .coa-index-breadcrumb,
  .coa-index-document .coa-index-breadcrumb ol {
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
  }

  /* All section/page headings — strip top-margin so they sit right below the
   eyebrow with only the eyebrow's bottom margin separating them. */
  .coa-index-document .coa-index-title,
  .coa-index-document h1.coa-index-title,
  .coa-index-document .coa-index-lookup-title,
  .coa-index-document h2.coa-index-lookup-title,
  .coa-index-document .coa-index-method-title,
  .coa-index-document h2.coa-index-method-title,
  .coa-index-document .coa-index-releases-title,
  .coa-index-document h2.coa-index-releases-title,
  .coa-index-document .coa-index-faq-title,
  .coa-index-document h2.coa-index-faq-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Tighten the bottom margin on each heading too — keep enough breathing room
   for the lede paragraph below, but no excessive gap. */
  .coa-index-document .coa-index-title {
    margin-bottom: 1.5rem !important;
  }
  .coa-index-document .coa-index-lookup-title {
    margin-bottom: 1.25rem !important;
  }
  .coa-index-document .coa-index-method-title {
    margin-bottom: 1.5rem !important;
  }
  .coa-index-document .coa-index-releases-title {
    margin-bottom: 0 !important;
  }
  .coa-index-document .coa-index-faq-title {
    margin-bottom: 1.25rem !important;
  }

  /* ============ SEARCH STATE: SEPARATE LATEST FROM SEARCH RESULTS ============
   Bug 1: card filter wasn't hiding cards because `display: flex !important`
          on `.kb-query-item` outranked the `[hidden]` rule on specificity.
   Bug 2: when archive results showed, the user still saw the 12 latest cards
          underneath, making it look like the search results just got
          appended. The local grid should be hidden in that state. */

  /* Higher-specificity rule that always wins over the per-card display:flex.
   The `li` element selector + 4 attribute/class selectors gives this a
   specificity of 0,0,4,1 which beats any `.coa-index-document .kb-query-item`
   variant. */
  .coa-index-document li.kb-query-item[hidden],
  .coa-index-document li.kb-query-item.kb-query-block-post[hidden],
  .coa-index-document li.kb-query-item.type-coa[hidden],
  .coa-index-document .kb-query-grid-wrap > li[hidden] {
    display: none !important;
  }

  /* When archive results render (user searched something not in the latest 12),
   hide the local grid + meta + load-more entirely so only the search results
   panel is visible. The grid would otherwise sit below the archive panel
   showing irrelevant non-matching cards. */
  .coa-index-document.coa-has-archive-results .wp-block-kadence-query,
  .coa-index-document.coa-has-archive-results .kb-query-loop,
  .coa-index-document.coa-has-archive-results .kb-query-grid-wrap,
  .coa-index-document.coa-has-archive-results
    .wp-block-kadence-advanced-query-loop,
  .coa-index-document.coa-has-archive-results .coa-index-load-wrap,
  .coa-index-document.coa-has-archive-results .coa-index-releases-meta {
    display: none !important;
  }

  /* Same treatment when in pure no-results state (zero local, zero archive). */
  .coa-index-document.coa-has-no-results .wp-block-kadence-query,
  .coa-index-document.coa-has-no-results .wp-block-kadence-advanced-query-loop,
  .coa-index-document.coa-has-no-results .coa-index-load-wrap,
  .coa-index-document.coa-has-no-results .coa-index-releases-meta {
    display: none !important;
  }

  /* ============ QUERY LOOP + LOAD-MORE LAYOUT ============
     Because WP block normalization closes Block 1's `.coa-index-document`
     early, the Kadence Query Loop and the load-more link end up as siblings
     of it. The wrapper-fallback JS tags the smallest common ancestor with
     `coa-index-document`, but in practice that ancestor is the theme's
     `.entry-content-wrap` — meaning the query loop is a GRANDCHILD (via
     `.entry-content`), not a direct child. So the previous `>` (direct-
     child) selectors never matched. Switch to descendant combinators, and
     scope with `:not(.coa-card)` on the query-loop target so we don't
     accidentally match the inner Kadence Query Card wrapper which shares
     the `wp-block-kadence-query*` prefix.

     Kadence's block generates instance-scoped CSS on the outer wrapper,
     so !important is still required to win against it. */
  .coa-index-document .wp-block-kadence-query:not(.coa-card),
  .coa-index-document .wp-block-kadence-advanced-query-loop,
  .coa-index-document .coa-index-load-wrap {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    float: none !important;
  }

  .coa-index-document .coa-index-releases {
    padding-bottom: 0 !important;
  }

  .coa-index-document .wp-block-kadence-query:not(.coa-card),
  .coa-index-document .wp-block-kadence-advanced-query-loop {
    padding-bottom: 3rem !important;
  }

  @media (max-width: 640px) {
    .coa-index-document .wp-block-kadence-query:not(.coa-card),
    .coa-index-document .wp-block-kadence-advanced-query-loop,
    .coa-index-document .coa-index-load-wrap {
      padding-left: 1.25rem !important;
      padding-right: 1.25rem !important;
    }
  }

  .coa-index-load-wrap {
    text-align: center;
    margin-top: 3.5rem;
    padding-bottom: 6rem;
  }
  .coa-index-load {
    display: inline-block;
    font-family: var(--coa-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coa-text);
    text-decoration: none;
    padding: 1rem 2rem;
    border: 1px solid var(--coa-text);
    border-radius: var(--coa-radius);
    transition: all 0.18s;
  }
  .coa-index-load:hover {
    background: var(--coa-text);
    color: var(--coa-white);
  }

  /* ============ FAQ ============ */
  .coa-index-faq {
    background: var(--coa-white);
    color: var(--coa-text);
    padding: 6rem 2rem;
    border-top: 1px solid var(--coa-border);
  }
  .coa-index-faq-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 5rem;
    align-items: start;
  }

  .coa-index-faq-title {
    font-family: var(--coa-serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    color: var(--coa-text);
  }
  .coa-index-faq-help {
    font-family: inherit;
    font-size: inherit;
    color: var(--coa-text-muted);
    margin: 0;
  }
  .coa-index-faq-help a {
    color: var(--coa-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }

  .coa-index-faq-list {
    border-top: 1px solid var(--coa-border);
  }
  .coa-index-faq-item {
    border-bottom: 1px solid var(--coa-border);
  }
  .coa-index-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--coa-text);
  }
  .coa-index-faq-item summary::-webkit-details-marker {
    display: none;
  }
  .coa-index-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 14px;
    height: 14px;
  }
  .coa-index-faq-toggle::before,
  .coa-index-faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--coa-text);
    transform: translateY(-50%);
    transition: transform 0.2s;
  }
  .coa-index-faq-toggle::after {
    transform: translateY(-50%) rotate(90deg);
  }
  .coa-index-faq-item[open] .coa-index-faq-toggle::after {
    transform: translateY(-50%) rotate(0);
  }
  .coa-index-faq-body {
    padding: 0 0 1.6rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--coa-text-muted);
    max-width: 64ch;
  }
  .coa-index-faq-body p {
    margin: 0;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 960px) {
    .coa-index-lookup-inner,
    .coa-index-method-top,
    .coa-index-faq-inner {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .coa-index-method-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .coa-index-method-card:nth-child(2) {
      border-right: 0;
    }
    .coa-index-method-card:nth-child(1),
    .coa-index-method-card:nth-child(2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  @media (max-width: 640px) {
    .coa-index-hero,
    .coa-index-lookup,
    .coa-index-method,
    .coa-index-releases,
    .coa-index-faq {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .coa-index-hero {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .coa-index-lookup {
      padding-bottom: 4rem;
    }
    .coa-index-method {
      padding: 4rem 1.25rem;
    }
    .coa-index-releases {
      padding: 4rem 1.25rem;
    }
    .coa-index-faq {
      padding: 4rem 1.25rem;
    }

    .coa-index-form {
      flex-direction: column;
    }
    .coa-index-input {
      padding: 1.1rem 1.25rem;
    }
    .coa-index-submit {
      padding: 1rem;
      justify-content: center;
    }

    .coa-index-method-grid {
      grid-template-columns: 1fr;
    }
    .coa-index-method-card {
      border-right: 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .coa-index-method-card:last-child {
      border-bottom: 0;
    }
  }


/* Pagination Extra Styles */
.wp-block-kadence-query-pagination .nav-links svg { width: 1em; height: 1em; }
.wp-block-kadence-query-pagination nav { justify-content: center; display: flex; }
.wp-block-kadence-query-pagination .pagination .page-numbers svg { pointer-events: none; }
.wp-block-kadence-query-pagination .nav-links { display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.wp-block-kadence-query-pagination .nav-links a.page-numbers,
.wp-block-kadence-query-pagination .nav-links span.page-numbers {
  font-family: var(--coa-mono, monospace);
  font-size: 0.85rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--coa-border, #e8e4ec);
  border-radius: var(--coa-radius, 4px);
  color: var(--coa-text, #1c1025);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  transition: all 0.2s;
}
.wp-block-kadence-query-pagination .nav-links a.page-numbers:hover,
.wp-block-kadence-query-pagination .nav-links span.page-numbers.current {
  background: var(--coa-text, #1c1025);
  color: var(--coa-white, #fefefe);
  border-color: var(--coa-text, #1c1025);
}


/* ============================================================
   FLATSOME UX BUILDER & EXPLICIT GRID SUPPORT FOR COA
   ============================================================ */

/* Root & Global Theme Variables */
:root,
body,
.coa-index-document {
  --coa-black: #1c1025;
  --coa-dark-purple: #301639;
  --coa-purple: #6d2777;
  --coa-light-grey: #fafafa;
  --coa-white: #fefefe;
  --coa-hero-bg: #1c1025;
  --coa-hero-text: #fefefe;
  --coa-hero-muted: rgba(254, 254, 254, 0.55);
  --coa-hero-accent: #b071bd;
  --coa-body-bg: #fafafa;
  --coa-body-subtle: #f2f0f4;
  --coa-card-bg: #ffffff;
  --coa-text: #1c1025;
  --coa-text-muted: #6b6b6b;
  --coa-accent: #6d2777;
  --coa-border: #e8e4ec;
  --coa-mono: inherit;
  --coa-serif: inherit;
  --coa-radius: 4px;
}

/* Container inside UX Builder */
.col .coa-index-document,
.col-inner .coa-index-document,
.coa-archive-ux-wrap,
.coa-posts-ux-wrap,
.coa-lookup-ux-wrap,
.coa-method-ux-wrap,
.coa-faq-ux-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: transparent !important;
}

/* Explicit 3-Column Responsive Grid */
.coa-index-grid,
ul.coa-index-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 3rem 0 !important;
  width: 100% !important;
}
.coa-index-grid.coa-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.coa-index-grid.coa-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.coa-index-grid.coa-cols-1 {
  grid-template-columns: 1fr !important;
}
@media (max-width: 991px) {
  .coa-index-grid,
  ul.coa-index-grid,
  .coa-index-grid.coa-cols-4,
  .coa-index-grid.coa-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}
@media (max-width: 640px) {
  .coa-index-grid,
  ul.coa-index-grid,
  .coa-index-grid.coa-cols-4,
  .coa-index-grid.coa-cols-3,
  .coa-index-grid.coa-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* Card Styling inside Flatsome / UX Builder */
.coa-index-grid .coa-card,
li.coa-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e8e4ec !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.coa-index-grid .coa-card:hover,
li.coa-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(28, 16, 37, 0.08) !important;
}

.coa-card-media {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f8f6fa !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.coa-card-media figure,
.coa-card-media img,
.coa-card-media .kb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
}
.coa-card-purity {
  position: absolute !important;
  top: 0.85rem !important;
  left: 0.85rem !important;
  z-index: 2 !important;
  background: #ffffff !important;
  color: #1c1025 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 4px !important;
  border: 1px solid #e8e4ec !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.coa-card-purity::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #2EA86A !important;
  display: inline-block !important;
}
.kb-section-link-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

.coa-card-body {
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  flex: 1 1 auto !important;
  background: #ffffff !important;
}
.coa-card-title {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  color: #1c1025 !important;
}
.coa-card-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  margin: 0 !important;
}
.coa-card-meta p {
  margin: 0 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.03em !important;
  color: #6b6b6b !important;
  line-height: 1.4 !important;
}

.coa-card-actions {
  border-top: 1px solid #e8e4ec !important;
  display: flex !important;
  margin-top: auto !important;
  width: 100% !important;
}
.coa-card-actions .wp-block-kadence-column > .kt-inside-inner-col,
.coa-card-actions {
  display: flex !important;
  width: 100% !important;
}
.coa-card-actions .wp-block-kadence-advancedbtn {
  flex: 1 1 50% !important;
  width: 50% !important;
}
.coa-card-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.85rem 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  transition: color 0.18s, background 0.18s !important;
}
.coa-card-btn-primary {
  color: #1c1025 !important;
  border-right: 1px solid #e8e4ec !important;
}
.coa-card-btn-primary:hover {
  color: #6d2777 !important;
  background: rgba(109, 39, 119, 0.04) !important;
}
.coa-card-btn-ghost {
  color: #6b6b6b !important;
}
.coa-card-btn-ghost:hover {
  color: #1c1025 !important;
  background: rgba(28, 16, 37, 0.04) !important;
}


/* ============================================================
   HERO & BATCH LOOKUP SECTION (Matching protidehealth.com)
   ============================================================ */

/* HERO */
.coa-index-hero {
  background: var(--coa-hero-bg, #1c1025);
  color: var(--coa-hero-text, #fefefe);
  padding: 4rem 2rem 5rem;
}
.coa-index-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.coa-index-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  font-family: var(--coa-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
}
.coa-index-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.coa-index-breadcrumb a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.coa-index-breadcrumb a:hover {
  color: var(--coa-hero-accent, #b071bd);
}
.coa-index-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.coa-index-title {
  font-family: var(--coa-serif, serif);
  font-weight: 500;
  font-size: clamp(2.75rem, 6.5vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 2rem;
  color: var(--coa-hero-text, #fefefe);
  max-width: 14ch;
}
.coa-index-title em {
  font-style: italic;
  color: var(--coa-hero-accent, #b071bd);
  font-weight: 500;
}

.coa-index-lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
  max-width: 52ch;
  margin: 0;
}

/* LOOKUP */
.coa-index-lookup {
  background: var(--coa-hero-bg, #1c1025);
  color: var(--coa-hero-text, #fefefe);
  padding: 0 2rem 5rem;
}
.coa-index-lookup-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: 4rem;
  align-items: start;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.coa-index-eyebrow {
  display: inline-block;
  font-family: var(--coa-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coa-text-muted, #6b6b6b);
  margin-bottom: 1.25rem;
}
.coa-index-eyebrow-dark {
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
}

.coa-index-lookup-title {
  font-family: var(--coa-serif, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  color: var(--coa-hero-text, #fefefe);
}

.coa-index-lookup-help {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
  margin: 0 0 1rem;
}
.coa-index-lookup-help code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  color: var(--coa-hero-accent, #b071bd);
}

/* Example chips */
.coa-index-examples {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow: visible;
}
.coa-index-example {
  font-family: var(--coa-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  background: transparent;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--coa-radius, 4px);
  padding: 0.3rem 0.55rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.18s;
  cursor: pointer;
}
.coa-index-example:hover {
  color: var(--coa-hero-text, #fefefe);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

/* Search form — unified single-box look */
.coa-index-document .coa-index-form,
.coa-index-document form.coa-index-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--coa-radius, 4px) !important;
  overflow: hidden !important;
  transition: border-color 0.2s, background 0.2s;
  box-shadow: none !important;
}
.coa-index-document .coa-index-form:focus-within {
  border-color: rgba(176, 113, 189, 0.6) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}

.coa-index-document .coa-index-input,
.coa-index-document input.coa-index-input,
.coa-index-document input[type="search"].coa-index-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 1.1rem 1.25rem !important;
  font-family: var(--coa-mono, monospace) !important;
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  color: var(--coa-hero-text, #fefefe) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  height: auto !important;
}
.coa-index-document .coa-index-input::placeholder {
  color: rgba(254, 254, 254, 0.4) !important;
  opacity: 1 !important;
}
.coa-index-document .coa-index-input:focus {
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.coa-index-document .coa-index-input::-webkit-search-cancel-button,
.coa-index-document .coa-index-input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.coa-index-document .coa-index-submit,
.coa-index-document button.coa-index-submit {
  flex-shrink: 0 !important;
  background: #6d2777 !important;
  background-color: #6d2777 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 1.4rem !important;
  font-family: var(--coa-mono, monospace) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  transition: background 0.18s;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1 !important;
}
.coa-index-document .coa-index-submit:hover {
  background: #b071bd !important;
  background-color: #b071bd !important;
  color: #ffffff !important;
}
.coa-index-document .coa-index-submit-arrow {
  width: 14px !important;
  height: 14px !important;
}

/* SEARCH DROPDOWN */
.coa-index-search-wrap {
  position: relative;
}
.coa-index-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 99;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
  background: var(--coa-dark-purple, #301639);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--coa-radius, 4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.coa-index-suggestions[hidden] {
  display: none;
}
.coa-index-suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: calc(var(--coa-radius, 4px) - 1px);
  cursor: pointer;
  color: var(--coa-hero-text, #fefefe);
  list-style: none;
}
.coa-index-suggestion-name {
  font-family: var(--coa-serif, serif);
  font-size: 0.95rem;
}
.coa-index-suggestion-name mark {
  background: none;
  color: var(--coa-hero-accent, #b071bd);
  font-weight: 600;
}
.coa-index-suggestion-meta {
  flex-shrink: 0;
  font-family: var(--coa-mono, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
}
.coa-index-suggestion:hover,
.coa-index-suggestion.is-active {
  background: rgba(255, 255, 255, 0.08);
}
.coa-index-suggestion-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--coa-hero-muted, rgba(254, 254, 254, 0.55));
  cursor: default;
}
.coa-index-suggestion-empty a {
  color: var(--coa-hero-accent, #b071bd);
  text-decoration: underline;
}

/* Flatsome UX container adjustments */
.coa-library-hero-section {
  background-color: #1c1025 !important;
}
.coa-library-hero-section .row {
  max-width: 100% !important;
  margin: 0 !important;
}
.coa-library-hero-section .col {
  padding: 0 !important;
}
.coa-library-hero-section .col-inner {
  padding: 0 !important;
}

@media (max-width: 960px) {
  .coa-index-lookup-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .coa-index-hero,
  .coa-index-lookup {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .coa-index-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .coa-index-lookup {
    padding-bottom: 4rem;
  }
  .coa-index-form {
    flex-direction: row !important;
  }
  .coa-index-input {
    padding: 0.9rem 1rem !important;
    font-size: 0.9rem !important;
  }
  .coa-index-submit {
    padding: 0 1rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
  }
  .coa-index-submit-arrow {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ============================================================
   FLATSOME NATIVE UX BUILDER ELEMENTS: METHODOLOGY & FAQ
   ============================================================ */

/* Testing Methodology - Native Flatsome Section & Columns */
.coa-library-method-section {
  background: var(--coa-black) !important;
  color: var(--coa-hero-text) !important;
}
.coa-library-method-section .row {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.coa-index-method-top-row {
  align-items: center;
  margin-bottom: 3.5rem !important;
}
.coa-index-method-steps-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 2.5rem !important;
}
.coa-index-method-col {
  padding: 2.25rem 1.75rem !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.coa-index-method-col:last-child {
  border-right: 0 !important;
}
@media (max-width: 849px) {
  .coa-index-method-col {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .coa-index-method-col:last-child {
    border-bottom: none !important;
  }
}
.coa-index-method-col .coa-index-method-num {
  display: block;
  font-family: var(--coa-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--coa-hero-accent);
  margin-bottom: 1.5rem;
}
.coa-index-method-col .coa-index-method-card-title {
  font-family: var(--coa-serif);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.85rem;
  color: var(--coa-hero-text);
}
.coa-index-method-col p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--coa-hero-muted);
  margin: 0;
}

/* Common Questions - Flatsome Native Accordion */
.coa-library-faq-section {
  background: var(--coa-surface) !important;
  color: var(--coa-text) !important;
}
.coa-library-faq-section .row {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.coa-flatsome-accordion {
  border-top: 1px solid var(--coa-border) !important;
  margin-bottom: 0 !important;
}
.coa-flatsome-accordion .accordion-item {
  border-bottom: 1px solid var(--coa-border) !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.coa-flatsome-accordion .accordion-title {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.4rem 0 !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--coa-text) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.coa-flatsome-accordion .accordion-title:hover {
  color: var(--coa-accent) !important;
}
.coa-flatsome-accordion .accordion-title span {
  flex: 1 1 auto !important;
  display: inline-block !important;
  order: 1 !important;
  padding-right: 1.5rem !important;
}
.coa-flatsome-accordion .accordion-title button.toggle,
.coa-flatsome-accordion .accordion-title .toggle {
  position: static !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--coa-text) !important;
  font-size: 0.9rem !important;
  opacity: 0.7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  width: auto !important;
}
.coa-flatsome-accordion .accordion-title.active .toggle i {
  transform: rotate(180deg) !important;
  transition: transform 0.2s ease !important;
}
.coa-flatsome-accordion .accordion-title:not(.active) .toggle i {
  transform: rotate(0deg) !important;
  transition: transform 0.2s ease !important;
}
.coa-flatsome-accordion .accordion-inner {
  padding: 0 0 1.6rem !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--coa-text-muted) !important;
  background: transparent !important;
  border: none !important;
  max-width: 64ch !important;
}
.coa-flatsome-accordion .accordion-inner p {
  margin: 0 !important;
  color: var(--coa-text-muted) !important;
}