/* YPB COA — kept intentionally minimal so client themes win. */
.ypb-coa-button-wrap {
    margin: 1rem 0;
}

.ypb-coa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid currentcolor;
    background: transparent;
    color: inherit;
    border-radius: 0.375rem;
    text-decoration: none;
}

.ypb-coa-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
}

.ypb-coa-button:disabled,
.ypb-coa-button.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.ypb-coa-button__spinner {
    display: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentcolor;
    border-right-color: transparent;
    animation: ypb-coa-spin 0.7s linear infinite;
}

.ypb-coa-button.is-loading .ypb-coa-button__spinner {
    display: inline-block;
}

.ypb-coa-button__status {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: #b00020;
    min-height: 1.2em;
}

@keyframes ypb-coa-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Product-page certificate link ─────────────────────────────────────────
   Ships hidden; public/js/ypb-coa-pdp.js unhides it only after confirming
   published certificates exist for the SKU. `[hidden]` needs the explicit
   rule because the flex display below would otherwise override it. */
.ypb-coa-cert[hidden] { display: none; }
.ypb-coa-cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0;
}
.ypb-coa-cert-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.ypb-coa-cert-link::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 15px;
  background: currentcolor;
  /* Seal/rosette — a certificate mark, not a download arrow: this opens a
     verification page rather than fetching a file. */
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 1.8 3-.2.9 2.9 2.4 1.8-1.2 2.7 1.2 2.7-2.4 1.8-.9 2.9-3-.2L12 20l-2.4-1.8-3 .2-.9-2.9L3.3 13.7 4.5 11 3.3 8.3l2.4-1.8.9-2.9 3 .2z'/></svg>");
          mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.4 1.8 3-.2.9 2.9 2.4 1.8-1.2 2.7 1.2 2.7-2.4 1.8-.9 2.9-3-.2L12 20l-2.4-1.8-3 .2-.9-2.9L3.3 13.7 4.5 11 3.3 8.3l2.4-1.8.9-2.9 3 .2z'/></svg>");
}
.ypb-coa-cert-link:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
.ypb-coa-cert-note {
  margin: 0;
  font-size: 0.82em;
  opacity: 0.72;
}
.ypb-coa-cert-status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ypb-coa-cert-recovery[hidden] { display: none; }
.ypb-coa-cert-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 14px 0;
}
.ypb-coa-cert-error {
  margin: 0;
}
.ypb-coa-cert-error:focus {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}
.ypb-coa-cert-retry {
  appearance: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentcolor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.ypb-coa-cert-retry[hidden] { display: none; }
.ypb-coa-cert-retry:disabled { cursor: wait; opacity: 0.65; }
.ypb-coa-cert-retry:focus-visible { outline: 2px solid currentcolor; outline-offset: 3px; }