/* ================================================================
   mobile-v2.css — Mobile Oven Clean Conversion Optimisation
   MOBILE ONLY — ALL rules inside max-width: 768px
   Desktop: zero impact
   ================================================================ */

@media (max-width: 768px) {

  /* ── GLOBAL BASE ────────────────────────────────────────────── */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; font-family: 'Manrope', sans-serif !important; }
  .container, .w { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding: 28px 0 !important; }
  img, video, iframe { max-width: 100% !important; }
  * { box-sizing: border-box !important; }

  /* ── STICKY BOTTOM BAR — 3 EQUAL COLUMNS ───────────────────── */
  .mob-bar, #mobBar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 7px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #fff !important;
    border-top: 2px solid #f0d0e8 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1) !important;
  }
  .mob-bar-call {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 9px 4px !important;
    gap: 3px !important;
    text-decoration: none !important;
    min-height: 50px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mob-bar-wa {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #25d366 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 9px 4px !important;
    gap: 3px !important;
    text-decoration: none !important;
    min-height: 50px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mob-bar-quote {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #ff2d8f, #c2006b) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 9px 6px !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    font-family: 'Manrope', sans-serif !important;
    box-shadow: 0 3px 14px rgba(255,45,143,0.4) !important;
    min-height: 50px !important;
    width: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mob-bar-icon { font-size: 17px !important; line-height: 1 !important; display: block !important; }
  .mob-bar-lbl { font-size: 7.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: block !important; }

  /* ── FLOATING BUTTON — COMPLETELY REMOVED ───────────────────── */
  #sticky-cta,
  .sticky-cta,
  [id="sticky-cta"],
  [class*="float-cta"],
  [class*="floating-btn"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ── HERO (Homepage) ────────────────────────────────────────── */
  .hero {
    padding: 28px 0 24px !important;
    min-height: auto !important;
    text-align: center !important;
  }
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .hero-form-card, #quote { display: none !important; }
  .hero h1 {
    font-size: clamp(1.45rem, 6.5vw, 1.9rem) !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
  }
  .hero-sub {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.9) !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
  }
  /* 2 buttons only: Call + Quote. WhatsApp hidden on hero */
  .hero-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    justify-content: unset !important;
    margin-bottom: 14px !important;
  }
  .hero-btn-wa { display: none !important; }
  .hero-btn {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 13px 8px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .hero-btn strong { font-size: 0.84rem !important; font-weight: 900 !important; }
  .hero-btn small { display: none !important; }
  .hero-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }
  .hero-trust { justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; }
  .ht-item { font-size: 0.73rem !important; }

  /* ── PAGE HERO (Area/Service pages) ────────────────────────── */
  .page-hero { padding: 26px 0 22px !important; text-align: center !important; }
  .page-hero h1 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
  }
  .page-hero p { font-size: 0.86rem !important; color: rgba(255,255,255,0.88) !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .page-hero-badge { font-size: 0.7rem !important; padding: 4px 11px !important; margin-bottom: 10px !important; }
  /* 2 buttons: Call + Quote only */
  .page-hero-btns,
  .page-hero [style*="margin-bottom:34px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-bottom: 16px !important;
  }
  .page-hero-btns .btn-whatsapp { display: none !important; }
  .page-hero-btns .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 12px 6px !important;
    border-radius: 12px !important;
  }
  .page-hero-trust { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; }
  .pht-item { font-size: 0.75rem !important; }
  .page-hero [style*="display:flex"][style*="align-items:stretch"],
  .page-hero [style*="background:rgba(0,0,0,0.15)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .page-hero [style*="text-align:center"][style*="padding:0 18px"] { padding: 10px 8px !important; }

  /* ── BEFORE/AFTER SECTION ───────────────────────────────────── */
  #before-after { padding: 24px 0 20px !important; }
  .ba-container { padding: 0 14px !important; }
  .ba-image-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
    margin-bottom: 14px !important;
    scrollbar-width: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .ba-image-grid::-webkit-scrollbar { display: none !important; }
  .ba-image-grid > div {
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    border-radius: 0 !important;
    position: relative !important;
  }
  .ba-image-grid img { height: 200px !important; width: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
  .ba-image-grid [style*="top:14px"] { top: 8px !important; left: 8px !important; font-size: 0.65rem !important; padding: 4px 10px !important; }
  .ba-stats-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
  }
  .ba-stat-divider { display: none !important; }
  .ba-stats-strip > div {
    background: #fff0f7 !important;
    border: 1.5px solid #f0d0e8 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #before-after button { width: 100% !important; padding: 14px !important; border-radius: 12px !important; }

  /* ── TRUST STRIP (inject via JS, mobile-enhance.js) ─────────── */
  .trust-strip-mobile {
    display: flex !important;
    overflow-x: auto !important;
    background: #fff !important;
    border-top: 2px solid #fce7f3 !important;
    border-bottom: 2px solid #fce7f3 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .trust-strip-mobile::-webkit-scrollbar { display: none !important; }
  .trust-strip-mobile .ts-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    flex: 0 0 auto !important;
    border-right: 1px solid #fce7f3 !important;
    min-width: 76px !important;
  }
  .trust-strip-mobile .ts-item:last-child { border-right: none !important; }
  .trust-strip-mobile .ts-icon { font-size: 1.3rem !important; line-height: 1 !important; }
  .trust-strip-mobile .ts-label {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* ── STATS BAR ──────────────────────────────────────────────── */
  .stats-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .stats-grid::-webkit-scrollbar { display: none !important; }
  .stat-item { flex: 0 0 auto !important; min-width: 88px !important; padding: 14px 14px !important; border-right: 1px solid #f0e0ea !important; text-align: center !important; }
  .stat-item:last-child { border-right: none !important; }
  .stat-num { font-size: 1.4rem !important; }
  .stat-label { font-size: 0.63rem !important; }

  /* ── SERVICES GRID ──────────────────────────────────────────── */
  .services-section { padding: 24px 0 !important; background: #fff !important; }
  .services-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .service-card { border-radius: 14px !important; border: 1.5px solid #f0e0ea !important; background: #fff !important; }
  .service-card:hover { transform: none !important; }
  .service-img { height: 70px !important; font-size: 1.8rem !important; border-radius: 0 !important; background: linear-gradient(135deg, #fff0f7, #fce7f3) !important; }
  .service-img img { max-width: 68px !important; height: 54px !important; }
  .service-img::after { display: none !important; }
  .service-price { position: static !important; display: inline-block !important; font-size: 0.62rem !important; margin-bottom: 4px !important; }
  .service-body { padding: 8px 8px 10px !important; }
  .service-body h3 { font-size: 0.78rem !important; margin-bottom: 5px !important; }
  .service-body p { display: none !important; }
  .service-actions { display: block !important; }
  .sa-primary { display: block !important; width: 100% !important; text-align: center !important; padding: 9px 6px !important; border-radius: 9px !important; font-size: 0.74rem !important; font-weight: 800 !important; }
  .sa-wa, .sa-call { display: none !important; }

  /* ── PROCESS STEPS ──────────────────────────────────────────── */
  .process-section { padding: 28px 0 !important; }
  .process-grid { grid-template-columns: 1fr !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; }
  .process-grid::before { display: none !important; }
  .step-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: left !important;
    padding: 14px 16px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  .step-num { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; flex-shrink: 0 !important; margin: 0 !important; border: 3px solid #1a1a1a !important; }
  .step-card h4 { font-size: 0.88rem !important; margin-bottom: 3px !important; }
  .step-card p { font-size: 0.78rem !important; color: rgba(255,255,255,0.65) !important; line-height: 1.5 !important; }

  /* ── REVIEWS ────────────────────────────────────────────────── */
  .reviews-section { padding: 28px 0 !important; }
  .reviews-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .review-card { padding: 18px 16px !important; }
  .review-text { font-size: 0.88rem !important; line-height: 1.65 !important; margin-bottom: 14px !important; }
  .reviews-grid .review-card:nth-child(n+3) { display: none !important; }
  .mob-rev-track { grid-template-columns: 1fr !important; }
  .mob-rev-card:nth-child(n+2) { display: none !important; }

  /* ── WHY SECTION ────────────────────────────────────────────── */
  .why-section { padding: 28px 0 !important; }
  .why-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .why-img-wrap { display: none !important; }
  .why-features { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .why-card { padding: 14px 12px !important; }
  .why-icon { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; margin-bottom: 8px !important; }
  .why-card h4 { font-size: 0.78rem !important; margin-bottom: 3px !important; }
  .why-card p { font-size: 0.72rem !important; line-height: 1.5 !important; }

  /* ── FAQ ────────────────────────────────────────────────────── */
  .faq-section { padding: 28px 0 !important; }
  .faq-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .faq-item { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; }
  .faq-item:first-child { border-top: 1px solid #e5e7eb !important; }
  .faq-question { font-size: 0.87rem !important; padding: 14px !important; }
  .faq-answer p { font-size: 0.83rem !important; padding: 0 14px 14px !important; line-height: 1.65 !important; }

  /* ── CTA BAND ───────────────────────────────────────────────── */
  .cta-band, .cta-section { padding: 30px 0 !important; }
  .cta-inner { flex-direction: column !important; text-align: center !important; gap: 16px !important; align-items: center !important; }
  .cta-text h2 { font-size: 1.3rem !important; line-height: 1.2 !important; }
  .cta-btns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; max-width: 320px !important; }
  .cta-btns .btn { justify-content: center !important; font-size: 0.84rem !important; padding: 13px 8px !important; }

  /* ── AREA PAGES ─────────────────────────────────────────────── */
  .area-intro-section { padding: 28px 0 !important; }
  .area-intro-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .area-stats-box { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .area-stats-box .stat { border-bottom: none !important; border-right: 1px solid rgba(255,255,255,0.08) !important; padding: 14px 10px !important; }
  .area-stats-box .stat:nth-child(even) { border-right: none !important; }
  .area-stats-box .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.08) !important; }
  .area-stats-box .stat-num { font-size: 1.6rem !important; }
  .area-services-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .area-svc-card { padding: 14px 10px !important; }
  .area-svc-icon { font-size: 1.8rem !important; }
  .area-svc-name { font-size: 0.78rem !important; }
  .area-svc-price { font-size: 1rem !important; }
  .area-svc-desc { display: none !important; }
  .area-content-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .area-quote-sidebar { position: static !important; }
  .why-grid-area { gap: 0 !important; }
  .why-item { padding: 16px 0 !important; }
  .nearby-grid { gap: 6px !important; }
  .nearby-link { font-size: 0.75rem !important; padding: 6px 11px !important; }

  /* ── BLOG GRID ──────────────────────────────────────────────── */
  .blog-section { padding: 24px 0 !important; }
  .blog-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .blog-card { display: flex !important; flex-direction: row !important; border-radius: 12px !important; overflow: hidden !important; }
  .blog-img { width: 80px !important; min-width: 80px !important; height: 80px !important; font-size: 1.6rem !important; flex-shrink: 0 !important; border-radius: 0 !important; }
  .blog-body { padding: 10px 12px !important; }
  .blog-body h3 { font-size: 0.82rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .blog-body p { display: none !important; }
  .blog-grid .blog-card:nth-child(n+4) { display: none !important; }

  /* ── FOOTER ─────────────────────────────────────────────────── */
  footer { padding: 28px 0 16px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding-bottom: 20px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  .footer-col h4 { font-size: 0.8rem !important; margin-bottom: 10px !important; padding-bottom: 7px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .footer-links a { font-size: 0.8rem !important; }
  .footer-logo-img { height: 36px !important; }
  .footer-desc { font-size: 0.82rem !important; }
  .footer-contact-item { font-size: 0.82rem !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 4px !important; font-size: 0.72rem !important; }

  /* ── MODAL / QUOTE FORM (bottom sheet) ─────────────────────── */
  #quote-modal-overlay { padding: 0 !important; align-items: flex-end !important; background: rgba(0,0,0,0.55) !important; }
  #quote-modal-box {
    border-radius: 22px 22px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: mobSheet 0.3s cubic-bezier(0.34,1.05,0.64,1) both !important;
  }
  @keyframes mobSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
  #quote-modal-box::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    background: #e0e0e0 !important;
    border-radius: 3px !important;
    margin: 12px auto 0 !important;
  }
  #quote-modal-close { top: 10px !important; right: 14px !important; }
  #quote-modal-box .quote-card { padding: 16px 14px 36px !important; }
  .service-picker { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
  .sp-card { padding: 9px 4px 8px !important; border-radius: 10px !important; }
  .sp-name { font-size: 0.63rem !important; }
  .sp-price { font-size: 0.6rem !important; }
  .extras-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .form-group input, .form-group select { font-size: 16px !important; padding: 13px 14px !important; border-radius: 10px !important; }
  .qc-submit { width: 100% !important; padding: 15px !important; border-radius: 12px !important; font-size: 0.95rem !important; }
  .qc-header h3 { font-size: 1.05rem !important; }

  /* ── POPUP — slide up bottom sheet ─────────────────────────── */
  #moc-popup { align-items: flex-end !important; padding: 0 !important; }
  #moc-popup > div {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 22px 22px 0 0 !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    transform: translateY(100%) !important;
    opacity: 1 !important;
  }
  #moc-popup.moc-pop-open > div { transform: translateY(0) !important; }

  /* ── HIDE ON MOBILE (clutter removal) ──────────────────────── */
  .mq-strip-outer { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; }
  .marquee-wrap { display: none !important; }
  .desktop-only-block, .mob-hidden, #sticky-cta, .sticky-cta,
  #stats-after-ba, .quote-nudge, .area-intro-section.desktop-only,
  .hero-form-card, .hero-img-col { display: none !important; }
  [style*="position:-webkit-sticky"], [style*="position: sticky"] { position: static !important; }

  /* ── SEO INTERNAL LINKS ─────────────────────────────────────── */
  .seo-internal-links { padding: 20px 0 !important; }
  .seo-internal-links ul { gap: 5px !important; }
  .seo-internal-links li a { font-size: 0.72rem !important; padding: 5px 9px !important; border-radius: 8px !important; }

  /* ── AREAS GRID ─────────────────────────────────────────────── */
  .areas-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .area-card { padding: 14px 12px !important; gap: 10px !important; }
  .area-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .area-body h4 { font-size: 0.82rem !important; }
  .area-body p { display: none !important; }

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */
  .section-title { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; line-height: 1.2 !important; }
  .section-sub { font-size: 0.85rem !important; }
  .section-header { margin-bottom: 18px !important; }
  .section-tag { font-size: 0.67rem !important; padding: 4px 10px !important; }
  h1 { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; }
  h2 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.2rem) !important; }

  /* ── INPUT / FORM GLOBAL ────────────────────────────────────── */
  input, select, textarea,
  input[type="text"], input[type="tel"], input[type="email"] {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* ── 480px BREAKPOINT ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hero h1 { font-size: 1.38rem !important; }
  .page-hero h1 { font-size: 1.28rem !important; }
  .services-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .why-features { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .cta-btns { max-width: 260px !important; margin: 0 auto !important; }
  .area-services-grid { gap: 8px !important; }
}

/* ── 360px BREAKPOINT ───────────────────────────────────────────── */
@media (max-width: 360px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .mob-bar, #mobBar { gap: 5px !important; }
  .mob-bar-quote { font-size: 11px !important; }
  .hero h1 { font-size: 1.28rem !important; }
  .services-grid, .area-services-grid { gap: 7px !important; }
  .section-title { font-size: 1.1rem !important; }
}

/* ── SAFE AREA INSET ────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mob-bar, #mobBar {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    body {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── GUARANTEED: No floating button after popup dismiss ─────────── */
/* Applied at all times on mobile — belt-and-braces */
@media (max-width: 768px) {
  #sticky-cta,
  .sticky-cta,
  [id*="float-quote"],
  [id*="sticky-quote"],
  [class*="float-btn"],
  [class*="float-cta"],
  [class*="floating-btn"],
  [class*="floating-cta"],
  .html-popup-dismissed #moc-popup,
  body.popup-dismissed #moc-popup {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ── Desktop floating buttons — HIDDEN on mobile ───────────────── */
@media (max-width: 768px) {
  #desk-float,
  .desk-float-btn { display: none !important; }
}

/* ================================================================
   MOBILE V2 — COMPREHENSIVE PAGE-TYPE OVERRIDES
   All rules inside max-width: 768px — desktop untouched
   ================================================================ */

/* ── MOB QUOTE FORM: ensure full proper card on all pages ────────── */
@media (max-width: 768px) {

  /* Core form card */
  .mob-quote-form {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 28px 16px 32px !important;
    background: linear-gradient(155deg,#1a0814 0%,#30082a 45%,#1a0010 100%) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .mob-quote-form::before {
    content: '' !important;
    position: absolute !important;
    top: -50px !important; right: -50px !important;
    width: 180px !important; height: 180px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,rgba(255,45,143,0.25) 0%,transparent 70%) !important;
    pointer-events: none !important;
  }
  .mob-quote-form > div,
  .mob-quote-form > form { position: relative !important; z-index: 1 !important; }

  /* Form heading */
  .mob-quote-form h2 {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    text-align: center !important;
  }
  .mob-quote-form [style*="BOOK YOUR CLEAN"],
  .mob-quote-form div:first-child > div:first-child {
    color: #ff6eb4 !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    text-align: center !important;
  }

  /* Inputs inside form */
  .mob-quote-form input,
  .mob-quote-form select,
  .mob-quote-form textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    padding: 14px 16px !important;
    font-family: 'Manrope', sans-serif !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    display: block !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin-bottom: 10px !important;
  }
  .mob-quote-form input::placeholder,
  .mob-quote-form textarea::placeholder { color: rgba(255,255,255,0.45) !important; }
  .mob-quote-form select option { background: #2d0a24 !important; color: #fff !important; }
  .mob-quote-form input:focus,
  .mob-quote-form select:focus { border-color: #ff2d8f !important; background: rgba(255,45,143,0.14) !important; }
  
  /* Submit button */
  .mob-quote-form button[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    background: linear-gradient(135deg,#ff2d8f 0%,#ff006a 50%,#c2006b 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    font-family: 'Manrope', sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 6px 28px rgba(255,45,143,0.5) !important;
    position: relative !important; z-index: 1 !important;
  }
  .mob-quote-form p { color: rgba(255,255,255,0.45) !important; font-size: 0.72rem !important; text-align: center !important; }

  /* ── BLOG / ARTICLE PAGES ─────────────────────────────────────── */
  article.blog-content,
  .blog-content {
    padding: 0 16px !important;
    font-size: 0.93rem !important;
    line-height: 1.75 !important;
    color: #333 !important;
  }
  .blog-content h2 {
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important;
    font-weight: 900 !important;
    color: #1a1a1a !important;
    margin: 28px 0 12px !important;
    line-height: 1.25 !important;
  }
  .blog-content h3 {
    font-size: clamp(1rem, 4.5vw, 1.2rem) !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin: 22px 0 10px !important;
  }
  .blog-content p { margin-bottom: 14px !important; }
  .blog-content ul, .blog-content ol {
    padding-left: 20px !important;
    margin-bottom: 14px !important;
  }
  .blog-content li { margin-bottom: 8px !important; line-height: 1.65 !important; }

  /* Blog CTA card (inline quote prompt) */
  .blog-content .cta-inline,
  .blog-cta-card {
    background: linear-gradient(135deg,#ff2d8f,#c2006b) !important;
    border-radius: 16px !important;
    padding: 20px 18px !important;
    margin: 24px 0 !important;
    text-align: center !important;
    color: #fff !important;
  }

  /* ── PRICING PAGE ─────────────────────────────────────────────── */
  .price-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .price-card {
    border-radius: 16px !important;
    border: 2px solid #f0e0ea !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(255,45,143,0.08) !important;
  }
  .price-card-header {
    background: linear-gradient(135deg,#ff2d8f,#c2006b) !important;
    padding: 16px 18px !important;
    text-align: center !important;
  }
  .price-card-amount {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #ff2d8f !important;
    text-align: center !important;
    padding: 14px 0 4px !important;
  }
  .price-card-body { padding: 14px 18px 18px !important; }
  .addon-grid, .addons-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .addon-card {
    background: #fff !important;
    border: 2px solid #f0e0ea !important;
    border-radius: 14px !important;
    padding: 14px 12px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  }
  .addon-price {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #ff2d8f !important;
  }

  /* ── CONTACT PAGE ─────────────────────────────────────────────── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .contact-card {
    background: #fff !important;
    border: 2px solid #f0e0ea !important;
    border-radius: 16px !important;
    padding: 20px 18px !important;
    text-align: center !important;
    box-shadow: 0 2px 12px rgba(255,45,143,0.08) !important;
  }
  .contact-card a {
    display: block !important;
    margin-top: 10px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
  }
  /* Contact form */
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  #quote-section-contact input,
  #quote-section-contact select,
  #quote-section-contact textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    padding: 13px 14px !important;
    background: #fafafa !important;
    font-family: 'Manrope', sans-serif !important;
    color: #1a1a1a !important;
  }
  #quote-section-contact { padding: 28px 0 !important; }
  #quote-section-contact > .container > div { grid-template-columns: 1fr !important; }
  #quote-section-contact > .container > div > div:first-child { display: none !important; }

  /* ── ABOUT PAGE ───────────────────────────────────────────────── */
  .story-grid, .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about-image { display: none !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .team-card {
    border-radius: 14px !important;
    border: 2px solid #f0e0ea !important;
    padding: 16px 12px !important;
    text-align: center !important;
    background: #fff !important;
  }

  /* ── REVIEWS PAGE ─────────────────────────────────────────────── */
  .rev-grid-3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .review-card {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
  }
  /* Reviews CTA between cards */
  .reviews-inline-cta {
    background: linear-gradient(135deg,#ff2d8f,#c2006b) !important;
    border-radius: 14px !important;
    padding: 18px 16px !important;
    margin: 8px 0 !important;
    text-align: center !important;
  }

  /* ── SERVICES PAGE ────────────────────────────────────────────── */
  .svc-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .svc-hub-card {
    border-radius: 14px !important;
    border: 2px solid #f0e0ea !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(255,45,143,0.07) !important;
  }

  /* ── AREAS PAGE ───────────────────────────────────────────────── */
  .areas-hero-grid { grid-template-columns: 1fr !important; }
  .mob-areas-section { display: block !important; padding: 24px 16px !important; }
  .mob-cities-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .mob-city-card {
    border-radius: 14px !important;
    padding: 14px !important;
    text-align: left !important;
  }

  /* ── POSTCODE PAGES ───────────────────────────────────────────── */
  /* Postcode pages use same area layout — already handled above */
  .postcode-intro { padding: 0 16px !important; }
  .postcode-areas {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }

  /* ── FAQs ─────────────────────────────────────────────────────── */
  .faq-section { background: #fff !important; }
  .faq-list { display: flex !important; flex-direction: column !important; }
  .faq-item {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff !important;
  }
  .faq-item:first-child { border-top: 1px solid #e5e7eb !important; }
  .faq-item.open { border-bottom-color: #f0d0e8 !important; }
  .faq-question { font-size: 0.88rem !important; padding: 16px !important; line-height: 1.4 !important; }
  .faq-chevron { background: #fff0f7 !important; }
  .faq-item.open .faq-chevron { background: #ff2d8f !important; color: #fff !important; }
  .faq-answer p { font-size: 0.84rem !important; padding: 0 16px 16px !important; color: #555 !important; line-height: 1.7 !important; }

  /* ── TRUST SIGNALS - sitewide card strip ─────────────────────── */
  .guarantee-strip {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
    background: #fff0f7 !important;
    border-radius: 14px !important;
    border: 2px solid #f0d0e8 !important;
    margin: 16px 0 !important;
  }
  .guarantee-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }

  /* ── GRID OVERRIDES (any inline style grid) ───────────────────── */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── TEXT ALIGNMENT STANDARDS ─────────────────────────────────── */
  /* Section headers: centre */
  .section-header.center,
  .section-header.center .section-sub { text-align: center !important; }
  /* Body content: left-aligned */
  .area-intro-text p,
  .blog-content p,
  .faq-answer p,
  .why-item p { text-align: left !important; }
  /* Hero: centre */
  .hero, .page-hero { text-align: center !important; }

  /* ── CARD STANDARDS sitewide ──────────────────────────────────── */
  /* Any card that should have shadow + radius */
  .review-card,
  .service-card,
  .why-card,
  .faq-item,
  .area-svc-card,
  .area-card,
  .blog-card,
  .price-card {
    border-radius: 14px !important;
  }
  /* Cards on light background */
  .review-card,
  .service-card,
  .why-card,
  .area-card {
    box-shadow: 0 2px 12px rgba(255,45,143,0.07) !important;
  }

  /* ── INCLUDE / WHAT'S INCLUDED GRIDS ─────────────────────────── */
  .included-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .included-card {
    background: #fff0f7 !important;
    border: 1.5px solid #f0d0e8 !important;
    border-radius: 14px !important;
    padding: 14px 12px !important;
    text-align: center !important;
  }
  .inc-icon { font-size: 1.6rem !important; margin-bottom: 8px !important; }
  .included-card h4 { font-size: 0.82rem !important; font-weight: 800 !important; }
  .included-card p { font-size: 0.75rem !important; color: #888 !important; display: block !important; }

  /* ── FEATURES / FC GRIDS ──────────────────────────────────────── */
  .fc-g, .features-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .feature-card, .fc-card {
    background: #fff !important;
    border: 2px solid #f0e0ea !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    text-align: center !important;
  }

  /* ── GALLERY / BA GRID ────────────────────────────────────────── */
  .gallery-section { padding: 24px 0 !important; }
  .ba-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 0 16px 10px !important;
    scrollbar-width: none !important;
  }
  .ba-grid::-webkit-scrollbar { display: none !important; }
  .ba-card {
    flex: 0 0 82vw !important;
    max-width: 300px !important;
    scroll-snap-align: start !important;
    border-radius: 14px !important;
  }

  /* ── QUOTE SECTION (desktop form sections) ────────────────────── */
  #quote-section-services,
  #quote-section-about,
  #quote-section-faq,
  #quote-section-pricing,
  #quote-section-reviews,
  #quote-section-index { display: none !important; }

  /* ── HUB/SEO CONTENT SECTIONS ────────────────────────────────── */
  #hub-final-content,
  #hub-spec-content { padding: 20px 16px !important; }
  #hub-final-content [style*="grid"],
  #hub-spec-content [style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #hub-final-content [style*="minmax(175px"],
  #hub-spec-content [style*="minmax(175px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── COMPARE TABLE ────────────────────────────────────────────── */
  .compare-wrap { overflow-x: auto !important; margin: 0 -16px !important; padding: 0 16px !important; }
  .compare-table { min-width: 420px !important; font-size: 0.78rem !important; }

  /* ── MOBILE-SPECIFIC FORM SECTION (injected by mobile-enhance.js) */
  #mob-step-quote {
    background: linear-gradient(155deg,#1a0814 0%,#30082a 45%,#1a0010 100%) !important;
    padding: 24px 16px 28px !important;
  }
  #mob-step-quote h2 {
    font-size: 1.2rem !important;
    color: #fff !important;
    text-align: center !important;
    font-weight: 900 !important;
  }

  /* ── BREADCRUMB ───────────────────────────────────────────────── */
  .breadcrumb { padding: 8px 0 !important; background: #fff8fc !important; }
  .breadcrumb-inner { font-size: 0.72rem !important; gap: 4px !important; flex-wrap: wrap !important; }

  /* ── PREVENT HORIZONTAL OVERFLOW ─────────────────────────────── */
  pre, code { overflow-x: auto !important; white-space: pre-wrap !important; }
  table { display: block !important; overflow-x: auto !important; }

  /* ── TOPBAR (hide on mobile) ──────────────────────────────────── */
  .topbar { display: none !important; }

}

/* ── 480px tweaks ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .included-grid { grid-template-columns: 1fr 1fr !important; }
  .fc-g, .features-grid { grid-template-columns: 1fr !important; }
  .addon-grid, .addons-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }
  .mob-cities-grid { grid-template-columns: 1fr 1fr !important; }
  .blog-content { padding: 0 14px !important; }
  .ba-card { flex: 0 0 88vw !important; }
}

/* ── TOUCH SENSITIVITY — Prevent ghost taps on scroll ───────────── */
@media (max-width: 768px) {

  /* Remove tap highlight flash */
  .mob-bar-call,
  .mob-bar-wa,
  .mob-bar-quote,
  .mob-bar a,
  .mob-bar button,
  .hero-btn,
  .page-hero-btns .btn,
  .page-hero-btns a,
  .page-hero-btns button,
  .aqc-btn-main,
  .aqc-btn-call,
  .aqc-btn-wa {
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: transparent !important;
    touch-action: manipulation !important; /* removes 300ms click delay */
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Smooth opacity transition for press feedback */
  .mob-bar-call,
  .mob-bar-wa,
  .mob-bar-quote,
  .hero-btn,
  .page-hero-btns .btn {
    transition: opacity 0.15s ease, transform 0.15s ease !important;
  }
  .mob-bar-call:active,
  .mob-bar-wa:active,
  .mob-bar-quote:active,
  .hero-btn:active,
  .page-hero-btns .btn:active {
    opacity: 0.82 !important;
    transform: scale(0.97) !important;
  }
}

/* ── TOUCH GUARD: prevent accidental taps during scroll ─────────── */
@media (max-width: 768px) {

  /* touch-action: manipulation = no double-tap zoom delay, no pan interference */
  .mob-bar-call,
  .mob-bar-wa,
  .mob-bar-quote,
  .mob-bar a,
  .mob-bar button,
  .hero-btn,
  .hero-btn-book,
  .hero-btn-call,
  .page-hero-btns .btn,
  .page-hero-btns a,
  .ba-cta,
  .aqc-btn-main,
  .aqc-btn-call,
  .aqc-btn-wa,
  .mob-bar-quote,
  .area-svc-btn,
  #mob-step-quote button,
  .msq-svc-btn,
  .mob-d-submit,
  .avail-cta {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: pointer !important;
  }

  /* Tap feedback — brief scale, not triggered during scroll */
  .mob-bar-call:active { transform: scale(0.95) !important; }
  .mob-bar-wa:active   { transform: scale(0.95) !important; }
  .mob-bar-quote:active { transform: scale(0.96) !important; }
  .hero-btn:active { transform: scale(0.97) !important; }

  /* Prevent text selection on tap */
  .mob-bar, #mobBar, .hero-btns, .page-hero-btns {
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}