/* Shipora site: page shell + phone/tablet layout */
html, body { margin: 0; background: #F5F2EC; }
body { overflow-x: hidden; }
#app { width: 1440px; }
.page-root { margin: 0; min-height: 100vh; }

@media (max-width: 999px) {
  #app, .page-root { width: 100% !important; }
  .page-root header { width: 100% !important; height: auto !important; padding: 14px 18px !important; flex-wrap: wrap; gap: 12px; box-sizing: border-box; }
  .page-root header nav { order: 3; width: 100%; overflow-x: auto; gap: 20px !important; white-space: nowrap; padding-bottom: 4px; }
  .page-root header img { height: 36px !important; }
  .page-root footer { width: 100% !important; height: auto !important; padding: 40px 20px !important; gap: 28px; box-sizing: border-box; }

  .page-root section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  .page-root section#top { padding-top: 36px !important; }
  .page-root section[style*="padding: 0 80px"] { padding: 0 20px 56px !important; }

  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="grid-template-columns"] { grid-template-columns: 1fr !important; row-gap: 20px; }
  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="justify-content: space-between"] { flex-wrap: wrap; gap: 16px; }
  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="display: flex; gap: 48px"] { flex-wrap: wrap; gap: 24px !important; }
  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="gap: 72px"],
  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="gap: 64px"],
  .page-root :not(.pv, .pv *, .fit, .fit *)[style*="gap: 56px"] { gap: 28px !important; }
  .page-root [style*="max-width"] { max-width: 100% !important; }
  .page-root [style*="min-height: 470px"] { min-height: 0 !important; }
  .page-root [style*="margin: 0 -80px"] { margin: 0 -20px !important; }
  .page-root [style*="padding: 60px 72px"], .page-root [style*="padding: 64px 72px"] { padding: 32px 24px !important; flex-direction: column; align-items: flex-start !important; }
  .page-root [style*="padding: 48px"] { padding: 24px !important; }
  .page-root [style*="padding: 36px"] { padding: 22px !important; }

  .page-root h1 { font-size: 38px !important; }
  .page-root h2 { font-size: 30px !important; }
  .page-root h3 { font-size: 22px !important; }
  .page-root input, .page-root select, .page-root textarea { font-size: 16px !important; }

  .sp-bar { width: 100vw !important; }
  @keyframes spDriveM { from { transform: translateX(0) } to { transform: translateX(calc(100vw - 56px)) } }
  .sp-van { animation-name: spDriveM !important; }
}

/* Floating WhatsApp button */
#wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px; background: #1FA855; color: #FFFFFF; text-decoration: none;
  font: 600 15px/1 'IBM Plex Sans', system-ui, sans-serif; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease; animation: waIn .6s .8s cubic-bezier(.2,.7,.2,1) both; }
#wa-float:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(0,0,0,.5); color: #FFFFFF; }
@keyframes waIn { from { opacity: 0; transform: translateY(20px) scale(.9) } to { opacity: 1; transform: none } }
@media (max-width: 999px) { #wa-float span { display: none; } #wa-float { padding: 14px; right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { #wa-float { animation: none; } }