/*
Theme Name: MUI Fencing Single Page
Theme URI: https://www.mui-fencing.com/
Description: 無畏フェンシングクラブ用のワンページテーマ。既存テーマを使わず、トップページ専用デザインをそのまま表示します。
Author: Roger
Version: 1.0
*/

/* =========================
   Tokens / Base
========================= */
:root{
  /* layout */
  --max-w: 1080px;
  --pad-x: 18px;

  /* colors */
  --bg:#f6f7fb;
  --surface:#ffffff;
  --line:#e6e8ef;

  --ink:#0b1220;
  --ink-soft:#334155;
  --muted:#5b6473;

  --accent:#1e3a8a;
  --accent2:#2563eb;
  --accent-soft:#e0e7ff;
  --gold:#f59e0b;

  /* radius / shadow */
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --shadow-soft: 0 12px 34px rgba(15,23,42,.10);
  --shadow-strong: 0 18px 44px rgba(15,23,42,.16);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
main{ padding:18px 0 46px; }
section{ margin-bottom:32px; }

/* =========================
   Header / Nav (unified)
   ※ header.php の inline style を消してOK
========================= */
header.site-header{
  background:#ffffffcc;
  border-bottom:1px solid rgba(229,231,235,.9);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:40;
}
.header-inner{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  min-width:220px;
}
.brand-logo{ height:40px; width:auto; }
.brand-text-main{ font-size:15px; font-weight:700; letter-spacing:.12em; color:var(--ink); }
.brand-text-sub{ font-size:11px; color:var(--muted); }

nav.main-nav{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  flex-wrap:wrap;
}
nav.main-nav a{
  color:var(--muted);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  text-decoration:none;
  transition: color .14s ease, border-color .14s ease;
  white-space:nowrap;
}
nav.main-nav a:hover{
  color:var(--accent);
  border-bottom-color:rgba(30,58,138,.16);
}
nav.main-nav a.is-active{
  color:var(--accent);
  border-bottom-color:rgba(245,158,11,.55);
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#ffffff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle span{
  width:16px;height:2px;border-radius:999px;background:#4b5563;position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:2px;border-radius:999px;background:#4b5563;
}
.nav-toggle span::before{top:-5px;}
.nav-toggle span::after{top:5px;}

.nav-mobile{
  display:none;
  border-top:1px solid #e5e7eb;
  background:#ffffff;
}
.nav-mobile.open{ display:block; }
.nav-mobile-inner{
  padding:10px var(--pad-x) 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
}
.nav-mobile-links a{
  display:block;
  padding:8px 0;
  color:var(--muted);
  text-decoration:none;
}
.nav-mobile-links a:hover{ color:var(--accent); }
.nav-mobile-links a.is-active{ color:var(--accent); font-weight:800; }
.nav-mobile-links hr{
  border:none;
  border-top:1px solid rgba(229,231,235,.9);
  margin:6px 0;
}

@media (max-width:768px){
  nav.main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:13px;
  font-weight:800;
  color:#1f2937;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  border-color:rgba(30,58,138,.22);
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#ffffff;
  box-shadow:0 14px 30px rgba(30,64,175,.30);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline{
  background:#ffffff;
  color:var(--accent);
  border-color:rgba(30,58,138,.22);
}
.btn-outline:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.btn span.sub{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.85);
}
.btn-outline span.sub{ color:rgba(30,58,138,.72); }

/* =========================
   Top Notice Ticker (nav幅に揃える)
   - 外側は透明
   - 背景/枠/角丸は inner に集約
========================= */
.top-ticker{
  position:sticky;
  top:62px; /* header height */
  z-index:35;
  background:transparent;
  border-bottom:none;
  margin-top:10px;
}
.top-ticker-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:8px var(--pad-x);
  display:flex;
  align-items:center;
  gap:12px;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
}
.top-ticker-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.12em;
  font-weight:900;
  border:1px solid rgba(30,58,138,.12);
}
.top-ticker-badge .dot{
  width:7px;height:7px;border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.top-ticker-track{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg,#ffffff,#eff6ff);
  border:1px solid #dbeafe;
}
.top-ticker-marquee{
  display:flex;
  align-items:center;
  width:max-content;
  animation:tk-marquee 20s linear infinite;
}
.top-ticker-item{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  font-size:12px;
  color:var(--ink-soft);
  white-space:nowrap;
  text-decoration:none;
}
.top-ticker-item:hover{
  color:var(--accent);
  text-decoration:underline;
}
@keyframes tk-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.top-ticker-track:hover .top-ticker-marquee{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .top-ticker-marquee{ animation:none; }
}

/* =========================
   Section Headings
========================= */
.section-head{
  margin-top:26px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.section-kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
  font-weight:900;
}
.section-title{
  font-size:20px;
  font-weight:900;
  color:var(--ink);
  margin:0;
}
.section-title span{
  background:linear-gradient(120deg,var(--gold),var(--accent));
  -webkit-background-clip:text;
  color:transparent;
}
.section-desc{
  font-size:13px;
  color:var(--muted);
  max-width:26em;
  line-height:1.7;
  margin:0;
}

/* =========================
   Card helper
========================= */
.card{
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

/* =========================
   HERO
========================= */
.hero{ margin-bottom:34px; }
.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr);
  gap:24px;
  align-items:stretch;
}
.hero-text{
  padding:20px 22px 18px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#ffffff,#f9fafb);
  border:1px solid #e5e7eb;
  box-shadow:var(--shadow-soft);
}
.hero-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.hero-pill{
  padding:3px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:900;
  border:1px solid rgba(30,58,138,.12);
}
.hero-small{
  font-size:11px;
  color:var(--muted);
  font-weight:800;
}
.hero-title{
  font-size:26px;
  line-height:1.4;
  margin:0 0 8px;
  color:var(--ink);
  font-weight:900;
}
.hero-lead{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0 0 14px;
}
.hero-meta{
  font-size:11px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:0 0 14px;
  font-weight:800;
}
.hero-meta span::before{
  content:"●";
  font-size:8px;
  color:#9ca3af;
  margin-right:4px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.hero-note{
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}
.hero-note strong{ color:var(--ink-soft); }

/* right visual */
.hero-visual{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  background:#000;
  min-height:230px;
}
.hero-visual-img{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(15,23,42,.35),rgba(15,23,42,.10)),
    url("https://www.mui-fencing.com/wp-content/uploads/2025/12/d2657e64f5a2d68f5d40c7c1afc5b72e-scaled.jpg") center/cover no-repeat;
}
.hero-visual-overlay{
  position:absolute;
  inset:auto 0 0;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(15,23,42,.85),transparent);
  color:#e5e7eb;
  font-size:12px;
}
.hero-visual-title{ font-size:14px; font-weight:900; margin-bottom:4px; }
.hero-visual-meta{ font-size:11px; color:#d1d5db; }

/* Shoes link */
.hero-shoes-link{ margin-top:14px; }
.hero-shoes-link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--accent);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid rgba(30,58,138,.35);
  transition:all .18s ease;
}
.hero-shoes-link a:hover{
  color:#0f172a;
  border-bottom-color:#0f172a;
}
.hero-shoes-link .arrow{ transition:transform .18s ease; }
.hero-shoes-link a:hover .arrow{ transform:translateX(3px); }

