/* ============================================================================
   Japan Bike Market — layout.css  (loader, util bar, header, footer)
   ============================================================================ */
.load{ position:fixed; inset:0; z-index:9999; background:var(--white); display:grid; place-content:center; justify-items:center; gap:1.2rem; transition:opacity .5s, visibility .5s; }
.load.is-done{ opacity:0; visibility:hidden; }
.load__logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.6rem; }
.load__dot{ width:14px; height:14px; border-radius:50%; background:var(--grad-orange); }
.load__bar{ width:min(60vw,260px); height:3px; background:var(--paper-2); border-radius:3px; overflow:hidden; }
.load__bar i{ display:block; height:100%; width:0; background:var(--grad-orange); }

/* Util bar */
.util{ background:#0d0d0d; color:rgba(255,255,255,.78); font-size:.78rem; }
.util__in{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; height:36px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.util__r{ display:flex; align-items:center; gap:.55rem; }
.util__sep{ opacity:.35; }
.util__in a{ color:rgba(255,255,255,.78); }
.util__in a:hover{ color:var(--amber); }

/* Header — Lukas store pattern */
.hdr{ position:sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .3s; }
.hdr.is-scrolled{ box-shadow:0 6px 20px -14px rgba(0,0,0,.18); }
.hdr__in{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; height:78px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.6rem; }
.hdr__logo{ display:flex; align-items:center; gap:.65rem; }
.hdr__logo-mark{ width:12px; height:12px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(255,183,5,.2); position:relative; }
.hdr__logo-mark::after{ display:none; }
.hdr__logo-txt{ font-weight:800; font-size:1.35rem; line-height:1; letter-spacing:.02em; }
.hdr__logo-txt small{ display:block; font-family:var(--font-sans); font-weight:600; font-size:.52rem; letter-spacing:.2em; color:var(--muted); margin-top:.3rem; }
.hdr__nav{ display:flex; justify-content:center; gap:1.8rem; flex-wrap:wrap; }
.hdr__link{ font-family:var(--font-sans); font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); position:relative; padding:.35rem 0; transition:color .3s; }
.hdr__link::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--amber); transition:width .3s var(--ease); }
.hdr__link:hover,.hdr__link.is-active{ color:var(--ink); }
.hdr__link:hover::after,.hdr__link.is-active::after{ width:100%; }
.hdr__actions{ display:flex; align-items:center; gap:.55rem; justify-self:end; }
.hdr__actions .btn{ text-transform:none; letter-spacing:.04em; }
.hdr__burger{ display:none; width:44px; height:42px; flex-direction:column; gap:5px; justify-content:center; align-items:center; border:1px solid var(--line-2); }
.hdr__burger span{ width:20px; height:2px; background:var(--ink); transition:.3s; }
.hdr.is-open .hdr__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hdr.is-open .hdr__burger span:nth-child(2){ opacity:0; }
.hdr.is-open .hdr__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Footer — dark store footer */
.ftr{ background:#151515; color:rgba(255,255,255,.72); border-top:0; }
.ftr__cta{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; }
.ftr__cta-in{ background:#1e1e1e; color:#fff; border-radius:0; padding:clamp(2rem,5vw,3.2rem); margin-top:0; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; border:1px solid #2a2a2a; }
.ftr__cta-in h2{ font-size:clamp(1.5rem,3.4vw,2.3rem); font-family:var(--font-sans); letter-spacing:.03em; }
.ftr__cta-in .or{ color:var(--amber); }
.ftr__cta-in p{ color:rgba(255,255,255,.55); margin-top:.4rem; }
.ftr__grid{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; padding:var(--sp-6) 0 2.4rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.4rem); }
.ftr__logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.3rem; color:#fff; }
.ftr__mark{ width:10px; height:10px; border-radius:50%; background:var(--amber); }
.ftr__brand p{ color:rgba(255,255,255,.55); max-width:34ch; margin:1rem 0; }
.ftr__social{ display:flex; gap:.5rem; }
.ftr__social a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid #333; background:transparent; color:#fff; font-family:var(--font-sans); font-size:.68rem; font-weight:700; transition:.3s; }
.ftr__social a:hover{ background:var(--amber); color:#111; border-color:var(--amber); }
.ftr__col h4{ font-size:.9rem; margin-bottom:1rem; color:#fff; letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-sans); }
.ftr__col a{ display:block; color:rgba(255,255,255,.55); padding:.3rem 0; transition:color .3s; }
.ftr__col a:hover{ color:var(--amber); }
.ftr__col p{ color:rgba(255,255,255,.45); font-size:.88rem; margin-top:.5rem; }
.ftr__form{ display:flex; gap:.5rem; margin-top:.5rem; }
.ftr__form input{ flex:1; background:#0f0f0f; border:1px solid #333; border-radius:0; padding:.7rem .9rem; color:#fff; }
.ftr__form button{ padding:0 1.1rem; border-radius:0; background:var(--amber); color:#111; font-weight:800; font-family:var(--font-sans); }
.ftr__note{ color:var(--amber); font-size:.82rem; min-height:1.2em; margin-top:.4rem; }
.ftr__bottom{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; padding:1.4rem 0; border-top:1px solid #2a2a2a; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:rgba(255,255,255,.4); font-size:.82rem; }