/* Homepage product collections and two-row branded-photo gallery. No changes to hero/capabilities. */
.home-products-intro .catalog-link { display:inline-flex; margin-top:22px; min-height:44px; align-items:center; gap:18px; }
.product-families { display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:20px; }
.product-family { position:relative; display:flex; flex-direction:column; min-width:0; padding:24px 26px; border:1px solid #ffffff24; border-radius:20px; color:#eef2f5; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#20344a66,transparent 70%),linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px),#0c1926; background-size:auto,32px 32px,32px 32px,auto; transition:border-color .25s,background-color .25s; }
.product-family:hover { border-color:#8caac382; background-color:#112334; }
.family-kicker { color:#abc0d2; font-size:11px; font-weight:600; letter-spacing:.13em; }
.family-art { position:relative; display:grid; place-items:center; height:320px; margin:10px -6px 20px; }
.family-art::before { content:""; position:absolute; inset:10% 3%; border:1px solid #ffffff0d; border-radius:50%; }
.family-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px; filter:drop-shadow(0 18px 15px #0008); transition:transform .4s ease; }
.family-exhaust .family-art img { transform:rotate(12deg); }
.family-exhaust:hover .family-art img { transform:rotate(8deg) translateY(-5px); }
.family-swingarm .family-art img { transform:rotate(-12deg); }
.family-swingarm:hover .family-art img { transform:rotate(-8deg) translateY(-5px); }
.family-chain .family-art img { transform:rotate(-24deg); padding:0; }
.family-chain:hover .family-art img { transform:rotate(-20deg) translateY(-5px); }
.family-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #ffffff20; padding-top:20px; }
.family-foot h3 { margin:0 0 7px; color:#eef2f5; font:400 clamp(1.45rem,2.5vw,2rem)/1.15 Georgia,serif; }
.family-foot div > span { color:#b5c5d1; font-size:.82rem; }
.family-arrow { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; font-size:24px; color:#adc4d7; }
.featured-products { margin-top:80px; padding-top:38px; border-top:1px solid #ffffff26; }
.featured-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.featured-heading h3 { margin:8px 0 0; color:#eef2f5; font:400 clamp(2rem,4vw,3rem)/1.2 Georgia,serif; }
.featured-heading p { margin:0 0 5px; color:#b1c3d1; }
.featured-heading .section-index { color:#9eb8d0; }

.featured-actions { text-align:right; }
.home-products { container-type:inline-size; }
.product-ribbon { --photo-width:clamp(220px,22cqw,280px); --photo-gap:16px; display:grid; gap:var(--photo-gap); margin-top:30px; width:100cqw; margin-left:calc(50% - 50cqw); }
.product-ribbon-row { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#698096 #142332; }
.product-ribbon-track { display:flex; width:max-content; }
.product-ribbon-set { display:flex; flex:none; gap:var(--photo-gap); padding-right:var(--photo-gap); }
.product-ribbon-card { display:block; flex:0 0 var(--photo-width); width:var(--photo-width); aspect-ratio:1; border-radius:12px; overflow:hidden; background:#e8e8e8; }
.product-ribbon-card img { display:block; width:100%; height:100%; object-fit:contain; }
.product-ribbon-card { cursor:default; }
.home-products :is(a,button):focus-visible { outline:2px solid #a8c6ec; outline-offset:4px; }
.product-ribbon-row:focus-visible { outline:2px solid #a8c6ec; outline-offset:-3px; }
.product-ribbon-set.is-copy { display:none; }
.product-ribbon.is-enhanced:not(.is-static) .product-ribbon-row { overflow:hidden; }
.product-ribbon.is-enhanced:not(.is-static) .is-copy { display:flex; }
.product-ribbon.is-enhanced:not(.is-static) .product-ribbon-track { animation:product-ribbon-travel 64s linear infinite; animation-play-state:paused; }
.product-ribbon.is-enhanced:not(.is-static) .product-ribbon-row:nth-child(2) .product-ribbon-track { animation-direction:reverse; }
.product-ribbon.is-running:not(.is-static) .product-ribbon-track { animation-play-state:running; }
.product-ribbon.is-static .product-ribbon-track { animation:none; transform:none; }
@keyframes product-ribbon-travel { from { transform:translateX(0); } to { transform:translateX(var(--ribbon-cycle,-50%)); } }
@media(max-width:1000px) { .product-families { gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); } .product-family { padding:20px 18px; } .family-art { height:270px; } .family-foot div > span { font-size:12px; } .family-arrow { width:26px; } }
@media(max-width:700px) { .product-families { grid-template-columns:1fr; gap:16px; } .product-family { min-height:230px; padding:24px; } .family-art { position:absolute; width:46%; height:200px; right:10px; top:12px; margin:0; } .family-foot { flex:1; align-items:end; padding-top:95px; border:0; position:relative; } .family-kicker { max-width:53%; font-size:10px; } .family-foot h3 { max-width:170px; font-size:1.7rem; } .family-foot div > span { display:block; max-width:155px; } .family-arrow { display:none; } .family-chain .family-art { width:55%; } .featured-products { margin-top:50px; padding-top:30px; } .featured-heading { display:block; } .featured-heading p { margin-top:12px; font-size:14px; } .featured-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; text-align:left; gap:4px 16px; } }
@media(max-width:600px) { .product-ribbon { --photo-width:184px; --photo-gap:12px; margin-top:20px; } .product-ribbon-card { border-radius:10px; } }
@media(prefers-reduced-motion:reduce) {
  .product-family,.family-art img { transition:none; }
  .family-art img,.product-family:hover .family-art img { transform:none; }
  .product-ribbon.is-enhanced:not(.is-static) .product-ribbon-track { animation:none; transform:none; }
  .product-ribbon.is-enhanced:not(.is-static) .is-copy { display:none; }
  .product-ribbon.is-enhanced:not(.is-static) .product-ribbon-row { overflow-x:auto; }
}
@media(max-width:700px) { .family-chain .family-art { top:12px; height:130px; width:53%; } }