:root { --nav-h:64px; }
    * { box-sizing:border-box; }
    body { font-family:'Plus Jakarta Sans',sans-serif; }
    .hide-scrollbar { scrollbar-width:none; }
    .hide-scrollbar::-webkit-scrollbar { display:none; }
    .hero-track { transition:transform .45s cubic-bezier(.4,0,.2,1); }
    .drawer { transition:transform .3s cubic-bezier(.4,0,.2,1); }
    .drawer-left { transform:translateX(-105%); }
    .drawer-right { transform:translateX(105%); }
    .drawer.open { transform:translateX(0); }
    .overlay { opacity:0; pointer-events:none; transition:opacity .25s ease; }
    .overlay.open { opacity:1; pointer-events:auto; }
    .product-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .article-copy { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .search-reveal { animation:search-reveal .2s ease-out; transform-origin:top; }
    @keyframes search-reveal { from { opacity:0; transform:translateY(-6px) scaleY(.96); } to { opacity:1; transform:translateY(0) scaleY(1); } }
    .toast { transform:translate(-50%, 18px); opacity:0; transition:.25s ease; }
    .toast.show { transform:translate(-50%, 0); opacity:1; }
    @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.os-favorite[aria-pressed="true"] { color: #ef4444; }
.os-favorite[aria-pressed="true"] svg { fill: currentColor; }

#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 100; width: max-content; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 16px; background: #0f172a; color: #fff;
  font-size: 13px; line-height: 1.6; text-align: center; overflow-wrap: anywhere;
  box-shadow: 0 8px 24px #0f172a26; pointer-events: none;
}

.os-cart-flight {
  position: fixed; z-index: 110; object-fit: cover; border-radius: 14px;
  background: white; border: 2px solid #fff; box-shadow: 0 8px 24px #0f172a33;
  pointer-events: none; transform-origin: center; will-change: transform, opacity;
}

/* Customer authentication uses shared account templates; navigation belongs to the theme. */
@media (max-width: 1023px) {
  body:has(#account-login, #account-register, #account-register-otp) nav[aria-label="Navigasi utama"] {
    display: none;
  }
  body:has(#account-login, #account-register, #account-register-otp) #app {
    padding-bottom: env(safe-area-inset-bottom);
  }
}