.htn-bike-detail-page .site-content { padding: 0; }
.htn-bike-detail-page .site.grid-container { width:100%; max-width:none; padding-right:0; padding-left:0; }
.htn-bike-detail-page .content-area { width: 100%; }
.htn-bike-detail-page main#primary.htn-model { width:100%; min-width:0; flex:0 0 100%; }
.htn-bike-detail-page .single-add-to-compare { display:none !important; }
.htn-model { --htn-red:#d71920; --htn-red-dark:#9d0e14; --htn-ink:#171717; --htn-muted:#666; --htn-line:#e5e5e5; color:var(--htn-ink); }
.htn-model > .gb-element-brroot01 { width:100%; margin-right:0; margin-left:0; }
.htn-model .grid-container { width:100%; max-width:none; padding-right:clamp(24px,5vw,88px); padding-left:clamp(24px,5vw,88px); }
.htn-model__hero { background:linear-gradient(145deg,#f3f3f3 0%,#fff 68%); }
.htn-model__hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:center; min-height:640px; padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(4rem,8vw,7rem); }
.htn-model__eyebrow,.htn-model__variant-kicker { margin:0 0 .75rem; color:var(--htn-red); font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.htn-model__intro h1 { margin:0; font-size:clamp(3rem,7vw,6.5rem); line-height:.95; letter-spacing:-.055em; }
.htn-model__intro>p:not(.htn-model__eyebrow) { max-width:560px; margin:1.5rem 0 0; color:var(--htn-muted); font-size:1.1rem; }
.htn-model__actions { display:flex; gap:1.25rem; align-items:center; margin-top:2rem; }
.htn-model__button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:.85rem 1.5rem; border-radius:7px; background:var(--htn-red); color:#fff; font-weight:800; text-decoration:none; }
.htn-model__button:hover,.htn-model__button:focus-visible { background:var(--htn-red-dark); color:#fff; }
.htn-model__text-link { color:var(--htn-ink); font-weight:700; text-decoration:none; }
.htn-model__hero-media { position:relative; display:grid; min-height:430px; place-items:center; }
.htn-model__hero-media::before { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:rgba(215,25,32,.08); content:""; }
.htn-model__hero-media img { position:relative; z-index:1; width:100%; max-height:560px; object-fit:contain; }
.htn-model__hero-specs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:660px; margin:2rem 0 0; padding:0; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.htn-model__hero-specs div { min-width:0; padding:1rem .9rem 1rem 0; }
.htn-model__hero-specs div+div { padding-left:.9rem; border-left:1px solid rgba(255,255,255,.16); }
.htn-model__hero-specs dt { margin-bottom:.35rem; color:rgba(255,255,255,.58); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.htn-model__hero-specs dd { margin:0; color:#fff; font-size:.95rem; font-weight:800; line-height:1.2; }
.htn-model .htn-model__hero { position:relative; overflow:hidden; background:radial-gradient(circle at 76% 32%,rgba(215,25,32,.2),transparent 29%),linear-gradient(128deg,#111416 0%,#1d2224 58%,#0e1011 100%); color:#fff; }
.htn-model .htn-model__hero::before { position:absolute; inset:0; opacity:.2; background-image:repeating-radial-gradient(ellipse at 78% 48%,transparent 0 34px,rgba(255,255,255,.15) 35px,transparent 36px 64px); content:""; pointer-events:none; }
.htn-model .htn-model__hero-grid { position:relative; z-index:1; grid-template-columns:minmax(420px,.82fr) minmax(0,1.18fr); min-height:690px; }
.htn-model .htn-model__breadcrumb { color:rgba(255,255,255,.55); }
.htn-model .htn-model__breadcrumb strong { color:#fff; }
.htn-model .htn-model__hero .htn-model__eyebrow { color:#ff4a50; }
.htn-model .htn-model__intro h1 { color:#fff; font-size:clamp(4.5rem,8vw,8.25rem); }
.htn-model .htn-model__intro>p:not(.htn-model__eyebrow) { color:rgba(255,255,255,.7); }
.htn-model .htn-model__hero .htn-model__button { min-height:56px; padding:1rem 1.75rem; box-shadow:0 12px 30px rgba(215,25,32,.25); }
.htn-model .htn-model__hero .htn-model__text-link { color:#fff; }
.htn-model .htn-model__hero-media { min-height:540px; }
.htn-model .htn-model__hero-media::before { width:82%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); box-shadow:0 0 100px rgba(215,25,32,.18); }
.htn-model .htn-model__hero-media img { max-height:620px; filter:drop-shadow(0 32px 28px rgba(0,0,0,.48)); transform:scale(1.08) translateX(-1.5%); }
.htn-model__variants { padding-top:clamp(3.5rem,6vw,6rem); padding-bottom:clamp(3.5rem,6vw,6rem); }
.htn-model__section-heading { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2rem; }
.htn-model__section-heading h2,.htn-model__section-heading p { margin:0; }
.htn-model__section-heading h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.04em; }
.htn-model__section-heading>p { color:var(--htn-muted); }
.htn-model__variant-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.htn-model__variant { overflow:hidden; border:1px solid var(--htn-line); border-radius:14px; background:#fff; }
.htn-model__variant-media { display:grid; min-height:220px; place-items:center; background:#f6f6f6; text-decoration:none; }
.htn-model__variant-media img { width:100%; height:220px; object-fit:contain; padding:1rem; }
.htn-model__variant-body { padding:1.15rem; }
.htn-model__variant-body h3 { min-height:2.4em; margin:0 0 .85rem; font-size:1.18rem; line-height:1.2; }
.htn-model__variant-body h3 a { color:inherit; text-decoration:none; }
.htn-model__variant-body dl { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:0 0 1rem; }
.htn-model__variant-body dl div { display:flex; gap:.3rem; min-width:0; font-size:.84rem; }
.htn-model__variant-body dt { color:var(--htn-muted); }
.htn-model__variant-body dt::after { content:":"; }
.htn-model__variant-body dd { min-width:0; margin:0; overflow:hidden; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.htn-model__variant-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1rem; }
.htn-model__variant-actions a { display:inline-flex; align-items:center; font-size:.9rem; font-weight:800; line-height:1.3; text-decoration:none; }
.htn-model__variant-link { color:var(--htn-red); }
.htn-model__quote-link { color:var(--htn-ink); }
.htn-model__variant-media:focus-visible,.htn-model__variant-body h3 a:focus-visible,.htn-model__variant-actions a:focus-visible { border-radius:4px; outline:3px solid rgba(228,23,34,.35); outline-offset:3px; }
.htn-model__editorial { padding:clamp(4rem,8vw,8rem) 0; background:#fff; }
.htn-model__editorial-inner { width:min(100%,1274px) !important; max-width:1274px !important; margin-right:auto; margin-left:auto; }
.htn-model__editorial-heading { max-width:820px; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.htn-model__editorial-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,4.8rem); line-height:1; letter-spacing:-.05em; }
.htn-model__editorial-heading>p:last-child { max-width:680px; margin:1.25rem 0 0; color:var(--htn-muted); font-size:1.05rem; line-height:1.65; }
.htn-model__editorial-layout { display:grid; grid-template-columns:minmax(0,820px) minmax(200px,230px); gap:clamp(2.5rem,5vw,5rem); align-items:start; justify-content:center; }
.htn-model__editorial-content { min-width:0; color:var(--htn-ink); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.75; }
.htn-model__editorial-content>:where(p,ul,ol,blockquote) { max-width:760px; }
.htn-model__editorial-content :where(h2,h3,h4) { color:var(--htn-ink); line-height:1.12; letter-spacing:-.035em; }
.htn-model__editorial-content h2 { margin:clamp(3rem,4vw,4rem) 0 2rem; padding-top:1.2rem; border-top:1px solid var(--htn-ink); font-size:clamp(2.3rem,4.2vw,4rem); font-weight:700; scroll-margin-top:100px; }
.htn-model__editorial-content h2:first-child { margin-top:0; }
.htn-model__editorial-content h3 { max-width:760px; margin:2rem 0 1rem; font-size:clamp(1.55rem,2.5vw,2.25rem); font-weight:700; }
.htn-model__editorial-content :where(figure,.wp-block-image,.wp-block-gallery) { max-width:100%; margin-top:1.5rem; margin-bottom:1.5rem; overflow:hidden; background:#f5f4f1; }
.htn-model__editorial-content img { display:block; width:100%; height:auto; }
.htn-model__editorial-content figcaption { margin-top:.6rem; color:var(--htn-muted); font-size:.78rem; text-align:center; }
.htn-model__editorial-nav { position:sticky; top:92px; padding-top:1.2rem; border-top:1px solid var(--htn-ink); }
.htn-model__editorial-nav>p { margin:0 0 1.2rem; color:var(--htn-muted); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.htn-model__editorial-nav ol { margin:0; padding:0; list-style:none; }
.htn-model__editorial-nav li { border-bottom:1px solid var(--htn-line); }
.htn-model__editorial-nav a { display:grid; grid-template-columns:28px 1fr; gap:.7rem; padding:1rem 0; color:var(--htn-ink); font-size:.82rem; font-weight:700; line-height:1.35; text-decoration:none; }
.htn-model__editorial-nav a span { color:var(--htn-red); font-size:.64rem; letter-spacing:.08em; }
.htn-model__editorial-nav a:hover,.htn-model__editorial-nav a:focus-visible { color:var(--htn-red); }
.htn-model__cta { background:linear-gradient(120deg,#9d0e14,var(--htn-red)); color:#fff; }
.htn-model__cta-inner { display:flex; justify-content:space-between; gap:2rem; align-items:center; padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3rem,6vw,5rem); }
.htn-model__cta .htn-model__eyebrow { color:rgba(255,255,255,.74); }
.htn-model__cta h2 { margin:0; color:#fff; font-size:clamp(1.8rem,4vw,3rem); }
.htn-model__button--light { flex:0 0 auto; background:#fff; color:var(--htn-red); }
.htn-model__button--light:hover,.htn-model__button--light:focus-visible { background:#f3f3f3; color:var(--htn-red-dark); }
@media (max-width:960px) { .htn-model__variant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) { .htn-model__editorial-layout { grid-template-columns:1fr; } .htn-model__editorial-nav { position:static; grid-row:1; } .htn-model__editorial-nav ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.5rem; } }
@media (max-width:800px) { .htn-model__hero-grid { grid-template-columns:1fr; min-height:0; } .htn-model__hero-media { min-height:300px; } }
@media (max-width:800px) { .htn-model .htn-model__hero-grid { grid-template-columns:1fr; min-height:0; } .htn-model .htn-model__hero-media { min-height:360px; } .htn-model .htn-model__hero-media img { transform:scale(1.04); } }
@media (max-width:620px) { .htn-model__hero-grid,.htn-model__variants,.htn-model__editorial-inner,.htn-model__cta-inner { padding-right:20px; padding-left:20px; } .htn-model__actions,.htn-model__section-heading,.htn-model__cta-inner { display:grid; align-items:start; } .htn-model__variants { padding-top:3rem; padding-bottom:3rem; } .htn-model__section-heading { margin-bottom:1.25rem; } .htn-model__section-heading h2 { font-size:1.85rem; } .htn-model__variant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .htn-model__variant { border-radius:10px; } .htn-model__variant-media,.htn-model__variant-media img { min-height:140px; height:140px; } .htn-model__variant-media img { padding:.5rem; } .htn-model__variant-body { padding:.85rem; } .htn-model__variant-kicker { margin-bottom:.45rem; font-size:.6rem; } .htn-model__variant-body h3 { min-height:2.5em; margin-bottom:.65rem; font-size:.98rem; } .htn-model__variant-body dl { display:grid; gap:.25rem; margin-bottom:.75rem; } .htn-model__variant-body dl div { font-size:.72rem; } .htn-model__variant-body dd { white-space:normal; } .htn-model__variant-body dl div:nth-child(2) dd { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .htn-model__variant-actions { display:grid; align-items:start; gap:.5rem; } .htn-model__variant-actions a { font-size:.78rem; } .htn-model__editorial { padding:4.5rem 0; } .htn-model__editorial-heading h2 { font-size:2.55rem; } .htn-model__editorial-layout { gap:2.5rem; } .htn-model__editorial-nav ol { grid-template-columns:1fr; } .htn-model__editorial-content h2 { margin-top:3rem; font-size:2.55rem; } .htn-model__editorial-content h3 { font-size:1.75rem; } }
@media (max-width:620px) { .htn-model .htn-model__hero-grid { padding-top:3rem; padding-bottom:2.25rem; } .htn-model .htn-model__intro h1 { font-size:clamp(3.2rem,16vw,4.25rem); } .htn-model__hero-specs { grid-template-columns:repeat(2,minmax(0,1fr)); } .htn-model__hero-specs div:nth-child(3) { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.16); } .htn-model__hero-specs div:nth-child(4) { border-top:1px solid rgba(255,255,255,.16); } .htn-model .htn-model__hero-media { min-height:300px; } }
/* Keep the model introduction compact on phones; variant images remain visible. */
@media (max-width:620px) { .htn-model .htn-model__hero-media { display:none; } }
.htn-model__breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(20px, 2.2vw, 28px); color: #8a8d91; font-size: 10px; }
.htn-model__breadcrumb a { color: inherit; text-decoration: none; }
.htn-model__breadcrumb strong { color: #111214; font-weight: 600; }