/* Isolated product photography, two collections, a quiet white background. */
.product-lineup{--lineup-type:JPHEATLatin,JPHEATJP,sans-serif;background:#fff;color:#343a3b;padding:86px 40px 94px;scroll-margin-top:115px;font-family:var(--lineup-type);font-feature-settings:normal}
.lineup-inner{max-width:1240px;margin:0 auto}
.lineup-heading{text-align:center;margin:0 0 56px}
.lineup-heading h1,.lineup-heading h2{font:400 36px/1.4 JPHEATLatin,sans-serif;letter-spacing:.045em;margin:0}
.lineup-heading p{font-size:11px;letter-spacing:.27em;color:#858b8d;margin:12px 0 0}
.lineup-category{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 0 35px;font:400 17px/1.7 var(--lineup-type);letter-spacing:.11em;text-align:center}
.lineup-category::before,.lineup-category::after{content:'';width:70px;height:1px;background:#e6e9e8;flex-shrink:0}
.lineup-category b{font-weight:500;letter-spacing:.04em;margin-right:4px}
.lineup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;list-style:none;margin:0;padding:0}
.lineup-pads .lineup-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;gap:94px;margin:0 auto}
.lineup-mats{margin-top:72px}
.lineup-item{min-width:0;text-align:center}
.lineup-card{display:block;color:inherit;text-decoration:none;border-radius:2px}
.lineup-image{height:206px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.lineup-pads .lineup-image{height:240px;margin-bottom:26px}
.lineup-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease;mix-blend-mode:multiply}
.lineup-pads .lineup-image img{max-width:274px}
.lineup-name{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;font:600 clamp(16px,1.55vw,21px)/1.5 JPHEATLatin,sans-serif;letter-spacing:.005em}
.lineup-badge{display:inline-block;border:1px solid currentColor;border-radius:2px;font-size:.71em;line-height:1.15;padding:2px 4px;white-space:nowrap;font-weight:500;letter-spacing:.015em}
.lineup-model{margin:9px 0 0;font:500 12px/1.6 JPHEATLatin,sans-serif;letter-spacing:.12em;color:#5e686b}
.lineup-description{margin:6px 0 0;font:400 12px/1.8 var(--lineup-type);letter-spacing:.09em;color:#858b8d}
.lineup-footer{text-align:center;margin-top:60px}
.lineup-all{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:48px;min-width:258px;padding:10px 27px;border:1px solid #6b7272;border-radius:28px;font-size:12px;letter-spacing:.09em;transition:background .2s,color .2s}
.lineup-all span{font-family:var(--sans);font-size:18px;line-height:1}
.lineup-card:focus-visible,.lineup-all:focus-visible{outline:2px solid #a27750;outline-offset:8px}
@media(hover:hover){.lineup-card:hover .lineup-image img{transform:translateY(-4px)}.lineup-all:hover{background:#343a3b;color:#fff}}
@media(min-width:1800px){.lineup-inner{max-width:1400px}.lineup-grid{gap:46px}.lineup-image{height:230px}}
@media(max-width:950px){.product-lineup{padding:70px 28px 76px}.lineup-grid{gap:20px}.lineup-name{font-size:16px;gap:6px}.lineup-image{height:160px}.lineup-pads .lineup-grid{max-width:650px;gap:60px}.lineup-pads .lineup-image{height:216px}.lineup-mats{margin-top:65px}}
@media(max-width:700px){.product-lineup{padding:58px 22px 64px;scroll-margin-top:98px}.lineup-heading{margin-bottom:37px}.lineup-heading h1,.lineup-heading h2{font-size:29px}.lineup-heading p{font-size:10px;margin-top:9px}.lineup-category{font-size:14px;gap:12px;letter-spacing:.035em;margin-bottom:26px}.lineup-category::before,.lineup-category::after{width:22px}.lineup-grid,.lineup-pads .lineup-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}.lineup-pads .lineup-image,.lineup-image{height:164px;margin-bottom:19px}.lineup-mats{margin-top:51px}.lineup-name{font-size:15px;gap:6px;line-height:1.55}.lineup-model{font-size:11px;letter-spacing:.08em;margin-top:8px}.lineup-description{font-size:11px;letter-spacing:.02em;margin-top:4px}.lineup-footer{margin-top:43px}.lineup-all{min-width:235px;font-size:11px}}
@media(max-width:390px){.product-lineup{padding-left:17px;padding-right:17px}.lineup-grid,.lineup-pads .lineup-grid{column-gap:18px}.lineup-pads .lineup-image,.lineup-image{height:143px}.lineup-name{font-size:14px;gap:4px}.lineup-category{font-size:13px;gap:10px}}
@media(prefers-reduced-motion:reduce){.lineup-image img,.lineup-all{transition:none}.lineup-card:hover .lineup-image img{transform:none}}
/* Footer PRODUCTS links (Claude 2026-11-09): products.html#lineup-mats-title / #lineup-pads-title land with the category title flush
   at the top. Nothing is sticky on products.html (winter.css makes .header relative), so the offset is 10px of breathing room;
   style.css's global html{scroll-padding-top:95px} is cancelled for these two targets. The home page keeps its sticky header
   (--story-header). assets/site.js re-lands after load / fonts / images with the measured sticky height. */
html:has(#lineup-pads-title:target,#lineup-mats-title:target){scroll-padding-top:0}
#lineup-pads-title,#lineup-mats-title{scroll-margin-top:var(--lineup-anchor-top,10px)}
.has-heat-story :is(#lineup-pads-title,#lineup-mats-title){scroll-margin-top:calc(var(--story-header,130px) + 10px)}
/* products.html only (the lineup is the first thing in <main>): on wide, short screens the page used to end before the mats title
   could reach the top (1440×900 stopped 77px short, 1920×1080 233px). The mats group is kept at least viewport-high minus the
   section padding (94 / 76px) and the footer (305 / 381px measured), so the last anchor always has room to land. */
@media(min-width:701px){main>.product-lineup:first-child .lineup-mats{min-height:calc(100svh - 451px)}}
@media(min-width:951px){main>.product-lineup:first-child .lineup-mats{min-height:calc(100svh - 393px)}}
/* The size selected from the homepage retains its own product photograph. */
.gallery #gallery-main.is-model-cutout{object-fit:contain;background:#fff;padding:36px}
.selected-model{font-family:JPHEATLatin,sans-serif;font-size:14px;letter-spacing:.08em;color:#596264;margin-top:18px}