/* ==========================================================================
   LP Side Cart — licensedpeptides.com
   Ported from sidecart-v2/mockup/sidecart.html (approved 2026-08-22).

   Tokens lifted verbatim from the LIVE LP3-R PDP. That is the point of the
   rebuild: the old cart used #0170b9 / #2f6fd8 / #2d88ca and no longer matched
   the product pages.

   ⛔ TOKENS LIVE ON .lpc, NOT :root.
      This stylesheet loads on every page of a live store and must not be able
      to restyle anything outside the drawer.
      WARNING: do not wrap these in a global root selector. An earlier build
         did exactly that and the tokens ended up NESTED inside the selector,
         where they matched nothing — every colour, border and font in the
         drawer was silently undefined while the layout still looked fine.
   ========================================================================== */

.lpc,
.lpcart-scrim,
.lpcart-wallets {
  --navy:#003267; --navy-2:#00284f; --navy-3:#013368;
  --mint:#70fda7; --mint-ink:#007440; --green:#00b46c; --green-2:#12b76a; --green-3:#23a345;
  --b-dae:#dae2ff; --b-e8:#e8eeff; --b-f0:#f0f3ff; --b-d9:#d9e3fb;
  --ink:#111c2d; --ink-2:#434653; --ink-3:#6b7280;
  --line:#e6e9f2; --line-soft:rgba(195,198,213,.32);
  --card-sh:0 11px 34px rgba(44,92,197,.07);
  --f-h:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* ============================================================
   THE CART
   ============================================================ */
.lpc{position:absolute;font-family:var(--f-b);color:var(--ink);z-index:40;display:flex;flex-direction:column;
  background:#fff;overflow:hidden;
  animation:lpc-in .42s cubic-bezier(.22,1,.36,1) both}
.lpc *{box-sizing:border-box}
.lpc :where(button){font-family:inherit;border:0;background:none;padding:0;cursor:pointer;color:inherit}
.lpc :where(a){color:inherit;text-decoration:none}

/* desktop: floating inset panel, matching the PDP's card language */
.lpc{top:14px;right:14px;bottom:14px;width:438px;border-radius:24px;
  box-shadow:0 40px 90px -20px rgba(0,26,56,.45),0 0 0 1px rgba(0,50,103,.06)}
/* mobile: full-bleed sheet */

@keyframes lpc-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.lpc-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:18px 20px 14px;background:#fff;position:relative;z-index:3}

.lpc-head h2{font-family:var(--f-h);font-weight:800;font-size:19px;letter-spacing:-.4px;color:var(--navy);margin:0}
.lpc-count{font-family:var(--f-b);font-weight:700;font-size:11.5px;line-height:1;color:#fff;background:var(--navy);
  border-radius:999px;padding:5px 9px;min-width:22px;text-align:center}
.lpc-x{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--b-f0);color:var(--navy);
  display:flex;align-items:center;justify-content:center;transition:.16s}
.lpc-x:hover{background:var(--b-dae);transform:rotate(90deg)}
.lpc-x svg{width:15px;height:15px}

/* ---------- free shipping meter ---------- */
.lpc-ship{flex:0 0 auto;margin:0 20px 4px;border-radius:14px;padding:11px 13px;background:var(--b-f0);
  border:1px solid rgba(0,50,103,.07);transition:background .3s,border-color .3s}
