/* Shared lower-page application surfaces. The home composition stays unchanged. */
.subpage { --page-gap: clamp(24px, 4vw, 64px); }
.page-main { max-width: 1600px; margin: auto; padding: 24px clamp(20px,5vw,80px) 80px; }
.breadcrumbs { display:flex; gap:12px; font-size:12px; color:#707377; margin:0 0 36px; align-items:baseline; }
.breadcrumbs span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.breadcrumbs a { flex-shrink:0; }
.page-heading { margin: 24px 0 42px; max-width:1000px; }
.page-heading h1 { font-size:clamp(28px,3.3vw,52px); line-height:1.4; letter-spacing:-.035em; margin:14px 0 22px; font-weight:700; overflow-wrap:anywhere; }
.page-heading .eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.page-lead { font-size:16px; line-height:2; color:#666a6f; max-width:720px; }
.surface { background:white; border:1px solid #e4e5e8; border-radius:22px; padding:clamp(24px,3.3vw,48px); }
.surface h2 { font-size:clamp(23px,2.2vw,34px); line-height:1.5; margin:12px 0 22px; }
.surface p { line-height:1.95; }
.page-tabs { display:flex; gap:8px; overflow-x:auto; padding:0 0 18px; margin-bottom:20px; scrollbar-width:thin; }
.page-tabs a,.tag { border:1px solid #dedfe2; background:white; border-radius:999px; padding:12px 20px; font-size:13px; white-space:nowrap; transition:background .2s,color .2s; }
.page-tabs a[aria-current],.page-tabs a:hover,.tag:hover { background:#171717; color:white; }
.detail-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:var(--page-gap); margin-bottom:72px; }
.page-photo { border-radius:22px; overflow:hidden; }
.detail-hero .page-photo img { width:100%; aspect-ratio:1/1.03; object-fit:cover; display:block; }
.detail-copy .page-heading { margin:0; }
.detail-copy .page-heading h1 { font-size:clamp(28px,2.6vw,43px); }
.price-panel { margin:24px 0; padding:20px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.price-panel p { font-weight:700; font-size:21px; }
.price-panel small { font-size:12px; color:#65686d; line-height:1.8; display:block; }
.page-actions { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin:30px 0; }
.button-outline { background:transparent; color:#171717; border:1px solid #242424; }
.button-outline:hover { background:#e7e8eb; color:#171717; }
.product-sheet { display:block; width:100%; max-width:1000px; height:auto; margin:auto; }
.sheet-zoom { display:block; text-align:center; }
.sheet-zoom span { display:inline-block; margin:24px auto 0; border:1px solid #ddd; border-radius:999px; padding:12px 24px; font-size:13px; }
.subpage .footer a[aria-current] { text-decoration:underline; text-underline-offset:5px; font-weight:700; }
.product-spec { margin-bottom:70px; }
.related-section { margin:60px 0; }
.page-main>.collection,.page-main>.guide,.page-main>.faq { padding:0; max-width:none; margin:42px 0 70px; }
/* The collection heading stays hidden as in the preview, but its h2 remains for screen readers (h1 > h2 > card h3 order). */
.page-main>.collection .section-heading { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.page-main>.collection .section-intro { display:none; }
.page-main .guide { padding-top:30px; }
.case-rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:4px 2px 18px; }
.case-card { display:flex; flex-direction:column; background:white; border:1px solid #e4e5e8; border-radius:18px; overflow:hidden; scroll-snap-align:start; transition:box-shadow .25s,transform .25s; min-width:0; }
.case-card[hidden] { display:none; }
.case-card>img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#ececee; }
.case-card-copy { padding:24px; display:flex; flex-direction:column; gap:16px; flex:1; }
.case-card h3 { font-size:17px; line-height:1.65; margin:0; overflow-wrap:anywhere; }
.case-card .text-link { margin-top:auto; font-size:12px; }
.case-meta { font-size:11px; color:#6f7378; letter-spacing:.02em; }
.gallery-filters { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:20px; align-items:end; padding:24px; margin-bottom:26px; }
.gallery-filters[hidden] { display:none; }
.subpage label { display:grid; gap:9px; font-size:12px; font-weight:600; }
.subpage input,.subpage select { width:100%; min-width:0; padding:15px 14px; font:inherit; font-size:16px; line-height:1.5; color:#222; border:1px solid #d7d9dd; background:#f8f9fa; border-radius:10px; }
.subpage input::placeholder,.subpage textarea::placeholder { color:#707070; opacity:1; }
.subpage select:disabled { color:#777; }
.clear-filters { border:0; background:transparent; padding:16px 8px; text-decoration:underline; font-size:12px; cursor:pointer; }
.empty-state { text-align:center; margin-top:18px; }
.empty-state[hidden] { display:none; }
.case-detail { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--page-gap); align-items:start; }
.case-photos { display:grid; gap:20px; }
.case-photos img { width:100%; height:auto; display:block; background:#eee; }
.case-information { position:sticky; top:100px; }
.case-information time,.news-article time { color:#777; font-size:12px; display:block; margin:18px 0 28px; }
.article-content { line-height:2; overflow-wrap:anywhere; }
.article-content h3 { font-size:18px; line-height:1.6; margin:32px 0 8px; }
.article-content p { margin:0 0 18px; }
.article-content h3:first-child { margin-top:0; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0; }
.tag { padding:8px 12px; font-size:11px; white-space:normal; }
.fit-layout,.contact-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.fit-search form { display:grid; gap:24px; }
.fit-search form .button { justify-content:space-between; }
.fit-search form .button:disabled { opacity:.4; cursor:not-allowed; }
.fit-search .muted { font-size:13px; margin:0; }
.fit-checklist dt { font-weight:700; margin-top:26px; font-size:16px; }
.fit-checklist dd { color:#6a6e73; margin:8px 0 32px; font-size:14px; }
.contact-grid p { margin-bottom:24px; }
.contact-grid .button { margin:12px 0; }
.contact-grid .muted { font-size:12px; }
.contact-address { margin-top:24px; }
.news-list { display:grid; gap:14px; }
.news-card { display:grid; grid-template-columns:100px minmax(0,1fr) 24px; gap:28px; align-items:center; }
.news-card h2 { font-size:20px; margin:0; }
.news-card time { font-size:12px; color:#666; }
.news-article { max-width:960px; }
.brand-story { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:var(--page-gap); align-items:start; }
.story-image { width:100%; height:min(75vh,800px); object-fit:cover; border-radius:22px; position:sticky; top:100px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.shop-card { padding:0 0 24px; overflow:hidden; }
.shop-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.shop-card h2,.shop-card p { padding:0 24px; }
.shop-card h2 { font-size:20px; }
.shop-card p { font-size:13px; }
.subpage :focus-visible { outline:3px solid #577cab; outline-offset:4px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .case-card:hover,.shop-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px #1111110a; }
}
@media(max-width:1050px) {
  .gallery-filters { grid-template-columns:1fr 1fr; }
  .case-rail { grid-auto-columns:44%; }
  .detail-hero { gap:30px; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .page-main { padding:20px 20px 42px; }
  .breadcrumbs { margin-bottom:25px; font-size:11px; }
  .page-heading { margin:18px 0 28px; }
  .page-heading h1 { font-size:28px; }
  .page-lead { font-size:14px; }
  .detail-hero,.case-detail,.brand-story,.fit-layout,.contact-grid { grid-template-columns:minmax(0,1fr); }
  .detail-hero { gap:30px; margin-bottom:36px; }
  .detail-hero .page-photo img { aspect-ratio:4/3; }
  .surface { border-radius:18px; padding:24px; }
  .product-spec { padding:24px 12px; margin-bottom:36px; }
  .product-spec .section-heading { padding:0 12px; }
  .page-main>.collection,.page-main>.guide,.page-main>.faq { margin:28px 0 48px; }
  .case-rail { grid-auto-columns:86%; gap:14px; }
  .case-card-copy { padding:20px; }
  .case-card h3 { font-size:16px; }
  .gallery-filters { gap:16px 12px; padding:20px; }
  .gallery-filters label:first-child { grid-column:1/-1; }
  .gallery-filters .clear-filters { grid-column:1/-1; padding:0; text-align:right; }
  .subpage input,.subpage select { padding:13px 8px; }
  .case-information,.story-image { position:static; }
  .case-information { padding:24px; }
  .tag-list { gap:6px; }
  .news-card { grid-template-columns:1fr 20px; gap:12px; }
  .news-card time { grid-column:1/-1; }
  .news-card h2 { font-size:17px; }
  .story-image { height:360px; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-card { padding:0 0 20px; }
  .page-actions .button { width:100%; justify-content:space-between; }
  .price-panel p { font-size:18px; }
  .related-section { margin:40px 0; }
}
@media(prefers-reduced-motion:reduce) { .subpage * { scroll-behavior:auto!important; } }
.discontinued-badge { display:inline-flex; width:fit-content; padding:6px 11px; border-radius:999px; background:#ecece8; color:#51514a; font-size:11px; font-weight:700; letter-spacing:.04em; }
.case-card-copy .discontinued-badge { margin-top:10px; }