<!DOCTYPE html>

<head>

<title>LUVO Product Formulary — WCA Dev Concept v1.1</title>

<style>

:root {

--wca-blue: #00529b; --wca-blue-dark: #003d73;

--wca-teal: #00a99d; --wca-teal-light: #00c4b8;

--hero-bg: #060d18; --content-bg: #0f1e2e; --card-dark: #1a2d40;

--spec-bg: #fffbeb; --spec-border: #f59e0b; --spec-head: #92400e;

--text-muted: #94a3b8; --radius: 10px; --tr: all 0.3s ease;

}

*{box-sizing:border-box;margin:0;padding:0;}

body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--content-bg);color:#fff;}

/* ── CONCEPT BANNER ── */

.concept-banner{background:linear-gradient(135deg,var(--wca-blue-dark),#001f3f);border-bottom:3px solid var(--wca-teal);padding:8px 20px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1px;text-transform:uppercase;}

.concept-banner span{color:var(--wca-teal);font-weight:700;}

#globalSpecToggle{background:var(--spec-border);color:#1a1a1a;border:none;border-radius:6px;padding:5px 14px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;}

#globalSpecToggle:hover{background:#fcd34d;}

/* ── APP HEADER ── */

.app-header{background:rgba(6,13,24,.97);border-bottom:1px solid #1e3a52;padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);}

.header-left{display:flex;align-items:center;gap:18px;}

.wca-logo-box{width:36px;height:36px;background:var(--wca-blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;}

.wca-name{font-size:13px;font-weight:700;color:#e2e8f0;line-height:1.2;}

.wca-name span{display:block;font-size:10px;color:var(--wca-teal);font-weight:500;letter-spacing:1px;text-transform:uppercase;}

.divider-line{width:1px;height:28px;background:#1e3a52;}

.luvo-brand{font-size:22px;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,var(--wca-teal),#7dd3fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

.luvo-sub{font-size:10px;color:#64748b;letter-spacing:2px;text-transform:uppercase;margin-top:-2px;}

.header-nav{display:flex;gap:4px;}

.nav-item{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500;color:#94a3b8;cursor:pointer;transition:var(--tr);}

.nav-item:hover{background:#1e3a52;color:#fff;}

.nav-item.active{background:var(--wca-blue);color:#fff;}

.hospital-pill{background:#1a2d40;border:1px solid #2d4a63;border-radius:20px;padding:5px 14px;font-size:11px;color:#cbd5e1;display:flex;align-items:center;gap:6px;}

.hosp-dot{width:7px;height:7px;background:var(--wca-teal);border-radius:50%;}

/* ── SPEC PANELS ── */

.spec-panel{background:var(--spec-bg);border-left:5px solid var(--spec-border);border-top:1px solid #fde68a;padding:20px 28px;display:none;}

.spec-panel.visible{display:block;}

.spec-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}

.spec-badge{background:var(--spec-border);color:#1a1a1a;font-size:10px;font-weight:800;padding:3px 10px;border-radius:4px;letter-spacing:1px;text-transform:uppercase;}

.spec-title{font-size:14px;font-weight:700;color:var(--spec-head);}

.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}

.spec-item{background:#fff;border:1px solid #fde68a;border-radius:8px;padding:12px 14px;}

.spec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#b45309;margin-bottom:5px;}

.spec-value{font-size:12px;color:#374151;line-height:1.6;}

.spec-value ul{padding-left:16px;}

.spec-value li{margin-bottom:2px;}

.spec-toggle-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:#fffbeb55;border:none;border-top:1px solid #fde68a;color:#b45309;font-size:11px;font-weight:700;padding:8px 18px;border-radius:0;cursor:pointer;width:100%;letter-spacing:.5px;text-transform:uppercase;}

.spec-toggle-btn:hover{background:#fef3c7;}

/* ── HERO CAROUSEL ── */

.hero-wrap{position:relative;background:var(--hero-bg);overflow:hidden;}

.hero-slides{position:relative;height:420px;}

.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:center;}

.hero-slide.active{opacity:1;}

.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,13,24,.95) 40%,rgba(6,13,24,.3) 100%);}

.hero-content{position:relative;z-index:2;padding:0 52px;max-width:560px;}

.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,169,157,.2);border:1px solid var(--wca-teal);color:var(--wca-teal-light);font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;}

.hero-type-dot{width:6px;height:6px;border-radius:50%;background:var(--wca-teal);}

.hero-title{font-size:36px;font-weight:900;line-height:1.1;margin-bottom:8px;letter-spacing:-.5px;}

.hero-subtitle{font-size:15px;color:var(--wca-teal-light);font-weight:600;margin-bottom:10px;}

.hero-desc{font-size:13px;color:#94a3b8;line-height:1.6;margin-bottom:20px;max-width:420px;}

.hero-company{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}

.hero-btns{display:flex;gap:10px;}

.btn-primary{background:var(--wca-blue);color:#fff;border:none;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);}

.btn-primary:hover{background:var(--wca-blue-dark);}

.btn-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:10px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);}

.btn-secondary:hover{background:rgba(255,255,255,.18);}

.hero-visual{position:absolute;right:0;top:0;bottom:0;width:46%;display:flex;align-items:center;justify-content:center;z-index:1;}

.hero-product-art{width:280px;height:300px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}

.hero-product-icon{font-size:64px;}

.hero-product-label{font-size:14px;font-weight:700;text-align:center;padding:0 20px;}

.hero-product-tag{font-size:10px;background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;}

.hero-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);}

.hero-progress-bar{height:100%;background:var(--wca-teal);transition:width .1s linear;}

.hero-dots{position:absolute;bottom:16px;left:52px;display:flex;gap:8px;z-index:10;}

.hero-dot{width:24px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;transition:var(--tr);}

.hero-dot.active{background:var(--wca-teal);width:32px;}

.hero-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);backdrop-filter:blur(4px);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);}

.hero-nav-btn:hover{background:rgba(0,82,155,.8);border-color:var(--wca-teal);}

.hero-nav-btn.prev{left:14px;} .hero-nav-btn.next{right:14px;}

.slide-type-tag{position:absolute;top:18px;right:52px;z-index:10;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:4px 12px;border-radius:4px;color:#fff;}

/* ── SECTION WRAPPERS ── */

.section-wrap{background:var(--content-bg);padding:28px 0 0;}

.section-wrap.alt{background:#0b1825;}

.section-inner{padding:0 28px 24px;}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}

.section-title-row{display:flex;align-items:center;gap:12px;}

.section-label{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;}

.section-count{background:var(--wca-blue);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;}

/* ── SEARCH + TOGGLE ── */

.search-toggle-bar{display:flex;align-items:center;gap:10px;}

.search-box{position:relative;display:flex;align-items:center;}

.search-box input{background:#1a2d40;border:1px solid #2d4a63;border-radius:8px;color:#fff;padding:8px 12px 8px 34px;font-size:12px;width:200px;outline:none;transition:var(--tr);}

.search-box input:focus{border-color:var(--wca-teal);box-shadow:0 0 0 2px rgba(0,169,157,.2);}

.search-box input::placeholder{color:#64748b;}

.search-icon{position:absolute;left:10px;color:#64748b;font-size:12px;pointer-events:none;}

.view-toggle{display:flex;background:#1a2d40;border:1px solid #2d4a63;border-radius:8px;overflow:hidden;}

.toggle-btn{padding:7px 14px;font-size:11px;font-weight:700;cursor:pointer;border:none;background:none;color:#64748b;transition:var(--tr);letter-spacing:.5px;text-transform:uppercase;}

.toggle-btn.active{background:var(--wca-blue);color:#fff;}

.toggle-btn:hover:not(.active){color:#fff;background:#243d52;}

/* ── CAROUSEL ── */

.carousel-outer{position:relative;}

.carousel-track-wrap{overflow:hidden;}

.carousel-track{display:flex;gap:14px;padding-bottom:10px;transition:transform .4s ease;}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:38px;height:38px;border-radius:50%;background:rgba(0,82,155,.9);border:1px solid rgba(0,169,157,.4);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);box-shadow:0 4px 15px rgba(0,0,0,.4);}

.carousel-btn:hover{background:var(--wca-teal);}

.carousel-btn.c-prev{left:-15px;} .carousel-btn.c-next{right:-15px;}

/* ── PRODUCT CARD ── */

.product-card{min-width:168px;max-width:168px;border-radius:12px;overflow:hidden;background:var(--card-dark);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;border:1px solid rgba(255,255,255,.07);flex-shrink:0;}

.product-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.5);}

.product-card:hover .card-overlay{opacity:1;}

.card-img-area{height:120px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}

.card-product-icon{font-size:38px;position:relative;z-index:2;}

.card-type-badge{position:absolute;bottom:7px;left:8px;z-index:3;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,.55);color:rgba(255,255,255,.9);backdrop-filter:blur(4px);}

.card-overlay{position:absolute;inset:0;background:rgba(0,82,155,.6);opacity:0;transition:opacity .25s ease;z-index:1;display:flex;align-items:center;justify-content:center;}

.card-overlay span{font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;}

.card-info{padding:10px 11px 12px;}

.card-name{font-size:12px;font-weight:700;color:#e2e8f0;line-height:1.3;margin-bottom:4px;}

.card-company{font-size:10px;color:var(--wca-teal);font-weight:500;margin-bottom:3px;}

.card-type-text{font-size:10px;color:#64748b;}

.new-ribbon{position:absolute;top:8px;right:8px;z-index:4;background:var(--wca-teal);color:#fff;font-size:8px;font-weight:800;padding:2px 7px;border-radius:4px;letter-spacing:1px;text-transform:uppercase;}

.type-section-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px;}

.type-section-label{font-size:13px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;}

.type-section-line{flex:1;height:1px;background:#1e3a52;}

/* ── CATALOG SECTION ── */

.catalog-section{background:#080f1a;padding:28px 28px 36px;}

.type-filter-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}

.type-tab{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid #1e3a52;background:none;color:#64748b;cursor:pointer;transition:var(--tr);}

.type-tab:hover{border-color:var(--wca-blue);color:#94a3b8;}

.type-tab.active{background:var(--wca-blue);border-color:var(--wca-blue);color:#fff;}

.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;}

.catalog-card{background:#111d2b;border:1px solid #1e3a52;border-radius:10px;overflow:hidden;cursor:pointer;transition:var(--tr);}

.catalog-card:hover{border-color:var(--wca-teal);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.4);}

.catalog-card:hover .card-overlay{opacity:1;}

/* ══════════════════════════════════════════

PRODUCT DETAIL MODAL

══════════════════════════════════════════ */

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);padding:16px;}

.modal-overlay.open{display:flex;}

.modal-box{background:#0c1a27;border:1px solid #1e3a52;border-radius:20px;width:100%;max-width:860px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.8);scrollbar-width:thin;scrollbar-color:#1e3a52 transparent;}

.modal-box::-webkit-scrollbar{width:5px;}

.modal-box::-webkit-scrollbar-thumb{background:#1e3a52;border-radius:4px;}

.modal-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0;}

.modal-breadcrumb{display:flex;align-items:center;gap:6px;font-size:11px;color:#64748b;}

.modal-breadcrumb span{color:var(--wca-teal);font-weight:600;}

.modal-close{background:#1a2d40;border:1px solid #2d4a63;color:#94a3b8;width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;}

.modal-close:hover{background:#c0392b;border-color:#c0392b;color:#fff;}

/* Two-column body */

.modal-body-wrap{display:grid;grid-template-columns:300px 1fr;gap:0;}

/* Left: Media */

.modal-media-col{padding:18px 16px 22px 22px;border-right:1px solid #1a2d3e;}

.modal-primary-img{width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px;}

.modal-primary-icon{font-size:72px;position:relative;z-index:2;}

.modal-primary-label{position:absolute;bottom:0;left:0;right:0;z-index:3;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);padding:28px 14px 12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);text-align:center;letter-spacing:.5px;}

.modal-primary-badge{position:absolute;top:10px;left:10px;z-index:4;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;border-radius:20px;background:rgba(0,169,157,.25);border:1px solid var(--wca-teal);color:var(--wca-teal-light);}

.modal-thumb-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;}

.modal-thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}

.modal-thumb{width:60px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;position:relative;}

.modal-thumb:hover{border-color:var(--wca-teal);transform:scale(1.05);}

.modal-thumb.active-thumb{border-color:var(--wca-teal);box-shadow:0 0 0 2px rgba(0,169,157,.3);}

.thumb-play-badge{position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.65);border-radius:3px;font-size:8px;padding:1px 4px;color:#fff;}

.modal-materials{display:flex;flex-direction:column;gap:6px;}

.material-row{display:flex;align-items:center;gap:10px;background:#111d2b;border:1px solid #1e3a52;border-radius:8px;padding:8px 12px;cursor:pointer;transition:var(--tr);}

.material-row:hover{border-color:var(--wca-teal);background:#142030;}

.material-icon{font-size:16px;flex-shrink:0;}

.material-info{flex:1;min-width:0;}

.material-name{font-size:11px;font-weight:600;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.material-meta{font-size:9px;color:#64748b;}

.material-dl{font-size:12px;color:#2d4a63;transition:var(--tr);}

.material-row:hover .material-dl{color:var(--wca-teal);}

/* Right: Info */

.modal-info-col{padding:18px 22px 22px 18px;display:flex;flex-direction:column;}

.modal-type-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(0,169,157,.12);border:1px solid rgba(0,169,157,.35);color:var(--wca-teal-light);font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px;width:fit-content;}

.modal-prod-name{font-size:24px;font-weight:900;color:#fff;line-height:1.15;margin-bottom:4px;letter-spacing:-.3px;}

.modal-mfr-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}

.modal-mfr-label{font-size:11px;color:#64748b;}

.modal-mfr-name{font-size:12px;font-weight:600;color:#94a3b8;}

.modal-formulary-status{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;margin-top:4px;width:fit-content;}

.status-in{background:rgba(0,169,157,.15);border:1px solid var(--wca-teal);color:var(--wca-teal);}

.status-out{background:rgba(255,255,255,.05);border:1px solid #2d4a63;color:#64748b;}

.info-divider{height:1px;background:#1a2d3e;margin:14px 0;}

.info-section-title{font-size:10px;font-weight:800;color:var(--wca-teal);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px;}

.info-section-title::after{content:'';flex:1;height:1px;background:#1a2d3e;}

.info-desc{font-size:12px;color:#94a3b8;line-height:1.75;}

.wound-tags{display:flex;flex-wrap:wrap;gap:6px;}

.wound-tag{display:flex;align-items:center;gap:5px;background:#111d2b;border:1px solid #1e3a52;border-radius:8px;padding:5px 11px;font-size:11px;color:#cbd5e1;font-weight:500;transition:var(--tr);}

.wound-tag:hover{border-color:var(--wca-teal);color:#fff;}

.wound-tag-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.codes-row{display:flex;gap:6px;flex-wrap:wrap;}

.code-chip{background:#111d2b;border:1px solid #1e3a52;border-radius:6px;padding:5px 11px;font-size:10px;font-family:'Courier New',monospace;color:#94a3b8;}

.code-chip strong{color:#cbd5e1;}

.modal-cta-row{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:14px;}

.cta-rep-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--wca-blue);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);width:100%;}

.cta-rep-btn:hover{background:var(--wca-blue-dark);box-shadow:0 6px 20px rgba(0,82,155,.4);}

.cta-connect-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(0,169,157,.1);color:var(--wca-teal-light);border:1px solid rgba(0,169,157,.4);border-radius:10px;padding:11px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:var(--tr);width:100%;text-decoration:none;}

.cta-connect-btn:hover{background:rgba(0,169,157,.2);border-color:var(--wca-teal);box-shadow:0 6px 20px rgba(0,169,157,.2);}

.luvo-connect-mark{font-size:11px;font-weight:900;letter-spacing:-.3px;}

.luvo-connect-mark em{font-style:normal;color:#7dd3fc;}

.modal-spec-note{background:var(--spec-bg);border-left:4px solid var(--spec-border);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 22px 20px;}

.modal-spec-note strong{color:var(--spec-head);font-size:11px;text-transform:uppercase;letter-spacing:1px;}

.modal-spec-note p{font-size:12px;color:#374151;margin-top:6px;line-height:1.6;}

</style>

</head>

<body>

<div><span>LUVO</span>  |  Product Formulary Module — <span style="color:#94a3b8">Concept v1.1 · WCA Dev Team Review</span></div>

<button onclick="downloadHTML()" style="background:#00a99d;color:#fff;border:none;border-radius:6px;padding:5px 14px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;">⬇ Download HTML File</button>

<button id="globalSpecToggle" onclick="toggleAllSpecs()">📋 Show Dev Specs</button>

</div>

<div class="wca-name">Wound Care Advantage<span>woundcareadvantage.com</span></div>

</div>

<div><div class="luvo-brand">LUVO</div><div class="luvo-sub">Business Intelligence</div></div>

</div>

<div class="nav-item active">Formulary</div>

<div class="nav-item">Dashboard</div>

<div class="nav-item">Outcomes</div>

<div class="nav-item">Compliance</div>

<div class="nav-item">Reports</div>

</nav>

<div class="hospital-pill"><div class="hosp-dot"></div>St. Mary's Medical Center · Wound Center</div>

</header>

<div class="hero-badge"><div class="hero-type-dot"></div>New in Your Formulary</div>

<div class="hero-title">Mepilex Border Ag</div>

<div class="hero-subtitle">Antimicrobial Foam Dressing</div>

<div class="hero-company">Mölnlycke Health Care</div>

<div class="hero-desc">All-in-one antimicrobial dressing with sustained silver release. Clinically proven for infected and at-risk wounds.</div>

<button class="btn-primary" onclick="openModal(5)">View Product Card</button>

<button class="btn-secondary">▶ Watch Overview</button>

</div>

<div class="hero-product-label">Mepilex Border Ag</div>

<div class="hero-product-tag">Foam Dressing</div>

</div>

<div class="slide-type-tag" style="background:rgba(0,82,155,.7);border:1px solid rgba(0,169,157,.4);">📦 Product Feature</div>

</div>

<div class="hero-badge" style="background:rgba(155,89,182,.2);border-color:#9b59b6;color:#c39bd3;"><div class="hero-type-dot" style="background:#9b59b6;"></div>Clinical Education Series</div>

<div class="hero-title">Understanding Biofilm</div>

<div class="hero-subtitle">A Clinical Deep Dive · 12 Min</div>

<div class="hero-company">WCA Clinical Education — CNO-Approved</div>

<div class="hero-desc">Learn to identify, disrupt, and manage biofilm in chronic wounds. A structured module for wound care clinicians at all skill levels.</div>

<button class="btn-primary" style="background:#7c3aed;">▶  Watch Now</button>

<button class="btn-secondary">Add to Training Queue</button>

</div>

<div class="hero-product-label">Biofilm in Chronic Wounds</div>

<div class="hero-product-tag">Education Video</div>

</div>

<div class="slide-type-tag" style="background:rgba(107,63,160,.7);border:1px solid rgba(155,89,182,.4);">🎓 Education Video</div>

</div>

<div class="hero-badge" style="background:rgba(0,169,157,.2);border-color:#00c4b8;color:#00c4b8;"><div class="hero-type-dot" style="background:#00c4b8;"></div>Product Video</div>

<div class="hero-title">Aquacel Ag+ Extra</div>

<div class="hero-subtitle">Hydrofiber Technology with Ionic Silver</div>

<div class="hero-company">Convatec</div>

<div class="hero-desc">Watch the full clinical overview of Aquacel Ag+ Extra — dual-action antimicrobial protection for chronic and infected wounds.</div>

<button class="btn-primary" style="background:#0d7a6e;">▶  Watch Product Video</button>

<button class="btn-secondary" onclick="openModal(0)">View Product Card</button>

</div>

<div class="hero-product-label">Aquacel Ag+ Extra</div>

<div class="hero-product-tag">Antimicrobial</div>

</div>

<div class="slide-type-tag" style="background:rgba(13,122,110,.7);border:1px solid rgba(0,196,184,.4);">🎬 Product Video</div>

</div>

</div>

</div>

<button class="spec-toggle-btn" onclick="toggleSpec('spec-hero')">📋 Dev Spec: Hero Carousel — click to expand</button>

<div class="spec-header"><div class="spec-badge">Dev Spec</div><div class="spec-title">Section 1 · Hero Feature Carousel</div></div>

<div class="spec-item"><div class="spec-label">Component</div><div class="spec-value">FormularyHeroCarousel</div></div>

<div class="spec-item"><div class="spec-label">Rotation</div><div class="spec-value">Auto-rotates every <strong>8 seconds</strong>. Pause on hover, resume on mouse-leave. Manual nav via arrows or dots.</div></div>

<div class="spec-item"><div class="spec-label">Slide Types</div><div class="spec-value"><ul><li>Product Feature Ad</li><li>Education Video (WCA Clinical Ed)</li><li>Product Video (manufacturer)</li></ul></div></div>

<div class="spec-item"><div class="spec-label">Click Behavior</div><div class="spec-value">"View Product Card" → Product Detail Modal. Video buttons → embedded video overlay. All slides fully clickable.</div></div>

<div class="spec-item"><div class="spec-label">Content Mgmt</div><div class="spec-value">CMS table: <code>hero_slides</code>. Fields: slide_type, product_id (nullable), video_url (nullable), display_order, center_id or global flag, active_dates.</div></div>

<div class="spec-item"><div class="spec-label">Mobile</div><div class="spec-value">Collapse hero height to 260px. Stack content vertically. Hide product art on small screens.</div></div>

</div>

<div class="section-label">My Formulary</div>

<div class="section-count" id="formularyCount">10 Products</div>

</div>

</div>

</div>

</div>

<div id="noResultsMsg" style="display:none;padding:20px;text-align:center;color:#64748b;font-size:13px;">No products match your search.</div>

</div>

</div>

<button class="spec-toggle-btn" onclick="toggleSpec('spec-formulary')">📋 Dev Spec: My Formulary — click to expand</button>

<div class="spec-header"><div class="spec-badge">Dev Spec</div><div class="spec-title">Section 2 · My Formulary (Hospital-Specific)</div></div>

<div class="spec-item"><div class="spec-label">Component</div><div class="spec-value">FormularyCarousel / FormularyByTypeView</div></div>

<div class="spec-item"><div class="spec-label">Data Source</div><div class="spec-value"><code>center_formulary</code> joined with <code>products</code>. Filtered by logged-in user's <code>center_id</code>. Center-approved products only.</div></div>

<div class="spec-item"><div class="spec-label">Card Fields</div><div class="spec-value"><ul><li>Product image (primary)</li><li>Product name</li><li>Manufacturer name</li><li>Product type/category</li></ul></div></div>

<div class="spec-item"><div class="spec-label">Search</div><div class="spec-value">Real-time client-side filter across product name + manufacturer. Works in both views.</div></div>

<div class="spec-item"><div class="spec-label">A–Z Toggle</div><div class="spec-value">Default. All approved products sorted alphabetically in a single carousel.</div></div>

<div class="spec-item"><div class="spec-label">By Type Toggle</div><div class="spec-value">Groups by <code>product_type</code>. Each type = labeled row with its own mini-carousel.</div></div>

</div>

<div class="section-label">Emerging Products</div>

<div class="section-count" style="background:#7c3aed;">3 Products</div>

</div>

<div style="font-size:11px;color:#64748b;">Curated by WCA Clinical Team</div>

</div>

</div>

<button class="spec-toggle-btn" onclick="toggleSpec('spec-emerging')">📋 Dev Spec: Emerging Products — click to expand</button>

<div class="spec-header"><div class="spec-badge">Dev Spec</div><div class="spec-title">Section 3 · Emerging Products</div></div>

<div class="spec-item"><div class="spec-label">Component</div><div class="spec-value">EmergingProductsCarousel (reuses ProductCard)</div></div>

<div class="spec-item"><div class="spec-label">Data Source</div><div class="spec-value">Table: <code>emerging_products</code>. WCA clinical team managed. Global — not center-filtered.</div></div>

<div class="spec-item"><div class="spec-label">Visual</div><div class="spec-value">"NEW" ribbon badge on each card. Purple count pill. Subtle section background shift.</div></div>

<div class="spec-item"><div class="spec-label">Card Click</div><div class="spec-value">Opens Product Detail Card. Includes CTA: "Request for My Formulary" → notifies WCA account manager.</div></div>

</div>

<div class="section-label">Full WCA Catalog</div>

<div class="section-count" style="background:#0d7a6e;">20 Products</div>

</div>

</div>

<button class="spec-toggle-btn" onclick="toggleSpec('spec-catalog')" style="margin:20px -28px -36px;width:calc(100% + 56px);">📋 Dev Spec: Full WCA Catalog — click to expand</button>

<div class="spec-header"><div class="spec-badge">Dev Spec</div><div class="spec-title">Section 4 · Full WCA Catalog</div></div>

<div class="spec-item"><div class="spec-label">Component</div><div class="spec-value">WCACatalogGrid</div></div>

<div class="spec-item"><div class="spec-label">Data Source</div><div class="spec-value">Table: <code>wca_products</code> — master WCA product list. Not center-filtered.</div></div>

<div class="spec-item"><div class="spec-label">Layout</div><div class="spec-value">Responsive grid (not carousel). 5–6 columns on desktop. Better for full browsing.</div></div>

<div class="spec-item"><div class="spec-label">Filtering</div><div class="spec-value">Product type tabs generated dynamically from DB. "All" default. Search filters across all types.</div></div>

<div class="spec-item"><div class="spec-label">Card Click</div><div class="spec-value">Product Detail Card. CTA: "In Your Formulary ✓" or "Request for Formulary" based on center status.</div></div>

</div>

<div class="modal-breadcrumb">Formulary &rsaquo; <span id="modalBreadType"></span></div>

</div>

</div>

<div class="modal-thumb-label">Images & Videos</div>

<div class="modal-thumb-label" style="margin-top:4px;">Materials & Downloads</div>

<div class="material-row"><div class="material-icon">📄</div><div class="material-info"><div class="material-name">Patient Education Guide</div><div class="material-meta">PDF · English & Spanish</div></div><div class="material-dl">⬇</div></div>

<div class="material-row"><div class="material-icon">📋</div><div class="material-info"><div class="material-name">Clinician IFU</div><div class="material-meta">PDF · Instructions for Use</div></div><div class="material-dl">⬇</div></div>

<div class="material-row"><div class="material-icon">🏷️</div><div class="material-info"><div class="material-name">Coding & Billing Sheet</div><div class="material-meta">PDF · HCPCS / ICD-10</div></div><div class="material-dl">⬇</div></div>

<div class="material-row"><div class="material-icon">📊</div><div class="material-info"><div class="material-name">Clinical Evidence Summary</div><div class="material-meta">PDF · Peer-reviewed studies</div></div><div class="material-dl">⬇</div></div>

</div>

<div>

<div class="modal-mfr-label">Manufacturer:</div>

</div>

<div class="info-section-title">Product Description</div>

<div class="info-section-title">Appropriate Wound Types</div>

<div class="info-section-title">Product Codes</div>

</div>

<button class="cta-rep-btn">📞  Contact Your Product Representative</button>

<span>Discuss on <span class="luvo-connect-mark">LUVO <em>Connect</em></span></span>

</a>

</div>

<strong>📋 Dev Spec — FormularyProductDetailCard</strong>

<p><strong>Left — Media:</strong> Primary image from <code>product_media</code> (type: primary). Thumbnails from all rows for that product_id ordered by display_order. Video-type thumbs show ▶ badge, open video player overlay on click. Downloads from <code>product_documents</code> table (patient_ed, clinician_ifu, coding_sheet, evidence_summary).</p>

<p style="margin-top:8px;"><strong>Right — Info:</strong> Name, manufacturer, type from <code>products</code>. Description from <code>products.description</code>. Wound types from <code>product_wound_types</code> join table. Codes from <code>product_codes</code> (HCPCS, SKU, NDC). Formulary status queries <code>center_formulary</code> for logged-in user's center_id.</p>

<p style="margin-top:8px;"><strong>CTAs:</strong> "Contact Rep" → rep contact modal or pre-fills email from <code>center_reps</code> table. "LUVO Connect" → deep-link into Connect module filtered to this product's thread.</p>

</div>

/* ── DATA ── */

const formularyProducts = [

{id:0,name:'Aquacel Ag+ Extra',company:'Convatec',type:'Antimicrobial',icon:'💧',color:'#0d4f3c',desc:'Hydrofiber Technology with ionic silver. Dual-action antimicrobial protection for infected or at-risk wounds requiring moisture management.'},

{id:1,name:'Drawtex Hydroconductive',company:'SteadMed',type:'Hydroconductive',icon:'🌊',color:'#1e2d60',desc:'Unique hydroconductive technology that actively transports exudate away from the wound bed to promote healing.'},

{id:2,name:'Integra Bilayer Matrix',company:'Integra LifeSciences',type:'Tissue Matrix',icon:'🔬',color:'#2a2050',desc:'Bilayer wound matrix designed for complex wounds requiring dermal regeneration and tissue reconstruction.'},

{id:3,name:'Medihoney Paste',company:'Derma Sciences',type:'Honey-Based',icon:'🍯',color:'#5a3000',desc:'Medical-grade manuka honey in paste format. Delivers antimicrobial action and autolytic debridement in a single application.'},

{id:4,name:'Mepilex Border',company:'Mölnlycke',type:'Foam Dressing',icon:'🩹',color:'#003d73',desc:'Soft silicone foam dressing with Safetac border technology. Non-traumatic removal ideal for pressure injury management.'},

{id:5,name:'Mepilex Border Ag',company:'Mölnlycke',type:'Foam Dressing',icon:'🩹',color:'#0d3060',desc:'Antimicrobial all-in-one dressing combining Safetac technology with sustained silver release for infected or at-risk wounds.'},

{id:6,name:'MEPITEL One',company:'Mölnlycke',type:'Contact Layer',icon:'🔲',color:'#0d4a5a',desc:'Single-layer wound contact dressing with Safetac technology. Transparent and conformable for traumatic and burn wounds.'},

{id:7,name:'Promogran Prisma',company:'Systagenix / 3M',type:'Collagen/ORC',icon:'🧬',color:'#3a1060',desc:'Collagen/ORC/silver matrix that manages destructive MMPs to promote healing in chronic, stalled wounds.'},

{id:8,name:'Puracol Plus AG+',company:'Medline',type:'Collagen',icon:'🧬',color:'#1e4a20',desc:'Native collagen with silver-ORC reinforcement formulated for chronic and hard-to-heal wounds unresponsive to standard care.'},

{id:9,name:'V.A.C. Therapy',company:'KCI / 3M',type:'Negative Pressure',icon:'⚙️',color:'#5a1a1a',desc:'The gold standard in negative pressure wound therapy (NPWT). Promotes granulation and reduces edema in complex wounds.'},

];

const emergingProducts = [

{id:10,name:'Kerecis Omega3 Wound',company:'Kerecis',type:'Fish Skin Graft',icon:'🐟',color:'#003d5a',desc:'Intact fish skin graft rich in Omega-3 fatty acids. Supports the body\'s natural healing process and immune response.'},

{id:11,name:'Miroderm',company:'Miromatrix Medical',type:'ECM Matrix',icon:'🔬',color:'#2a3a5a',desc:'Extracellular matrix derived from porcine liver. Supports complex wound reconstruction and soft tissue repair.'},

{id:12,name:'AmnioBand Membrane',company:'MTF Biologics',type:'Amniotic',icon:'🌱',color:'#1a4f2a',desc:'Human amniotic membrane allograft rich in growth factors for difficult-to-heal wounds and tissue regeneration.'},

];

const catalogProducts = [

...formularyProducts,

{id:13,name:'Tegaderm Foam',company:'3M',type:'Foam Dressing',icon:'🩹',color:'#1a3a6e',desc:'Non-adhesive and adhesive foam options for moderate to heavy exudate wounds across care settings.'},

{id:14,name:'Allevyn Life',company:'Smith & Nephew',type:'Foam Dressing',icon:'🩹',color:'#0d3a5a',desc:'Concave foam dressing that adapts to body contours and stays in place during movement and activity.'},

{id:15,name:'SANTYL Collagenase',company:'Healthpoint Biotherapeutics',type:'Enzymatic Debridement',icon:'⚗️',color:'#4a2a00',desc:'Only FDA-approved enzymatic debriding agent. Provides selective, continuous debridement of necrotic tissue.'},

{id:16,name:'Iodosorb Gel',company:'Smith & Nephew',type:'Antimicrobial',icon:'💊',color:'#1a4a3a',desc:'Cadexomer iodine gel for sloughy, infected wounds. Removes biofilm components while promoting a clean wound bed.'},

{id:17,name:'Compression Wrap Pro',company:'Mölnlycke',type:'Compression',icon:'🦵',color:'#2a1a3a',desc:'Multi-layer compression bandaging for venous leg ulcers. Delivers sustained 40mmHg compression throughout wear.'},

{id:18,name:'Urgotul Silver',company:'Urgo Medical',type:'Contact Layer',icon:'🔲',color:'#1a3a4a',desc:'Non-adherent silver-coated contact layer with sustained antimicrobial action for up to 7 days per application.'},

{id:19,name:'CelluTome Epidermal',company:'KCI / 3M',type:'Tissue Harvesting',icon:'🔬',color:'#3a2a1a',desc:'Epidermal harvesting system enabling minimally invasive autologous grafting directly at the bedside.'},

];

const allProducts = [...catalogProducts, ...emergingProducts.filter(e => !catalogProducts.find(c=>c.id===e.id))];

const woundMap = {

'Foam Dressing': [{l:'Pressure Injuries',c:'#c0392b'},{l:'Venous Leg Ulcers',c:'#2980b9'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Surgical Wounds',c:'#8e44ad'}],

'Antimicrobial': [{l:'Infected Wounds',c:'#c0392b'},{l:'Biofilm-Susceptible',c:'#e67e22'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Surgical Site Infections',c:'#8e44ad'}],

'Hydroconductive': [{l:'Heavy Exudate Wounds',c:'#2980b9'},{l:'Venous Leg Ulcers',c:'#16a085'},{l:'Cavity Wounds',c:'#8e44ad'}],

'Tissue Matrix': [{l:'Complex Wounds',c:'#c0392b'},{l:'Burns',c:'#e67e22'},{l:'Surgical Reconstruction',c:'#8e44ad'},{l:'Traumatic Wounds',c:'#2980b9'}],

'Honey-Based': [{l:'Infected Wounds',c:'#c0392b'},{l:'Sloughy Wounds',c:'#e67e22'},{l:'Pressure Injuries',c:'#8e44ad'},{l:'Leg Ulcers',c:'#2980b9'}],

'Contact Layer': [{l:'Burns',c:'#e67e22'},{l:'Skin Graft Sites',c:'#27ae60'},{l:'Donor Sites',c:'#2980b9'},{l:'Superficial Wounds',c:'#16a085'}],

'Collagen/ORC': [{l:'Chronic Wounds',c:'#c0392b'},{l:'Stalled Healing',c:'#e67e22'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Venous Ulcers',c:'#2980b9'}],

'Collagen': [{l:'Chronic Wounds',c:'#c0392b'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Pressure Injuries',c:'#8e44ad'},{l:'Full Thickness Wounds',c:'#2980b9'}],

'Negative Pressure': [{l:'Complex/Deep Wounds',c:'#c0392b'},{l:'Post-Surgical',c:'#8e44ad'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Traumatic Wounds',c:'#2980b9'}],

'Fish Skin Graft': [{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Venous Leg Ulcers',c:'#2980b9'},{l:'Burns',c:'#e67e22'},{l:'Traumatic Wounds',c:'#c0392b'}],

'ECM Matrix': [{l:'Complex Wounds',c:'#c0392b'},{l:'Surgical Reconstruction',c:'#8e44ad'},{l:'Non-healing Wounds',c:'#e67e22'}],

'Amniotic': [{l:'Chronic Non-healing',c:'#c0392b'},{l:'Diabetic Foot Ulcers',c:'#27ae60'},{l:'Venous Ulcers',c:'#2980b9'},{l:'Burns',c:'#e67e22'}],

'Enzymatic Debridement': [{l:'Necrotic Wounds',c:'#c0392b'},{l:'Pressure Injuries',c:'#8e44ad'},{l:'Burns',c:'#e67e22'},{l:'Sloughy Wounds',c:'#f39c12'}],

'Compression': [{l:'Venous Leg Ulcers',c:'#2980b9'},{l:'Lymphedema',c:'#16a085'},{l:'Mixed Etiology Ulcers',c:'#8e44ad'}],

'Tissue Harvesting': [{l:'Skin Graft Donor Sites',c:'#27ae60'},{l:'Burns',c:'#e67e22'},{l:'Chronic Wounds',c:'#c0392b'}],

};

const defaultWounds = [{l:'Chronic Wounds',c:'#c0392b'},{l:'Acute Wounds',c:'#2980b9'},{l:'Surgical Wounds',c:'#8e44ad'}];

/* ── HERO ── */

let currentSlide=0, heroProgress=0, progressTimer;

const SLIDE_DURATION=8000;

function goToSlide(n){

document.getElementById('slide-'+currentSlide).classList.remove('active');

document.querySelectorAll('.hero-dot')[currentSlide].classList.remove('active');

currentSlide=n;

document.getElementById('slide-'+currentSlide).classList.add('active');

document.querySelectorAll('.hero-dot')[currentSlide].classList.add('active');

resetProgress();

}

function changeSlide(dir){

const total=document.querySelectorAll('.hero-slide').length;

goToSlide((currentSlide+dir+total)%total);

}

function resetProgress(){

clearInterval(progressTimer);heroProgress=0;

document.getElementById('heroProgress').style.width='0%';

progressTimer=setInterval(()=>{

heroProgress+=100/(SLIDE_DURATION/100);

document.getElementById('heroProgress').style.width=heroProgress+'%';

if(heroProgress>=100)changeSlide(1);

},100);

}

resetProgress();

/* ── BUILD CARD ── */

function buildCard(p, isEmerging=false){

const d=document.createElement('div');

d.className='product-card';

d.onclick=()=>openModal(p.id);

d.innerHTML=`<div class="card-img-area" style="background:linear-gradient(135deg,${p.color},${p.color}99);">

${isEmerging?'<div class="new-ribbon">NEW</div>':''}

</div>

<div class="card-company">${p.company}</div>

</div>`;

return d;

}

/* ── FORMULARY ── */

function renderFormularyAlpha(products){

const track=document.getElementById('formularyTrack');

track.innerHTML='';

[...products].sort((a,b)=>a.name.localeCompare(b.name)).forEach(p=>track.appendChild(buildCard(p)));

document.getElementById('noResultsMsg').style.display=products.length?'none':'block';

document.getElementById('formularyCount').textContent=products.length+' Product'+(products.length!==1?'s':'');

}

function renderFormularyByType(products){

const view=document.getElementById('typeView');view.innerHTML='';

const grouped={};

products.forEach(p=>{if(!grouped[p.type])grouped[p.type]=[];grouped[p.type].push(p);});

Object.keys(grouped).sort().forEach(type=>{

const sec=document.createElement('div');

sec.innerHTML=`<div class="type-section-head"><div class="type-section-label">${type}</div><div class="type-section-line"></div></div>`;

const id='tt_'+type.replace(/\W/g,'_');

const row=document.createElement('div');row.style.position='relative';

const wrap=document.createElement('div');wrap.className='carousel-track-wrap';

const track=document.createElement('div');track.className='carousel-track';track.id=id;

grouped[type].forEach(p=>track.appendChild(buildCard(p)));

wrap.appendChild(track);row.appendChild(wrap);sec.appendChild(row);view.appendChild(sec);

});

}

let currentView='alpha';

function setView(v){

currentView=v;

const q=document.getElementById('formularySearch').value.toLowerCase();

const filtered=formularyProducts.filter(p=>p.name.toLowerCase().includes(q)||p.company.toLowerCase().includes(q));

if(v==='alpha'){

document.getElementById('alphaView').style.display='';

document.getElementById('typeView').style.display='none';

document.getElementById('toggleAlpha').classList.add('active');

document.getElementById('toggleType').classList.remove('active');

renderFormularyAlpha(filtered);

} else {

document.getElementById('alphaView').style.display='none';

document.getElementById('typeView').style.display='';

document.getElementById('toggleAlpha').classList.remove('active');

document.getElementById('toggleType').classList.add('active');

renderFormularyByType(filtered);

}

function filterFormulary(){

const q=document.getElementById('formularySearch').value.toLowerCase();

const filtered=formularyProducts.filter(p=>p.name.toLowerCase().includes(q)||p.company.toLowerCase().includes(q));

if(currentView==='alpha')renderFormularyAlpha(filtered);else renderFormularyByType(filtered);

}

/* ── EMERGING ── */

function renderEmerging(){

const track=document.getElementById('emergingTrack');

emergingProducts.forEach(p=>track.appendChild(buildCard(p,true)));

}

/* ── CATALOG ── */

let activeCatalogType='All';

function renderCatalog(){

const types=['All',...new Set(catalogProducts.map(p=>p.type))].sort();

const unique=[...new Set(['All',...types])];

const tabs=document.getElementById('catalogTabs');tabs.innerHTML='';

unique.forEach(t=>{

const btn=document.createElement('button');

btn.className='type-tab'+(t===activeCatalogType?' active':'');

btn.textContent=t;

btn.onclick=()=>{activeCatalogType=t;renderCatalog();};

tabs.appendChild(btn);

});

filterCatalog();

}

function filterCatalog(){

const q=document.getElementById('catalogSearch').value.toLowerCase();

const grid=document.getElementById('catalogGrid');grid.innerHTML='';

catalogProducts

.filter(p=>activeCatalogType==='All'||p.type===activeCatalogType)

.filter(p=>p.name.toLowerCase().includes(q)||p.company.toLowerCase().includes(q))

.sort((a,b)=>a.name.localeCompare(b.name))

.forEach(p=>{

const card=document.createElement('div');

card.className='catalog-card';

card.onclick=()=>openModal(p.id);

const inF=formularyProducts.some(f=>f.id===p.id);

card.innerHTML=`<div class="card-img-area" style="background:linear-gradient(135deg,${p.color},${p.color}99);height:90px;">

${inF?'<div class="card-type-badge" style="background:rgba(0,169,157,.7);">✓ In Formulary</div>':''}

</div>

<div class="card-company" style="font-size:9px;">${p.company}</div>

</div>`;

grid.appendChild(card);

});

}

/* ── CAROUSEL SCROLL ── */

const carouselOffsets={};

function scrollCarousel(id,dir){

const track=document.getElementById(id);if(!track)return;

if(!carouselOffsets[id])carouselOffsets[id]=0;

const cardW=182;

const visible=Math.floor(track.parentElement.offsetWidth/cardW);

const max=Math.max(0,track.children.length-visible);

carouselOffsets[id]=Math.max(0,Math.min(max,carouselOffsets[id]+dir*3));

track.style.transform=`translateX(-${carouselOffsets[id]*cardW}px)`;

}

/* ── MODAL ── */

function openModal(id){

const p=allProducts.find(x=>x.id===id);if(!p)return;

const inFormulary=formularyProducts.some(f=>f.id===p.id);

const wounds=woundMap[p.type]||defaultWounds;

const sku=p.name.substring(0,3).toUpperCase()+'-'+(1000+(p.id*317%9000));

document.getElementById('modalBreadType').textContent=p.type;

// Primary image

const pri=document.getElementById('modalPrimaryImg');

pri.style.background=`linear-gradient(135deg,${p.color} 0%,${p.color}bb 60%,#0c1a27 100%)`;

document.getElementById('modalPrimaryBadge').textContent=p.type;

document.getElementById('modalPrimaryIcon').textContent=p.icon;

document.getElementById('modalPrimaryLabel').textContent=p.name;

// Thumbnails

const thumbWrap=document.getElementById('modalThumbs');thumbWrap.innerHTML='';

const thumbs=[

{icon:p.icon,bg:p.color,type:'image'},

{icon:p.icon,bg:p.color+'88',type:'image'},

{icon:'▶',bg:'#1a2d40',type:'video',label:'Overview'},

{icon:'▶',bg:'#1a2d40',type:'video',label:'How-to'},

];

thumbs.forEach((t,i)=>{

const d=document.createElement('div');

d.className='modal-thumb'+(i===0?' active-thumb':'');

d.style.background=`linear-gradient(135deg,${t.bg},${t.bg}88)`;

d.innerHTML=`<span style="font-size:${t.type==='video'?'18px':'22px'};position:relative;z-index:2;">${t.icon}</span>${t.type==='video'?'<div class="thumb-play-badge">▶</div>':''}`;

d.onclick=()=>{thumbWrap.querySelectorAll('.modal-thumb').forEach(x=>x.classList.remove('active-thumb'));d.classList.add('active-thumb');};

thumbWrap.appendChild(d);

});

// Info

document.getElementById('modalTypePill').textContent=p.type;

document.getElementById('modalProdName').textContent=p.name;

document.getElementById('modalMfr').textContent=p.company;

document.getElementById('modalDesc').textContent=p.desc;

const fs=document.getElementById('modalFormularyStatus');

fs.className='modal-formulary-status '+(inFormulary?'status-in':'status-out');

fs.innerHTML=inFormulary?'✓  In Your Center\'s Formulary':'+  Request for Formulary';

document.getElementById('modalWounds').innerHTML=wounds.map(w=>`<div class="wound-tag"><div class="wound-tag-dot" style="background:${w.c};"></div>${w.l}</div>`).join('');

document.getElementById('modalCodes').innerHTML=`

<div class="code-chip"><strong>HCPCS</strong> A6${216+p.id}</div>

<div class="code-chip"><strong>NDC</strong> 00257-${1000+p.id*7}</div>`;

document.getElementById('productModal').classList.add('open');

}

function closeModal(){document.getElementById('productModal').classList.remove('open');}

document.getElementById('productModal').addEventListener('click',e=>{if(e.target.id==='productModal')closeModal();});

/* ── SPEC TOGGLES ── */

let specsVisible=false;

function toggleAllSpecs(){

specsVisible=!specsVisible;

document.querySelectorAll('.spec-panel').forEach(p=>p.classList.toggle('visible',specsVisible));

document.getElementById('globalSpecToggle').textContent=specsVisible?'📋 Hide Dev Specs':'📋 Show Dev Specs';

}

function toggleSpec(id){document.getElementById(id).classList.toggle('visible');}

/* ── INIT ── */

renderFormularyAlpha(formularyProducts);

renderEmerging();

renderCatalog();

/* ── DOWNLOAD ── */

function downloadHTML(){

const html = document.documentElement.outerHTML;

const blob = new Blob([html], {type:'text/html'});

const a = document.createElement('a');

a.href = URL.createObjectURL(blob);

a.download = 'LUVO-Formulary-Concept-v1.1.html';

a.click();

}

</script>

</body>

</html>