/* =========================
   NOTICE
========================= */
.notice-section{ margin:18px 0 28px; }
.notice-card{
  display:flex;
  gap:14px;
  align-items:stretch;
  padding:14px 16px;
  border-radius:var(--radius-lg);
  border:1px solid #dbeafe;
  background:linear-gradient(135deg,#ffffff,#eff6ff);
  box-shadow:0 14px 32px rgba(15,23,42,.10);
}
.notice-left{ flex:1 1 auto; min-width:0; }
.notice-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.12em;
  font-weight:900;
  margin-bottom:8px;
  border:1px solid rgba(30,58,138,.12);
}
.notice-dot{
  width:7px;height:7px;border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.notice-title{
  font-size:14px;
  font-weight:900;
  color:var(--ink);
  margin:0 0 6px;
}
.notice-text{
  font-size:12px;
  line-height:1.8;
  color:var(--ink-soft);
}
.notice-foot{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
}
.notice-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}
.notice-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:12px;
  font-weight:900;
  color:#1f2937;
  white-space:nowrap;
  text-decoration:none;
  transition:all .16s ease-out;
}
.notice-btn:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  color:var(--accent);
}
.notice-btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 14px 30px rgba(30,64,175,.30);
}
.notice-btn-primary:hover{ color:#fff; filter:brightness(1.05); }

.notice-title-emphasis{
  color:var(--accent);
  position:relative;
  padding-bottom:4px;
}
.notice-title-emphasis::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--accent));
}
@media (max-width:900px){
  .notice-card{ flex-direction:column; }
  .notice-actions{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; }
}

/* =========================
   ABOUT
========================= */
.about-body{
  padding:16px 18px 14px;
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.9;
  background:var(--surface);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.about-points{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:11px;
}
.about-pill{
  padding:4px 9px;
  border-radius:999px;
  background:#f3f4ff;
  border:1px solid rgba(30,58,138,.10);
  color:#1f2a60;
  font-weight:900;
}

/* =========================
   TRAINING
========================= */
.training-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr);
  gap:20px;
  align-items:flex-start;
}
.training-text{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.8;
  background:var(--surface);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  padding:14px 16px 12px;
}
.training-highlight{ color:var(--accent); font-weight:900; }
.training-tags{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:11px;
}
.training-tag{
  padding:3px 8px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  color:#1d4ed8;
  font-weight:900;
}
.class-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.class-card{
  padding:10px 11px 9px;
  border-radius:var(--radius-md);
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  font-size:12px;
  color:var(--ink-soft);
}
.class-label{ font-size:11px; color:var(--muted); margin-bottom:4px; font-weight:900; }
.class-name{ font-size:13px; font-weight:900; margin-bottom:4px; color:var(--ink); }
.class-meta{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:800;
}
.class-meta span+span::before{ content:"／"; margin:0 3px; }
.class-foot{ font-size:11px; color:var(--muted); }

/* =========================
   BOOKING
========================= */
.booking-strip{
  padding:14px 16px;
  border-radius:var(--radius-lg);
  background:#eff6ff;
  border:1px solid #dbeafe;
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  align-items:flex-start;
  font-size:12px;
  color:#1f2937;
}
.booking-item{ flex:1 1 260px; }
.booking-label{
  font-size:12px;
  font-weight:900;
  color:#1d4ed8;
  margin-bottom:6px;
}
.booking-desc{
  font-size:11px;
  color:#4b5563;
  margin-top:6px;
  line-height:1.7;
}

/* =========================
   FEES
========================= */
.fees-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:20px;
  align-items:flex-start;
}
.fees-main{
  padding:14px 16px 10px;
  font-size:13px;
  color:var(--ink-soft);
}
.fees-badge{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  margin-bottom:10px;
  color:var(--ink-soft);
  font-weight:900;
}
.fees-badge span.icon{ font-size:15px; }
.fees-block{ margin-bottom:10px; }
.fees-block-title{ font-weight:900; margin-bottom:4px; color:var(--ink); }
.fees-block ul{ padding-left:1.1em; margin:0; }
.fees-block li{ list-style:disc; margin:2px 0; }

.fees-side{
  padding:14px 16px 10px;
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
}
.fees-side-title{
  font-size:12px;
  font-weight:900;
  margin-bottom:4px;
  color:var(--ink-soft);
}
.fees-list-compact{ margin:8px 0 0; padding-left:16px; }
.fees-list-compact li{ margin-bottom:2px; }

/* =========================
   CALENDAR
========================= */
.calendar-card{ padding:14px 16px 12px; }
.calendar-note{
  font-size:11px;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:800;
}
.calendar-image-wrap{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#ffffff;
}
.calendar-image{ width:100%; height:auto; display:block; }

.calendar-disclaimer{
  margin-top:12px;
  padding:10px 14px;
  display:flex;
  gap:10px;
  align-items:flex-start;

  background:linear-gradient(135deg,#f8fafc,#f1f5f9);
  border:1px solid #e5e7eb;
  border-left:4px solid #c7d2fe;
  border-radius:10px;

  font-size:11.5px;
  color:#4b5563;
}
.calendar-disclaimer-icon{
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  color:#6366f1;
  margin-top:2px;
}
.calendar-disclaimer-title{
  font-size:11.5px;
  font-weight:900;
  color:#1f2937;
  margin-bottom:2px;
}
.calendar-disclaimer-body{ line-height:1.7; }

/* =========================
   ACCESS / MAP
========================= */
.access-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr);
  gap:20px;
  align-items:flex-start;
}
.access-card{
  padding:14px 16px 10px;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.8;
}
.access-title{ font-size:12px; font-weight:900; margin-bottom:4px; color:var(--ink); }

