/* ============================================================================
   Clinicians' Choice — our own rebuild of the FrontRowMD surfaces that run on
   happyv.com/products/debloat-digest (Kalp, 2026-09-18: "clone this design").
   Two visible surfaces, one modal, no iframe and no third-party call:
     .vp-sticker  — the vertical ribbon card pinned to the TOP-RIGHT of
                    gallery slide 1 (donor: presentation_type=sticker)
     .vp-badge    — the embedded row above the pack-size selector
                    (donor: presentation_type=quant, #embedded)
     .vp-overlay  — FAQ + credential sheets (our vetpanel-engine modal)
   Geometry, type sizes, weights and colours are read off the donor widget
   documents saved in _clinicians/ref/{sticker,quant}.html.
   ============================================================================ */
:root{ --vp-ink:#212121; --vp-ink-2:#424242; --vp-muted:#757575; --vp-line:#EEE; --vp-gold:#DB9E18; }

.vp,.vp *{box-sizing:border-box;letter-spacing:normal;text-transform:none;font-family:'Open Sans',system-ui,sans-serif;color:var(--vp-ink)}
.vp p{margin:0}
.vp button{padding:0;border:none;background:transparent;cursor:pointer;font-family:inherit}
.vp .bold{font-weight:600}
.vp .italics{font-style:italic}
.vp .lau,.vp .cad{display:inline-flex;align-items:center}
.vp .lau svg,.vp .cad svg{height:100%;width:auto;display:block}
@keyframes vpFade{from{opacity:0}to{opacity:1}}
.vp .fade{animation:vpFade .5s ease-in-out}

/* ---------------------------------------------------------------- EMBEDDED BADGE
   donor #embedded: column, gap 10px, Lora 18px/500 heading, 15px/22px body,
   24px avatars overlapped -8px, underlined 15px/500 link. No card, no border. */
.vp-badge{display:flex;flex-direction:column;gap:10px;width:100%}
.vp-badge .heading{display:flex;flex-direction:row;gap:4px;align-items:center}
.vp-badge .heading>p{font-size:18px;font-weight:500;line-height:normal;font-family:'Lora',Georgia,serif;letter-spacing:.3px}
.vp-badge .lau{height:18px}
.vp-badge .cad{height:15px}
.vp-badge .main-copy{display:block;font-size:15px;line-height:22px}
.vp-badge .cta{display:flex;flex-direction:row;gap:10px;align-items:center;margin-top:2px}
.vp-badge .images{display:inline-flex;align-items:center;vertical-align:middle}
.vp-badge .images img{width:24px;height:24px;border-radius:100px;object-fit:cover;background:#eee;border:2px solid #fff;display:inline-block;vertical-align:middle}
.vp-badge .images img:nth-of-type(n+2){margin-left:-8px}
.vp-badge .learn-more>p{font-size:15px;font-weight:500;line-height:normal;text-decoration-line:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:349px){ .vp-badge .main-copy,.vp-badge .learn-more>p{font-size:14px} }

/* the ribbon is absolutely positioned inside the gallery slide, as on the donor */
.product__media-wrapper .swiper-slide{position:relative}

/* ---------------------------------------------------------------- HERO STICKER
   donor: 76px content column on a white ribbon with two tails, 8px shadow
   padding each side, scaled 1.3 from 769px up. Pinned top-RIGHT per Kalp. */
.vp-sticker{position:absolute;top:0;right:2px;z-index:3;width:92px;padding:0 8px 21px;
  display:flex;flex-direction:column;align-items:center;overflow:visible;pointer-events:auto}
/* the ribbon is drawn at its native 92px and then scaled to a fixed FRACTION of the
   gallery frame (--stk-k, set by doe-clinicians.js on load + resize), so it reads the
   same size on a 375px phone and a 1440px desktop and never reaches the slider arrow.
   The donor runs 76px of content on a 528px slide = 0.187 of the frame. */
.vp-sticker{transform:scale(var(--stk-k,1));transform-origin:top right}
.vp-sticker .stk-card{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:center;
  width:76px;height:146px;padding:8px 0 0;background:#fff;z-index:2;position:relative;overflow:hidden;
  transition:height .3s ease-in-out}
.vp-sticker.min .stk-card{height:0;padding:0;opacity:0;visibility:hidden}
.vp-sticker .stk-bar{display:flex;width:100%;justify-content:center;align-items:center}
.vp-sticker .stk-mark{display:flex;height:11px}
.vp-sticker .stk-mark svg{height:100%;width:auto;display:block}
.vp-sticker .stk-x{display:flex;position:absolute;top:0;right:0;padding:6px;z-index:3;line-height:0}
.vp-sticker .stk-head{display:flex;justify-content:center;align-items:center;gap:3px;margin-top:-5px}
.vp-sticker .stk-head>p{text-align:center;font-family:'Lora',Georgia,serif;font-size:10px;font-weight:600;line-height:12px}
.vp-sticker .stk-head .lau{width:11.064px;height:22px}
.vp-sticker .stk-head .lau.r{transform:scaleX(-1)}
.vp-sticker .stk-head .lau:first-of-type{margin-right:-4px}
.vp-sticker .stk-head .lau:last-of-type{margin-left:-4px}
.vp-sticker .stk-col{display:flex;flex-direction:column;gap:12px;align-items:center}
.vp-sticker .stk-txt{display:flex;flex-direction:column;gap:1px;align-items:center}
.vp-sticker .stk-count{font-size:8px;font-weight:600;line-height:11px;text-align:center}
.vp-sticker .stk-desc{font-size:7.5px;line-height:10px;text-align:center;color:var(--vp-muted)}
.vp-sticker .stk-more{border-bottom:.4px solid var(--vp-muted);padding:3px 0 2px;display:flex;gap:4px;align-items:center;justify-content:flex-end}
.vp-sticker .stk-more>p{font-size:7.5px;font-weight:600;line-height:5px;text-align:center;color:var(--vp-muted)}
.vp-sticker .stk-cta{background:#F5F5F5;display:flex;align-items:center;justify-content:center;padding:5px;
  border-radius:100px;font-size:7px;font-weight:600;line-height:5px;text-align:center}
.vp-sticker .stk-tails{width:76px;height:13px;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:0;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));-webkit-filter:drop-shadow(0 4px 4px rgba(0,0,0,.12))}
.vp-sticker .stk-tails svg{position:absolute;bottom:0;left:0;width:100%;height:13px;display:block}
.vp-sticker .stk-body{position:absolute;left:0;bottom:12px;width:100%;height:170px;background:#fff;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));-webkit-filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));
  transition:height .3s ease-in-out}
