/* Reference: nike.com/jp — monochrome hierarchy and clear photographic edges.
   IXUS content, grids, image crops and carousel behavior stay in their existing files. */
:root {
  --paper: #fff;
  --ink: #111;
  --blue: #111;
  --muted: #626262;
  --line: #e5e5e5;
  --sand: #f5f5f5;
}

body { font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.site-header { padding-top: 16px; padding-bottom: 16px; }
.desktop-nav { font-size: 14px; font-weight: 700; gap: 28px; }
.desktop-nav a:hover { text-decoration-thickness: 2px; text-underline-offset: 8px; }
.header-cta { min-height: 44px; padding: 10px 20px; border-color: #dedede; font-size: 12px; font-weight: 700; }
.header-cta:hover { background: #f5f5f5; color: var(--ink); border-color: #111; }
.mobile-menu summary { font-weight: 700; }
.mobile-menu nav { border-radius: 4px; border: 1px solid var(--line); }

.eyebrow { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.hero-category { color: var(--ink); font-weight: 600; letter-spacing: .015em; }
.hero h1 { font-size: clamp(34px, 3.15vw, 46px); font-weight: 800; line-height: 1.4; letter-spacing: -.045em; }
.hero h1 .serif { font-family: inherit; font-weight: inherit; }
.hero-description { color: #454545; font-size: 14px; line-height: 1.9; }
.hero-image { border-radius: 4px; }
.hero-thumbnail { border-radius: 3px; }
.hero-playback { background: #1118; }
.hero-playback:hover { background: #111c; }
.hero-material { font-weight: 700; letter-spacing: .08em; }

.button { min-height: 50px; padding: 13px 26px; background: #111; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.7; }
.button:hover { background: #3d3d3d; }
.hero-actions { gap: 14px; }
.hero-actions > .text-link { min-height: 50px; padding: 12px 22px; border: 1px solid #c9c9c9; border-radius: 999px; font-size: 13px; font-weight: 700; }
.hero-actions > .text-link:hover { border-color: #111; background: #f5f5f5; }
.text-link { border-bottom-color: #111; font-weight: 700; text-underline-offset: 5px; }
.text-link:hover { color: #555; }
.fit-steps span { color: #626262; font-weight: 700; }

h2, .section-heading h2, .interior-copy h2, .craft h2 { font-weight: 700; line-height: 1.45; letter-spacing: -.025em; }
.fit-section h2 { font-weight: 700; }
.section-intro, .muted, .gallery-description { color: var(--muted); }
.interior-photo img, .product-image, .craft-cover, .craft-sewing img,
.gallery-card > img, .guide-photo-pair img, .guide-photo-detail, .guide-photo-detail img { border-radius: 3px; }
.product-heading h3, .secondary-products .product-heading h3 { font-weight: 700; letter-spacing: -.025em; }
.product-heading > span { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f5f5f5; font-size: 18px; }
.product-card:hover .product-heading > span { background: #111; color: #fff; }
.product-card > .product-lead { font-weight: 600; color: #333; }
.product-meta { align-items: center; }
.product-meta span:last-child { padding: 5px 12px; border: 1px solid #dedede; border-radius: 999px; font-weight: 700; }
.product-card:hover .product-meta span:last-child { border-color: #111; }
.collection-note { text-align: left; }
.material-paths strong, .craft-details dt, .gallery-card h3, .gallery-reading h3 { font-weight: 700; }

.guide-visual-caption { font-weight: 700; line-height: 1.55; letter-spacing: -.025em; }
.order-steps li > .step-number { background: #f1f1f1; color: #111; font-family: Arial, sans-serif; font-style: normal; font-weight: 700; }
.order-steps li:first-child > .step-number { background: #111; color: #fff; }
.order-steps li:not(:last-child)::before { border-color: #d5d5d5; }
.order-steps h3 { font-weight: 700; letter-spacing: -.02em; }
.order-preparation { border-radius: 4px; }
.order-preparation h3, .preparation-list dt { font-weight: 700; }
.preparation-list > div { border-color: #d9d9d9; }
.faq-list summary { font-weight: 600; }
.faq-list details[open] summary { font-weight: 700; }
.closing { background: #111; color: #fff; border-radius: 4px; }
.closing h2 { font-family: inherit; font-weight: 800; letter-spacing: -.035em; }
.closing > p:not(.eyebrow) { color: #e5e5e5; }
.button.button-light { background: #fff; color: #111; }
.button.button-light:hover { background: #e5e5e5; }
.footer-top nav { font-weight: 600; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #245eea; outline-offset: 5px; }
.hero-controls button:focus-visible, .hero-material:focus-visible { outline-color: #fff; }

@media (max-width: 1050px) and (min-width: 801px) {
  .desktop-nav { font-size: 12px; gap: 19px; }
  .hero h1 { font-size: clamp(26px, 3.15vw, 33px); }
  .hero-actions { gap: 12px; }
  .hero-actions > .text-link { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 800px) {
  .site-header { padding-top: 13px; padding-bottom: 13px; }
  .hero h1 { font-size: clamp(29px, 8.7vw, 36px); line-height: 1.4; }
  .hero-description { font-size: 13px; }
  .hero-actions { gap: 12px; }
  .button, .hero-actions > .text-link { font-size: 12px; min-height: 48px; }
  .button { padding-left: 22px; padding-right: 22px; }
  .hero-actions > .text-link { padding-left: 18px; padding-right: 18px; }
  .hero-image, .closing { border-radius: 3px; }
  .section-heading h2, .interior-copy h2, .craft h2 { line-height: 1.45; }
  .product-heading > span { flex-basis: 30px; width: 30px; height: 30px; }
  .order-preparation { border-radius: 3px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 29px; }
  .hero-actions > .text-link { min-height: 44px; }
}