:root{
  --bg:#ffffff;
  --soft:#f6f8fb;
  --text:#0f172a;
  --muted:#5b6777;
  --border:#e6ebf2;

  /* Blood red theme */
  --primary:#8b0000;
  --primary2:#5a0000;

  --ghost:#f1f5f9;
  --danger:#b00020;

  --radius:14px;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
code{background:#eef2f7;padding:2px 6px;border-radius:8px}

.container{width:min(1100px, 92%); margin:0 auto}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.hr{border:0;border-top:1px solid var(--border); margin:14px 0}

.header{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.9);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px)
}
.header__row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}

.brand{display:flex; flex-direction:column; line-height:1.1}
.brand--row{flex-direction:row; align-items:center; gap:12px}
.brand__logo{height:42px; width:auto; display:block}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:4px}

.nav{display:flex; gap:16px; align-items:center}
.nav a{font-size:14px; color:var(--muted)}
.nav a:hover{color:var(--text)}
.header__cta{display:flex; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid transparent; font-weight:700; font-size:14px; cursor:pointer
}
.btn--primary{background:var(--primary); color:#fff}
.btn--primary:hover{background:var(--primary2)}
.btn--ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn--ghost:hover{background:var(--ghost)}
.btn--full{width:100%}
.btn--sm{padding:8px 10px; border-radius:10px; font-size:13px}
.disabled{opacity:.55; pointer-events:none}

.mobilebar{display:none}
@media (max-width: 860px){
  .nav{display:none}
  .mobilebar{
    display:flex; gap:10px; padding:10px;
    position:fixed; left:0; right:0; bottom:0;
    background:rgba(255,255,255,.9);
    border-top:1px solid var(--border);
    z-index:60;
    backdrop-filter:saturate(180%) blur(8px)
  }
  .mobilebar__btn{
    flex:1; text-align:center;
    padding:12px; border-radius:14px;
    border:1px solid var(--border); font-weight:800
  }
  .mobilebar__btn--primary{
    background:var(--primary); color:#fff; border-color:transparent
  }
  body{padding-bottom:70px}
  .brand__logo{height:38px}
}

.section{padding:36px 0}
.section--soft{
  background:var(--soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.section__head h1,.section__head h2{margin:0 0 8px}
.section__head p{margin:0}

.hero{padding:34px 0 18px; border-bottom:1px solid var(--border)}
.hero__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start}
.hero h1{font-size:40px; line-height:1.1; margin:0}
.hero__sub{margin:12px 0 0; font-size:16px}
.hero__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

.hero__panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff; padding:16px;
  box-shadow:var(--shadow)
}
.hero__panelTitle{font-weight:900; margin-bottom:10px}
.panelLink{
  display:block; padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px; margin:8px 0; background:#fff
}
.panelLink:hover{background:var(--ghost)}

.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px}
.trust__item{
  border:1px solid var(--border);
  border-radius:14px; padding:12px; background:#fff
}
.trust__item strong{display:block}
.trust__item span{display:block; margin-top:4px; font-size:12px}

