/* ==========================================================================
   LP Sticky Add to Cart — licensedpeptides.com

   Tokens are the SAME set lp-cart's drawer uses (Avada globals: color-4
   #2d88ca brand blue · color-6 slate ink · color-3 #f2f3f5), plus the two
   figures the PDP's own buy box paints in its own colours so the bar reads as
   the same page rather than a bolt-on:

     --price  #2563eb  the "Discounted Price" blue in .drug-pricing-value-discounted
     --cta    #2d88ca  the exact fill of .product-cta.my-add-to-cart-btn
     --flag   #0f6b52  the 2-for-1 green, lifted from .lp-bogo-badge

   ⛔ TOKENS LIVE ON .lpsatc, NOT :root. This sheet loads on product pages of a
      live store and must not be able to restyle anything outside the bar.

   🚨 THE BAR IS PINNED WITH `#lpsatc.lpsatc`, NOT `.lpsatc`.
      Avada's style.min.css carries `[role="region"]{position:relative}`. That
      is the same specificity as a bare `.lpsatc` and it loads after us, so a
      class-only rule LOST — the bar rendered in the footer flow, 5,500px down
      the page, with every other style applied and no way to see it. The id
      keeps the landmark role for screen readers and still wins.

   ⛔ NO rem UNITS ANYWHERE IN THIS FILE.
      The theme sets html{font-size:11.52px} — Avada scales the whole document
      off it. 1rem here is 11.52px, not 16px, so a rem-based bar renders 28%
      small. Every size below is px on purpose.
   ========================================================================== */

#lpsatc.lpsatc {
  --navy: #1f6ba6;
  --accent: #2d88ca;
  --accent-hi: #2379ba;
  --accent-mut: #84acc9;
  --price: #2563eb;
  --cta: #2d88ca;
  --cta-hi: #2278b8;
  --flag: #0f6b52;
  --ink: #1d282e;
  --ink-2: #4a5a63;
  --ink-3: #7c8b93;
  --line: #e3e9ed;
  --line-soft: rgba(132, 172, 201, 0.3);
  --b-f0: #eff5fa;
  --b-d9: #cfe2f2;
  --f-b: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990; /* under lp-cart's drawer and scrim, which sit at 100000+ */
  font-family: var(--f-b);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 34px rgba(45, 136, 202, 0.1);
  /* Hidden AND inert until JS reveals it: a bar that is only translated away
     still takes clicks over the footer. */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}

@supports (backdrop-filter: blur(14px)) {
  #lpsatc.lpsatc {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}

#lpsatc.lpsatc.is-on {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #lpsatc.lpsatc {
    transition: none;
  }
}

.lpsatc-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 28px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── Left: what is being added ─────────────────────────────────────────── */

.lpsatc-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.lpsatc-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lpsatc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lpsatc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lpsatc-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpsatc-dose {
  font-weight: 700;
  color: var(--accent-hi);
}

/* The separator is drawn, not typed — the span is rendered empty on products
   whose strength comes from a chip, and an empty dose must leave no stray dot. */
.lpsatc-dose:not(:empty)::before {
  content: "·";
  margin: 0 5px;
  color: var(--accent-mut);
  font-weight: 400;
}

.lpsatc-sub {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separators are drawn, not typed, so an empty span never leaves a stray dot. */
.lpsatc-sub > span:empty {
  display: none;
}

.lpsatc-sub > span + span:not(:empty)::before {
  content: "·";
  margin: 0 6px;
  color: var(--accent-mut);
}

.lpsatc-units {
  color: var(--ink-2);
  font-weight: 600;
}

.lpsatc-free {
  color: var(--flag);
  font-weight: 700;
}

/* The 2-for-1 pill — same shape and green as .lp-bogo-badge beside the title. */
.lpsatc-flag {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--flag);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}

/* ── Right: price, quantity, the button ────────────────────────────────── */

.lpsatc-buy {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.lpsatc-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lpsatc .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lpsatc-was {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: line-through;
}

.lpsatc-now {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--price);
}

.lpsatc-qty {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--b-d9);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.lpsatc-step {
  width: 38px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.lpsatc-step:hover:not(:disabled) {
  background: var(--b-f0);
}

.lpsatc-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lpsatc-qv {
  min-width: 26px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.lpsatc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 10px;
  background: var(--cta);
  color: #fff;
  font-family: var(--f-b);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(45, 136, 202, 0.28);
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}

.lpsatc-cta:hover {
  background: var(--cta-hi);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(45, 136, 202, 0.34);
}

.lpsatc-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(45, 136, 202, 0.3);
}

