/* ===== GALO — APP-STYLE MOBILE (<=900px). Desktop untouched. ===== */
@media (max-width:900px){

  /* ---------- compact hero ---------- */
  .hero{min-height:auto!important}
  .hero .in,.hero > div{padding-top:14px!important;padding-bottom:16px!important}
  .hero h1{font-size:30px!important;line-height:1.06!important;letter-spacing:-.02em}
  .hero .lead,.hero > div > p{font-size:12.5px!important;line-height:1.5!important;margin-top:8px!important}

  /* ---------- search pill ---------- */
  .ga-search{
    display:flex;align-items:center;gap:10px;
    margin:12px 14px 4px;padding:13px 16px;border-radius:999px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(44,42,28,.09);
    box-shadow:0 8px 22px -16px rgba(24,22,16,.8);
    text-decoration:none;color:#9A8F7C;font-size:13px;
    -webkit-tap-highlight-color:transparent;
  }
  .ga-search svg{flex:0 0 auto;opacity:.55}
  .ga-search span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ga-search em{
    flex:0 0 auto;width:30px;height:30px;margin:-6px -8px -6px 0;border-radius:50%;
    background:linear-gradient(135deg,#F4E6BC,#E3C778);
    display:flex;align-items:center;justify-content:center;
  }

  /* ---------- category chips rail (was .c6 grid) ---------- */
  .c6{
    display:flex!important;gap:15px!important;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding:6px 16px 12px!important;margin:0 -16px!important;
    grid-template-columns:none!important;
  }
  .c6::-webkit-scrollbar{display:none}
  .c6 .cv{
    flex:0 0 auto!important;width:74px!important;min-width:74px;
    display:flex!important;flex-direction:column;align-items:center;gap:8px;
    background:none!important;box-shadow:none!important;border:0!important;
    padding:0!important;margin:0!important;transform:none!important;
    scroll-snap-align:start;
  }
  .c6 .cv img{
    width:66px!important;height:66px!important;border-radius:50%!important;
    object-fit:cover;display:block;
    border:2px solid rgba(227,199,120,.5);
    box-shadow:0 8px 18px -10px rgba(24,22,16,.65);
    transition:transform .25s ease,border-color .25s ease;
  }
  .c6 .cv:active img{transform:scale(.94);border-color:#E3C778}
  .c6 .cv > div{text-align:center;padding:0!important}
  .c6 .cv i{display:none!important}
  .c6 .cv b{
    font-size:10.5px!important;font-weight:600!important;line-height:1.25!important;
    color:#4A4234;display:block;letter-spacing:0!important;text-transform:none!important;
  }

  /* ---------- popular rail (was .b4 grid) ---------- */
  .b4{
    display:flex!important;gap:12px!important;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:6px 16px 14px!important;margin:0 -16px!important;
    grid-template-columns:none!important;
  }
  .b4::-webkit-scrollbar{display:none}
  .b4 .bs{
    flex:0 0 62%!important;max-width:226px;min-width:0;
    scroll-snap-align:start;transform:none!important;
    border-radius:16px!important;
  }
  .b4 .bs .ph img{height:128px!important;object-fit:cover}
  .b4 .bs .bd{padding:11px 12px 13px!important}
  .b4 .bs .cat{font-size:8.5px!important;letter-spacing:.14em!important}
  .b4 .bs h3{font-size:12.5px!important;line-height:1.3!important;margin:4px 0 6px!important}
  .b4 .bs .pr{font-size:14px!important}

  /* section header rhythm */
  .sec,.plain{padding-top:24px!important;padding-bottom:24px!important}
  .kk,.sub{font-size:9.5px!important;letter-spacing:.2em!important}
  .h2{font-size:23px!important;line-height:1.14!important}
  .lead{font-size:12.5px!important;line-height:1.55!important}

  /* ---------- collapsible compact footer ---------- */
  footer .fwrap{
    display:block!important;padding:20px 16px 6px!important;gap:0!important;
    grid-template-columns:none!important;
  }
  footer .fwrap > div{border-bottom:1px solid rgba(255,255,255,.09)}
  footer .fwrap > div:first-child{
    border-bottom:1px solid rgba(255,255,255,.09);
    text-align:center;padding-bottom:16px;margin-bottom:2px;
  }
  footer .fwrap > div:first-child .flogo{margin:0 auto 10px;max-width:96px}
  footer .fwrap > div:first-child p{font-size:11px!important;line-height:1.55!important;margin:3px 0!important}
  footer .fwrap > div > h4{
    margin:0!important;padding:14px 26px 14px 2px!important;
    font-size:10.5px!important;letter-spacing:.18em!important;text-transform:uppercase;
    position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  footer .fwrap > div > h4::after{
    content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translateY(-70%) rotate(45deg);
    transition:transform .3s ease;opacity:.6;
  }
  footer .fwrap > div.fo-open > h4::after{transform:translateY(-25%) rotate(225deg);opacity:1}
  footer .fwrap > div > h4 + a,
  footer .fwrap > div > a{
    display:block;max-height:0;overflow:hidden;opacity:0;
    padding:0 2px!important;font-size:12.5px!important;
    transition:max-height .34s ease,opacity .26s ease,padding .34s ease;
  }
  footer .fwrap > div.fo-open > a{max-height:60px;opacity:1;padding:8px 2px!important}
  footer .fbot{
    font-size:10px!important;padding:14px 16px!important;text-align:center;
    line-height:1.5!important;
  }
}


/* ===== v3 — compact every heavy block, app-style ===== */
@media (max-width:900px){
  .p3,.t3{display:flex!important;gap:12px!important;grid-template-columns:none!important;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:4px 16px 12px!important;margin:0 -16px!important}
  .p3::-webkit-scrollbar,.t3::-webkit-scrollbar{display:none}
  .p3 > *,.t3 > *{flex:0 0 76%!important;max-width:282px;min-width:0;
    scroll-snap-align:start;margin:0!important;transform:none!important}
  .p3 > * p,.t3 > * p{font-size:12.5px!important;line-height:1.55!important}
  .p3 > * h3,.t3 > * h3{font-size:14px!important}
  .split{gap:14px!important}
  .split img{max-height:186px!important;object-fit:cover;border-radius:14px}
  .split p{font-size:12.5px!important;line-height:1.55!important}
  .tease{gap:12px!important;padding:16px!important;border-radius:18px!important}
  .tease img{max-height:148px!important;object-fit:cover;border-radius:13px}
  .tease h2,.tease .h2{font-size:20px!important;line-height:1.15!important}
  .tease p{font-size:12.5px!important;line-height:1.5!important}
  .ritcard,.kbanner{padding:16px!important;border-radius:18px!important;gap:12px!important}
  .ritcard img,.kbanner img{max-height:186px!important;object-fit:cover;border-radius:13px}
  .ritcard p,.kbanner p{font-size:12.5px!important;line-height:1.55!important}
  .ritbelow{padding-top:10px!important}
  body > section .lead{display:none!important}
  body > section,body > .plain{padding-top:22px!important;padding-bottom:22px!important}
}