@media (max-width: 860px){
  .hero__grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .trust{grid-template-columns:1fr 1fr}
}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid3{grid-template-columns:1fr} }

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card__imgWrap{
  background:var(--soft);
  border-bottom:1px solid var(--border);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card__img{
  width:100%;
  height:190px;
  object-fit:contain;
  display:block;
  border-radius:12px;
}

.card--pad{padding:16px}
.card__top{padding:16px}
.card__top h3{margin:10px 0 6px}
.card__actions{display:flex; flex-wrap:wrap; gap:10px; padding:0 16px 16px}

/* Home: 2 buttons same width */
body[data-page="home"] .card__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
body[data-page="home"] .card__actions .btn{width:100%}
@media (max-width: 640px){
  body[data-page="home"] .card__actions{grid-template-columns:1fr}
}

.badgeRow{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.badge{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--ghost);
  border:1px solid var(--border);
  font-size:12px; font-weight:800;
  color:var(--primary2)
}
.badge--featured{
  background:rgba(139,0,0,.08);
  border-color:rgba(139,0,0,.18);
  color:var(--primary);
}

.meta{
  margin-top:10px; color:var(--muted); font-size:13px;
  display:flex; flex-direction:column; gap:6px
}

.split{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start}
@media (max-width: 860px){ .split{grid-template-columns:1fr} }

.media{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff; padding:16px;
  box-shadow:var(--shadow)
}
.media img{width:100%; height:auto; display:block; border-radius:12px}

.list{margin:0; padding-left:18px}
.list li{margin:10px 0}

.footer{
  border-top:1px solid var(--border);
  background:#fff; padding:28px 0
}
.footer__grid{display:grid; grid-template-columns:2fr 1.2fr 1.2fr; gap:16px}
@media (max-width: 860px){ .footer__grid{grid-template-columns:1fr} }
.footer__brand{display:flex; gap:12px; align-items:flex-start}
.footer__logo{height:46px; width:auto; display:block}
.footer__title{font-weight:900; margin-bottom:8px}
.footer__link{display:block; margin:8px 0; color:var(--muted)}
.footer__link:hover{color:var(--text)}
.footer__bottom{margin-top:16px; border-top:1px solid var(--border); padding-top:14px}

.builder{display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start}

/* Reagents UX: ensure the cart/actions column stays on the right on desktop, and moves FIRST on mobile */
body[data-page="reagents"] .builder{grid-template-areas:"items aside"}
body[data-page="reagents"] .builder__items{grid-area:items}
body[data-page="reagents"] .builder__aside{grid-area:aside}

@media (max-width: 900px){
  .builder{grid-template-columns:1fr}
  body[data-page="reagents"] .builder{grid-template-areas:"aside" "items"}
  body[data-page="reagents"] .builder__aside.sticky{position:relative; top:auto}
}

.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.search input{
  width:280px; max-width:100%;
  padding:12px; border-radius:12px;
  border:1px solid var(--border)
}

.items{margin-top:12px; display:flex; flex-direction:column; gap:10px}

/* Section headers inside reagent list */
.reagentSection{margin-top:12px}
.reagentSection__title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px; border:1px solid var(--border);
  border-radius:14px; background:#fff
}
.item__left{flex:1; min-width:0}
.item__name{margin-bottom:4px}
.item__meta{display:flex; gap:10px; align-items:center; margin-top:6px}
.item__meta--row{flex-wrap:wrap; gap:8px}

.metaSep{color:var(--muted); font-size:12px}