.lpsatc-cta:focus-visible,
.lpsatc-step:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.lpsatc-cart {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Working state while the page's own add-to-cart request is in flight. */
.lpsatc-cta.is-busy {
  pointer-events: none;
  background: var(--cta-hi);
}

.lpsatc-cta.is-busy .lpsatc-cart {
  animation: lpsatc-spin 0.7s linear infinite;
  stroke-dasharray: 15 40;
}

@keyframes lpsatc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── The bar is the bottom-most thing on the page while it is up ───────── */

/* Intercom's launcher sits bottom-right and would be buried by the bar. */
body.lpsatc-on .intercom-lightweight-app-launcher,
body.lpsatc-on .intercom-launcher-frame,
body.lpsatc-on #intercom-container .intercom-launcher {
  transform: translateY(-74px) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Desktop: no bar at all ────────────────────────────────────────────────
   Luke, 2026-09-09: the sticky bar is a PHONE control. On desktop the buy box
   is never far and the page has its own Add to Cart in view for most of the
   scroll, so the bar is hidden outright above 991px.

   The base rules above are still the shared foundation — colours, type, the
   button — and the mobile block below is now the only layout that renders.
   Putting the bar back on desktop is deleting this one rule (and the matching
   `MOBILE.matches` gate in the JS).
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
  #lpsatc.lpsatc {
    display: none !important;
  }
}

/* ── Mobile — the only layout that ships ───────────────────────────────────

   Two rows, because a quantity stepper does not fit beside the name, the price
   and the button on a 390px screen (366 usable):

     row 1   NAME · STRENGTH          [− 1 +]   $57.99
             1 vial · +1 free
     row 2   [        Add to Cart, full width        ]

   The button gets the whole second row, which makes it the biggest tap target
   on the screen, and the name never has to be truncated to make room.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .lpsatc-in {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .lpsatc-thumb {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }

  .lpsatc-name {
    font-size: 14.5px;
  }

  .lpsatc-sub {
    font-size: 11.5px;
  }

  /* What still gets dropped on a phone.

     The thumbnail goes because the vial photo is a few hundred pixels up the
     same page, and dropping it is what keeps a name like "Tesamorelin,
     Ipamorelin 10mg Blend" off the ellipsis. The pill goes because the green
     "+1 free" clause in the sub-line says the same thing in a third of the
     width. The struck-through price goes because the saving is not what the
     bar is for — the next tap is. */
  .lpsatc-flag,
  .lpsatc-was,
  .lpsatc-thumb {
    display: none !important;
  }

  /* Let the price, the stepper and the button become direct children of the
     bar so they can take part in its wrapping. Without this they are locked
     inside .lpsatc-buy and the button cannot reach its own row. */
  .lpsatc-buy {
    display: contents;
  }

  .lpsatc-in {
    flex-wrap: wrap;
    row-gap: 9px;
  }

  .lpsatc-id {
    order: 1;
    flex: 1 1 auto;
  }

  .lpsatc-qty {
    order: 2;
    height: 38px;
    border-radius: 9px;
  }

  .lpsatc-step {
    width: 34px;
    font-size: 17px;
  }

  .lpsatc-qv {
    min-width: 22px;
    font-size: 14.5px;
  }

  .lpsatc-price {
    order: 3;
  }

  .lpsatc-now {
    font-size: 19px;
  }

  .lpsatc-cta {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
    border-radius: 10px;
    gap: 9px;
  }

  .lpsatc-cart {
    width: 18px;
    height: 18px;
  }

  body.lpsatc-on .intercom-lightweight-app-launcher,
  body.lpsatc-on .intercom-launcher-frame,
  body.lpsatc-on #intercom-container .intercom-launcher {
    transform: translateY(-112px) !important;
  }
}

/* Small phones: the stock line goes first — the name, the price and the button
   are what the bar is for, in that order. */
@media (max-width: 560px) {
  .lpsatc-stock {
    display: none !important;
  }
}

/* 360px is the floor worth designing for (iPhone SE / Galaxy S at 360) — it
   only tightens the padding and the type. Nothing else is dropped: with the
   button on its own row, row one is short enough to survive 360px intact. */
@media (max-width: 360px) {
  .lpsatc-in {
    padding: 9px 12px;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    gap: 9px;
  }

  .lpsatc-cta {
    padding: 0 15px;
    font-size: 14.5px;
  }
}