/* ============================================================
   Organic certification pages (Views/Certification/*).
   Loaded before spice-redesign.css, so anything overriding a shared class
   is prefixed with .cert-bg to win the cascade.
   ============================================================ */
.cert-bg {
  --ct-line: #e4e1d7;
  --ct-radius: var(--sm-radius-lg);
  --ct-shadow: 0 1px 2px rgba(16, 22, 20, 0.04), 0 6px 20px rgba(16, 22, 20, 0.05);
  background: var(--sm-cream);
  padding: 2em 0 3.5em;
  color: var(--sm-text);
}
.cert-bg a:focus-visible,
.cert-bg button:focus-visible { outline: 2px solid var(--sm-green); outline-offset: 2px; }

.cert-back {
  display: inline-flex; align-items: center; gap: 0.3em; margin-bottom: 1em;
  font-size: 0.88rem; font-weight: 600; color: var(--sm-green); text-decoration: none;
}
.cert-back svg { width: 16px; height: 16px; }
.cert-back:hover { color: var(--sm-green-hover); text-decoration: underline; text-underline-offset: 3px; }

.cert-head { max-width: 72ch; }
.cert-title { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--sm-text); text-wrap: balance; }
.cert-lede { margin: 0.6em 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--sm-text-muted); }

/* Key facts */
.cert-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85em; margin: 1.75em 0 0;
}
.cert-fact { margin: 0; padding: 0.9em 1.1em; background: #fff; border: 1px solid var(--ct-line); border-radius: var(--sm-radius-md); }
.cert-fact dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sm-text-muted-2); }
.cert-fact dd { margin: 0.3em 0 0; font-size: 1.02rem; font-weight: 700; color: var(--sm-text); font-variant-numeric: tabular-nums; }

/* Document cards on the overview */
.cert-cards { display: grid; gap: 1.25em; margin-top: 1.75em; }
.cert-card {
  display: flex; flex-direction: column; gap: 0.6em; padding: 1.5em;
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
}
.cert-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #edf5f0; color: var(--sm-green); }
.cert-card-icon svg { width: 22px; height: 22px; }
.cert-card-title { margin: 0.2em 0 0; font-size: 1.15rem; font-weight: 700; color: var(--sm-text); }
.cert-card-text { margin: 0; color: var(--sm-text-muted); line-height: 1.65; flex: 1; }
.cert-card-actions { display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 0.5em; }

.cert-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; padding: 0.7em 1.35em;
  border: 1px solid transparent; border-radius: var(--sm-radius-pill); cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cert-btn svg { flex: none; width: 16px; height: 16px; }
.cert-btn--primary { background: var(--sm-green); color: #fff; }
.cert-btn--primary:hover { background: var(--sm-green-hover); color: #fff; }
.cert-btn--ghost { background: #fff; border-color: #d5ddd8; color: var(--sm-text); }
.cert-btn--ghost:hover { background: #edf5f0; border-color: var(--sm-green); color: var(--sm-green); }

.cert-note { margin: 1.75em 0 0; max-width: 72ch; font-size: 0.92rem; line-height: 1.7; color: var(--sm-text-muted); }
.cert-note a { color: var(--sm-green); font-weight: 600; }
.cert-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The document itself */
.cert-doc {
  max-width: 860px; margin: 1.75em auto 0; padding: 2.25em;
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
}
.cert-doc-ref { margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--sm-text-muted-2); word-break: break-all; }
.cert-doc-title {
  margin: 0.8em 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--sm-green); text-align: center;
}
.cert-doc-sub { margin: 0.3em 0 0; text-align: center; color: var(--sm-text-muted); font-size: 0.95rem; }
.cert-doc-rule { height: 1px; margin: 1.5em 0; background: var(--ct-line); border: 0; }
.cert-operator { margin: 0; text-align: center; font-style: normal; line-height: 1.7; }
.cert-operator .cert-operator-name { display: block; font-size: 1.2rem; font-weight: 700; color: var(--sm-text); }
.cert-operator span { color: var(--sm-text-muted); }
.cert-statement { margin: 0 0 1.1em; line-height: 1.75; color: var(--sm-text); }
.cert-statement:last-child { margin-bottom: 0; }
.cert-statement a { color: var(--sm-green); font-weight: 600; }
.cert-dl { display: grid; gap: 0.75em; margin: 0; }
.cert-dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1.5em; padding-bottom: 0.75em; border-bottom: 1px solid var(--ct-line); }
.cert-dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.cert-dl dt { color: var(--sm-text-muted); font-size: 0.92rem; }
.cert-dl dd { margin: 0; font-weight: 700; color: var(--sm-text); font-variant-numeric: tabular-nums; }
.cert-sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin-top: 1.75em; }
.cert-sign-name { font-weight: 700; color: var(--sm-text); }
.cert-sign-title { color: var(--sm-text-muted); font-size: 0.92rem; }
.cert-issuer { margin: 1.5em 0 0; font-size: 0.85rem; line-height: 1.7; color: var(--sm-text-muted); text-align: center; }
.cert-doc-actions { display: flex; flex-wrap: wrap; gap: 0.7em; justify-content: center; margin-top: 1.75em; }

/* Product list */
.cert-products { max-width: 860px; margin: 1.75em auto 0; }
.cert-products-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75em 1.5em; }
.cert-products-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--sm-text); }
.cert-products-sub { margin: 0.25em 0 0; font-size: 0.9rem; color: var(--sm-text-muted); }
.cert-filter { position: relative; flex: 1 1 260px; max-width: 320px; }
.cert-bg .cert-filter input {
  width: 100%; padding: 0.7em 0.95em; border: 1px solid #d5ddd8; border-radius: 10px;
  background: #fff; font-family: inherit; font-size: 0.95rem; color: var(--sm-text);
}
.cert-bg .cert-filter input:focus { outline: none; border-color: var(--sm-green); box-shadow: 0 0 0 3px rgba(5, 89, 65, 0.14); }
.cert-group { margin-top: 1.5em; }
.cert-group-letter {
  margin: 0 0 0.5em; padding-bottom: 0.35em; border-bottom: 2px solid #edf5f0;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-green);
}
.cert-group-list { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2em; }
.cert-product { break-inside: avoid; padding: 0.35em 0; font-size: 0.95rem; color: var(--sm-text); }
.cert-empty { margin: 1.5em 0 0; color: var(--sm-text-muted); }

@media (min-width: 40em) {
  .cert-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cert-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-group-list { columns: 2; }
}
@media (min-width: 64em) {
  .cert-group-list { columns: 3; }
}
@media (max-width: 39.9375em) {
  .cert-title { font-size: 1.5rem; }
  .cert-doc { padding: 1.5em 1.25em; }
  .cert-doc-title { font-size: 1.25rem; }
}