/* ============ Noor Labs — portrait phones & tablets ============
   Loaded last on every page. Keeps layouts inside the screen, sizes type for
   comfortable reading, and gives touch targets room. */

/* never let anything push the page wider than the screen */
html, body{max-width:100%;overflow-x:clip;}
img, video, canvas, svg{max-width:100%;}
:is(.nh-hero-card, .ph-card, .req-card, .nh-pipe, .nh-hero-grid, .ixgrid, .nh-pgrid, .nh-why, .nh-steps, .tlayout, .detail-grid, .access-card) > *{min-width:0;}
.nh-search form, .nh-search input{min-width:0;}

/* ---------------- TABLETS (iPad portrait 768–1024) ---------------- */
@media (max-width:1024px){
  .nh-wrap, .ph-wrap, .ix-wrap{padding-left:24px;padding-right:24px;}
  .nh-hero{padding:110px 0 32px;}
  .nh-hero-card{grid-template-columns:1fr;gap:30px;padding:36px;}
  .nh-hero-card .nh-showcase{max-width:560px;margin:0 auto;width:100%;}
  .nh-hero-card .nh-h1{font-size:clamp(34px,6vw,50px) !important;}
  .nh-seal{width:150px;right:-18px;top:-62px;}
  .nh-pgrid{grid-template-columns:repeat(2,1fr);}
  .ph-card{grid-template-columns:1fr;}
  body:has(#shopVials) .ph-card{grid-template-columns:1fr;}
  body:has(#shopVials) .ph-trio{max-width:520px;justify-self:center;}
  .ixgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .req-card{grid-template-columns:1fr;}
  .nh-why{grid-template-columns:repeat(2,1fr);}
  .nh-steps4{grid-template-columns:repeat(2,1fr);}
  .detail-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .detail-vial{max-width:420px;}
  .access-card{max-width:620px;}
}

/* ---------------- PHONES (portrait, up to ~760) ---------------- */
@media (max-width:760px){
  body{font-size:17px;line-height:1.6;}
  section{padding-left:16px;padding-right:16px;}
  .nh-wrap, .ph-wrap, .ix-wrap{padding-left:16px;padding-right:16px;}
  .nh-sec{padding:52px 0;}
  .nh-sec.tight{padding-top:0;}
  .section-title{font-size:clamp(26px,7.4vw,34px) !important;line-height:1.15;}
  .section-sub{font-size:16px !important;}
  .nh-head{margin-bottom:20px;}

  /* nav */
  .nav-inner{height:60px;}
  .brand-icon.brand-logo{width:34px;height:34px;}
  .theme-toggle, .cart-btn, .nav-toggle, .nav-app-btn{width:38px !important;height:38px !important;}

  /* homepage hero: seal centred above the card, comfortable text */
  .nh-hero{padding:96px 0 24px;}
  .nh-hero-card{padding:74px 18px 22px;border-radius:22px;margin-top:40px;gap:24px;}
  .nh-seal{width:124px;left:50%;right:auto;top:-62px;transform:translateX(-50%);}
  .nh-hero-copy{text-align:left;}
  .nh-hero-card .nh-h1{font-size:clamp(28px,8.2vw,36px) !important;letter-spacing:0 !important;margin:14px 0 12px !important;}
  .nh-hero-copy .nh-lead{font-size:16px;margin-bottom:18px;}
  .nh-pill{font-size:11px;padding:6px 12px;}
  .nh-search form{height:54px;padding:0 6px 0 14px;}
  .nh-search input{font-size:16px;} /* 16px stops iOS from zooming into the field */
  .nh-search button{height:42px;padding:0 14px;font-size:12px;}
  .nh-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .nh-btns .btn{width:100%;justify-content:center;text-align:center;padding-left:10px;padding-right:10px;}
  .nh-proof{display:grid;grid-template-columns:1fr;gap:8px;margin-top:20px;padding-top:16px;}
  .nh-hub, .nh-hub-ext{grid-template-columns:1fr !important;}
  .nh-vialcard{padding:8px;border-radius:20px;}
  .nh-vialcard-foot b{font-size:14px;}
  .nh-trust{grid-template-columns:1fr 1fr;margin-top:28px;}

  /* product grids: one comfortable column, or two compact ones on wider phones */
  .nh-pgrid{grid-template-columns:1fr;}
  .nh-prod{padding:16px;}
  .nh-cats{grid-template-columns:1fr 1fr;}
  .nh-why, .nh-steps, .nh-steps4{grid-template-columns:1fr !important;}

  /* inner-page heroes */
  .ph{padding:88px 0 10px;}
  .ph-card{padding:20px 16px !important;gap:18px !important;border-radius:20px;}
  .ph-card h1{font-size:clamp(28px,8vw,36px) !important;}
  .ph-lead{font-size:16px !important;}
  .ph-badge{font-size:12px;padding:7px 12px;}
  .ph-media{min-height:200px;}
  .ph-disc{font-size:14px;padding:12px 14px;align-items:flex-start;}
  .shop-pick-row, .coa-req-row{flex-direction:column;}
  .shop-pick-row .btn, .coa-req-row .btn{width:100%;}
  .shop-pick{padding:14px !important;max-width:none;}
  .shop-pick-row{gap:10px;}
  .shop-pick-row .select-wrap{min-width:0;}
  .shop-pick-row .cat-select{height:52px;font-size:16px;}
  .shop-pick-row .btn{height:52px;font-size:16px;justify-content:center;}
  .shop-pick-links{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px !important;}
  .shop-pick-links .nh-link{font-size:14px;white-space:normal;}
  .shop-pick-links{gap:14px;}

  /* shop grid & detail */
  .shop-controls{flex-direction:column;align-items:stretch;gap:10px;}
  #productGrid{grid-template-columns:1fr !important;}
  .detail-inner{padding:76px 16px 40px !important;}
  .detail-name{font-size:30px !important;}
  .detail-actions .btn, .detail-actions .qty-stepper{flex:1 1 auto;}
  .detail-research{padding:18px 14px;}

  /* peptide index */
  .ixgrid{grid-template-columns:1fr;}
  .ixbar{top:60px;padding:10px 0;}
  .ixs input{min-height:50px;font-size:16px;}
  .cpd{padding:20px 16px 18px;}
  .cpd h3{font-size:20px;}
  .facts{grid-template-columns:1fr;}
  .cpd-actions{grid-template-columns:1fr;}

  /* forms & modals */
  .req-card{padding:20px 16px;}
  .req-row{grid-template-columns:1fr;}
  .req-form input, .req-form textarea, .contact-form input, .contact-form textarea, .checkout-modal input, .checkout-modal textarea{font-size:16px !important;}
  .checkout-modal{width:calc(100% - 20px) !important;max-height:calc(100dvh - 20px);overflow-y:auto;padding:22px 16px !important;}
  .checkout-modal .form-row, .contact-form .form-row{grid-template-columns:1fr !important;display:grid;gap:10px;}
  .cart-drawer{width:100% !important;max-width:100% !important;}
  .contact-card{padding:24px 16px !important;}

  /* terms */
  .tsec h2{font-size:19px;}

  /* floating widgets sit clear of content and the home-bar */
  .music-player{left:10px !important;bottom:calc(10px + env(safe-area-inset-bottom)) !important;max-width:calc(100% - 120px);}
  .magnifier{bottom:calc(72px + env(safe-area-inset-bottom));}
  .back-to-top{bottom:calc(12px + env(safe-area-inset-bottom)) !important;}
  .footer{padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important;}
}

/* small phones (iPhone SE / mini) */
@media (max-width:380px){
  .nh-btns{grid-template-columns:1fr;}
  .nh-cats{grid-template-columns:1fr;}
  .nh-trust{grid-template-columns:1fr;}
  .nh-trust>div{border-right:0 !important;border-bottom:1px solid var(--panel-border);}
  .nh-search button{padding:0 10px;}
}

/* ---------------- PHONE PORTRAIT: signature background ----------------
   A fixed "lab glass" backdrop made for tall screens: soft aurora glows in the
   brand colours, a faint hexagon (molecule) lattice, and a gentle vignette.
   Content scrolls over it, so every page feels designed for the phone. */
@media (max-width:1366px) and (orientation:portrait){
  body{background:#030308;}
  body::before{
    content:'';display:block !important;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1 !important;mix-blend-mode:normal !important;
    background:
      radial-gradient(60% 35% at 85% 8%,rgba(255,45,143,.20),transparent 70%),
      radial-gradient(70% 40% at 0% 38%,rgba(36,229,255,.16),transparent 70%),
      radial-gradient(80% 45% at 100% 78%,rgba(139,61,255,.22),transparent 70%),
      radial-gradient(70% 35% at 10% 100%,rgba(255,170,40,.10),transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%238cdcff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 64v33M0 48l-28 16M56 48l28 16'/%3E%3C/g%3E%3Ccircle cx='28' cy='0' r='1.6' fill='%2324e5ff' fill-opacity='.18'/%3E%3Ccircle cx='56' cy='48' r='1.6' fill='%23ff2d8f' fill-opacity='.16'/%3E%3C/svg%3E"),
      linear-gradient(180deg,#05050c 0%,#030308 50%,#06040c 100%);
  }
  @media (prefers-reduced-motion:no-preference){
    body::before{animation:phoneAurora 18s ease-in-out infinite alternate;background-size:100% 100%,100% 100%,100% 100%,100% 100%,56px 97px,100% 100%;}
  }
  /* sections sit on the backdrop instead of flat black */
  .nh-sec, .mascot-section, .contact, .verify-features, .quality, .journal, .coa-verify-section, .shop, .cat-spotlight, .ixlist{background:transparent !important;}
  .footer{background:linear-gradient(180deg,transparent,rgba(3,3,8,.92) 30%) !important;}
}
@keyframes phoneAurora{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0;}
  100%{background-position:-30px 40px,30px -30px,-20px -40px,20px 20px,0 -97px,0 0;}
}
@media (max-width:760px){
  .back-to-top{width:46px !important;height:46px !important;padding:0 !important;justify-content:center;border-radius:50% !important;}
  .back-to-top span{display:none;}
}

/* ---- tablet refinements ---- */
@media (max-width:1024px){
  .mascot-nav{display:none !important;}
  .nh-hero-card{margin-top:56px;padding-top:84px;}
  .nh-seal{width:140px;left:50%;right:auto;top:-70px;transform:translateX(-50%);}
  .nh-hero-copy{text-align:left;}
  body:has(#shopVials) .ph-media{order:0 !important;}
  body:has(#shopVials) .ph-trio{max-width:440px;margin:0 auto;}
  .ph-media{order:0;}
}
@media (max-width:760px){
  .nh-hero-card{margin-top:40px;padding-top:74px;}
  .nh-seal{width:124px;top:-62px;}
  body:has(#shopVials) .ph-trio{max-width:100%;}
}
/* checkout address row */
.checkout-modal .form-row-3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;}
.checkout-modal #chkAddr,.checkout-modal #chkPhone{width:100%;margin-bottom:10px;}
@media (max-width:760px){.checkout-modal .form-row-3{grid-template-columns:1fr 1fr !important;}.checkout-modal .form-row-3 #chkCity{grid-column:1/-1;}}
.checkout-modal input, .checkout-modal textarea{box-sizing:border-box;max-width:100%;min-width:0;}
.checkout-modal .form-row-3 > *{width:100%;min-width:0;}

/* ================= PHONE READABILITY =================
   Rajdhani (the display body font) is narrow and light — on small screens body copy
   switches to Montserrat, grey text gets brighter, and nothing drops below 12px. */
@media (max-width:760px){
  :root:not([data-theme="light"]){ --text-dim:#e2e7f3; }
  body{font-family:'Montserrat',sans-serif;font-weight:500;}
  :is(p, li, dd, .cbody, .card-blurb, .section-sub, .nh-lead, .ph-lead, .find, .rs-note, .tool-body p, .tsec p, .tsec li,
      .eli5 p, .cm-body, .cm-eli5 p, .trio-card dd, .vt-card li, .vt-steps li, .vt-flags li, .access-muted, .access-warn, .check-row span,
      .nh-feat p, .nh-steps p, .mascot-card-body p, .chk-disclaimer, .modal-sub, .cart-note, .contact-card p){
    font-family:'Montserrat',sans-serif !important;font-weight:500 !important;font-size:15.5px !important;line-height:1.65 !important;letter-spacing:.005em;}
  :is(small, .meta, .scount, .rs-fine, .nh-hub-note, .access-fine, .tool-fine, .trio-note, .pair-ix-note, .src, .nt, .vtr-rows small, .cm-aka, .ixres){
    font-size:13.5px !important;line-height:1.5 !important;}
  /* small uppercase labels: a 12px floor with slightly tighter tracking */
  :is(.section-tag, .nh-badge, .nh-stock, .tag, .pcat, .sizes-l, .facts span, .eb, .access-chip, .access-sub, .gear-label, .nh-pill,
      .trio-role, .trio-step, .vt-method span, .cm-facts dt, .trio-card dt, dt, .req-form label, .shop-pick label, .coa-req label,
      .ph-eyebrow, .pair-k, .trio-ask-k, .eli5-tag, .vt-q, .card-cat, .seal-plaque, .vtr-meta span, .vtr-rows em, .dr-head .eb){
    font-size:12px !important;letter-spacing:.09em !important;}
  :is(.nh-add, .nh-coa, .card-coa, .ptool, .cpd-tool, .ixpills button, .nh-chip, .size, .ptag, .ph-badge){font-size:13px !important;}
  .ptag{padding:5px 11px;}
  .card-size, .nh-size{font-size:14px !important;}
  .section-title{letter-spacing:.3px !important;}
  /* body copy in white cards (light mode) stays dark and solid */
  [data-theme="light"] :is(.nh-card, .cpd, .ph-card, .product-card, .tool-drop) :is(p, li, dd){color:#2b3148 !important;}
}
/* long buttons wrap instead of running off narrow screens */
@media (max-width:760px){
  .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3;}
  .tool-cta{flex-direction:column;align-items:stretch;}
  .tool-cta .btn{width:100%;}
}

/* ================= PHONE PORTRAIT: research panel styling =================
   The hero (logo + vial) stays first; the comparison sits closed below it. */
@media (max-width:760px) and (orientation:portrait){
  #latest-research{padding:18px 0 6px !important;}
  #latest-research > .nh-wrap{margin:0 10px;padding:20px 14px 16px;
    box-shadow:0 0 0 1px rgba(36,229,255,.2),0 0 46px rgba(255,170,40,.28),0 0 80px rgba(139,61,255,.25);}
  #latest-research .news-badges{justify-content:center;}
  #latest-research .nh-head{text-align:center;margin-bottom:14px;}
  #latest-research .section-title{font-size:clamp(26px,7.6vw,32px) !important;}
  #latest-research .section-sub{margin:0 auto;}
  /* the table rows read like bold stat cards */
  #latest-research .news-table tr{padding:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--nc) 14%,transparent),transparent 70%);}
  #latest-research .news-table td:first-child b{font-size:19px;}
  #latest-research .news-table td:nth-child(3) b{display:inline-block;margin:4px 0 2px;font:900 20px/1.2 var(--font-hud);color:var(--nc);}
  #latest-research .news-table td:nth-child(2){font-size:13.5px;}
}

/* Phone portrait: logo, then the vial card, then the hero text */
@media (max-width:760px) and (orientation:portrait){
  .nh-hero-card .nh-showcase{order:-1;max-width:420px;}
}
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .nh-hero-card .nh-showcase{order:-1;max-width:520px;}
}

.fx-net{display:none;}
/* Portrait screens (phones, tablets, upright desktop windows): the photo wallpaper
   is replaced by the animated molecule network (js/app.js) over the aurora backdrop. */
@media (max-width:1366px) and (orientation:portrait){
  html .nh-hero::before, html .ph::before, html[data-theme] .nh-hero::before, html[data-theme] .ph::before{display:none !important;}
  .nh-hero, .ph{background:transparent !important;}
  .fx-net{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block;}
  .fx-net[hidden]{display:none;}
}

/* ================= DESKTOP NAV: glass segmented tab bar =================
   One rounded bar of tabs, labels never wrap, the current page gets a lit pill. */
@media (min-width:861px){
  .nav-inner{gap:18px;}
  .nav-links{gap:2px !important;padding:5px;border-radius:999px;flex:0 1 auto;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
    border:1px solid rgba(140,220,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 26px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .nav-links a{white-space:nowrap;padding:9px 16px !important;border-radius:999px;
    font:700 13px/1 var(--font-hud) !important;letter-spacing:.12em !important;text-transform:uppercase;
    color:#b9c2d6 !important;transition:color .2s,background .2s,box-shadow .2s;}
  .nav-links a::after{display:none !important;}
  .nav-links a:hover{color:#fff !important;background:rgba(255,255,255,.06);}
  .nav-links a.active{color:#fff !important;
    background:linear-gradient(135deg,rgba(36,229,255,.22),rgba(139,61,255,.24) 55%,rgba(255,45,143,.22));
    box-shadow:inset 0 0 0 1px rgba(140,220,255,.38),0 0 18px rgba(36,229,255,.22);}
  .nav-links a:focus-visible{outline:2px solid #24e5ff;outline-offset:2px;}
}
@media (min-width:861px) and (max-width:1180px){
  .nav-inner{padding-left:24px !important;padding-right:24px !important;gap:12px;}
  .nav-links a{padding:8px 11px !important;font-size:12px !important;letter-spacing:.08em !important;}
  .brand-text{font-size:15px;}
}
@media (min-width:861px) and (max-width:980px){
  .nav-links a{padding:8px 8px !important;font-size:11.5px !important;letter-spacing:.05em !important;}
  .brand-text{display:none;}
}