/* EndoCann product catalogue + product monograph pages.
   Pairs with ec-shell.css (nav/footer) and ec-pages.css (tokens, hero, buttons,
   notes, related links). Generated markup: tools/build-products.mjs.
   Light theme only — the old page's dark/clinical variants were unused and are
   deliberately dropped. Ported home-page patterns: section head (eyebrow + dot),
   tile hover lift, .hp-go arrow affordance, .reveal stagger with --i. */

/* ---------- Section headers (home-page .hp-head pattern, left-aligned) ---------- */
.pd-head{max-width:70ch;margin:0 0 clamp(20px,3vw,30px)}
.pd-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ecg2);background:#fff;border:1px solid var(--line);
  padding:7px 14px;border-radius:var(--pill);box-shadow:var(--sh-sm)}
.pd-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--ecgold);
  box-shadow:0 0 0 4px rgba(214,180,93,.18)}
.pd-head h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;line-height:1.08;
  color:var(--ecg);margin:16px 0 0}
.pd-head .pd-lead{margin:12px 0 0;max-width:66ch;color:var(--ink);
  font-size:clamp(16px,1.6vw,18px);line-height:1.68}
.pd-section{margin:0 0 clamp(38px,5.5vw,58px)}

/* ---------- Reveal-on-scroll (progressive enhancement; hp-js set in <head>) ---------- */
.hp-js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.hp-js .reveal.is-in{opacity:1;transform:none}
/* Last-resort un-hide, set from the <head> after 2.5s. Covers the case where the
   deferred script never runs at all, which would otherwise leave the body blank. */
.hp-reveal-all .reveal{opacity:1!important;transform:none!important}

/* ---------- Catalogue: protocol filter ---------- */
.pd-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.pd-filter button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ecg);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--pill);
  padding:9px 16px;transition:transform .16s ease,border-color .16s ease,
  background .16s ease,box-shadow .16s ease}
.pd-filter button .p-ic{font-size:15px;line-height:1}
.pd-filter button .p-n{font-family:var(--font);font-weight:600;font-size:12.5px;
  color:var(--muted);background:var(--bg-tint);border-radius:var(--pill);padding:2px 8px}
.pd-filter button:hover{transform:translateY(-2px);border-color:#cfe0d6;box-shadow:var(--sh-sm)}
.pd-filter button:focus-visible{outline:3px solid var(--ecgold);outline-offset:3px}
.pd-filter button[aria-pressed="true"]{background:var(--ecg);border-color:var(--ecg);color:#fff}
.pd-filter button[aria-pressed="true"] .p-n{background:rgba(255,255,255,.16);color:#f3e6c4}
.pd-count{margin:0 0 22px;color:var(--muted);font-size:14px}
.pd-count b{font-family:var(--font-head);color:var(--ecg)}

/* ---------- Catalogue: card grid ---------- */
.pd-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pd-card{display:flex}
.pd-card[hidden]{display:none}
.pd-card-link{display:flex;flex-direction:column;flex:1;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pd-card-link:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#cfe0d6}
.pd-card-link:focus-visible{outline:3px solid var(--ecgold);outline-offset:3px}
/* The box must keep its ratio whatever the photo's own shape is. `aspect-ratio`
   alone did not hold: the figure is a grid container, so its automatic minimum
   size came from the image, and `max-height:100%` could not resolve against a
   content-sized parent — every card ended up as tall as its own photo (3 different
   heights across the 14), which read as misalignment down the mobile list.
   Sizing the image to the box instead lets the ratio bind. Square: 13 of the 14
   photos are portrait, so the landscape 4/3 originally written would letterbox
   them to about half their height, but a full 3/4 portrait box made the mobile
   list needlessly long. 1/1 keeps the bottles legible and takes ~1,550px off it. */
.pd-card figure{margin:0;aspect-ratio:1/1;background:var(--bg-tint);display:grid;
  place-items:center;padding:16px;border-bottom:1px solid var(--line2);
  min-height:0;overflow:hidden}
.pd-card figure img{width:100%;height:100%;min-height:0;
  object-fit:contain;filter:drop-shadow(0 10px 18px rgba(7,61,38,.14));
  transition:transform .22s ease}
.pd-card-link:hover figure img{transform:scale(1.04)}
.pd-card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pd-card-kicker{font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ecg2)}
.pd-card-body h2{font-family:var(--font-head);margin:7px 0 5px;font-size:19px;
  font-weight:800;color:var(--ecg);letter-spacing:-.01em}
.pd-card-body .pd-sub{margin:0;color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.pd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pd-tags span{font-size:11.5px;font-weight:600;color:var(--ecg2);background:var(--bg-tint);
  border:1px solid var(--line2);border-radius:var(--pill);padding:3px 9px}
.pd-card-price{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.pd-go{margin-top:14px;font-family:var(--font-head);font-weight:700;font-size:13.5px;
  color:var(--ecg2);display:inline-flex;align-items:center;gap:7px}
.pd-go .arw{transition:transform .16s ease}
.pd-card-link:hover .pd-go .arw,.pd-related a:hover .pd-go .arw{transform:translateX(4px)}

/* ---------- Monograph hero ---------- */
.pd-hero .ec-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);
  align-items:center}
.pd-hero-visual{display:grid;place-items:center;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.5);border-radius:var(--r-xl);
  padding:clamp(18px,2.5vw,28px);box-shadow:var(--sh-lg)}
.pd-hero-visual img{max-width:100%;height:auto;max-height:380px;width:auto;object-fit:contain}
@media(max-width:840px){
  .pd-hero .ec-wrap{grid-template-columns:1fr}
  .pd-hero-visual{max-width:340px;margin:0 auto}
  .pd-hero-visual img{max-height:280px}
}

/* ---------- Monograph: lens + pills + cards ---------- */
.pd-lens{background:linear-gradient(158deg,#0a4c30,#073d26 60%,#052a1b);color:#fff;
  border-radius:var(--r-lg);padding:22px 24px;max-width:760px;box-shadow:var(--sh)}
.pd-lens h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ecgold)}
.pd-lens b{font-family:var(--font-head);font-size:18px;font-weight:800;display:block;
  margin:0 0 6px}
.pd-lens p{margin:0;color:#d7e8de;font-size:15.5px;line-height:1.65}
.pd-pills{display:flex;flex-wrap:wrap;gap:9px}
.pd-pills span{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ecg);
  background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 16px;box-shadow:var(--sh-sm)}
.pd-cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.pd-cards{grid-template-columns:1fr}}
.pd-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:flex-start}
.pd-c i{flex:none;font-style:normal;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:800;
  font-size:15px;background:var(--bg-tint);color:var(--ecg2)}
