/* ============================================================================
   Japan Bike Market — store.css
   Lukas-inspired ecommerce homepage sections
   ============================================================================ */

/* Centered section heads */
.sec-center{ text-align:center; margin-bottom:2.8rem; }
.sec-center__lede{
  margin:1rem auto 0; max-width:52ch;
  color:var(--muted); font-size:.95rem; line-height:1.7;
}
.title-store{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.section--store{ padding-block:clamp(3rem, 6vw, 5rem); }

/* Promo tiles under hero */
.promo-overlap{
  position:relative;
  z-index:5;
  margin-top:-4.5rem;
  margin-bottom:1rem;
}
.promo-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.promo-tile{
  position:relative;
  display:block;
  min-height:200px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.45);
}
.promo-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.promo-tile:hover img{ transform:scale(1.06); }
.promo-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 20%, rgba(0,0,0,.72) 100%);
}
.promo-tile__body{
  position:relative; z-index:2;
  height:100%; min-height:200px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4rem 1.5rem;
  color:#fff;
}
.promo-tile__jp{ font-size:.78rem; opacity:.8; margin-bottom:.25rem; }
.promo-tile__t{
  font-family:var(--font-sans);
  font-size:1.15rem; font-weight:800;
  letter-spacing:.02em; margin-bottom:.8rem;
}
.promo-tile__cta{
  display:inline-flex; align-self:flex-start;
  font-family:var(--font-sans);
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  padding:.45rem .9rem;
  background:#fff; color:var(--ink);
  transition:background .25s, color .25s;
}
.promo-tile:hover .promo-tile__cta{ background:var(--amber); }

/* Feature icon bar */
.feature-bar{
  padding:2.6rem 0;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.feature-bar__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.feature-bar__item{
  display:flex; gap:1rem; align-items:flex-start;
}
.feature-bar__ic{
  width:54px; height:54px; flex:none;
  border:1px solid var(--line-2);
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--paper);
}
.feature-bar__ic svg{
  width:24px; height:24px;
  stroke:var(--ink); fill:none; stroke-width:1.7;
}
.feature-bar__item h3{
  margin:0 0 .3rem;
  font-size:1rem; font-weight:800;
}
.feature-bar__item p{
  margin:0; color:var(--muted); font-size:.88rem; line-height:1.55;
}

/* Product cards (Lukas best-seller style) */
.pcard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.pcard{
  background:#fff;
  border:1px solid var(--line);
  transition:box-shadow .35s, transform .35s var(--ease);
}
.pcard:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -28px rgba(0,0,0,.28);
}
.pcard__media{
  position:relative;
  aspect-ratio:1/1;
  background:var(--paper);
  overflow:hidden;
}
.pcard__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__badge{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:#111; color:#fff;
  font-family:var(--font-sans);
  font-size:.72rem; font-weight:800;
  padding:.28rem .55rem;
}
.pcard__body{
  padding:1.15rem 1.2rem 1.4rem;
  text-align:center;
}
.pcard__stars{
  color:var(--amber);
  font-size:.85rem;
  letter-spacing:.12em;
  margin-bottom:.45rem;
}
.pcard__name{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  line-height:1.35;
}
.pcard__name small{
  display:block;
  margin-top:.2rem;
  font-family:var(--font-sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted);
}
.pcard__meta{
  margin:.55rem 0 .7rem;
  font-size:.78rem;
  color:var(--muted);
}
.pcard__price{
  font-family:var(--font-sans);
  font-size:.9rem;
  color:var(--ink-3);
}
.pcard__price strong{
  color:var(--ink);
  font-weight:800;
  font-size:1.05rem;
}
.pcard__link{
  display:inline-block;
  margin-top:.85rem;
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--orange-deep);
  border-bottom:1px solid transparent;
}
.pcard__link:hover{ border-color:var(--orange-deep); }

/* CTA band */
.cta-band{
  padding:clamp(3.2rem, 7vw, 5rem) 0;
  background:var(--paper);
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-band__in h2{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.25;
  text-transform:uppercase;
}
.cta-band__in p{
  margin:1rem auto 1.6rem;
  max-width:46ch;
  color:var(--muted);
}
.cta-band .btn{ margin-top:.2rem; }

/* Dual banners */
.dual-banners{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}
.dual-banner{
  display:grid;
  grid-template-columns:42% 1fr;
  min-height:220px;
  background:#111;
  color:#fff;
  overflow:hidden;
}
.dual-banner__img{
  position:relative;
  overflow:hidden;
}
.dual-banner__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.dual-banner:hover .dual-banner__img img{ transform:scale(1.06); }
.dual-banner__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:1.6rem 1.5rem;
  gap:.55rem;
}
.dual-banner__code{
  font-size:.78rem;
  color:rgba(255,255,255,.7);
}
.dual-banner__code b{ color:var(--amber); }
.dual-banner__copy h3{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight:800;
  line-height:1.2;
}
.dual-banner__tel{
  margin:.4rem 0 0;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
}
.dual-banner .btn{ align-self:flex-start; margin-top:.3rem; }