.map-card{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:#f9fafb;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.map-head{
  padding:10px 14px;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid #e5e7eb;
  font-weight:900;
}
.map-container{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
}
.map-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   Responsive
========================= */
@media (max-width:900px){
  .hero-layout{ grid-template-columns:minmax(0,1fr); }
  .training-layout{ grid-template-columns:minmax(0,1fr); }
  .class-grid{ grid-template-columns:minmax(0,1fr); }
  .fees-layout{ grid-template-columns:minmax(0,1fr); }
  .access-layout{ grid-template-columns:minmax(0,1fr); }
  .hero-visual{ min-height:220px; }
}
@media (max-width:520px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .booking-strip{ flex-direction:column; }
}

/* =========================
 SHOES Page — Pro Redesign (scoped)
 Only affects elements under .page-shoes
========================= */
.page-shoes{
background: var(--bg);
padding: 22px 0 60px;
}
.page-shoes .page-container{
max-width: 1160px;
margin: 0 auto;
padding: 0 18px;
}

/* ===== Hero (pro) ===== */
.page-shoes .shoes-hero{
position: relative;
overflow: hidden;
border-radius: 26px;
border: 1px solid var(--line);
background:
  radial-gradient(circle at 18% 22%, rgba(245,158,11,.18), transparent 55%),
  radial-gradient(circle at 85% 28%, rgba(30,58,138,.18), transparent 58%),
  linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
box-shadow: 0 18px 46px rgba(15,23,42,.12);
}
.page-shoes .shoes-hero-inner{
padding: 18px 18px 16px;
}
.page-shoes .crumb{
font-size: 12px;
color: var(--muted);
}
.page-shoes .crumb a{
color: var(--muted);
text-decoration: none;
border-bottom: 1px dashed rgba(91,100,115,.35);
}
.page-shoes .crumb a:hover{
color: var(--ink);
border-bottom-color: rgba(11,18,32,.35);
}

.page-shoes .hero-grid{
margin-top: 12px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
gap: 14px;
align-items: start;
}
@media (max-width: 920px){
.page-shoes .hero-grid{ grid-template-columns: 1fr; }
}

.page-shoes .hero-kicker{
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
font-weight: 900;
}
.page-shoes .hero-title{
margin: 8px 0 0;
font-size: 30px;
line-height: 1.15;
font-weight: 950;
color: var(--ink);
}
.page-shoes .hero-title .grad{
background: linear-gradient(120deg, var(--gold), var(--accent));
-webkit-background-clip: text;
color: transparent;
}
.page-shoes .hero-sub{
margin-top: 10px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.9;
max-width: 70ch;
}
.page-shoes .hero-sub strong{ color: var(--ink); }

