/* Puckin’ Go search sheet: replaces browser-native prompt on phones. */
#pgMobileSearchDialog{
  /* Stay in the *visible* screen area rather than underneath the iOS keyboard.
     JavaScript tracks visualViewport on keyboard open/close; dvh is the fallback. */
  box-sizing:border-box;position:fixed;
  inset:var(--pgms-visible-top,12px) 0 auto 0;margin:0 auto;
  padding:0;width:min(100%,560px);max-width:100%;
  max-height:var(--pgms-visible-height,calc(100dvh - 24px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  color:#faf8ff;background:#101016;border:1px solid #4b2e68;
  border-radius:22px;box-shadow:0 20px 65px rgba(0,0,0,.55);
}
#pgMobileSearchDialog::backdrop{background:rgba(3,1,9,.82);backdrop-filter:blur(5px)}
#pgMobileSearchDialog .pgms-inner{padding:22px 22px calc(26px + env(safe-area-inset-bottom,0px))}
#pgMobileSearchDialog .pgms-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px}
#pgMobileSearchDialog .pgms-eyebrow{color:#b88afa;font-size:10px;letter-spacing:2.1px;font-weight:850;margin:0 0 6px}
#pgMobileSearchDialog h2{font-size:27px;line-height:1.15;color:white;margin:0}
#pgMobileSearchDialog .pgms-close{background:#24202c;color:white;border:1px solid #5a4670;border-radius:10px;width:40px;height:40px;font-size:25px;line-height:1;cursor:pointer;flex:none}
#pgMobileSearchDialog label{display:block;font-size:13px;font-weight:700;color:#e4dcee;margin-bottom:10px}
#pgMobileSearchDialog .pgms-field{display:flex;align-items:stretch;gap:9px}
#pgMobileSearchDialog input[type="search"]{box-sizing:border-box;min-width:0;flex:1;padding:15px 12px;background:#fff;color:#17141f;border:1px solid #cdbde7;border-radius:12px;font-size:16px;line-height:1.3;outline-offset:3px;-webkit-appearance:none;appearance:none}
#pgMobileSearchDialog .pgms-submit{background:#8f4ce7;color:white;font-weight:850;border:0;border-radius:12px;padding:0 18px;font-size:14px;cursor:pointer;white-space:nowrap}
#pgMobileSearchDialog .pgms-hint{margin:13px 0 23px;font-size:12px;color:#bcb0cc;line-height:1.5}
#pgMobileSearchDialog .pgms-popular{border-top:1px solid #363041;padding-top:17px}
#pgMobileSearchDialog .pgms-popular b{display:block;color:#efe4ff;font-size:13px;margin-bottom:11px}
#pgMobileSearchDialog .pgms-chips{display:flex;flex-wrap:wrap;gap:9px}
#pgMobileSearchDialog .pgms-chips a{color:#eee0ff;text-decoration:none;border:1px solid #583b73;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:750;background:#22172f}
#pgMobileSearchDialog :is(button,a,input):focus-visible{outline:3px solid #d6afff;outline-offset:3px}
@media(min-width:781px){
 #pgMobileSearchDialog{inset:0;margin:auto;width:min(95%,560px);border-radius:22px}
 #pgMobileSearchDialog .pgms-inner{padding:26px}
}


/* Keep the real product search visible beneath the logo on phone screens.
   The existing search handler and keyboard-aware search dialog are unchanged. */
@media (max-width:780px){
  header .header-main{
    height:auto;
    min-height:78px;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:10px;
    row-gap:8px;
    padding-top:9px;
    padding-bottom:11px;
  }
  header .header-main > .search{
    display:flex;
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    min-width:0;
    min-height:44px;
    margin:0;
  }
  header .header-main > .search input{
    flex:1;
    min-width:0;
    font-size:16px;
  }
}