/* Status pills */
.status{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid var(--border);
}
.status--available{background:#eaf7ee; border-color:#bfe6c9; color:#0b6a2a}
.status--coming{background:#fff4e6; border-color:#ffe0b2; color:#8a5a00}
.status--out{background:#f1f5f9; border-color:#e2e8f0; color:#475569}

/* Gray-out non-available */
.item--coming{background:#fffdf7}
.item--out{
  background:#f8fafc;
  opacity:.75;
}

.qtyBlock{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.qty{display:flex; align-items:center; gap:10px}
.qty__n{min-width:26px; text-align:center; font-weight:900}
.qty__boxes{margin-top:4px; text-align:right}

.sticky{position:sticky; top:92px}
.h2{margin:0 0 6px; font-size:18px}
.label{display:block; margin:10px 0 6px; font-size:13px; font-weight:800}
.input{width:100%; padding:12px; border-radius:12px; border:1px solid var(--border)}
.err{color:var(--danger); font-weight:700; margin-top:10px; min-height:18px}

.summary{margin-top:10px}
.summary__row{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px dashed var(--border)
}
.summary__row:last-child{border-bottom:0}

/* Reagent details (inline in meta row, body drops below) */
.reagentDetails{
  margin:0;
  border:0;
  background:transparent;
  display:inline;
  max-width:100%;
}
.reagentDetails[open]{
  display:block;
  width:100%;
  flex-basis:100%;
  margin-top:8px;
}

/* Details variants: keep full-width version hidden on desktop */
.reagentDetails.reagentDetails--full{display:none;}
.reagentDetails.reagentDetails--full[open]{display:none;}
.reagentDetails__summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  list-style:none;
  user-select:none;
}
.reagentDetails__summary::-webkit-details-marker{display:none}
.reagentDetails__summary::after{content:"▾"; font-size:12px; color:var(--muted); transform:translateY(-1px)}
.reagentDetails[open] .reagentDetails__summary::after{content:"▴"}

/* Mobile-only trigger label (shown inside .item__left) */
.detailsTap{
  display:none;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  user-select:none;
}
.detailsTap::after{content:"▾"; font-size:12px; color:var(--muted); transform:translateY(-1px)}
.item--detailsOpen .detailsTap::after{content:"▴"}


.reagentDetails__body{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--soft);
}
.rdRow{display:flex; gap:10px; padding:6px 0; border-top:1px solid var(--border)}
.rdRow:first-child{border-top:0}
.rdLabel{width:110px; flex:0 0 110px; color:var(--muted); font-size:12px; font-weight:700}
.rdValue{flex:1; font-size:13px}
.rdValue--mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.rdValue a{color:var(--primary); text-decoration:underline}
@media (max-width: 520px){
  .rdRow{flex-direction:column; gap:4px}
  .rdLabel{width:auto; flex:auto}
}

/* Reagents UX: Details full width of the entire item on mobile */
@media (max-width: 700px){
  body[data-page="reagents"] .item{flex-wrap:wrap}
  body[data-page="reagents"] .item__meta{width:100%; align-items:flex-start}

  /* Use the full-width Details element on mobile for better readability */
  body[data-page="reagents"] .reagentDetails--inline{display:none !important}
  body[data-page="reagents"] .reagentDetails--full{display:none !important}
  body[data-page="reagents"] .reagentDetails--full[open]{display:block !important; flex:0 0 100%; width:100%; min-width:100%; margin-top:8px}

  body[data-page="reagents"] .reagentDetails--full > summary{display:none !important}
  body[data-page="reagents"] .item__left{cursor:pointer}

  /* Chevron indicator on the right of item__left (mobile) */
  body[data-page="reagents"] .item--hasDetails .item__left{position:relative; padding-right:28px}
  body[data-page="reagents"] .item--hasDetails .item__left::after{
    content:"";
    position:absolute;
    right:8px;
    top:18px;
    width:8px;
    height:8px;
    border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);
    transform:rotate(45deg);
    transition:transform .15s ease;
    opacity:.85;
    pointer-events:none;
  }
  body[data-page="reagents"] .item--detailsOpen.item--hasDetails .item__left::after{transform:rotate(-135deg)}

  body[data-page="reagents"] .detailsTap{display:inline-flex}

  body[data-page="reagents"] .reagentDetails__summary{padding:4px 0}
  body[data-page="reagents"] .reagentDetails__body{max-width:100%; width:100%; box-sizing:border-box}
}

/* Gallery */
.gallery__main{width:100%; height:auto; display:block; border-radius:12px}
.gallery__thumbs{display:flex; gap:10px; margin-top:12px; overflow:auto; padding-bottom:4px}
.thumb{
  border:1px solid var(--border);
  border-radius:12px;
  padding:0;
  background:#fff;
  cursor:pointer;
  width:74px;
  height:74px;
  flex:0 0 auto;
  overflow:hidden;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.active{
  border-color:var(--primary);
  box-shadow: 0 0 0 3px rgba(139,0,0,.15);
}

/* Video thumb */
.thumb--video{
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb__videoIcon{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  color:var(--primary);
  background:rgba(0,0,0,.03);
}
/* ===================================================================== */
/* ===================== Training & Education (ADD-ON) ================== */
/* ===================================================================== */

.topicsTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.topicsGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .topicsGrid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .topicsGrid{grid-template-columns:1fr} }

.topicCard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topicCard__title{margin:0 0 6px; font-size:18px}
.topicCard__meta{display:flex; flex-direction:column; gap:8px}
.topicCard__actions{margin-top:auto}

.tagRow{display:flex; flex-wrap:wrap; gap:8px}
.tagPill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--ghost);
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  color:var(--primary2);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:14px;
}
.breadcrumb a{color:var(--primary); text-decoration:underline}
.breadcrumb a:hover{color:var(--primary2)}

.article{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:18px;
}
.article h1{margin:0 0 10px; font-size:34px; line-height:1.15}
.article .lead{font-size:16px; margin:0}

.articleMeta{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.topicSection{
  margin-top:18px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.topicSection h2{margin:0 0 8px; font-size:20px}
.topicSection p{margin:0 0 10px}
.topicSection ul{margin:0; padding-left:18px}
.topicSection li{margin:8px 0}

/* ===================================================================== */
/* ===================== Analyzer gallery video (ADD-ON) ================= */
/* ===================================================================== */

.videoWrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
}
.videoWrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* ===================================================================== */
/* =================== SEO landing pages + training links =============== */
/* ===================================================================== */

.miniLinks{margin-top:8px;font-size:13px;line-height:1.4}
.miniLinks a{text-decoration:underline}

.compareGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width: 900px){
  .compareGrid{grid-template-columns:1fr}
}

.topicLinks{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.popularLinks__row{display:flex;flex-wrap:wrap;gap:10px}

.faqItem{padding:10px 0;border-top:1px solid var(--border)}
.faqItem:first-child{border-top:0}
.faqItem__summary{cursor:pointer;font-weight:700;list-style:none}
.faqItem__summary::-webkit-details-marker{display:none}
.faqItem__body{margin-top:10px}

.rtl{direction:rtl;text-align:right}
.rtl .hero__actions,
.rtl .card__actions,
.rtl .popularLinks__row,
.rtl .topicLinks{justify-content:flex-start}


/* --- Training Topic Figures --- */
.articleLinks{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.figureGrid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0}
.figureGrid--inline{margin-top:12px}
.figure{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.figure__img{width:100%;height:auto;display:block;background:#f7f7f7}
.figure figcaption{padding:10px 12px;font-size:13px;line-height:1.45;color:var(--muted)}
@media (max-width:720px){
  .figureGrid{grid-template-columns:1fr}
}
/* Hide legacy mobile action bar */
.mobilebar { display: none !important; }

/* Mobile quick order bar (Reagents page only) */
.mobileSendBar { display: none; }

@media (max-width: 900px) {
  body[data-page="reagents"] .mobileSendBar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  }

  body[data-page="reagents"] .mobileSendBar__inner {
    padding-left: 14px;
    padding-right: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body[data-page="reagents"] main.section,
  body[data-page="reagents"] main {
    padding-bottom: 140px;
  }

  /* Now that the cart/actions panel appears first on mobile, keep the main Send button visible */
  body[data-page="reagents"] #send { display: block; }
}



@media (max-width: 900px) {
  body[data-page="reagents"] .mobileSendBar__inner {
    border-radius: 14px;
  }
  body[data-page="reagents"] .mobileSendBar__inner .btn {
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  }
}


/* Reagents page: improve mobile layout of header + rules + search */
@media (max-width: 700px) {
  body[data-page="reagents"] .builder .row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body[data-page="reagents"] .builder .row > div:first-child {
    width: 100%;
    max-width: none;
  }
  body[data-page="reagents"] .builder .row h2.h2 {
    margin-bottom: 4px;
  }
  body[data-page="reagents"] .builder .row p.muted {
    margin: 0;
    line-height: 1.35;
  }
  body[data-page="reagents"] .builder .search {
    width: 100%;
  }
  body[data-page="reagents"] .builder .search input {
    width: 100%;
    max-width: none;
  }
}