/* 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}

/* ===== Touch devices: native cursor, hide custom cursor ===== */
@media (hover:none),(pointer:coarse){
  .cursor,.cursor-ring{display:none!important}
  body,a,button,.poppy-img,.faq-q,.form-input,.form-check,.form-check input,.form-check label,
  .color-swatch,.voice-card,.feat-card,.product-card,.btn-primary{cursor:auto!important}
}

/* ===== 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,#F5C518);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(13,27,42,.98);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,197,24,.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,#F5C518);color:var(--n,#0D1B2A);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:15px}
  .section-sub{font-size:15px;margin-bottom:40px}
}

/* ===== <=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:14px}
  .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:13px;font-weight:500;color:rgba(255,255,255,.55);font-family:'Inter',sans-serif;cursor:none;padding:0;transition:color .2s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--y,#F5C518)}
.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,#152337);border:1px solid rgba(245,197,24,.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(245,197,24,.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,#F5C518)}
.nav-dd-panel span{font-size:11.5px;color:rgba(255,255,255,.45)}

/* drawer grouping */
.pp-mnav-label{font-family:'Nunito',sans-serif;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--y,#F5C518);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(245,197,24,.22);background:none;color:rgba(245,197,24,.55);cursor:none;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,#F5C518);border-color:rgba(245,197,24,.55);background:rgba(245,197,24,.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(13,27,42,.6);border-color:rgba(13,27,42,.3)}
.speed-band .pp-cue:hover,section[style*="background:var(--y)"] .pp-cue:hover{color:var(--n,#0D1B2A);border-color:rgba(13,27,42,.6);background:rgba(13,27,42,.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}}