/* Popcorn POS — mobile/responsive layer. Loaded after page CSS on every page. */

/* Contain horizontal overflow from animated tickers / off-canvas elements */
html,body{overflow-x:clip}

/* (custom cursor removed site-wide — native cursor everywhere) */

/* ===== Hamburger (injected by nav.js) ===== */
.pp-burger{display:none;background:none;border:none;padding:10px;margin-left:auto;cursor:pointer;z-index:102}
.pp-burger span{display:block;width:22px;height:2px;background:var(--y,#FDCB24);margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.pp-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pp-burger.open span:nth-child(2){opacity:0}
.pp-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.pp-mnav{position:fixed;top:64px;left:0;right:0;z-index:101;background:rgba(3,23,58,.98);backdrop-filter:blur(14px);border-bottom:1px solid rgba(253,203,36,.15);padding:8px 24px 24px;display:none;flex-direction:column}
.pp-mnav.open{display:flex}
.pp-mnav a{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.pp-mnav a:last-child{border-bottom:none;background:var(--y,#FDCB24);color:var(--n,#03173A);font-family:'Nunito',sans-serif;font-weight:800;text-align:center;border-radius:28px;margin-top:16px;padding:14px 20px}

/* ===== <=900px: tablet ===== */
@media (max-width:900px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .pp-burger{display:block}

  .container{padding:0 24px}
  section{padding:72px 0}
  .divider{margin:0 24px}

  .split,.split.reverse{display:flex;flex-direction:column;gap:40px;direction:ltr}

  /* Collapse any inline 3/4-col grid to 2-col */
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  .colors-grid,.cert-grid,.reward-grid,.layout-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:48px}
  .mfooter-grid{grid-template-columns:1fr 1fr;gap:32px}

  footer{padding:48px 24px}
  .speed-band{padding:48px 24px}
}

/* ===== <=700px: large phones ===== */
@media (max-width:700px){
  .type-grid,.logo-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:96px;padding-bottom:56px}
  .hero p{font-size:17px}
  .section-sub{font-size:16px;margin-bottom:40px}
  .hero-price-row{flex-direction:column;gap:34px}
}

/* ===== <=600px: phones ===== */
@media (max-width:600px){
  .container{padding:0 20px}
  section{padding:56px 0}

  /* All remaining inline multi-col grids to 1-col */
  [style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  .colors-grid,.layout-grid{grid-template-columns:repeat(2,1fr)}
  .cert-grid,.reward-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .mfooter-grid{grid-template-columns:1fr;gap:28px}

  /* Hero Poppy + speech bubble */
  .hero-poppy-wrap img,#heroPoppy{width:220px!important;height:220px!important}
  #poppy-bubble{left:auto!important;right:0!important;top:-16px!important;width:150px!important;font-size:12px!important;padding:10px 12px!important}
  #poppy-bubble>div{display:none}/* hide side tail — bubble sits above-right on mobile */

  .type-card{padding:28px 24px}
  .product-card{padding:28px 24px}
  .btn-primary{padding:14px 32px;font-size:14px}
  .faq-q{padding:16px 18px;font-size:15px}
  .faq-a{padding:0 18px 16px}
  footer{padding:40px 20px}
}

/* ===== Products dropdown ===== */
.nav-dd{position:relative}
.nav-dd-btn{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:14px;font-weight:600;color:var(--y,#FDCB24);font-family:'Inter',sans-serif;cursor:pointer;padding:0;transition:color .2s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:#fff}
.nav-dd-btn svg{transition:transform .2s}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:calc(100% + 18px);left:-16px;min-width:264px;background:var(--nm,#0B1F47);border:1px solid rgba(253,203,36,.15);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-dd-panel::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-dd.open .nav-dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-panel a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;transition:background .15s}
.nav-dd-panel a:hover{background:rgba(253,203,36,.08)}
.nav-dd-panel strong{display:block;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:#fff}
.nav-dd-panel a:hover strong{color:var(--y,#FDCB24)}
.nav-dd-panel span{font-size:12.5px;color:rgba(255,255,255,.45)}

/* drawer grouping */
.pp-mnav-label{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--y,#FDCB24);padding:14px 4px 4px}
.pp-mnav a.pp-mnav-sub{padding-left:18px}

/* section scroll cues */
.pp-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(253,203,36,.22);background:none;color:rgba(253,203,36,.55);cursor:pointer;z-index:5;animation:ppCueBob 2.4s ease-in-out infinite;transition:color .2s,border-color .2s,background .2s}
.pp-cue:hover{color:var(--y,#FDCB24);border-color:rgba(253,203,36,.55);background:rgba(253,203,36,.08)}
@keyframes ppCueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media (max-width:600px){.pp-cue{display:none}}
.speed-band .pp-cue,section[style*="background:var(--y)"] .pp-cue{color:rgba(3,23,58,.6);border-color:rgba(3,23,58,.3)}
.speed-band .pp-cue:hover,section[style*="background:var(--y)"] .pp-cue:hover{color:var(--n,#03173A);border-color:rgba(3,23,58,.6);background:rgba(3,23,58,.08)}

/* pp-footer-clear: keep the Poppy toggle off the footer links */
footer>div:last-of-type{padding-right:88px}
@media (max-width:600px){footer>div:last-of-type{padding-right:72px}}