header[data-preview-header] { background: transparent; }
header[data-preview-header="home"]:not([data-preview-scrolled]) { mix-blend-mode: difference; }
header[data-preview-header="home"] > div,
header[data-preview-header="shop"] > div,
header[data-preview-scrolled] > div { color: white; }
header[data-preview-header="shop"]:not([data-preview-scrolled]) > div {
  text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
}
header[data-preview-header="shop"]:not([data-preview-scrolled]) svg {
  filter: drop-shadow(0 1px 8px rgb(0 0 0 / 35%));
}
header[data-preview-header="home"]:not([data-preview-scrolled]) a:last-child[href="/shop/"] {
  border-color: rgb(255 255 255 / 25%);
}
header[data-preview-header="shop"]:not([data-preview-scrolled]) a:last-child[href="/shop/"] {
  border-color: white;
}
header[data-preview-scrolled] > div {
  padding: .75rem 1.25rem;
  background: rgb(17 17 17 / 35%);
  box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
header[data-preview-scrolled] a:last-child[href="/shop/"] {
  background: #f7f6f2;
  border-color: rgb(0 0 0 / 10%);
  color: #111;
}
@media (min-width: 768px) {
  header[data-preview-scrolled] > div { padding-inline: 1.75rem; }
}
@media (min-width: 1024px) {
  header[data-preview-header="shop"]:not([data-preview-scrolled]) > div { color: #111; text-shadow: none; }
  header[data-preview-header="shop"]:not([data-preview-scrolled]) svg { filter: none; }
  header[data-preview-header="shop"]:not([data-preview-scrolled]) a:last-child[href="/shop/"] {
    border-color: rgb(0 0 0 / 15%);
  }
}
@media (max-width: 374px) {
  header[data-preview-header] a:has(img) { width: 6rem; }
  header[data-preview-header] a:last-child[href="/shop/"] { padding-inline: .75rem; white-space: nowrap; }
  header[data-preview-scrolled] > div { padding-inline: .75rem; }
}
[data-promo-banner][hidden] { display: none !important; }
[data-preview-tooltip-open] { visibility: visible !important; opacity: 1 !important; }
.preview-notice {
  margin: auto;
  max-width: min(34rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: 0;
  border-radius: 1rem;
  color: #111;
  background: #f7f6f2;
  box-shadow: 0 20px 60px rgb(0 0 0 / 20%);
}
.preview-notice::backdrop { background: rgb(0 0 0 / 55%); }
.preview-notice > button {
  display: block;
  margin: .75rem 0 0 auto;
  padding: .5rem .8rem;
  border-radius: .65rem;
  color: white;
  background: #081e4c;
}
.preview-certificate { max-width: min(50rem, calc(100% - 1.5rem)); padding: .75rem; }
.preview-certificate > button { margin: 0 0 .5rem auto; }
.preview-certificate img { max-height: 78dvh; width: auto; max-width: 100%; object-fit: contain; }
.preview-lookup-status { margin-top: .75rem; }
@media (prefers-reduced-motion: reduce) {
  header[data-preview-header] > div, header[data-preview-header] a { transition: none; }
}

[data-preview-panel-selected] { background: white; border-style: solid; }
[data-preview-panel-selected] span:nth-child(2) { color: #081e4c; }
[data-preview-panel-selected] button { margin-inline-start: auto; flex: none; padding: .25rem; font-size: 1.125rem; }
main button[aria-pressed="true"]:is(.rounded-full) { background: #081e4c; color: white; }
main button[aria-pressed="false"].bg-badge { background: #dfe9f9; color: #081e4c; }
[data-preview-panel-empty]::before { content: 'No matching compounds'; grid-column: 1 / -1; padding: 1rem 0; }
.preview-panel-jump {
  position: fixed;
  z-index: 90;
  inset: auto 1rem max(.75rem, env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  min-height: 44px;
  padding: .625rem 1rem;
  border-radius: 999px;
  color: white;
  background: #081e4c;
  box-shadow: 0 6px 24px rgb(8 30 76 / 24%);
  font-weight: 600;
}
.preview-panel-jump[hidden] { display: none; }
.preview-panel-dialog { width: min(32rem, calc(100% - 1.5rem)); }
.preview-panel-dialog > div { display: flex; flex-direction: column; margin-top: .5rem; }
.preview-panel-dialog > button { margin-top: 0; }
@media (min-width: 1024px) {
  .preview-panel-jump { display: none; }
}
section[aria-labelledby^="coa-"][hidden],
section[aria-labelledby^="coa-"] [hidden],
div.grid > div.flex[hidden] { display: none !important; }

.store-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 8rem 1.25rem 4rem;
  color: #111;
}
.store-page h1 { margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; font-weight: 600; }
.store-page h2 { font-size: 1.2rem; font-weight: 600; }
.store-page > p { margin-bottom: 1rem; color: #4b5260; }
.store-page > a { display: inline-block; margin: .5rem 1rem .5rem 0; text-decoration: underline; text-underline-offset: .2em; }
.store-checkout { display: grid; gap: 1rem; margin-top: 1rem; align-items: start; }
.store-form, .store-order-card {
  display: grid;
  gap: .85rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid #dbe1e8;
  border-radius: 1rem;
  background: #fff;
}
.store-page > .store-form { max-width: 44rem; margin: 1rem 0; }
.store-fields { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.store-form label { display: grid; gap: .25rem; font-size: .875rem; font-weight: 600; }
.store-form input, .store-form textarea {
  width: 100%; min-height: 44px; padding: .55rem .75rem;
  border: 1px solid #aeb9c5; border-radius: .6rem; background: white; color: #111;
  font-size: 1rem; font-weight: 400;
}
.store-form textarea { min-height: 5rem; }
.store-form .store-save-details { display: flex; align-items: center; gap: .55rem; }
.store-form .store-save-details[hidden] { display: none; }
.store-form .store-save-details input { width: 1.1rem; min-height: 1.1rem; }
.store-coa-orders { padding-top: 1rem; }
.store-form input:focus, .store-form textarea:focus { outline: 2px solid #204e95; outline-offset: 2px; }
.store-coupon { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.store-action { min-height: 44px; padding: .55rem 1rem; border-radius: .65rem; color: white; background: #081e4c; font-weight: 600; }
.store-secondary { color: #081e4c; background: #edf2f7; }
.store-action:disabled { opacity: .5; }
.store-feedback { color: #24364f; }
.store-feedback:empty { display: none; }
.store-order-card dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; }
.store-order-card dl > :nth-last-child(-n+2) { font-weight: 700; padding-top: .4rem; border-top: 1px solid #dbe1e8; }
.store-quote-lines { display: grid; gap: .45rem; margin: 0; padding: 0; }
.store-quote-lines li { display: flex; justify-content: space-between; gap: .75rem; }
.store-quote-lines .store-quote-component { font-size: .85rem; color: #566575; }
.store-account-orders { display: grid; gap: .6rem; max-width: 44rem; margin-top: 1rem; }
.store-unavailable { padding: 7rem 1.5rem 1.5rem; color: #081e4c; }
@media (min-width: 800px) { .store-checkout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
