/* ==========================================================================
   KING365TV — responsive.css (mobile-first refinements, desktop-down)
   ========================================================================== */

@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .device-grid  { grid-template-columns: repeat(4, 1fr); }
  .steps        { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-visual { order: -1; max-width: 560px; }
  .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* ---- Mobile navigation ---- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* Off-canvas panel: fully removed from layout when closed so it can never
     create horizontal scroll on small screens. */
  .main-nav {
    display: none;
    position: fixed; inset: var(--header-h) 0 0 0;
    background: #fff; border-top: 1px solid var(--line);
    padding: 18px 20px 40px; overflow-y: auto;
    margin-left: 0; z-index: 99;
  }
  .main-nav[data-open="true"] { display: block; animation: navIn .22s ease; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { padding: .9rem .8rem; font-size: 1.02rem; border-radius: 11px; }
  .header-actions { margin-left: auto; }
  .header-actions .btn { display: none; }
  .main-nav .nav-cta { display: flex; margin-top: 14px; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 901px) {
  .main-nav .nav-cta { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 54px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; }
  .plan--featured { order: -1; }
  .device-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .cta-band { padding: 34px 22px; }
  .toc ul { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 52px; }
  .hero-cta .btn { width: 100%; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 auto; }
  .floating-contact { right: 12px; bottom: 12px; }
  .fab { width: 48px; height: 48px; }
}

@media (max-width: 420px) {
  .container { padding-inline: 16px; }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
  .card, .plan, .install-block { padding: 20px 18px; }
  .brand span { font-size: 1.02rem; }
  .contact-card { flex-direction: column; }
  .btn { white-space: normal; }
  .lang-switch a { padding: .26rem .5rem; font-size: .8rem; }
}

@media print {
  .site-header, .site-footer, .floating-contact, .cookie-banner, .cta-band { display: none !important; }
  body { font-size: 12pt; color: #000; }
}