/* Hero remains visible with slow or failed images; no GSAP visibility dependency. */
.bellbum-hero{position:relative;min-height:580px;height:90svh;max-height:1000px;overflow:hidden;background:linear-gradient(135deg,#141414,#303030);color:white}
.bellbum-hero-image,.bellbum-hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bellbum-hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.2))}
.bellbum-hero-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:inherit;height:100%;padding:90px 10%;max-width:1150px}
.bellbum-hero-content p{color:#cf0;font-size:14px;letter-spacing:.2em;margin-bottom:24px;font-weight:700}
.bellbum-hero-content h1{font-family:Kanit,sans-serif;font-size:clamp(48px,8vw,120px);font-weight:800;line-height:.95;text-transform:uppercase;margin:0 0 40px}
.bellbum-hero-shop{padding:16px 32px;background:white;color:black;font-weight:800;text-transform:uppercase;letter-spacing:.1em;border-radius:8px}
.bellbum-hero-prev,.bellbum-hero-next{position:absolute;z-index:3;top:50%;background:#0008;border-radius:50%;width:44px;height:44px;font-size:32px;line-height:1;color:white}
.bellbum-hero-prev{left:12px}.bellbum-hero-next{right:12px}.bellbum-hero-dots{position:absolute;z-index:3;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.bellbum-hero-dots button{border:1px solid white;border-radius:50%;width:32px;height:32px;color:white;background:#0005}.bellbum-hero-dots button[aria-current=true]{background:white;color:black}
button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.bellbum-hero{height:80svh;min-height:500px}.bellbum-hero-content{padding:100px 45px 80px}.bellbum-hero-content p{font-size:11px}.bellbum-hero-content h1{font-size:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Match typed text to the site's theme, including password bullets and autofill. */
html .input-field {
 background-color:rgb(var(--background));
 color:rgb(var(--foreground));
 caret-color:currentColor;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, select {
 -webkit-text-fill-color:currentColor;
 caret-color:currentColor;
}
input::placeholder, textarea::placeholder {color:#6b7280!important;opacity:1!important}
html.dark input::placeholder, html.dark textarea::placeholder {color:#9ca3af!important}
html .input-field:-webkit-autofill {
 -webkit-text-fill-color:rgb(var(--foreground));
 -webkit-box-shadow:0 0 0 1000px rgb(var(--background)) inset;
}