/* ============================================================
   HOMEPAGE CERTIFICATE SPOTLIGHT  (template-parts/home-coa-spotlight.php)
   One "Compound" button opens a sheet listing the compounds; the chosen
   certificate sits below it. Same at every screen size. The card lays
   itself out by its own width (container queries), so it stays readable
   wherever it lands.
   ============================================================ */
.home-coa { padding-block: 96px; background: var(--color-background); }
.home-coa__inner { width: 85%; margin-inline: auto; }

.home-coa__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 6vw, 5rem); row-gap: 1.5rem; align-items: end; margin-block-end: 3.5rem;
}
.home-coa__eyebrow {
  font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 1.5rem;
}
.home-coa__heading {
  font-family: var(--font-heading--family); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; max-width: 18ch;
}
.home-coa__body {
  font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.7); margin: 0; max-width: 44ch;
}

.home-coa__layout { display: flex; flex-direction: column; gap: 1.5rem; }
/* Desktop: the button and certificate take three quarters of the width, centred in the section. */
@media (min-width: 990px) {
  .home-coa__layout { max-width: 75%; margin-inline: auto; }
}

/* ---- Certificate card ---- */
.home-coa__panels { min-width: 0; container: home-coa / inline-size; }
.home-coa__card {
  display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 18px;
  background: var(--color-background); box-shadow: 0 28px 70px rgb(23 41 83 / 0.12);
}
.home-coa__card[hidden] { display: none; }
.home-coa__card:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 4px; }
.home-coa__card.is-entering { animation: home-coa-enter 240ms ease both; }
@keyframes home-coa-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.home-coa__card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.home-coa__card-id { min-width: 0; }
.home-coa__card-eyebrow {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem;
  font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55);
}
.home-coa__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: #009b57; }
.home-coa__card-title {
  margin: 0 0 0.75rem; font-family: var(--font-heading--family); font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--color-foreground-heading);
}
.home-coa__card-code { font-size: 0.56em; letter-spacing: 0; color: rgb(var(--color-foreground-rgb) / 0.45); white-space: nowrap; }
.home-coa__card-meta {
  margin: 0; font-family: var(--font-mono--family); font-size: 0.8125rem; line-height: 1.6;
  color: rgb(var(--color-foreground-rgb) / 0.6);
}
.home-coa__card-meta-item { white-space: nowrap; }
.home-coa__purity { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.home-coa__purity-value {
  margin: 0; font-family: var(--font-heading--family); font-size: clamp(1.9375rem, 3.125vw, 2.8125rem); font-weight: 500;
  line-height: 1; letter-spacing: -0.03em; color: var(--color-foreground-heading);
}
.home-coa__purity-value span { font-size: 0.44em; letter-spacing: 0; }
.home-coa__purity-label {
  margin: 0; font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55);
}

/* Results: three across with hairlines between; two across in a narrow card. */
.home-coa__results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0;
  border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
}
.home-coa__result {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1rem;
  border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
}
.home-coa__result:nth-child(3n + 1) { padding-inline-start: 0; }
.home-coa__result:nth-child(3n) { padding-inline-end: 0; border-inline-end: none; }
.home-coa__result:nth-last-child(-n + 3) { border-block-end: none; }
.home-coa__result dt {
  font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5);
}
.home-coa__result dd { margin: 0; font-family: var(--font-body--family); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.home-coa__result-sub {
  display: block; margin-block-start: 0.25rem;
  font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: rgb(var(--color-foreground-rgb) / 0.55);
}
.home-coa__nowrap { white-space: nowrap; }
.home-coa__pass {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 999px;
  background: rgb(0 155 87 / 0.1); color: #007a45;
  font-family: var(--font-mono--family); font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
}
.home-coa__pass-icon { flex: none; width: 12px; height: 12px; }
.home-coa__result-plain { font-size: 1rem; }
.home-coa__result-plain--muted { font-weight: 400; color: rgb(var(--color-foreground-rgb) / 0.5); }

/* ---- Links ---- */
.home-coa__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.home-coa__cert {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 999px;
  background: var(--color-foreground); color: var(--color-background);
  font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: opacity 180ms ease;
}
.home-coa__cert:hover { opacity: 0.85; }
.home-coa__cert:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; }
.home-coa__cert svg { flex: none; width: 16px; height: 16px; }
/* Inline so a wrapped label keeps its arrow after the last word. */
.home-coa__link {
  display: inline-block; padding-block: 0.6875rem; color: var(--color-foreground);
  font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; line-height: 1.4;
  text-decoration: none;
}
.home-coa__link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.home-coa__link:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; border-radius: 4px; }
.home-coa__arrow {
  display: inline-block; width: 14px; height: 14px; margin-inline-start: 0.5rem; vertical-align: -1px;
  transition: transform 180ms ease;
}
.home-coa__link:hover .home-coa__arrow { transform: translateX(3px); }
.home-coa__all { align-self: flex-start; }

/* Card narrower than its desktop size: purity moves under the name. */
@container home-coa (max-width: 600px) {
  .home-coa__card { padding: 2rem; }
  .home-coa__card-head { flex-direction: column; gap: 1.25rem; }
  .home-coa__purity { align-items: flex-start; text-align: left; }
}