.page-shoes .hero-badges{
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-shoes .pill{
display:inline-flex;
align-items:center;
gap:8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(30,58,138,.14);
background: rgba(224,231,255,.55);
color: var(--accent);
font-size: 12px;
font-weight: 900;
}
.page-shoes .pill .dot{
width: 7px; height: 7px; border-radius: 999px;
background: var(--gold);
box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}

.page-shoes .hero-actions{
display: grid;
gap: 10px;
justify-items: stretch;
}
.page-shoes .btn{
display:inline-flex;
align-items:center;
justify-content:center;
height: 42px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(209,213,219,.95);
background:#fff;
color: var(--ink);
text-decoration:none;
font-weight: 950;
font-size: 13px;
box-shadow: 0 10px 22px rgba(15,23,42,.06);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.page-shoes .btn:hover{
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(15,23,42,.11);
border-color: rgba(30,58,138,.22);
}
.page-shoes .btn.primary{
background: linear-gradient(135deg, var(--accent), var(--accent2));
border-color: transparent;
color:#fff;
box-shadow: 0 16px 34px rgba(30,64,175,.30);
}
.page-shoes .btn.primary:hover{ filter: brightness(1.05); }
.page-shoes .btn.muted{
background: rgba(255,255,255,.72);
}
.page-shoes .hero-note{
font-size: 11.5px;
color: var(--muted);
line-height: 1.8;
}

/* ===== Toolbar (filter / jump) ===== */
.page-shoes .toolbar{
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: 12px 12px;
border: 1px solid rgba(229,231,235,.95);
background: rgba(255,255,255,.84);
backdrop-filter: blur(10px);
border-radius: 18px;
box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.page-shoes .tool-left,
.page-shoes .tool-right{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
}
.page-shoes .seg{
display:inline-flex;
border: 1px solid rgba(229,231,235,.95);
background:#fff;
border-radius: 999px;
overflow: hidden;
}
.page-shoes .seg button{
appearance:none;
border:0;
background: transparent;
padding: 8px 12px;
font-size: 12px;
font-weight: 950;
color: var(--muted);
cursor:pointer;
}
.page-shoes .seg button.is-active{
background: rgba(30,58,138,.10);
color: var(--accent);
}
.page-shoes .jump{
display:flex;
align-items:center;
gap:8px;
}
.page-shoes .jump select{
height: 38px;
border-radius: 12px;
border: 1px solid rgba(229,231,235,.95);
padding: 0 10px;
font-size: 12.5px;
font-weight: 800;
background:#fff;
color: var(--ink);
}
.page-shoes .count{
font-size: 12px;
color: var(--muted);
font-weight: 900;
}

/* ===== Grid / Card ===== */
.page-shoes .grid{
margin-top: 14px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 16px;
}
@media (max-width: 960px){
.page-shoes .grid{ grid-template-columns: 1fr; }
}

.page-shoes article.shoe-card{
border:1px solid var(--line);
border-radius: 26px;
background: #fff;
overflow:hidden;
box-shadow: 0 14px 40px rgba(15,23,42,.11);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-shoes article.shoe-card:hover{
transform: translateY(-2px);
border-color: rgba(30,58,138,.22);
box-shadow: 0 20px 52px rgba(15,23,42,.18);
}

.page-shoes .card-top{
position:relative;
height: 300px;
background: #0b1220;
overflow:hidden;
}
@media (max-width: 960px){
.page-shoes .card-top{ height: 260px; }
}
/* Shoes 主图：弱化遮罩 + 去黄 + 减暗角 */
.page-shoes .card-top::after{
content:"" !important;
position:absolute;
inset:0;
pointer-events:none;

/* 去掉暖黄，改成中性冷色；整体更透明 */
background:
  radial-gradient(circle at 22% 12%, rgba(255,255,255,.06), transparent 58%),
  linear-gradient(180deg, rgba(2,6,23,.05), rgba(2,6,23,.18));
}
.page-shoes .card-top img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition: transform .26s ease, filter .26s ease, opacity .18s ease;
}
.page-shoes article.shoe-card:hover .card-top img{
transform: scale(1.03);
filter: saturate(1.06) contrast(1.03);
}

.page-shoes .badge{
position:absolute;
left: 12px;
top: 12px;
z-index: 2;
background: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.55);
border-radius: 999px;
padding: 6px 10px;
font-size: 11px;
font-weight: 950;
letter-spacing: .12em;
color: var(--accent);
backdrop-filter: blur(8px);
}
.page-shoes .status{
position:absolute;
right: 12px;
top: 12px;
z-index: 2;
display:inline-flex;
align-items:center;
gap:8px;
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 950;
border: 1px solid rgba(229,231,235,.95);
background: rgba(255,255,255,.86);
color: var(--ink-soft);
backdrop-filter: blur(8px);
}
.page-shoes .status .mini{
width:8px;height:8px;border-radius:999px;background:#10b981;
box-shadow:0 0 0 3px rgba(16,185,129,.15);
}
.page-shoes .status.pending .mini{
background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18);
}

.page-shoes .card-body{
padding: 14px 14px 16px;
}
.page-shoes .card-head{
display:flex;
gap: 10px;
align-items:flex-start;
justify-content:space-between;
}
.page-shoes .card-name{
font-weight: 950;
font-size: 16px;
color: var(--ink);
line-height: 1.25;
}
.page-shoes .card-price{
display:flex;
flex-direction:column;
align-items:flex-end;
gap: 2px;
white-space:nowrap;
}
.page-shoes .price-main{
font-weight: 950;
font-size: 13px;
color: var(--ink);
}
.page-shoes .price-sub{
font-weight: 900;
font-size: 11px;
color: var(--muted);
}

/* =========================
 ✅ NEW: Card stock summary line
 - 外面只显示：在庫あり / 在庫なし
========================= */
.page-shoes .stock-line{
margin-top: 6px;
display:inline-flex;
align-items:center;
gap:8px;
font-size: 11.5px;
font-weight: 950;
color: var(--muted);
}
.page-shoes .stock-line .dot{
width:8px;height:8px;border-radius:999px;
background:#9ca3af;
box-shadow: 0 0 0 3px rgba(156,163,175,.16);
}
.page-shoes .stock-line.in{ color:#047857; } /* emerald */
.page-shoes .stock-line.in .dot{
background:#10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,.16);
}
.page-shoes .stock-line.out{ color:#b91c1c; } /* red */
.page-shoes .stock-line.out .dot{
background:#ef4444;
box-shadow: 0 0 0 3px rgba(239,68,68,.14);
}

.page-shoes .card-desc{
margin-top: 10px;
color: var(--muted);
font-size: 13px;
line-height: 1.9;
}

/* Highlights */
.page-shoes .highlights{
margin-top: 12px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
}
@media (max-width: 520px){
.page-shoes .highlights{ grid-template-columns: 1fr; }
}
.page-shoes .hl{
border: 1px solid rgba(229,231,235,.95);
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 16px;
padding: 10px 10px;
box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.page-shoes .hl .t{
font-size: 11px;
font-weight: 950;
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
}
.page-shoes .hl .v{
margin-top: 3px;
font-size: 12.5px;
font-weight: 950;
color: var(--ink);
}

/* Specs tags */
.page-shoes .specs{
margin-top: 12px;
display:flex;
flex-wrap:wrap;
gap: 8px;
}
.page-shoes .spec{
font-size: 11.5px;
font-weight: 950;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid #dbeafe;
padding: 6px 10px;
border-radius: 999px;
}

/* Thumbs */
.page-shoes .thumbs{
margin-top: 14px;
display:grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.page-shoes .thumb{
position:relative;
border:1px solid var(--line);
border-radius: 14px;
overflow:hidden;
aspect-ratio: 1/1;
background:#fff;
cursor:pointer;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.page-shoes .thumb img{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.page-shoes .thumb:hover{
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(15,23,42,.14);
}
.page-shoes .thumb.is-active{
border-color: rgba(245,158,11,.95);
box-shadow: 0 10px 18px rgba(245,158,11,.18);
}
.page-shoes .thumb.is-active::after{
content:"";
position:absolute;
inset:0;
border:1px solid rgba(245,158,11,.65);
border-radius: 14px;
pointer-events:none;
}

/* ===== Modal ===== */
.page-shoes .modal{
position:fixed;
inset:0;
background: rgba(2,6,23,.72);
display:none;
align-items:center;
justify-content:center;
padding: 18px;
z-index: 9999;
}
.page-shoes .modal.open{ display:flex; }

.page-shoes .modal-card{
width: min(1040px, 100%);
background:#fff;
border-radius: 22px;
overflow:hidden;
border:1px solid rgba(255,255,255,.28);
box-shadow: 0 30px 90px rgba(0,0,0,.34);
}
.page-shoes .modal-head{
display:flex;
align-items:center;
justify-content:space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(246,247,251,.92), #fff);
}
.page-shoes .modal-title{
font-weight: 950;
color: var(--ink);
font-size: 13.5px;
}
.page-shoes .modal-close{
appearance:none;
border:1px solid var(--line);
background:#fff;
border-radius: 12px;
padding: 7px 10px;
font-weight: 950;
cursor:pointer;
transition: box-shadow .16s ease, border-color .16s ease;
}
.page-shoes .modal-close:hover{
border-color: rgba(30,58,138,.25);
box-shadow: 0 10px 18px rgba(15,23,42,.10);
}

.page-shoes .modal-body{
display:grid;
grid-template-columns: 1.35fr .65fr;
gap:0;
}
@media (max-width: 920px){
.page-shoes .modal-body{ grid-template-columns: 1fr; }
}

.page-shoes .modal-stage{
position:relative;
background:#0b1220;
min-height: 520px;
}
@media (max-width: 920px){
.page-shoes .modal-stage{ min-height: 360px; }
}
.page-shoes .modal-stage img{
width:100%;
height:100%;
object-fit: contain;
display:block;
}
.page-shoes .modal-nav{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-between;
pointer-events:none;
padding: 14px;
}
.page-shoes .nav-btn{
pointer-events:auto;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.10);
color:#fff;
font-weight: 950;
cursor:pointer;
backdrop-filter: blur(8px);
transition: background .14s ease, transform .14s ease;
}
.page-shoes .nav-btn:hover{
background: rgba(255,255,255,.18);
transform: translateY(-1px);
}

.page-shoes .modal-side{
border-left: 1px solid var(--line);
padding: 12px 12px 14px;
background:#fff;
}
@media (max-width: 920px){
.page-shoes .modal-side{ border-left: none; border-top: 1px solid var(--line); }
}
.page-shoes .modal-hint{
font-size: 12px;
color: var(--muted);
line-height: 1.75;
}

/* =========================
 ✅ NEW: Modal sizes (34-45 ⭕/❌)
========================= */
.page-shoes .modal-sizes{
margin-top: 12px;
padding: 10px 10px 10px;
border-radius: 16px;
border: 1px solid rgba(229,231,235,.95);
background: linear-gradient(135deg, #ffffff, #f8fafc);
box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.page-shoes .modal-sizes .sizes-title{
font-size: 12px;
font-weight: 950;
color: var(--ink);
letter-spacing: .02em;
}
.page-shoes .modal-sizes .sizes-grid{
margin-top: 8px;
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
@media (max-width: 920px){
.page-shoes .modal-sizes .sizes-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 520px){
.page-shoes .modal-sizes .sizes-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-shoes .modal-sizes .sz{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding: 8px 8px;
border-radius: 12px;
border: 1px solid rgba(229,231,235,.95);
background:#fff;
font-weight: 950;
box-shadow: 0 8px 14px rgba(15,23,42,.05);
}
.page-shoes .modal-sizes .sz .mk{ font-size: 13px; line-height:1; }
.page-shoes .modal-sizes .sz .num{ font-size: 12px; color: var(--ink); }

.page-shoes .modal-sizes .sz.ok{
border-color: rgba(16,185,129,.25);
background: rgba(16,185,129,.06);
}
.page-shoes .modal-sizes .sz.ok .num{ color:#065f46; }

.page-shoes .modal-sizes .sz.no{
border-color: rgba(239,68,68,.22);
background: rgba(239,68,68,.05);
}
.page-shoes .modal-sizes .sz.no .num{ color:#991b1b; }

.page-shoes .modal-sizes .sizes-note{
margin-top: 8px;
font-size: 11px;
color: var(--muted);
line-height: 1.6;
}

.page-shoes .modal-thumbs{
margin-top: 12px;
display:grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.page-shoes .modal-thumb{
border:1px solid var(--line);
border-radius: 12px;
overflow:hidden;
aspect-ratio: 1/1;
cursor:pointer;
background:#fff;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
position: relative;
}
.page-shoes .modal-thumb img{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.page-shoes .modal-thumb:hover{
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(15,23,42,.12);
}
.page-shoes .modal-thumb.is-active{
border-color: rgba(245,158,11,.9);
box-shadow: 0 10px 18px rgba(245,158,11,.18);
}

/* ✅ video thumb (▶) */
.page-shoes .thumb-video{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-weight: 950;
color:#fff;
background:
  radial-gradient(circle at 30% 25%, rgba(245,158,11,.22), transparent 60%),
  linear-gradient(135deg, rgba(30,58,138,.55), rgba(2,6,23,.65));
}
.page-shoes .modal-thumb .thumb-video{
border-radius: 12px;
}
.page-shoes .modal-thumb .thumb-video::after{
content:"動画";
position:absolute;
left:8px;
bottom:7px;
font-size:10px;
font-weight:900;
color:rgba(255,255,255,.92);
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.16);
padding:2px 6px;
border-radius:999px;
letter-spacing:.08em;
}

/* =========================================================
 MUI Base helpers (Gallery uses these)
========================================================= */
.mui-main{ padding: 28px 0 44px; }
.mui-container{
max-width: 1120px;
margin: 0 auto;
padding: 0 18px;
}

/* =========================================================
 Unified HERO (Shoes-like) + Gallery variant
========================================================= */
.mui-hero{ margin: 10px 0 26px; }
.mui-hero-inner{
position: relative;
overflow: hidden;
border-radius: 22px;
padding: 22px 22px 18px;
background:
  radial-gradient(1100px 420px at 12% 0%, rgba(245,158,11,.18), transparent 60%),
  radial-gradient(900px 520px at 90% 10%, rgba(30,58,138,.26), transparent 55%),
  linear-gradient(135deg, #0b1224 0%, #0f1b3a 45%, #0b1224 100%);
border: 1px solid rgba(226,232,240,.14);
box-shadow: 0 20px 50px rgba(2,6,23,.30);
}

.mui-hero-inner::after{
content:"";
position:absolute;
inset:-1px;
background:
  linear-gradient(120deg, rgba(245,158,11,.22), rgba(30,58,138,.18), rgba(255,255,255,0));
opacity:.35;
pointer-events:none;
}

.mui-crumb{
position: relative;
z-index: 2;
font-size: 12px;
color: rgba(226,232,240,.78);
display:flex;
align-items:center;
gap:10px;
}
.mui-crumb a{
color: rgba(226,232,240,.78);
text-decoration:none;
}
.mui-crumb a:hover{ color: #fff; text-decoration: underline; }
.mui-crumb-sep{ opacity: .6; }

.mui-hero-kicker{
position: relative;
z-index: 2;
margin-top: 12px;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(226,232,240,.72);
}
.mui-hero-title{
position: relative;
z-index: 2;
margin-top: 6px;
font-size: 28px;
font-weight: 900;
letter-spacing: .02em;
color: #ffffff;
}
.mui-hero-sub{
position: relative;
z-index: 2;
margin-top: 8px;
font-size: 13.5px;
line-height: 1.85;
color: rgba(226,232,240,.80);
max-width: 44em;
}

.mui-hero-actions{
position: relative;
z-index: 2;
display:flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.mui-pill{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 9px 12px;
border-radius: 999px;
text-decoration:none;
font-size: 12.5px;
font-weight: 800;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.08);
border: 1px solid rgba(226,232,240,.14);
backdrop-filter: blur(10px);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mui-pill:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.12);
border-color: rgba(245,158,11,.28);
}

/* =========================================================
 Section Head (Gallery)
========================================================= */
.mui-section{ margin: 0 0 34px; }
.mui-section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.mui-section-kicker{
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 4px;
font-weight: 900;
}
.mui-section-title{
font-size: 18px;
font-weight: 950;
color: #0f172a;
margin: 0;
}
.mui-section-title span{
background: linear-gradient(120deg, #f59e0b, #1e3a8a);
-webkit-background-clip: text;
color: transparent;
}
.mui-section-desc{
font-size: 13px;
color: #64748b;
max-width: 28em;
line-height: 1.75;
margin: 0;
}

/* =========================================================
 Gallery Grid (refined)
========================================================= */
.mui-gallery-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.mui-gallery-card{
border-radius: 18px;
border: 1px solid rgba(226,232,240,.95);
background: #fff;
overflow: hidden;
box-shadow: 0 14px 32px rgba(2,6,23,.08);
display:flex;
flex-direction:column;
min-height: 0;
}
.mui-gallery-media{
position: relative;
width: 100%;
padding-bottom: 66%;
overflow: hidden;
background: #0b1224;
display:block;
}
.mui-gallery-media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit: cover;
transition: transform .25s ease-out, filter .25s ease-out;
}
.mui-gallery-card:hover .mui-gallery-media img{
transform: scale(1.035);
filter: saturate(1.05) contrast(1.03);
}
.mui-gallery-label{
position:absolute;
left: 10px;
top: 10px;
padding: 4px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
color: rgba(255,255,255,.92);
background: rgba(2,6,23,.62);
border: 1px solid rgba(226,232,240,.18);
backdrop-filter: blur(10px);
}
.mui-gallery-body{
padding: 10px 12px 12px;
font-size: 12px;
color: #334155;
line-height: 1.7;
}
.mui-gallery-title{
font-size: 12.5px;
font-weight: 950;
color: #0f172a;
margin-bottom: 3px;
}
.mui-gallery-text{ color: #334155; }
.mui-gallery-meta{
margin-top: 6px;
font-size: 11px;
color: #64748b;
}
.mui-gallery-note{
margin-top: 10px;
font-size: 12px;
color: #64748b;
}

/* responsive */
@media (max-width: 900px){
.mui-hero-title{ font-size: 26px; }
.mui-gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.mui-hero-inner{ padding: 18px 16px 16px; border-radius: 18px; }
.mui-hero-title{ font-size: 24px; }
.mui-gallery-grid{ grid-template-columns: minmax(0,1fr); }
}
/* =========================================================
 Base
========================================================= */
.mui-main{ padding:28px 0 44px; }
.mui-container{
max-width:1080px;
margin:0 auto;
padding:0 18px;
}

/* =========================================================
 PRO HERO (match shoes style) - used by Gallery
========================================================= */
.mui-pro-hero{ margin: 14px 0 28px; }
.mui-pro-hero-inner{
border-radius: 26px;
border: 1px solid #e5e7eb;
box-shadow: 0 18px 38px rgba(15,23,42,.12);
overflow: hidden;

/* 左暖右冷，类似你 shoes 页那种感觉 */
background:
  radial-gradient(900px 380px at 18% 35%, rgba(245,158,11,.18), transparent 60%),
  radial-gradient(900px 420px at 85% 40%, rgba(30,58,138,.18), transparent 60%),
  linear-gradient(90deg, #fff7ed 0%, #f6f7fb 45%, #eef2ff 100%);
}

.mui-pro-hero-grid{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap: 22px;
padding: 22px 24px;
align-items: start;
}

/* crumb */
.mui-pro-crumb{
font-size: 12px;
color: #64748b;
display:flex;
align-items:center;
gap: 10px;
}
.mui-pro-crumb a{ color:#64748b; text-decoration:none; }
.mui-pro-crumb a:hover{ color:#1e3a8a; text-decoration: underline; }
.mui-pro-crumb-sep{ opacity: .6; }

/* text */
.mui-pro-kicker{
margin-top: 12px;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color:#64748b;
font-weight: 900;
}
.mui-pro-title{
margin-top: 8px;
font-size: 30px;
font-weight: 950;
color:#0f172a;
letter-spacing: .01em;
}
.mui-pro-sub{
margin-top: 8px;
font-size: 13.5px;
line-height: 1.85;
color:#475569;
max-width: 44em;
}

/* pills */
.mui-pro-pills{
margin-top: 14px;
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.mui-pro-pill{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid #dbe1ea;
background: rgba(255,255,255,.75);
color:#1e3a8a;
font-size: 13px;
font-weight: 900;
text-decoration:none;
box-shadow: 0 10px 22px rgba(15,23,42,.08);
transition: transform .15s ease, box-shadow .15s ease;
}
.mui-pro-pill:hover{
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(15,23,42,.10);
}

/* right CTA */
.mui-pro-hero-right{
display:flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
padding-top: 22px;
}
.mui-pro-hero-btn{
display:flex;
align-items:center;
justify-content:center;
height: 52px;
border-radius: 999px;
background: linear-gradient(135deg, #1e40af, #1e3a8a);
color:#fff;
font-weight: 950;
letter-spacing: .06em;
text-decoration:none;
box-shadow: 0 18px 30px rgba(30,58,138,.22);
}
.mui-pro-hero-btn:hover{
filter: brightness(1.03);
}
.mui-pro-hero-note{
font-size: 12px;
color: #64748b;
line-height: 1.7;
}

/* responsive */
@media (max-width: 860px){
.mui-pro-hero-grid{ grid-template-columns: 1fr; }
.mui-pro-hero-right{ padding-top: 0; }
}
@media (max-width: 640px){
.mui-pro-hero-grid{ padding: 18px 16px; }
.mui-pro-title{ font-size: 26px; }
}

/* =========================================================
 Section head (kept)
========================================================= */
.mui-section{ margin: 0 0 34px; }
.mui-section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
flex-wrap:wrap;
margin-bottom:18px;
}
.mui-section-kicker{
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:#64748b;
margin-bottom:4px;
font-weight:900;
}
.mui-section-title{
font-size:18px;
font-weight:950;
color:#0f172a;
margin:0;
}
.mui-section-title span{
background:linear-gradient(120deg,#f59e0b,#1e3a8a);
-webkit-background-clip:text;
color:transparent;
}
.mui-section-desc{
font-size:13px;
color:#64748b;
max-width:28em;
line-height:1.75;
margin:0;
}

/* =========================================================
 Gallery grid
========================================================= */
.mui-gallery-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}
.mui-gallery-card{
border-radius:18px;
border:1px solid #e5e7eb;
background:#fff;
overflow:hidden;
box-shadow:0 14px 30px rgba(15,23,42,.10);
display:flex;
flex-direction:column;
}
.mui-gallery-media{
position:relative;
width:100%;
padding-bottom:66%;
overflow:hidden;
background:#0f172a;
display:block;
}
.mui-gallery-media img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .25s ease-out;
}
.mui-gallery-card:hover .mui-gallery-media img{
transform:scale(1.035);
}
.mui-gallery-label{
position:absolute;
left:10px;
top:10px;
padding:4px 8px;
border-radius:999px;
font-size:10px;
font-weight:900;
background:rgba(15,23,42,.72);
color:#e5e7eb;
border:1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
}
.mui-gallery-body{
padding:10px 12px 12px;
font-size:12px;
color:#334155;
line-height:1.7;
}
.mui-gallery-title{
font-size:12.5px;
font-weight:950;
margin-bottom:3px;
color:#0f172a;
}
.mui-gallery-text{ color:#334155; }
.mui-gallery-meta{
margin-top:6px;
font-size:11px;
color:#64748b;
}
.mui-gallery-note{
margin-top:10px;
font-size:12px;
color:#64748b;
}

@media (max-width: 900px){
.mui-gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
.mui-gallery-grid{ grid-template-columns:minmax(0,1fr); }
}
/* =========================================================
 Dark Footer — MUI Fencing (FINAL)
========================================================= */

/* footer 本体：只负责全宽 + 背景 */
.site-footer{
width:100%;
background:#0b1220;
color:#e5e7eb;
}

/* 内部容器：负责限宽 */
.site-footer .footer-wrap{
max-width:1080px;
margin:0 auto;
padding:48px 18px 28px;
display:flex;
flex-direction:column;
gap:32px;
}

/* ===== 上半区 ===== */
.site-footer .footer-main{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:28px;
flex-wrap:wrap;
}

/* 品牌 */
.site-footer .footer-brand-name{
font-size:16px;
font-weight:900;
letter-spacing:.12em;
color:#f8fafc;
}

.site-footer .footer-brand-sub{
margin-top:6px;
font-size:11.5px;
letter-spacing:.14em;
color:#94a3b8;
}

/* 公司 */
.site-footer .footer-company{
margin-top:10px;
font-size:12px;
color:#cbd5f5;
}

.site-footer .footer-company a{
color:#93c5fd;
text-decoration:none;
border-bottom:1px solid rgba(147,197,253,.35);
}

.site-footer .footer-company a:hover{
border-bottom-color:rgba(147,197,253,.85);
}

/* 社交 */
.site-footer .footer-social{
margin-top:14px;
display:flex;
gap:12px;
}

.site-footer .footer-social-link{
width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:1px solid rgba(148,163,184,.35);
color:#cbd5f5;
transition:all .15s ease;
}

.site-footer .footer-social-link svg{
width:16px;
height:16px;
fill:currentColor;
}

.site-footer .footer-social-link:hover{
color:#ffffff;
border-color:#93c5fd;
}

/* ===== 下半区 ===== */
.site-footer .footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding-top:18px;
border-top:1px solid rgba(148,163,184,.18);
flex-wrap:wrap;
}

.site-footer .footer-copy{
font-size:11.5px;
color:#94a3b8;
letter-spacing:.04em;
}

.site-footer .footer-legal a{
font-size:11.5px;
color:#cbd5f5;
text-decoration:none;
}

.site-footer .footer-legal a:hover{
text-decoration:underline;
}

/* ===== Mobile ===== */
@media (max-width:640px){
.site-footer .footer-main,
.site-footer .footer-bottom{
  justify-content:center;
  text-align:center;
}

.site-footer .footer-social{
  justify-content:center;
}
}
/* =========================================================
 Cookie Consent (MUI) — CSS
 (Matches: #muiCookie .mui-cookie / #muiCookieModal .mui-cookie-modal)
========================================================= */

/* bar */
.mui-cookie{
position:fixed;
left:16px;
right:16px;
bottom:16px;
z-index:9999;
display:flex;
justify-content:center;
}

/* ✅ 只控制 cookie 自己的隐藏，不依赖全站 .hide */
.mui-cookie.hide{ display:none !important; }

.mui-cookie-card{
width:min(1080px, 100%);
display:flex;
gap:14px;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;

padding:14px 16px;
border-radius:18px;
border:1px solid rgba(229,231,235,.95);
background:rgba(255,255,255,.92);
backdrop-filter:blur(14px);
box-shadow:0 18px 50px rgba(15,23,42,.18);
}

.mui-cookie-title{
font-size:13px;
font-weight:900;
color:#0f172a;
letter-spacing:.04em;
margin-bottom:3px;
}

.mui-cookie-desc{
font-size:12.5px;
line-height:1.65;
color:#64748b;
max-width:58em;
}

.mui-cookie-desc a{
color:#1e40af;
text-decoration:none;
border-bottom:1px solid rgba(30,64,175,.25);
}
.mui-cookie-desc a:hover{
border-bottom-color:rgba(30,64,175,.7);
}

.mui-cookie-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.mui-cookie-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
border:1px solid #d1d5db;
background:#fff;
font-size:12px;
font-weight:800;
color:#1f2937;
cursor:pointer;
transition:all .15s ease;
white-space:nowrap;
}
.mui-cookie-btn:hover{
transform:translateY(-1px);
border-color:#1e3a8a;
color:#1e3a8a;
}

.mui-cookie-primary{
background:linear-gradient(135deg,#1e3a8a,#2563eb);
border-color:transparent;
color:#fff;
box-shadow:0 12px 26px rgba(30,64,175,.28);
}
.mui-cookie-primary:hover{
color:#fff;
filter:brightness(1.05);
}

/* modal overlay */
.mui-cookie-modal{
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
background:rgba(2,6,23,.55);
}
.mui-cookie-modal.hide{ display:none !important; }

.mui-cookie-modal-card{
width:min(560px, 100%);
border-radius:18px;
background:#fff;
border:1px solid #e5e7eb;
box-shadow:0 30px 80px rgba(0,0,0,.35);
padding:14px 14px 12px;
}

.mui-cookie-modal-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:6px 6px 10px;
border-bottom:1px solid #e5e7eb;
}

.mui-cookie-modal-title{
font-weight:900;
font-size:14px;
color:#111827;
}

.mui-cookie-x{
width:34px;
height:34px;
border-radius:10px;
border:1px solid #e5e7eb;
background:#fff;
cursor:pointer;
font-size:18px;
line-height:1;
}

.mui-cookie-opts{
padding:12px 6px 6px;
display:grid;
gap:10px;
}

.mui-cookie-opt{
display:flex;
gap:10px;
align-items:flex-start;
padding:10px 10px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#f9fafb;
}

.mui-cookie-opt input{
margin-top:3px;
}

.mui-cookie-opt-title{
font-weight:900;
font-size:13px;
color:#111827;
}

.mui-cookie-opt-desc{
margin-top:2px;
font-size:12.5px;
color:#6b7280;
line-height:1.55;
}

.mui-cookie-modal-actions{
display:flex;
gap:10px;
justify-content:flex-end;
padding:10px 6px 2px;
border-top:1px solid #e5e7eb;
margin-top:10px;
}

/* mobile */
@media (max-width:640px){
.mui-cookie-card{
  padding:12px 12px;
}
.mui-cookie-actions{
  width:100%;
  justify-content:flex-end;
}
}

/* ======================================================== 
 Shoes strip (HERO下) 
========================================================= */
:root{
--hero-radius: 28px;

/* 间距统一 */
--shoe-gap: 14px;
--shoe-pad: 14px;

/* 4张一行：最小/最大宽度，避免超大屏太夸张 */
--shoe-min: 220px;
--shoe-max: 360px;
}

/* 外框：跟 HERO 同级的模块感 + 圆角一致 */
.shoes-strip.shoes-strip--hero{
margin-top: 16px;
padding: 16px 16px 14px;
border: 1px solid rgba(2,6,23,.08);
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
box-shadow: 0 14px 30px rgba(0,0,0,.06);
border-radius: var(--hero-radius);
}

/* 头部一行 */
.shoes-strip-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.shoes-strip-title{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:900;
letter-spacing:.02em;
text-decoration:none;
color:#0f172a;
font-size:18px;
line-height:1.2;
padding-bottom:3px;
border-bottom: 3px solid rgba(245,158,11,.6);
}
.shoes-strip-title:hover{
color:#1e3a8a;
border-bottom-color: rgba(30,58,138,.55);
}

.shoes-strip-sub{
font-size:13px;
color:#475569;
white-space:nowrap;
}

/* ✅ 关键：视窗全宽，不再 fit-content，不留右边大空白 */
.shoes-strip-viewport{
position:relative;
overflow:hidden;
border-radius: calc(var(--hero-radius) - 10px);
background: rgba(2,6,23,.02);
border: 1px solid rgba(2,6,23,.06);
width: 100%;
}

/* 轨道：必须可横向滚动 */
.shoes-strip-track{
display:flex;
gap: var(--shoe-gap);
padding: var(--shoe-pad);
overflow-x:auto;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.shoes-strip-track::-webkit-scrollbar{ display:none; }

/* ✅ 卡片宽度自动计算：正好 4 张撑满容器 */
.shoes-strip-item{
flex: 0 0 auto;

/* 一行4张： (100% - 左右padding - 3个gap)/4 */
width: clamp(
  var(--shoe-min),
  calc((100% - (var(--shoe-pad) * 2) - (var(--shoe-gap) * 3)) / 4),
  var(--shoe-max)
);

/* ✅ 用比例保证高度随宽度增长，看起来“更大更饱满” */
aspect-ratio: 5 / 3;
height: auto;

display:flex;
align-items:center;
justify-content:center;
background:#fff;
border: 1px solid rgba(2,6,23,.10);
border-radius: 16px;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
text-decoration:none;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.shoes-strip-item:hover{
transform: translateY(-2px);
border-color: rgba(245,158,11,.55);
box-shadow: 0 14px 26px rgba(0,0,0,.10);
}

.shoes-strip-item img{
width:100%;
height:100%;
object-fit: cover;
border-radius: 15px;
display:block;
}

/* 渐隐遮罩 */
.shoes-strip-fade{
position:absolute;
top:0; bottom:0;
width:64px;
pointer-events:none;
}
.shoes-strip-fade-left{
left:0;
background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.shoes-strip-fade-right{
right:0;
background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* 中屏：3张更舒服 */
@media (max-width: 899px){
.shoes-strip-item{
  width: clamp(
    200px,
    calc((100% - (var(--shoe-pad) * 2) - (var(--shoe-gap) * 2)) / 3),
    320px
  );
}
}

/* 手机：2张（更大更好滑） */
@media (max-width: 639px){
:root{ --hero-radius: 22px; --shoe-gap: 12px; --shoe-pad: 12px; }
.shoes-strip-head{ flex-direction:column; align-items:flex-start; }
.shoes-strip-sub{ white-space:normal; }
.shoes-strip-item{
  width: clamp(
    170px,
    calc((100% - (var(--shoe-pad) * 2) - (var(--shoe-gap) * 1)) / 2),
    260px
  );
}
}

.video-hint{
position:absolute;
right:8px;
bottom:8px;
padding:4px 8px;
font-size:11px;
line-height:1;
color:#fff;
background:rgba(0,0,0,.55);
border-radius:6px;
pointer-events:none; /* 不影响操作 */
user-select:none;
letter-spacing:.02em;
}