/* ==================================================
   shop.css — shop.html 専用のページCSS
   - グローバル(style.css)には手を入れず、ここだけで完結
   - 背景：固定センター（ブレードランナー背景／通常背景の2種）
   - PC：商品グリッド4列、タイルと被らないよう全面指定で上書き
   - ボタン類：このページ内だけの .shop 作用域に限定
================================================== */

/* 作用域クラス */
body.shop{ color:#fff; }

/* 背景（固定・中央）— shorthandで一括指定し、style.cssのbody背景を確実に上書き */
body.shop.shop-bg{
  background: #111 url('../img/shop-bg.png') center center / cover fixed no-repeat !important;
}
body.shop.shop-bg.br{
  background: #111 url('../img/shop-bg-bladerunner.png') center center / cover fixed no-repeat !important;
  filter: saturate(120%);
}

/* ページレイアウト */
.shop .page-wrap{ padding: 56px 16px 80px; max-width: 1100px; margin: 0 auto; }
.shop .shop-hero{ margin: 12px 0 24px; display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.shop .shop-hero h1{ font: 600 36px/1 'Shippori Mincho B1', serif; margin:0; }

.shop .badge{
  display:inline-block; padding:6px 10px; border-radius:10px;
  border:1px solid #fff3; background:#0007; font:600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.shop .notice{
  margin:16px 0 28px; padding:12px; border:1px dashed #fff3; border-radius:10px;
  background:#0007; backdrop-filter: blur(4px);
}
.shop .progress{ height:6px; border-radius:999px; background:#fff1; overflow:hidden; margin-top:10px; }
.shop .progress > i{ display:block; height:100%; width:30%; background:linear-gradient(90deg,#ffb84d,#ff5e5e,#ff66ff); }

/* 商品グリッド */
.shop .product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top:22px; }
@media (min-width: 740px){ .shop .product-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); } }
@media (min-width: 1024px){ .shop .product-grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)); } } /* PCは4列 */

.shop .card{ border:1px solid #fff1; border-radius:14px; background:#0008; overflow:hidden; }
.shop .thumb{ aspect-ratio: 4 / 3; background: linear-gradient(90deg,#242424 0%,#2a2a2a 50%,#242424 100%); animation: shopShimmer 1.6s linear infinite; }
.shop .meta{ padding:10px 12px; }
.shop .meta h3{ font-size:16px; margin:0 0 6px; }
.shop .meta p{ margin:0; opacity:.8; font-size:13px; }
@keyframes shopShimmer{ from{ background-position:-200px 0 } to{ background-position:200px 0 } }

/* ボタン（このページだけの .shop 作用域に限定し、他の a スタイルと競合させない） */
.shop .btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:8px; border:1px solid #fff2; background:#000a; color:#fff; text-decoration:none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  font-size:14px; line-height:1;
  transition: transform .18s, filter .18s, box-shadow .18s;
}
.shop .btn:hover{ transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 20px rgba(0,0,0,.45); }

/* 左下のテキスト版TOPボタン（モバイル優先） */
.shop .to-home{
  position: fixed;
  left: 1rem; bottom: 3rem; z-index: 1000;
  display: inline-flex; align-items:center; justify-content:center;
  width: 56px; height: 42px; border: 1px solid #fff2; border-radius: 10px;
  background: #0007; backdrop-filter: blur(2px); color: #fff; text-decoration: none;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 4px 10px #0005; transition: transform .25s, opacity .25s; opacity: .95;
}
.shop .to-home:hover{ transform: translateY(-2px); }
@media (min-width: 740px){ .shop .to-home{ display:none; } } /* PCでは非表示 */

/* 左上のネオンTOPバッジ画像 */
.shop .top-logo-btn{ position: fixed; top: 14px; left: 14px; z-index: 2000; display:inline-block; border-radius:14px; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .18s ease, filter .18s ease; }
.shop .top-logo-btn:hover{ transform: translateY(-1px) scale(1.03); filter: brightness(1.05); }
.shop 

/* （保険）ヘッダー類が残っても非表示にする */
.shop .hero-header, .shop .header-bar, .shop .nav-drawer, .shop .hamburger{ display:none !important; }


/* === TOP badge v2: animated glow + sheen === */
.shop .top-logo-btn{ top:18px; left:18px; z-index:2000; position:fixed; display:inline-block; }
.shop 
.shop .top-logo-btn::before{
  content:""; position:absolute; inset: -4px; border-radius:18px;
  background: radial-gradient(120px 24px at 20% 20%, rgba(255,60,160,.35), transparent 70%),
              radial-gradient(120px 24px at 80% 80%, rgba(60,220,255,.35), transparent 70%);
  filter: blur(9px); opacity: .75; z-index:-1; transition: opacity .25s ease;
}
.shop .top-logo-btn::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 52%);
  mix-blend-mode: screen; opacity:0; transform: translateX(-60%);
  transition: opacity .3s ease;
}
.shop .top-logo-btn:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(1.05) saturate(105%); }
.shop .top-logo-btn:hover::after{ opacity:1; animation: sheenSlide 1.2s ease; }

@keyframes sheenSlide{
  0%{ transform: translateX(-60%) }
  100%{ transform: translateX(120%) }
}

/* サブリンク（控えめ） */
.shop .link-quiet{ display:inline-block; padding:8px 2px; color:#fff; opacity:.85; text-decoration:none; }
.shop .link-quiet:hover{ opacity:1; text-decoration:underline; }

/* responsive sizes for TOP badge */
@media (max-width: 1024px){ .shop  }
@media (max-width: 640px){
  .shop .top-logo-btn{ top: 10px; left: 10px; }
  .shop 
}

/* === TOP badge size — final authoritative rules === */
.shop .top-logo-btn{ top:12px; left:12px; z-index:2000; position:fixed; display:inline-block; }
.shop .top-logo-btn img{ width:140px !important; height:auto !important; display:block; }
@media (max-width:1024px){ .shop .top-logo-btn img{ width:130px !important; } }
@media (max-width:640px){
  .shop .top-logo-btn{ top:8px; left:8px; }
  .shop .top-logo-btn img{ width:112px !important; }
}