.pd-c span{font-size:15px;line-height:1.62;color:var(--ink)}
.pd-c span b{color:var(--ecg)}

/* ---------- Monograph: dose / administration panels ---------- */
.pd-dose{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:820px){.pd-dose{grid-template-columns:1fr}}
.pd-dose-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm);display:flex;gap:16px;align-items:flex-start}
.pd-dose-card.pd-main-card{grid-column:1 / -1;background:linear-gradient(158deg,#f9fcf9,#eef6f0);
  border-color:#d8e7dd}
.pd-dose-card.pd-wide{grid-column:1 / -1}
.pd-dose-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(158deg,var(--ecg2),var(--ecg));box-shadow:0 8px 18px rgba(7,61,38,.22)}
.pd-dose-card h4{margin:0 0 7px;font-family:var(--font-head);font-size:16.5px;font-weight:800;
  color:var(--ecg)}
.pd-dose-card p,.pd-dose-card li{font-size:14.5px;line-height:1.62;color:var(--ink)}
.pd-dose-card p{margin:8px 0 0}
.pd-dose-card ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.pd-dose-card>div{flex:1}
.pd-formula{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 2px}
.pd-formula span{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;color:var(--muted)}
.pd-formula strong{display:block;font-family:var(--font-head);font-size:19px;font-weight:800;
  color:var(--ecg);margin-top:3px}
.pd-nomg{display:inline-block;margin:8px 0 2px;font-family:var(--font-head);font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a5a00;
  background:#fdf3dd;border:1px solid #ecd9a8;border-radius:var(--pill);padding:5px 12px}
.pd-steps{display:flex;flex-direction:column;gap:10px;margin:12px 0 0}
.pd-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 15px;font-size:14.5px;line-height:1.6}
.pd-step b{display:block;color:var(--ecg);font-family:var(--font-head)}
.pd-route{margin:12px 0 0;padding:11px 14px;border-left:4px solid var(--ecgold);
  background:#fdf9ef;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13.5px;color:#6a5324}

/* ---------- Monograph: clinic-use strip ---------- */
.pd-strip{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:820px){.pd-strip{grid-template-columns:1fr}}
.pd-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.pd-box h3{margin:0 0 9px;font-family:var(--font-head);font-size:16.5px;font-weight:800;
  color:var(--ecg)}
.pd-box ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.pd-box li{font-size:14.5px;line-height:1.6;color:var(--ink)}
.pd-box li b{color:var(--ecg)}

/* ---------- Monograph: tables (scroll inside their own pane, never the page) ---------- */
.tableWrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.tableWrap table{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.tableWrap th{font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ecg2);text-align:left;
  background:var(--bg-tint);padding:12px 16px;border-bottom:1px solid var(--line)}
.tableWrap td{padding:11px 16px;border-bottom:1px solid var(--line2);vertical-align:top;
  line-height:1.55;color:var(--ink)}
.tableWrap tbody tr:last-child td{border-bottom:0}
.tableWrap tbody tr:hover{background:#fbfdfb}
.tableWrap td small{display:block;color:var(--muted);margin-top:3px;font-size:12.5px}
.tableWrap a{color:var(--ecg2);font-weight:700;text-decoration:none;white-space:nowrap}
.tableWrap a:hover{text-decoration:underline}
.pd-badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.pd-badges span{font-size:11px;font-weight:600;border-radius:var(--pill);padding:2.5px 8px}
.pd-badge-ok{color:#0b5a37;background:#e7f3ec;border:1px solid #cfe6d8}
.pd-badge-src{color:#5b4a90;background:#efecf8;border:1px solid #ddd5f0}
.pd-badge-fit{color:#8a5a00;background:#fdf3dd;border:1px solid #ecd9a8}
.pd-packprice{margin:14px 0 0;font-size:14px;color:var(--muted)}
.pd-packprice b{color:var(--ecg)}

/* ---------- Monograph: related products ---------- */
.pd-related{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pd-related a{display:flex;gap:13px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.pd-related a:hover{transform:translateY(-3px);border-color:#cfe0d6;box-shadow:var(--sh)}
.pd-related img{flex:none;width:52px;height:64px;object-fit:contain;
  background:var(--bg-tint);border-radius:10px;padding:5px}
.pd-related b{display:block;font-family:var(--font-head);font-size:14.5px;font-weight:800;
  color:var(--ecg);line-height:1.3}
.pd-related span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  line-height:1.45}