/* ============================================================
   Bison Peptides — site-wide mobile stylesheet
   Strategy: attribute selectors matching inline styles from the
   DC templates. Selectors cover BOTH the raw template format
   (e.g. "position:sticky") and the browser/CSSOM re-serialized
   format (e.g. "position: sticky") so rules apply before AND
   after DC hydrates. Desktop (>767px) is completely unaffected.
   ============================================================ */

@media (max-width: 767px) {

  /* ---- Global overflow guard: stop Chrome zoom-out-to-fit ---- */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Ticker: nowrap spans can't be allowed to widen the page */
  div:has(> .bp-ticker) {
    contain: paint;
    max-width: 100vw;
  }

  /* ---- Header ---- */
  header nav { display: none !important; }        /* desktop nav links */
  #bp-search-wrap { display: none !important; }   /* search box */
  .bp-search-wrap { display: none !important; }
  .bp-nav-links { display: none !important; }
  /* Hide standalone Login link in header — it lives in the menu panel instead */
  header a[href="#account"] { display: none !important; }
  header img[style*="height:72px"],
  header img[style*="height: 72px"] { height: 46px !important; }
  header [style*="gap:32px"],
  header [style*="gap: 32px"] { gap: 10px !important; padding: 10px 14px !important; }

  /* Cart button/link: prevent "Cart" and "·" from splitting onto separate lines */
  header a[href="/cart"],
  header button { white-space: nowrap !important; }

  /* ---- Collapse ALL multi-column inline grids to one column.
     Matching only the property name makes this immune to value
     re-serialization (spaces, 0-prefixes, repeat() spacing). ---- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .stats { grid-template-columns: 1fr 1fr !important; }

  /* Grid blowout guard: children's intrinsic minimums (wide
     images, input fields) must not force tracks past 100vw */
  [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="grid-template-columns"] img { max-width: 100% !important; }
  img[style*="min-height:360px"],
  img[style*="min-height: 360px"] { min-height: 240px !important; }
  input[style*="flex:1"],
  input[style*="flex: 1"] { min-width: 0; }
  [style*="grid-template-columns"] [style*="display:flex"][style*="gap:12px"],
  [style*="grid-template-columns"] [style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap; }

  /* Oversized desktop paddings eat a third of a phone screen */
  [style*="padding:44px 48px"],
  [style*="padding: 44px 48px"] { padding: 28px 20px !important; }
  [style*="padding:48px"],
  [style*="padding: 48px"] { padding: 28px 20px !important; }

  /* Stat rows (99%+ / 100% / COA) may wrap on narrow screens */
  [style*="display:flex"][style*="gap:28px"],
  [style*="display: flex"][style*="gap: 28px"] { flex-wrap: wrap; }

  /* ---- Un-stick sidebar columns; <header> keeps its stickiness
     because this only targets divs ---- */
  div[style*="position:sticky"],
  div[style*="position: sticky"],
  aside[style*="position:sticky"],
  aside[style*="position: sticky"] {
    position: static !important;
  }

  /* ---- Product hero image: scale to screen ---- */
  [style*="height:520px"],
  [style*="height: 520px"] {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
  }
  #bp-img-wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

  /* Gallery thumbnails: smaller so five fit per row */
  [style*="width:80px"][style*="height:80px"],
  [style*="width: 80px"][style*="height: 80px"] {
    width: 58px !important;
    height: 58px !important;
  }

  /* ---- Headings: shrink oversized hero type ---- */
  [style*="font-size:44px"], [style*="font-size: 44px"],
  [style*="font-size:42px"], [style*="font-size: 42px"],
  [style*="font-size:40px"], [style*="font-size: 40px"],
  [style*="font-size:38px"], [style*="font-size: 38px"] {
    font-size: 28px !important;
  }
  [style*="font-size:32px"],
  [style*="font-size: 32px"] { font-size: 26px !important; }

  /* ---- Cart drawer: full width on phones ---- */
  [style*="position:fixed"][style*="width:400px"],
  [style*="position: fixed"][style*="width: 400px"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ---- Sticky add-to-cart bar: hide thumb, tighten padding.
     The bar is uniquely position:fixed + left:0 + bottom:0;
     the cart drawer (right:0, no left) must NOT match, so its
     product thumbnails stay visible. ---- */
  [style*="position:fixed"][style*="left:0"][style*="bottom:0"] img,
  [style*="position: fixed"][style*="left: 0"][style*="bottom: 0"] img { display: none !important; }
  [style*="position:fixed"][style*="left:0"][style*="bottom:0"] [style*="padding:12px 32px"],
  [style*="position: fixed"][style*="left: 0"][style*="bottom: 0"] [style*="padding: 12px 32px"] {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .bp-sticky-img { display: none !important; }

  /* ---- Footer: stack and center ---- */
  footer [style*="justify-content:space-between"],
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center;
  }
  footer [style*="gap:18px"],
  footer [style*="gap: 18px"] {
    justify-content: center !important;
    flex-wrap: wrap;
  }

  /* ---- Lightbox arrows: keep on-screen ---- */
  #bp-lb-next { right: 20px !important; }
}

/* ============================================================
   Mobile menu (hamburger) — native <details>, no JS state, so
   it survives DC re-renders. A document-level click listener in
   each page's static body closes it on outside tap / link tap.
   ============================================================ */
.bp-mm { display: none; }

@media (max-width: 767px) {
  .bp-mm { display: block !important; position: relative; margin-left: auto; }
  .bp-mm summary {
    list-style: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 7px 11px;
    border: 1px solid rgba(14, 28, 54, .18);
    border-radius: 10px;
    color: #0E1C36;
    user-select: none;
  }
  .bp-mm summary::-webkit-details-marker { display: none; }
  .bp-mm[open] summary { background: #0E1C36; color: #FFFFFF; }
  .bp-mm-panel {
    position: fixed;
    top: 68px;
    right: 12px;
    width: min(78vw, 300px);
    background: #FFFFFF;
    border: 1px solid rgba(14, 28, 54, .14);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(14, 28, 54, .18);
    display: flex;
    flex-direction: column;
    padding: 8px;
    z-index: 300;
  }
  .bp-mm-panel a {
    padding: 13px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: #0E1C36;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
  }
  .bp-mm-panel a:active { background: rgba(216, 33, 41, .08); }
  /* Login link gets a top divider to separate it from nav links */
  .bp-mm-panel a[href="#account"] {
    margin-top: 4px;
    border-top: 1px solid rgba(14, 28, 54, .10);
    border-radius: 0 0 8px 8px;
    color: #55607A;
    font-weight: 500;
    font-size: 15px;
  }
}