/* Product storytelling adapted from the downloaded Honda CG160 Cargo reference. */
body:has(.product-subnav) { --product-nav-height: 104px; }
html:has(.product-subnav) { scroll-padding-top: calc(var(--header-height) + 116px); }
.product-subnav { position: sticky; top: var(--header-height); z-index: 35; background: #f5f5f5; border-bottom: 1px solid #d3d3d3; }
.product-subnav__inner { display: grid; gap: 0; }
.product-subnav__name { display: inline-flex; align-items: center; min-height: 44px; color: #b30000; font-weight: 700; font-size: 18px; }
.product-subnav__links { display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.product-subnav__links a { min-height: 52px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 14px; font-weight: 500; border-bottom: 3px solid transparent; }
.product-subnav__links a:hover, .product-subnav__links a:focus-visible { color: #c00; border-bottom-color: #c00; }
.product-subnav__interest { color: #c00; }
.breadcrumbs { flex-wrap: wrap; align-items: center; min-height: 54px; padding-block: 14px; }
.breadcrumbs .icon-chevron { width: 12px; height: 12px; flex-basis: 12px; color: #888; }
.product-hero { overflow: clip; background: #fff; padding: 24px 0 56px; }
.product-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
.product-variant-heading { margin: 0 0 24px; color: #b30000; font-size: clamp(2.5rem,6vw,3.5rem); line-height: 1.15; letter-spacing: -.025em; }
.section-360__options { display: flex; flex-wrap: nowrap; gap: 0 24px; margin-bottom: 28px; border-bottom: 1px solid #d3d3d3; overflow-x: auto; scrollbar-width: thin; }
.section-360__options[hidden], .product-variant-panel[hidden] { display: none; }
.section-360__options button { flex: 0 0 auto; min-width: 44px; min-height: 48px; max-width: min(80vw,24rem); padding: 12px 4px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #595959; font: inherit; font-weight: 500; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.section-360__options button:hover, .section-360__options button.is-active { color: #c00; border-bottom-color: #c00; }
.section-360__options button.is-active { font-weight: 700; }
.section-360__options button:focus-visible, .product-variant-panel:focus-visible, #product_variant_id:focus-visible { outline: 2px solid #c00; outline-offset: 4px; }
.product-summary .product-variant-title { margin: 0; color: #b30000; font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.product-variant-panel:not([hidden]) + .product-variant-panel:not([hidden]) { margin-top: 48px; }
select#product_variant_id { min-height: 44px; }
.product-summary { min-width: 0; }
.product-summary h1 { margin: 0; color: #b30000; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1.15; letter-spacing: -.025em; }
.product-model-meta { margin: 8px 0 20px; color: #595959; font-size: 14px; }
.product-summary .lead-copy { max-width: 460px; margin-block: 18px; font-size: 18px; line-height: 1.55; }
.product-summary .price-box { margin-block: 24px; padding: 0; background: none; border: 0; border-radius: 0; }
.product-summary .price-box small, .product-summary .price-box span { font-size: 13px; color: #595959; }
.product-summary .price-box strong { margin: 6px 0; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.2; font-weight: 700; }
.product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.product-actions .button { min-width: 220px; padding-inline: 28px; }
.product-price-note { max-width: 450px; margin: 20px 0 0; font-size: 12px; line-height: 1.5; }
.product-studio { min-width: 0; text-align: center; scroll-margin-top: 190px; }
.product-studio__image { display: grid; place-items: center; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.product-studio__image img { width: 100%; height: 100%; max-height: 540px; object-fit: contain; }
.product-studio .moto-placeholder-large { min-height: 240px; color: #595959; }
.product-colors > p:first-child { margin: 14px 0; color: #3d3d3e; font-size: 16px; font-weight: 500; }
.product-color-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.product-color { min-height: 48px; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #595959; font-size: 13px; text-align: left; cursor: pointer; }
.product-color svg { flex: 0 0 26px; }
.product-color span { min-width: 0; overflow-wrap: anywhere; }
.product-color.is-selected { color: #cc0000; font-size: 14px; font-weight: 700; }
.product-color.is-selected svg { transform: scale(1.08); }
.product-color:hover:not(:disabled) { color: #cc0000; }
.product-color:focus-visible { outline: 2px solid #cc0000; outline-offset: 3px; }
.product-color:disabled { cursor: default; opacity: .55; }
.product-studio__gallery-link { margin-top: 18px; font-size: 14px; color: #c00; }
.product-details { background: #f5f5f5; }
.product-story { display: grid; gap: 32px; }
.product-story__heading h2 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.2; font-weight: 300; }
.product-story__heading > p { margin: 20px 0 24px; font-size: 20px; line-height: 1.4; }
.product-story__heading .text-link { color: #c00; }
.product-story .product-copy { font-size: 16px; line-height: 1.7; }
.product-copy h2, .product-copy h3 { font-size: 22px; line-height: 1.35; margin: 28px 0 12px; }
.product-copy > :first-child { margin-top: 0; }
.product-photo-section { color: #fff; background: #202020; }
.product-photo-section .section-heading h2 { color: #fff; font-weight: 300; }
.product-photo-section .section-heading p { color: #ddd; }
.product-photo-section .text-link { color: #fff; }
.product-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.product-photo { position: relative; min-width: 0; display: block; background: #fff; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.product-photo__expand { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; background: #fff; color: #c00; border: 1px solid #ddd; border-radius: 50%; }
.product-photo__expand svg { display: block; }
.product-specifications .section-heading h2 { font-weight: 300; }
.product-specifications .spec-grid { border-top: 1px solid #d3d3d3; gap: 0 24px; }
.product-specifications .spec-grid div { border: 0; border-bottom: 1px solid #d3d3d3; border-radius: 0; padding: 22px 0; }
.product-specifications dt { font-size: 13px; font-weight: 400; text-transform: none; }
.product-specifications dd { margin-top: 8px; font-size: 16px; font-weight: 500; }
.lead-section { background: #f5f5f5; }
.lead-grid > div > h2 { color: #b30000; font-weight: 300; }
.lead-grid > div > p { margin-top: 22px; font-size: 17px; }
.lead-section .lead-form { box-shadow: none; border: 1px solid #d3d3d3; }
.product-lightbox { width: min(1120px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 0; border-radius: 4px; background: #fff; }
.product-lightbox::backdrop { background: rgba(0,0,0,.88); }
.product-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-lightbox__toolbar p { margin: 0; font-size: 15px; color: #202020; }
.product-lightbox button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; color: #c00; background: #fff; border: 1px solid #ddd; border-radius: 2px; cursor: pointer; }
.product-lightbox__close { font-size: 30px; }
.product-lightbox > img { width: 100%; height: min(66dvh,650px); object-fit: contain; }
.product-lightbox__controls { display: flex; align-items: center; justify-content: center; gap: 24px; }
.product-lightbox__controls span { min-width: 64px; text-align: center; color: #595959; }
.product-related__heading h2 { font-weight: 300; }
@media (min-width: 620px) {
  .product-photo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .product-hero-grid { gap: 40px; }
}
@media (min-width: 900px) {
  .product-subnav__inner { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .product-subnav__links { gap: 28px; }
  .product-subnav__links a { min-height: 62px; }
  html:has(.product-subnav) { scroll-padding-top: 162px; }
  .product-hero { padding: 40px 0 72px; }
  .product-hero-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.35fr); gap: 48px; }
  .product-story { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 90px; }
  .product-studio__image { aspect-ratio: 1.6; }
  .product-photo-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .product-photo:hover img { transform: scale(1.035); } }
@media (max-width: 619px) {
  .product-summary .lead-copy { font-size: 16px; }
  .product-hero-grid { display: flex; flex-direction: column; }
  .product-summary { display: contents; }
  .product-intro { order: 1; }
  .product-studio { order: 2; width: 100%; }
  .product-offer { order: 3; }
  .product-studio__image { aspect-ratio: 1.5; }
  .product-model-meta { margin-bottom: 12px; }
  .product-summary .lead-copy { margin-bottom: 0; }
  .product-hero { padding-top: 12px; }
  .product-subnav__links { gap: 20px; }
}
.technical-group { border-bottom: 1px solid var(--line,#dedede); }
.technical-group summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:16px 0; cursor:pointer; font-weight:700; list-style:none; }
.technical-group summary::-webkit-details-marker { display:none; }
.technical-group[open] summary .icon-chevron { transform:rotate(90deg); }
.technical-group summary:focus-visible { outline:2px solid #cc0000; outline-offset:4px; }
.technical-group .spec-grid { margin:0 0 24px; }
.product-spec-source { margin-top:24px; color:var(--muted,#616161); font-size:14px; }