/* ═══ Mobile pass for every page (owner, 2026-10-31: "sob gula page er header section, menu + sub menu, hero, image / animation,
   footer mobile optimize korte hobe"). Loaded last on all pages; phone widths only. Measured before at 375px: no sideways scroll
   anywhere, but the menu sheet opened under the header, the offer bar took three lines, hero tops wasted 56–92px, and footer
   links were 18px tall. ═══ */
@media (max-width:719px){

  /* Header: the logo link gets a 44px tap area (the logo itself stays 24px) */
  .hdr .logo{ display:inline-flex; align-items:center; min-height:44px; }

  /* Offer bar: one compact row (the OFFER chip is dropped on phones; the text and Claim button stay) */
  .offer-k{ display:none; }
  .offer-in{ flex-wrap:nowrap !important; gap:10px !important; min-height:44px; padding:6px calc(var(--pad) + 32px) 6px var(--pad) !important; }
  .offer p{ font-size:12.5px !important; line-height:1.35; }
  .offer-go{ flex:none; height:30px; padding:0 10px; font-size:12.5px; }
  .offer-x{ width:32px; height:32px; }

  /* Menu sheet: opens right under the header wherever it is (site.js sets top); comfortable rows and submenu items */
  .sheet{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); overscroll-behavior:contain; }
  .sheet summary, .sheet .s-link{ padding:16px 0; font-size:18px; }
  .sheet details[open]{ padding-bottom:8px; }
  /* Submenu items were unstyled (they ran together as one underlined paragraph): one row each, name + price, grey line under */
  .sheet details .mi{ display:flex; flex-direction:column; gap:3px; padding:12px 0; color:inherit; text-decoration:none; }
  .sheet details .mi + .mi{ border-top:1px solid var(--line); }
  .sheet .mi b{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:16px; font-weight:500; letter-spacing:-0.01em; }
  .sheet .mi b small{ font:400 12.5px var(--mono); color:var(--muted); white-space:nowrap; }
  .sheet .mi span{ font-size:13.5px; line-height:1.4; color:var(--muted); }
  .sheet .s-act .btn{ height:50px; }

  /* Hero tops: about 32–40px between the header and the first line of text on every page */
  .hero.stone{ padding-top:28px !important; }
  .hero.hs{ padding-top:20px !important; } .hs .hs-copy{ padding-top:12px !important; }
  .hs-art{ padding:28px 16px !important; }
  .dh2 .hbx-l{ padding-top:32px !important; } .dh2 .hbx-r{ padding-top:28px !important; }
  .a-hero > div:first-child, .ctc-a2 > div:first-child{ padding-top:32px !important; }
  .pg-in{ padding-top:36px !important; }

  /* Footer: link rows tall enough to tap (about 40px), bigger social buttons */
  .ft-cols ul{ gap:0 !important; } .ft-cols h4{ margin-bottom:6px !important; }
  .ft-cols li a{ display:block; padding:10px 0; }
  .ft-brand li a, .ft-brand ul a{ display:inline-block; padding:8px 0; }
  .ft-soc{ gap:10px; } .ft-soc a{ width:44px; height:44px; }
  .ft-base nav{ gap:4px 20px; } .ft-base nav a{ display:inline-block; padding:10px 0; }
}