/* ============================================================
   PHONE-ONLY compaction — loaded LAST on every page so it wins.
   Single source for mobile polish.
   ============================================================ */

/* Header menu button: swap hamburger ↔ cross when the menu is open.
   (The button only appears on small screens, so this is safe at any width.) */
#navToggle .ico-close{ display:none; }
.nav:has(.mobile-menu.open) #navToggle .ico-open{ display:none; }
.nav:has(.mobile-menu.open) #navToggle .ico-close{ display:block; }

@media (max-width:880px){
  /* small-screen header = only logo + menu button; the standalone order
     button is dropped (it already lives inside the dropdown menu). */
  header.nav .nav-inner a.btn-primary{ display:none !important; }
}

@media (max-width:880px){

  /* smaller floating WhatsApp button on phone */
  .wa-float{ width:46px !important; height:46px !important; right:20px !important; bottom:40px !important; }
  .wa-float svg{ width:25px !important; height:25px !important; }

  /* ---- section vertical rhythm: tighter, but consistent everywhere ---- */
  #usp,
  .craft-outer #craft,
  .reviews-outer #reviews,
  .process-outer section{ padding-top:34px !important; padding-bottom:34px !important; }

  /* section headings centered on phone */
  .section-head{ margin-bottom:20px !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
  .section-head .eyebrow{ justify-content:center !important; }
  .section-head h2{ font-size:23px !important; margin-top:10px !important; line-height:1.25 !important; }
  .section-head p{ font-size:13.5px !important; margin-top:9px !important; margin-left:auto !important; margin-right:auto !important; }
  /* door & design showcase heads (title + count + button) centered — design title like the door one */
  .doors-showcase-head{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:12px !important; }

  /* ---- "কেন আমাদের বেছে নেবেন" cards: 1 per row (like the craft section), a bit bigger ---- */
  .usp-grid{ grid-template-columns:1fr !important; gap:12px !important; }
  .usp-card{ padding:18px 16px !important; border-radius:14px !important; }
  .usp-head{ gap:12px !important; margin-bottom:8px !important; }
  .usp-icon{ width:42px !important; height:42px !important; border-radius:11px !important; }
  .usp-icon svg{ width:22px !important; height:22px !important; }
  .usp-card h4{ font-size:17px !important; margin-bottom:0 !important; line-height:1.3 !important; }
  .usp-card p{ font-size:13.5px !important; line-height:1.6 !important; }

  /* ---- "সেবাসমূহ" cards: compact ---- */
  .craft-grid{ gap:12px !important; }
  .craft-card{ padding:18px 16px !important; }
  .craft-card .step-head{ gap:11px !important; margin-bottom:8px !important; }
  .craft-icon-wrap{ width:40px !important; height:40px !important; }
  .craft-card h3{ font-size:17px !important; }
  .craft-card p{ font-size:13px !important; line-height:1.55 !important; }

  /* ---- "মাত্র ৩ ধাপে আপনার দরজা" steps: compact like the craft cards
          (same design/effect — gradient badge etc. — just smaller) ---- */
  .process{ gap:12px !important; }
  .process-step{ padding:16px 15px !important; border-radius:14px !important; }
  .process-step .step-head{ flex-direction:row !important; align-items:center !important; gap:11px !important; margin-bottom:8px !important; }
  .process-step .idx-badge{ width:40px !important; height:40px !important; border-radius:11px !important; }
  .process-step .idx-badge span{ font-size:16px !important; }
  .process-step h3{ font-size:17px !important; }
  .process-step p{ font-size:13px !important; line-height:1.55 !important; }

  /* ---- FOOTER: compact + centered on phone (applies on every page) ---- */
  .footer-top{ padding-bottom:22px !important; gap:22px !important; }
  /* top part — brand name + description — centered */
  .footer-brand{ text-align:center !important; }
  .footer-brand .logo{ justify-content:center !important; }
  .footer-brand .logo .lt-main{ font-size:23px !important; }
  .footer-brand .logo .mark-wrap{ width:38px !important; height:38px !important; }
  .footer-brand .logo .mark-wrap svg{ width:21px !important; height:21px !important; }
  .footer-brand p{ margin-left:auto !important; margin-right:auto !important; font-size:12.5px !important; line-height:1.6 !important; margin-bottom:13px !important; }
  .footer-social{ justify-content:center !important; }
  /* .footer-badge is inline-flex → parent text-align:center centers it */
  /* link columns: কোম্পানি full-width centered; সহায়তা + নীতিমালা side-by-side (left) */
  .footer-cols{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px 18px !important; text-align:center !important; }
  .footer-col:first-child{ grid-column:1 / -1 !important; }
  .footer-col{ text-align:center !important; }
  .footer-col h5{ margin-bottom:10px !important; }
  .footer-col li{ margin-bottom:8px !important; }
  .footer-col a{ font-size:12.8px !important; }
  /* copyright centered on phone */
  .footer-bottom{ padding:16px 0 !important; flex-direction:column !important; justify-content:center !important; text-align:center !important; gap:5px !important; }
  .footer-bottom p{ font-size:11.5px !important; text-align:center !important; }

  /* inner-page top hero: its own padding shorthand zeroes the .wrap side
     padding, so the top section hugged the edges. Restore the SAME side gap
     as the body below → consistent left/right gap top-to-bottom. */
  .wrap.page-hero{ padding-left:24px !important; padding-right:24px !important; }

  /* ---- category (/door-category) page: center the name + description that
          sit above the filter (this block isn't a .section-head) ---- */
  .cat-hero{ text-align:center !important; }
  .cat-hero .eyebrow{ justify-content:center !important; }
  .cat-hero p{ margin-left:auto !important; margin-right:auto !important; }
  .back-link{ justify-content:center !important; }
  .grid-head{ justify-content:center !important; }

  /* ---- design category (/design-category) page hero: less top gap +
          centered title, matching the door category page ---- */
  .df-hero{ padding-top:28px !important; padding-bottom:14px !important; }
  .df-hero-inner, .df-hero-inner h1, .df-hero h1, .df-hero-inner .lede, .df-hero p.lede, .df-hero-inner > p{ text-align:center !important; }
  .df-hero-inner{ margin-left:auto !important; margin-right:auto !important; }
  .df-hero .eyebrow{ justify-content:center !important; }
  .df-hero p.lede, .df-hero-inner > p{ margin-left:auto !important; margin-right:auto !important; }
  .df-note, .df-note p{ text-align:left !important; }

  /* ---- filter chips (both category & design pages): one clean scroll row ---- */
  .chip-row, .df-filter-row{
    flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important; justify-content:flex-start !important;
    padding-bottom:8px !important; margin-left:-2px !important; margin-right:-2px !important;
  }
  .chip-row::-webkit-scrollbar, .df-filter-row::-webkit-scrollbar{ display:none !important; }
  .chip-row > *, .df-filter-row > *{ flex:0 0 auto !important; }
}
@media (max-width:480px){
  .wrap.page-hero{ padding-left:18px !important; padding-right:18px !important; }
}