/* Protein Superstore skin.
   Per the build standard, a client app overrides --brand and the surfaces
   only. No module CSS is edited — this sits on top of it. */

:root{
  --brand:#E4181F;
  --brand-dark:#B0121A;
  --brand-2:#E4181F;
  --bg:#000000;
  --bg-2:#0E0E0E;
  --surface:#161616;
  --border:#272727;
  --text:#ffffff;
  --text-2:#9B9B9B;
  --font-head:'Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --radius:12px;
  --radius-lg:16px;
}

*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
/* overflow-x on body alone is not enough — the html element has to hold the
   line too, or a single wide child widens the document and the page opens
   zoomed out on a phone.

   It has to be `clip`, not `hidden`: hidden makes the body a scroll container
   on iOS Safari and kills vertical scrolling. clip contains the overflow
   without creating a scroller. */
html{ -webkit-text-size-adjust:100%; overflow-x:clip; max-width:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.45;
  overflow-x:clip; overscroll-behavior-x:contain; max-width:100%;
}
input,select,textarea{ font-size:16px; font-family:var(--font-body); }

/* ---------- boot ---------- */
.psp-boot{ min-height:100vh; display:grid; place-content:center; gap:14px; text-align:center; padding:24px; }
.psp-boot-mark{
  font-style:italic; font-weight:900; font-size:30px; letter-spacing:-.5px;
  background:var(--brand); padding:6px 14px; transform:skewX(-8deg);
}
.psp-boot-mark span{ display:block; font-size:11px; letter-spacing:2px; background:#fff; color:#000; }
.psp-boot-msg{ color:var(--text-2); font-size:14px; }

/* ---------- shell overrides ---------- */
.lp-shell-top{ background:#0a0a0a; border-bottom:1px solid var(--border); }
.lp-shell-heading{
  font-family:var(--font-head); font-style:italic; font-weight:900;
  text-transform:uppercase; letter-spacing:-.4px;
}
/* The logo sits in the top bar and is sized by HEIGHT, so it can never
   blow out to its natural 420px width on a narrow screen. */
.psp-topbrand{ margin-left:auto; display:flex; align-items:center; min-width:0; }
.psp-logo{ display:block; height:26px; width:auto; max-width:150px; border-radius:2px; }
.lp-shell-top{ gap:8px; }
/* The shell prints the section name; the logo is the brand. Both is clutter
   on a 375px bar. */
.lp-shell-heading{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

@media (min-width:768px){
  .psp-logo{ height:32px; max-width:220px; }
}
.lp-shell-bottom{ background:#0a0a0a; border-top:1px solid var(--border); }
.lp-shell-bi{ color:var(--text-2); }
.lp-shell-bi.on,.lp-shell-ni.on{ color:var(--brand); }
.lp-shell-bi-label{ font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
/* This container is a flex item, and I centred it with `margin:0 auto`.
   An auto margin on the cross axis switches OFF the default stretch, so
   instead of matching the screen the element sized itself to its content —
   and the widest content is the horizontally-scrolling product rail. It came
   out 387px wide on a 375px phone, at every screen size, which is why the
   right edge was clipped and pinch-to-zoom did nothing.

   `width:100%` gives it a definite size again; the max-width still centres it
   on a desktop. `min-width:0` stops the same rail imposing a content-based
   minimum. */
.lp-shell-body{
  padding:14px; width:100%; max-width:900px; margin:0 auto; min-width:0;
}
.lp-shell-main{ min-width:0; }

/* ---------- shared type ---------- */
.psp-h2{
  font-family:var(--font-head); font-style:italic; font-weight:900;
  font-size:19px; text-transform:uppercase; letter-spacing:-.3px; margin:18px 0 10px;
}
.psp-h3{ font-size:15px; text-transform:uppercase; letter-spacing:1px; color:var(--text-2); margin:20px 0 8px; }
.psp-mt{ margin-top:26px; }
.psp-spacer{ height:96px; }

.psp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 20px; border:0; border-radius:8px;
  background:var(--brand); color:#fff; font-family:var(--font-head);
  font-weight:700; font-size:15px; letter-spacing:.4px; text-transform:uppercase; cursor:pointer;
}
.psp-btn:active{ background:var(--brand-dark); }
.psp-btn-sm{ min-height:38px; padding:0 14px; font-size:13px; }
.psp-btn-lg{ width:100%; min-height:56px; font-size:17px; margin-top:18px; }
.psp-link{
  background:none; border:0; color:var(--brand); font-size:14px; font-weight:700;
  min-height:var(--tap); padding:0 4px; cursor:pointer;
}
.psp-chev{ color:var(--text-2); font-size:22px; line-height:1; }

/* ---------- imagery ---------- */
img{ max-width:100%; }

/* ---------- module chrome in brand colours ---------- */
.lp-ly-card,.lp-ly-look{ background:var(--surface); border:1px solid var(--border); }
.lp-pay-demo{ border-color:var(--brand); }
/* The module parks this bottom-right, which on a phone lands squarely on the
   ACCOUNT tab. Lift it above the nav. */
/* The module parks this bottom-right, which on a phone lands squarely on the
   ACCOUNT tab. Lift it clear of the bottom nav. */
.lp-bug-fab{ bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
@media (min-width:768px){
  .lp-bug-fab{ bottom:20px !important; }
}
/* The staff view has no bottom nav, so it can sit where the module puts it. */
body.staff .lp-bug-fab{ bottom:20px !important; }

@media (min-width:768px){
  .lp-shell-body{ padding:24px; }
  .psp-h2{ font-size:22px; }
}