/* Phone-width card: results two across, full-width certificate button. */
@container home-coa (max-width: 440px) {
  .home-coa__card { padding: 1.5rem 1.25rem; gap: 1.5rem; }
  .home-coa__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-coa__result,
  .home-coa__result:nth-child(3n + 1),
  .home-coa__result:nth-child(3n) {
    padding: 1rem 0.75rem; border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }
  .home-coa__result:nth-child(odd) { padding-inline-start: 0; }
  .home-coa__result:nth-child(even) { padding-inline-end: 0; border-inline-end: none; }
  .home-coa__result:nth-last-child(-n + 2) { border-block-end: none; }
  .home-coa__result dd { font-size: 1rem; }
  .home-coa__actions { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .home-coa__link { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .home-coa__card.is-entering { animation: none; }
  .home-coa__arrow, .home-coa__cert { transition: none; }
}

/* ---- Compound picker: a button that opens a bottom sheet ---- */
.home-coa__picker {
  display: flex; width: 100%; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0; padding: 0 1.125rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.15); border-radius: 15px;
  background: var(--color-background); color: var(--color-foreground); font-family: var(--font-body--family);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 150ms ease;
}
.home-coa__picker:hover,
.home-coa__picker[aria-expanded="true"] { border-color: rgb(var(--color-foreground-rgb) / 0.5); }
.home-coa__picker:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }
.home-coa__picker-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.home-coa__picker-label {
  font-family: var(--font-mono--family); font-size: 0.625rem; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5);
}
.home-coa__picker-name { font-size: 1rem; font-weight: 500; line-height: 1.2; }
.home-coa__picker-meta { flex: none; display: flex; align-items: center; gap: 0.625rem; color: rgb(var(--color-foreground-rgb) / 0.55); }
.home-coa__picker-purity { font-family: var(--font-mono--family); font-size: 0.8125rem; }
.home-coa__picker-chevron { flex: none; width: 16px; height: 16px; transition: transform 180ms ease; }
.home-coa__picker[aria-expanded="true"] .home-coa__picker-chevron { transform: rotate(180deg); }

.home-coa__sheet {
  position: fixed; inset: auto 0 0 0; width: min(100%, 35rem); max-width: none; max-height: 85vh; max-height: 85dvh;
  margin: 0 auto; padding: 0; border: 0; border-radius: 20px 20px 0 0; overflow: hidden;
  background: var(--color-background); color: var(--color-foreground);
  box-shadow: 0 -12px 40px rgb(10 10 10 / 0.18);
}
.home-coa__sheet:focus { outline: none; }
.home-coa__sheet::backdrop { background: rgb(10 10 10 / 0.4); }
.home-coa__sheet[open] { animation: home-coa-sheet-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.home-coa__sheet[open]::backdrop { animation: home-coa-fade-in 280ms ease; }
.home-coa__sheet.is-closing { animation: home-coa-sheet-out 200ms ease forwards; }
.home-coa__sheet.is-closing::backdrop { animation: home-coa-fade-out 200ms ease forwards; }
@keyframes home-coa-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes home-coa-sheet-out { to { transform: translateY(100%); } }
@keyframes home-coa-fade-in { from { opacity: 0; } }
@keyframes home-coa-fade-out { to { opacity: 0; } }
html.home-coa-sheet-open { overflow: hidden; }

.home-coa__sheet-inner {
  display: flex; flex-direction: column; max-height: inherit;
  padding: 0.625rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
}
/* The handle and title strip drag the sheet down to close it. */
.home-coa__sheet-grab { flex: none; touch-action: none; cursor: grab; }
.home-coa__sheet-handle { display: block; width: 36px; height: 4px; margin: 0 auto 0.625rem; border-radius: 999px; background: rgb(var(--color-foreground-rgb) / 0.15); }
.home-coa__sheet-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 0.5rem; }
.home-coa__sheet-title { margin: 0; font-family: var(--font-heading--family); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.home-coa__sheet-close {
  flex: none; width: 44px; height: 44px; margin-inline-end: -12px; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none; color: rgb(var(--color-foreground-rgb) / 0.55); cursor: pointer;
}
.home-coa__sheet-close svg { width: 16px; height: 16px; }
.home-coa__sheet-close:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: -4px; border-radius: 999px; }
.home-coa__sheet-list { display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; overscroll-behavior: contain; }
.home-coa__option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem;
  margin: 0; padding: 0 0.875rem; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--color-foreground); font-family: var(--font-body--family); font-size: 1rem; font-weight: 500;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.home-coa__option:hover { background: rgb(var(--color-foreground-rgb) / 0.03); }
/* Chosen compound: the same selected look as the shop's category and size buttons. */
.home-coa__option[aria-current="true"] {
  background: var(--simms-card-wash); border-color: var(--simms-selected-line);
  box-shadow: var(--simms-selected-shadow); color: var(--dusk-violet); font-weight: 600;
}
.home-coa__option:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; }
.home-coa__option-meta { flex: none; display: flex; align-items: center; gap: 0.625rem; }
.home-coa__option-purity { font-family: var(--font-mono--family); font-size: 0.8125rem; font-weight: 400; color: rgb(var(--color-foreground-rgb) / 0.55); }
.home-coa__option .home-coa__pass-icon { width: 16px; height: 16px; color: var(--dusk-violet); opacity: 0; }
.home-coa__option[aria-current="true"] .home-coa__pass-icon { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .home-coa__sheet[open], .home-coa__sheet[open]::backdrop,
  .home-coa__sheet.is-closing, .home-coa__sheet.is-closing::backdrop { animation: none; }
  .home-coa__picker-chevron { transition: none; }
}

@media (max-width: 989px) {
  .home-coa__hero { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 749px) {
  .home-coa__inner { width: 100%; padding-inline: 1.25rem; }
  .home-coa__hero { margin-block-end: 2.25rem; }
}