/* Flash deal */
.flash-deal{
  background:#f3f1ea;
  padding:clamp(2.4rem, 5vw, 4rem) 0;
}
.flash-deal__in{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:2.4rem;
  align-items:center;
}
.flash-deal__media{
  overflow:hidden;
  aspect-ratio:5/4;
  background:#ddd;
}
.flash-deal__media img{
  width:100%; height:100%; object-fit:cover;
}
.flash-deal__copy .eyebrow{
  color:var(--orange-deep);
  letter-spacing:.16em;
}
.flash-deal__copy h2{
  margin:.4rem 0;
  font-family:var(--font-sans);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  letter-spacing:.04em;
}
.flash-deal__lead{
  margin:0 0 .8rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.04em;
}
.flash-deal__copy > p:not(.flash-deal__lead){
  color:var(--muted);
  margin-bottom:1.4rem;
  max-width:40ch;
}
.flash-deal__timer{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.flash-deal__timer div{
  min-width:70px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  padding:.7rem .5rem;
}
.flash-deal__timer b{
  display:block;
  font-family:var(--font-sans);
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
}
.flash-deal__timer span{
  font-size:.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Steps store tweak */
.steps--store .stepc{
  border-radius:0;
  text-align:center;
}
.steps--store .stepc__n{ margin-inline:auto; }

/* Membership newsletter */
.member-band{
  position:relative;
  padding:clamp(3.5rem, 8vw, 6rem) 0;
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.member-band__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.member-band__shade{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
}
.member-band__in{ position:relative; z-index:2; }
.member-band__eyebrow{
  display:block;
  font-family:var(--font-sans);
  font-size:.85rem;
  letter-spacing:.14em;
  margin-bottom:1rem;
}
.member-band__eyebrow em{
  font-style:normal;
  color:var(--amber);
  font-weight:800;
}
.member-band__in h2{
  margin:0;
  font-family:var(--font-sans);
  font-size:clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.2;
  text-transform:uppercase;
}
.member-band__in > p{
  margin:1rem auto 1.6rem;
  max-width:46ch;
  color:rgba(255,255,255,.75);
}
.member-band__form{
  display:flex;
  max-width:520px;
  margin:0 auto;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  padding:.35rem;
  gap:.35rem;
}
.member-band__form input{
  flex:1;
  border:0;
  background:transparent;
  color:#fff;
  padding:.85rem 1rem;
  outline:none;
  min-width:0;
}
.member-band__form input::placeholder{ color:rgba(255,255,255,.5); }
.member-band__msg{
  min-height:1.2em;
  margin-top:.7rem;
  color:var(--amber);
  font-size:.88rem;
}

/* Brand / stats strip */
.brand-strip{
  padding:2.4rem 0;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.brand-strip__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center;
}
.brand-strip__item strong{
  display:block;
  font-family:var(--font-sans);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:800;
  color:var(--ink);
}
.brand-strip__item span{
  font-size:.85rem;
  color:var(--muted);
}

/* News cards */
.news-grid--store{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.ncard{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.ncard:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px -28px rgba(0,0,0,.25);
}
.ncard__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--paper);
}
.ncard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.ncard:hover .ncard__media img{ transform:scale(1.05); }
.ncard__cat{
  position:absolute; left:.8rem; bottom:.8rem;
  background:#fff; color:var(--ink);
  font-size:.7rem; font-weight:700;
  padding:.28rem .65rem;
}
.ncard__body{ padding:1.2rem 1.25rem 1.5rem; }
.ncard__body time{
  font-family:var(--font-sans);
  font-size:.75rem;
  color:var(--muted);
}
.ncard__body h3{
  margin:.4rem 0 .55rem;
  font-size:1.05rem;
  line-height:1.45;
}
.ncard__body p{
  margin:0;
  font-size:.88rem;
  color:var(--muted);
  line-height:1.6;
}

/* Category strip under header */
.cat-nav{
  background:#111;
  color:#fff;
  border-bottom:1px solid #222;
}
.cat-nav__in{
  width:min(100% - 2.4rem, var(--container));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:.2rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.cat-nav__in::-webkit-scrollbar{ display:none; }
.cat-nav a{
  flex:none;
  padding:.85rem 1.1rem;
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  transition:color .25s, background .25s;
}
.cat-nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }

/* Mobile/tablet layout rules live in responsive.css */