.lpc-ship-top{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.35;color:var(--ink-2);font-weight:500}
.lpc-ship-top svg{width:17px;height:17px;flex:0 0 auto;color:var(--navy)}
.lpc-ship-top b{color:var(--navy);font-weight:700}
.lpc-bar{margin-top:9px;height:6px;border-radius:99px;background:#dfe6f7;overflow:hidden;position:relative}
.lpc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--navy),#2f7fd4 55%,var(--green));
  transition:width .5s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.lpc-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:shimmer 2.4s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.lpc.is-freeship .lpc-ship{background:#e9fbf1;border-color:rgba(0,180,108,.22)}
.lpc.is-freeship .lpc-ship-top svg,.lpc.is-freeship .lpc-ship-top b{color:var(--mint-ink)}
.lpc.is-freeship .lpc-ship-top{color:var(--mint-ink)}
.lpc.is-freeship .lpc-bar{display:none}
.lpc.is-freeship .lpc-bar i{background:linear-gradient(90deg,var(--green),#00d17e)}

/* ---------- scroll body ---------- */
.lpc-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 22px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px);
  scrollbar-width:thin;scrollbar-color:#c9d3e6 transparent}
.lpc-body::-webkit-scrollbar{width:6px}
.lpc-body::-webkit-scrollbar-thumb{background:#c9d3e6;border-radius:9px}
.lpc-body::-webkit-scrollbar-track{background:transparent}

/* ---------- line item ---------- */
.lpc-item{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);position:relative;
  animation:row-in .38s cubic-bezier(.22,1,.36,1) both}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lpc-item:first-child{padding-top:2px}
.lpc-thumb{flex:0 0 auto;width:78px;height:78px;border-radius:16px;background:var(--b-f0);
  border:1px solid var(--line-soft);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lpc-thumb img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.lpc-main{flex:1 1 auto;min-width:0}
.lpc-row1{display:flex;align-items:flex-start;gap:10px}
.lpc-name{font-family:var(--f-h);font-weight:700;font-size:15.5px;line-height:1.25;letter-spacing:-.25px;color:var(--navy);
  margin:0;padding-right:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lpc-rm{flex:0 0 auto;width:22px;height:22px;border-radius:50%;color:#9aa4b8;display:flex;align-items:center;justify-content:center;
  margin:-2px -4px 0 auto;transition:.16s}
.lpc-rm:hover{background:#fdeaea;color:#d84a4a}
.lpc-rm svg{width:11px;height:11px}
.lpc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.lpc-tag{font-size:11px;font-weight:600;line-height:1;color:var(--navy);background:var(--b-e8);border-radius:7px;padding:5px 8px;white-space:nowrap}
.lpc-edit{font-size:11.5px;font-weight:600;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;padding:4px 2px;transition:.15s}
.lpc-edit:hover{color:var(--navy)}
.lpc-row2{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:9px}
.lpc-qty{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;height:34px;padding:0 3px}
.lpc-qty button{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:.14s}
.lpc-qty button:hover{background:var(--b-e8)}
.lpc-qty button:active{transform:scale(.88)}
.lpc-qty button[disabled]{opacity:.32;pointer-events:none}
.lpc-qty svg{width:11px;height:11px}
.lpc-qty span{min-width:26px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lpc-prices{text-align:right;line-height:1.1;flex:0 0 auto}
.lpc-pr-top{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:3px}
.lpc-was{font-size:11.5px;color:var(--ink-3);text-decoration:line-through}
.lpc-now{font-size:18px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.3px;display:block}
.lpc-save{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--mint-ink);background:var(--mint);
  border-radius:99px;padding:3px 7px;line-height:1;font-variant-numeric:tabular-nums}
.lpc-ea{margin-top:7px;font-size:12px;font-weight:500;color:var(--green-2);display:flex;align-items:center;gap:5px}
.lpc-ea b{font-weight:700}
.lpc-ea svg{width:13px;height:13px;flex:0 0 auto;opacity:.9}

/* inline variant switcher (replaces "Select options") */
.lpc-swap{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.22,1,.36,1)}
.lpc-item.is-swapping .lpc-swap{max-height:230px}
.lpc-swap-in{margin-top:12px;background:var(--b-f0);border:1px solid rgba(0,50,103,.08);border-radius:14px;padding:11px 12px}
.lpc-swap-lbl{font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.lpc-swap-lbl+.lpc-chips{margin-bottom:11px}
.lpc-chips{display:flex;flex-wrap:wrap;gap:5px}
.lpc-chip{font-size:12px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid #c9d3e6;border-radius:99px;
  padding:6px 11px;line-height:1;transition:.14s}
.lpc-chip:hover{border-color:var(--navy);color:var(--navy)}
.lpc-chip.on{background:var(--b-dae);border-color:var(--navy);color:var(--navy);font-weight:700}

/* ---------- section heading ---------- */
.lpc-sec{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.lpc-sec::before,.lpc-sec::after{content:'';height:1px;flex:1 1 auto;background:var(--line)}
.lpc-sec span{font-family:var(--f-h);font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}

/* ---------- upsell cards ---------- */
.lpc-up{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px;transition:.18s}
.lpc-up:hover{border-color:#c6d3ea;box-shadow:var(--card-sh)}
.lpc-up-top{display:flex;gap:11px;align-items:flex-start}
.lpc-up-img{flex:0 0 auto;width:54px;height:54px;border-radius:12px;background:var(--b-f0);border:1px solid var(--line-soft);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.lpc-up-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lpc-up-txt{flex:1 1 auto;min-width:0}
.lpc-up-name{font-family:var(--f-h);font-weight:700;font-size:13.5px;line-height:1.3;color:var(--ink);letter-spacing:-.15px}
.lpc-up-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.35}
.lpc-up-bot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:nowrap}
.lpc-up-opts{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0}
.lpc-opt-lbl{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.lpc-opt{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid #ccd6e9;
  border-radius:99px;padding:6px 10px;line-height:1;transition:.14s;white-space:nowrap}
.lpc-opt:hover{border-color:var(--navy);color:var(--navy)}
.lpc-opt.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.lpc-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:999px;white-space:nowrap;
  background:var(--navy);color:#fff;font-family:var(--f-h);font-weight:600;font-size:12.5px;transition:.16s;
  box-shadow:0 6px 14px -6px rgba(0,50,103,.7)}
.lpc-add:hover{background:var(--navy-2);transform:translateY(-1px)}
.lpc-add:active{transform:translateY(0) scale(.97)}
.lpc-add svg{width:12px;height:12px}
.lpc-add.is-added{background:var(--green);box-shadow:none;pointer-events:none}

/* skip-the-line: a service, so a check row not a product card */
.lpc-skip{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;transition:.18s;width:100%;text-align:left;margin-top:9px}
.lpc-skip:hover{border-color:#b9c8e6}
.lpc-skip.on{background:#e9fbf1;border-color:rgba(0,180,108,.3)}
.lpc-box{flex:0 0 auto;width:21px;height:21px;border-radius:7px;border:1.5px solid #b6c2da;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.16s}
.lpc-skip.on .lpc-box{background:var(--green);border-color:var(--green)}
.lpc-box svg{width:11px;height:11px;opacity:0;transition:.16s}
.lpc-skip.on .lpc-box svg{opacity:1}
.lpc-skip-t{flex:1 1 auto;min-width:0}
.lpc-skip-t b{display:block;font-family:var(--f-h);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.1px}
.lpc-skip-t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.lpc-skip-p{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--navy)}

/* ---------- insurance ---------- */
.lpc-ins{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;margin-top:16px;transition:.2s}
.lpc-ins.on{background:#e9fbf1;border-color:rgba(0,180,108,.28)}
.lpc-ins-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:.2s}
.lpc-ins.on .lpc-ins-ic{color:var(--green)}
.lpc-ins-ic svg{width:19px;height:19px}
.lpc-ins-t{flex:1 1 auto;min-width:0}
.lpc-ins-t b{display:block;font-family:var(--f-h);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.1px}
.lpc-ins-t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.lpc-ins-r{flex:0 0 auto;display:flex;align-items:center;gap:9px}
.lpc-ins-p{font-size:13px;font-weight:700;color:var(--navy)}
.lpc-tog{width:42px;height:24px;border-radius:99px;background:#c9d3e6;position:relative;transition:.22s cubic-bezier(.22,1,.36,1);flex:0 0 auto}
.lpc-tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.22s cubic-bezier(.22,1,.36,1)}
.lpc-ins.on .lpc-tog{background:var(--green)}
.lpc-ins.on .lpc-tog::after{transform:translateX(18px)}

/* ---------- coupon ---------- */
.lpc-cpn{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.lpc-cpn-t{display:flex;align-items:center;gap:8px;width:100%;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:2px 0}
.lpc-cpn-t svg:first-child{width:14px;height:14px;color:var(--ink-3)}
.lpc-cpn-t .chev{width:12px;height:12px;margin-left:auto;color:var(--ink-3);transition:transform .26s}
.lpc-cpn.open .chev{transform:rotate(180deg)}
.lpc-cpn-b{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.22,1,.36,1)}
.lpc-cpn.open .lpc-cpn-b{max-height:60px}
.lpc-cpn-f{display:flex;gap:7px;padding-top:10px}
.lpc-cpn-f input{flex:1 1 auto;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-family:var(--f-b);
  font-size:13px;color:var(--ink);outline:none;transition:.16s;background:#fff;min-width:0}
.lpc-cpn-f input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,50,103,.09)}
.lpc-cpn-f button{flex:0 0 auto;height:38px;padding:0 16px;border-radius:10px;background:var(--b-dae);color:var(--navy);
  font-family:var(--f-h);font-weight:700;font-size:12.5px;transition:.16s}
.lpc-cpn-f button:hover{background:#c9d6f5}
.lpc-cpn-on{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;font-weight:600;color:var(--mint-ink);
  background:#e9fbf1;border:1px dashed rgba(0,180,108,.4);border-radius:9px;padding:7px 10px}
.lpc-cpn-on svg{width:12px;height:12px}
.lpc-cpn-on button{margin-left:auto;color:var(--ink-3);display:flex}
.lpc-cpn-on button:hover{color:#d84a4a}

/* ---------- footer ---------- */
.lpc-foot{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:14px 20px 16px;
  box-shadow:0 -14px 26px -22px rgba(0,26,56,.35);position:relative;z-index:2}








.lpc-sum{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.lpc-line{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.lpc-line b{font-weight:600;color:var(--ink)}
.lpc-line .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.lpc-line.save{color:var(--green-2)}
.lpc-line.save .v,.lpc-line.save b{color:var(--green-2);font-weight:700}
.lpc-line.free .v{color:var(--green-2);font-weight:700}
.lpc-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
.lpc-total b{font-family:var(--f-h);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.2px}
.lpc-total .v{font-family:var(--f-h);font-weight:800;font-size:23px;color:var(--navy);letter-spacing:-.7px;font-variant-numeric:tabular-nums}

.lpc-assure{display:flex;flex-direction:column;gap:6px;background:var(--b-f0);border-radius:12px;padding:9px 11px;margin:12px 0}
.lpc-assure div{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2);line-height:1.3}
.lpc-assure svg{width:14px;height:14px;flex:0 0 auto;color:var(--navy)}
.lpc-assure b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.lpc-assure .ok svg{color:var(--green)}

.lpc-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:999px;
  background:var(--navy);color:#fff;font-family:var(--f-h);font-weight:700;font-size:16.5px;letter-spacing:-.2px;
  box-shadow:0 14px 26px -10px rgba(0,50,103,.6);transition:.18s}
.lpc-cta:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 18px 30px -10px rgba(0,50,103,.65)}
.lpc-cta:active{transform:translateY(0) scale(.99)}
.lpc-cta svg{width:15px;height:15px;opacity:.9}
.lpc-cta .amt{font-variant-numeric:tabular-nums}
.lpc-cta .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45)}
.lpc-pay{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;opacity:.62}
.lpc-pay svg{height:17px;width:auto;display:block}
.lpc-cont{display:block;width:100%;text-align:center;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;transition:.15s}
.lpc-cont:hover{color:var(--navy)}

/* ---------- empty ---------- */
.lpc-empty{flex:1 1 auto;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 34px 60px}
.lpc.is-empty .lpc-body,.lpc.is-empty .lpc-foot,.lpc.is-empty .lpc-ship{display:none}
.lpc.is-empty .lpc-empty{display:flex}
.lpc-empty-ic{width:88px;height:88px;border-radius:50%;background:var(--b-f0);display:flex;align-items:center;justify-content:center;
  color:var(--navy);margin-bottom:20px}
.lpc-empty-ic svg{width:36px;height:36px}
.lpc-empty h3{font-family:var(--f-h);font-weight:800;font-size:20px;letter-spacing:-.4px;color:var(--navy);margin:0}
.lpc-empty p{font-size:13.5px;color:var(--ink-3);margin:8px 0 22px;line-height:1.5;max-width:250px}
.lpc-empty .lpc-cta{width:auto;padding:0 30px;height:50px;font-size:15px}
.lpc-pop{width:100%;margin-top:38px;text-align:left}
.lpc-pop-h{font-family:var(--f-h);font-weight:700;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.lpc-pop-i{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);border-radius:14px;
  margin-bottom:7px;transition:.16s;background:#fff}
.lpc-pop-i:hover{border-color:#c2d0e9;box-shadow:var(--card-sh);transform:translateY(-1px)}
.lpc-pop-img{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--b-f0);border:1px solid var(--line-soft);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.lpc-pop-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.lpc-pop-t{flex:1 1 auto;min-width:0}
.lpc-pop-t b{display:block;font-family:var(--f-h);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.1px}
.lpc-pop-t small{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.lpc-pop-p{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--navy)}

/* toast */
.lpc-toast{position:absolute;left:20px;right:20px;bottom:calc(100% + 10px);display:flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;border-radius:12px;padding:11px 13px;font-size:12.5px;font-weight:500;
  box-shadow:0 14px 30px rgba(0,20,45,.35);opacity:0;transform:translateY(8px);transition:.26s cubic-bezier(.22,1,.36,1);pointer-events:none}
.lpc-toast.show{opacity:1;transform:none;pointer-events:auto}
.lpc-toast button{margin-left:auto;font-weight:700;color:var(--mint);text-decoration:underline;text-underline-offset:2px;font-size:12.5px}

/* ---------- real drawer geometry (the mockup lived inside a demo stage) ----------

   ⭐ FULL HEIGHT, FLUSH TO THE EDGE — deliberately NOT the mockup's floating
      inset panel.

      The mockup was drawn inside a demo "stage" that was taller than a real
      browser viewport, so its 14px-inset, 24px-rounded card had room to
      breathe and its body showed every line item plus the whole upsell card.
      On a real 870px viewport with the site's promo bar and header above it,
      the same panel reads as a small floating box that does not fill the
      screen — and, worse, its scroll area drops to ~338px against ~860px of
      content, so 60% of the cart is hidden behind a hard, unexplained cut.

      Going flush reclaims the insets and, with the footer trim below, gives
      the body back real room. Luke's call on seeing it in a real browser.
   ------------------------------------------------------------------------- */
.lpc{position:fixed;z-index:2147483000;visibility:hidden;opacity:0;pointer-events:none;
  top:0;right:0;bottom:0;width:440px;max-width:100vw;border-radius:0;
  box-shadow:-24px 0 60px -12px rgba(0,26,56,.28),-1px 0 0 0 rgba(0,50,103,.07);
  transform:translateX(24px);transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s .28s}
.lpcart-open .lpc,.lpc.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.lpcart-scrim{position:fixed;inset:0;z-index:2147482999;background:rgba(0,26,56,.42);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s .28s}
.lpcart-open .lpcart-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
html.lpcart-locked,body.lpcart-locked{overflow:hidden}

/* ⛔ THEME OVERRIDE GUARD.
   The Checkout control is an <a> so the drawer still works with no JS, and
   Avada styles bare `a` at a specificity that beat the component class — the
   button rendered as a transparent pill with white text on white, i.e.
   invisible. Scoped + !important is the only thing that reliably wins here;
   see feedback_avada_a_hover_kills_button_text. */
.lpc a.lpc-cta,.lpc a.lpc-cta:hover,.lpc a.lpc-cta:focus,.lpc a.lpc-cta:visited{
  background:var(--navy)!important;color:#fff!important;height:56px!important;
  text-decoration:none!important;border:0!important;line-height:1!important}
.lpc a.lpc-cta:hover{background:var(--navy-2)!important}
.lpc a.lpc-cont,.lpc a.lpc-cont:hover{text-decoration:underline!important;background:none!important}

/* ---------- wallet mount: ONE declared slot, owned by this template ---------- */
/* 🚨 NEVER `display:none` THIS SLOT.
   Both wallet plugins mount at document.ready, into this container, and NEITHER
   Collect.js (Google Pay) nor Apple Pay will build a button inside a
   display:none / zero-size parent. Hiding it created a chicken-and-egg: the
   slot stayed hidden until a button painted, and no button could paint while it
   was hidden — so on the ?add-to-cart= landing (the only add path on this site)
   Apple Pay came up dead and only appeared after a reload + manual open.
   ⭐ Keep it laid out and measurable, just invisible and untouchable, until
   watchWallets() confirms something actually painted. */
.lpcart-wallets{display:flex;flex-direction:column;gap:8px;margin:0 0 10px;
	position:absolute;left:-9999px;top:0;width:320px;height:46px;
	opacity:0;pointer-events:none}
.lpcart-wallets.has-wallet{position:static;left:auto;width:auto;height:auto;
	opacity:1;pointer-events:auto}
.lpcart-wallets > *{width:100%;min-height:46px}
.lpcart-or{display:none;align-items:center;gap:10px;margin:2px 0 10px;
  font:500 11px/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lpcart-wallets.has-wallet + .lpcart-or{display:flex}
.lpcart-or::before,.lpcart-or::after{content:"";flex:1;height:1px;background:var(--line)}

.lpc.is-busy .lpc-body{pointer-events:none}

/* ⭐ BUSY = a moving progress bar, NOT a grey-out.
      The round trip is 3-8s on a real connection (WordPress bootstrap — a
      static CSS file takes 2.1s on the same box), and dimming the whole cart
      to 55% for that long is precisely what shoppers described as "the cart
      froze". A bar that is visibly moving says "working"; a dimmed panel says
      "dead". Clicks are still gated underneath so nothing double-submits. */
.lpc-prog{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;
  background:transparent;opacity:0;transition:opacity .15s;pointer-events:none;z-index:6}
.lpc.is-busy .lpc-prog{opacity:1}
.lpc-prog::after{content:'';position:absolute;top:0;left:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--navy),transparent);
  animation:lpc-slide 1.1s linear infinite}
@keyframes lpc-slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@media (prefers-reduced-motion:reduce){.lpc-prog::after{animation:none;width:100%;opacity:.35}}

/* ---------- real mobile sheet (was the demo's phone frame) ---------- */
@media (max-width:560px){
  /* Full screen, not a bottom sheet.
     ⛔ The two were fighting: a sheet rule (max-height 92vh, rounded top) was
        immediately overridden by the mockup's full-screen rule two lines
        later, so the sheet geometry never applied and the conflict just sat
        there. Picked full screen deliberately — this cart carries line items,
        an upsell card, insurance and a coupon box, which is far more than a
        92vh sheet can show without its own inner scroll fight.
     ⛔ The mockup's `padding-top:52px` was clearance for the DEMO's drawn
        iPhone notch. On a real phone the browser chrome is already above the
        viewport, so that is 52px of dead space at the top of every mobile
        cart. Dropped. */
  .lpc{inset:0;width:100%;max-width:100%;border-radius:0;transform:translateY(18px)}
  .lpc-head{padding:14px 16px 12px}
  .lpc-ship{margin:0 16px 6px}
  .lpc-body{padding:12px 16px 20px}
  .lpc-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .lpc-pay{display:none}
  .lpc-cont{display:none}
  .lpc-assure{margin:8px 0}
  .lpc-cta{height:54px}
}
@media (prefers-reduced-motion:reduce){
  .lpc,.lpcart-scrim{transition-duration:.01ms}
  .lpc{animation:none}
}


/* ==========================================================================
   FIT — making the scroll region usable on a real viewport
   ========================================================================== */

/* ⭐ THE SCROLL CUE. Without this the body just slices the upsell card in half
      against the footer's top edge and reads as a rendering bug rather than as
      "there is more below". A mask is used rather than a gradient overlay so it
      cannot sit on top of, and swallow clicks from, the card underneath it. */
.lpc-body{
  padding-bottom:26px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%)}
.lpc-body.is-end{-webkit-mask-image:none;mask-image:none}

/* the footer is a pinned layer, so it should read as one */
.lpc-foot{box-shadow:0 -10px 22px -14px rgba(0,26,56,.28)}

/* ⭐ FOOTER TRIM. It was 393px of an 842px drawer. Every value below is a
      margin or a padding, never a font size — the footer stays legible, it
      just stops taking half the cart. */
.lpc-foot{padding:12px 20px 14px}
.lpc-assure{margin:9px 0 10px;padding:9px 11px;gap:5px}
.lpc-assure div{font-size:12px}
.lpc-pay{margin-top:9px;opacity:.55}
.lpc-pay svg{height:15px}
.lpc-cont{margin-top:9px}
.lpc-sum{gap:5px}
.lpc-total{padding-top:9px;margin-top:7px}

/* the free-shipping meter is a fixed row above the scroll area — keep it tight */
.lpc-ship{margin:0 20px 6px;padding:9px 12px}

@media (max-height:800px){
  /* short laptop screens: the reassurance row is the first thing to go, the
     cart itself is not negotiable */
  .lpc-assure{display:none}
  .lpc-pay{margin-top:7px}
}

/* ⛔ THE CHIP ROW MUST NEVER RUN UNDER THE ADD BUTTON.
      Shortening the labels (see lpcart_upsell_rows) fixes the common case, but
      a product with four long option names would overflow again and the Add
      button would sit on top of the last chip — which is exactly what a
      shopper taps. Scrolling the row instead means the layout degrades into
      something usable rather than something broken, whatever the data does. */
.lpc-up-opts{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent 100%)}
.lpc-up-opts::-webkit-scrollbar{display:none}
.lpc-up-opts:not(:hover){-webkit-mask-image:none;mask-image:none}
.lpc-up-bot{align-items:center}
.lpc-add{margin-left:auto;position:relative;z-index:1}

/* ⭐ Let the option chips WRAP before they scroll.
      Horizontal scrolling inside a 440px drawer is not discoverable — a
      shopper does not know a chip row scrolls, so a fourth option would simply
      never be seen. Wrapping puts the Add button on its own line instead,
      which costs one row of height and hides nothing. The overflow rule above
      stays as the last resort for genuinely long labels. */
.lpc-up-bot{flex-wrap:wrap;row-gap:9px}
.lpc-up-opts{flex:1 1 100%}
.lpc-add{margin-left:auto}

/* two lines of blurb, ending cleanly rather than mid-sentence */
.lpc-up-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ==========================================================================
   DENSITY PASS — 2026-08-25
   ⭐ Measured on staging before this block: on an 834px drawer the footer was
      379px (45%) and 479px of cart content sat below the fold. The cart is
      the thing the shopper opened; the footer is chrome around it. Every rule
      below moves height from the chrome back to the cart. Nothing is removed
      that carries price, saving, or an upsell — those are the two halves that
      make money.
   ========================================================================== */

/* ---- footer summary: one detail line, one total (was 5 stacked rows) ---- */
.lpc-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.lpc-fact{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.lpc-fact b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lpc-fact.save,.lpc-fact.save b{color:var(--green-2)}
.lpc-fact.free b{color:var(--green-2)}
.lpc-fact em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:500}
.lpc-sum{gap:0;margin-bottom:10px}
.lpc-total{padding-top:8px;margin-top:8px}

/* ---- the reassurance box reads as one line, not a stacked panel ---- */
.lpc-assure{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;
  margin:8px 0 9px;padding:8px 11px}
.lpc-assure div{font-size:11.5px}

/* ---- line items: same information, tighter frame ---- */
.lpc-item{padding:12px 0}
.lpc-thumb{width:64px;height:64px;border-radius:14px}
.lpc-name{font-size:15px}
.lpc-meta{margin-top:5px}
.lpc-ea{margin-top:4px;font-size:11.5px}
.lpc-row2{margin-top:6px}

/* ---- upsell card: a cart is not a product page ----
   ⭐ The catalogue blurb ran three lines of copy the shopper has already read
      on the PDP, and it was the tallest thing in the card. One line keeps the
      hint and gives the row back. */
.lpc-up-sub{-webkit-line-clamp:1;font-size:11.5px}

/* ---- short screens: shed chrome in priority order, never the cart ---- */
@media (max-height:900px){
  .lpc-pay{display:none}
}
@media (max-height:760px){
  .lpc-cont{display:none}
}

/* ---- free-ship meter: the won state is a confirmation, not a gauge ---- */
.lpc-ship.is-won{padding:7px 12px;background:rgba(0,180,108,.09)}
.lpc-ship.is-won .lpc-ship-top{color:var(--green-2)}
.lpc-ship.is-won .lpc-ship-top svg{color:var(--green)}

/* ---- floating third-party widgets must not sit on the primary CTA ----
   🚨 Google's Merchant Center widget mounts
      #google-merchantwidget-iframe-wrapper at position:fixed with
      z-index 2147483647 — the maximum, above this drawer's 2147483000. It
      renders in a lower stacking context so it does NOT swallow taps
      (verified with elementFromPoint on every control), but on a phone its
      bubble paints directly over the right end of the Checkout button.
      Hidden only while the drawer is open, and restored on close. */
/* ⛔ Scope on `.lpcart-open` ALONE, never `body.lpcart-open`.
      open() sets the class on document.documentElement — the <html> element —
      not on <body>, so a body-scoped rule matches nothing and the widgets keep
      sitting on the Checkout button. (This passed a hand-run test only because
      the test set the class on both.) A bare `.lpcart-open` prefix matches the
      html element and still scopes every rule to the open drawer. */
.lpcart-open #google-merchantwidget-iframe-wrapper,
.lpcart-open .intercom-launcher,
.lpcart-open .intercom-lightweight-app-launcher,
.lpcart-open #intercom-container .intercom-launcher-frame{display:none!important}

/* ---- one-option upsell = a row, matched to .lpc-skip / .lpc-ins ---- */
.lpc-up1{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:9px 11px;margin-bottom:9px;transition:.18s;width:100%;text-align:left}
.lpc-up1:hover{border-color:#b9c8e6}
.lpc-up1-img{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--b-f0);
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lpc-up1-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.lpc-up1-t{flex:1 1 auto;min-width:0}
.lpc-up1-t b{display:block;font-family:var(--f-h);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.1px}
.lpc-up1-t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpc-up1-add{flex:0 0 auto;height:32px;padding:0 14px;font-size:12.5px}


/* ==========================================================================
   MOTION — the drawer actually travels on and off screen
   ⭐ It used to move 24px and cross-fade, which reads as a panel blinking into
      place rather than a drawer arriving. It now starts fully off the right
      edge and slides the whole way in, with the scrim fading against it.
   ⛔ Opacity is deliberately NOT animated on the panel. Fading a sliding
      surface makes the shadow smear and the text ghost; the transform alone is
      the movement, and translateX(100%) already puts it out of sight.
   ⛔ 420ms here must stay in step with LPCART_ANIM in lp-cart.js, which is what
      holds the scrim in the DOM until the slide has finished.
   ========================================================================== */
.lpc{
  opacity:1;
  transform:translateX(100%);
  will-change:transform;
  transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s .42s;

  /* 🚨 KILL THE LEGACY ENTRY ANIMATION.
        `.lpc` still carried `animation:lpc-in .42s both` from the mockup, and
        a running animation WINS over the transform property — with
        fill-mode:both it holds its final keyframe forever. That is why the
        panel sat at translateX(0) in every state and the slide never moved a
        pixel, while the scrim (which has no animation) faded correctly. The
        drawer's movement is a transition now; it must not also be an
        animation. */
  animation:none}

.lpcart-open .lpc,.lpc.is-open{
  opacity:1;
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.32,.72,0,1);
  transition-delay:0s}

.lpcart-scrim{transition:opacity .42s cubic-bezier(.32,.72,0,1), visibility 0s .42s}
.lpcart-open .lpcart-scrim{transition:opacity .42s cubic-bezier(.32,.72,0,1);transition-delay:0s}

/* mobile is full-screen, so it travels the full width too */
@media (max-width:560px){
  .lpc{transform:translateX(100%)}
  .lpcart-open .lpc,.lpc.is-open{transform:translateX(0)}
}

/* ⛔ Respect a reduced-motion preference: no travel, just a short fade. */
@media (prefers-reduced-motion:reduce){
  .lpc,.lpcart-open .lpc,.lpc.is-open{
    transform:none;transition:opacity .12s linear, visibility 0s .12s}
  .lpc{opacity:0}
  .lpcart-open .lpc,.lpc.is-open{opacity:1;transition-delay:0s}
  .lpcart-scrim,.lpcart-open .lpcart-scrim{transition:opacity .12s linear, visibility 0s .12s}
}

/* ---- the facts row must never push past the panel edge ----
   ⛔ `white-space:nowrap` on a flex child with no `min-width:0` cannot shrink
      and cannot wrap, so a long shipping label overflowed the drawer entirely
      and carried its price off-screen. Trimming the label in PHP fixes today's
      string; this makes ANY string safe. */
.lpc-facts{width:100%;min-width:0}
.lpc-fact{min-width:0;max-width:100%}
.lpc-fact.ship{flex:1 1 100%;overflow:hidden}
.lpc-fact.ship b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---- the shipping charge, stated ----
   ⭐ The gap between the line totals and the Total was shipping, unprinted.
   ⛔ `flex:none` is the point: when the carrier label is too long the LABEL
      ellipsises and the price survives. Never let these two compete to shrink.
   Weight 600 in ink-2 keeps it subordinate to the bold carrier name — it is an
   explanation of the Total, not a second headline. */
.lpc-fact.ship .amt{flex:none;font-style:normal;font-weight:600;
  color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lpc-fact.ship.free .amt{display:none}

/* ── OPENED BEFORE ITS DATA LANDED ─────────────────────────────────────────
   The only add-to-cart path on this site is a full page reload to
   ?add-to-cart=, so the drawer used to sit shut for the whole boot hydrate
   (~2s on top of the page load) before it appeared. It now opens instantly and
   fills in. ⛔ The empty state MUST be suppressed while hydrating — a cached
   page ships an EMPTY shell, so opening early would flash "Your cart is empty"
   at someone who just added something. */
.lpc.is-hydrating .lpc-empty{display:none!important}
.lpc.is-hydrating .lpc-prog{opacity:1}
.lpc.is-hydrating .lpc-foot,.lpc.is-hydrating .lpc-ship{visibility:hidden}
.lpc-skel{display:none;padding:20px}
.lpc.is-hydrating .lpc-skel{display:block}
.lpc-skel i{display:block;height:66px;border-radius:12px;background:var(--b-f0);
	margin-bottom:12px;animation:lpcSkel 1.1s ease-in-out infinite}
.lpc-skel i:nth-child(2){animation-delay:.12s}
.lpc-skel i:nth-child(3){animation-delay:.24s}
@keyframes lpcSkel{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lpc-skel i{animation:none;opacity:.6}}