.vp-sticker.min .stk-body{height:9px}
.vp-sticker .stk-open{display:none;position:absolute;top:0;left:8px;width:76px;height:21px;z-index:2}
.vp-sticker.min .stk-open{display:block}

/* ---------------------------------------------------------------- MODAL */
.vp-overlay{position:fixed;inset:0;z-index:100000;background:rgba(33,33,33,.45);display:none;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.vp-overlay.open{display:flex}
.vp-sheet{background:#fff;border-radius:16px;width:100%;max-width:520px;margin:auto;overflow:hidden;animation:vpUp .28s ease}
@keyframes vpUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
.vp-mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--vp-line);position:sticky;top:0;background:#fff}
.vp-mhead .wm{display:inline-flex;align-items:center;gap:6px;font-family:'Lora',Georgia,serif;font-weight:600;font-size:20px}
.vp-mhead .wm .cad{height:22px}
.vp-mhead .nav{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:400;color:var(--vp-muted)}
.vp-mbody{padding:22px;max-height:70vh;overflow-y:auto}

.vp-faq-item{border-bottom:1px solid var(--vp-line)}
.vp-faq-q{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:18px 0;font-size:17px;font-weight:600;text-align:left}
.vp-faq-q .pm{width:28px;height:28px;border-radius:100px;background:#f2f2f0;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.vp-faq-a{font-size:15px;line-height:24px;color:var(--vp-ink-2);padding:0 0 18px;display:none}
.vp-faq-item.open .vp-faq-a{display:block}
.vp-faq-item.open .pm{background:#e6e6e3}
.vp-shared-title{font-size:20px;font-weight:700;font-family:'Lora',Georgia,serif;margin:24px 0 8px}
.vp-shared-sub{font-size:14px;line-height:22px;color:var(--vp-ink-2);margin-bottom:16px}
.vp-practice{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--vp-line)}
.vp-practice img{width:44px;height:44px;border-radius:100px;object-fit:cover;flex-shrink:0}
.vp-practice .pc-name{font-size:15px;font-weight:700;text-decoration:underline;text-align:left;display:block}
.vp-practice .pc-meta{font-size:13px;color:var(--vp-muted);margin-top:2px}
.vp-practice .pc-prev{margin-left:auto;border:1px solid var(--vp-line);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;flex-shrink:0}

.vp-cred-top{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.vp-cred-top img{width:64px;height:64px;border-radius:100px;object-fit:cover;border:1px solid var(--vp-line)}
.vp-cred-top .nm{font-size:22px;font-weight:600}
.vp .verified{display:flex;align-items:center;gap:6px;font-size:15px;line-height:normal;color:var(--vp-ink-2);opacity:.85;margin-top:5px}
.vp .verified svg{width:15px;height:15px;flex-shrink:0}
.vp-cred-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--vp-line);font-size:15px}
.vp-cred-row .v{text-align:right}
.vp-mdisc{font-style:italic;font-size:13px;color:var(--vp-muted);line-height:20px;text-align:center;padding:18px;border-top:1px solid var(--vp-line)}

@media (max-width:820px){
  .vp-overlay{padding:0}
  .vp-sheet{max-width:none;border-radius:16px 16px 0 0;margin:auto 0 0;min-height:82vh}
  .vp-mbody{max-height:none}
}