/* Public showroom direction: strong type, real machinery, compact shopping. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('assets/fonts/barlow-condensed-extrabold.woff') format('woff');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --paper: #f5f3ec;
  --ink: #58100f;
  --pine: #8a1518;
  --muted: #635650;
  --line: #e2dcd1;
  --sand: #ebe6d9;
  --clay: #a2342a;
  --display: 'Barlow Condensed', Impact, sans-serif;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1;
}
h1 { font-size: clamp(46px, 5.5vw, 78px); }
h2 { font-size: clamp(34px, 3.4vw, 49px); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.section { padding-block: 58px; }
.eyebrow { color: var(--clay); margin-bottom: 13px; letter-spacing: .19em; }
.section-heading { align-items: center; margin-bottom: 22px; }
.section-heading .text-link { font-size: 13px; color: var(--clay); }
.button { border-radius: 4px; font-weight: 600; }
.text-link { border-radius: 0; }
.preview-ribbon { min-height: 25px; padding-block: 3px; }
.site-header { background: #f5f3ecfa; }
.header-inner { height: 74px; }
.brand { font-family: var(--display); font-size: 37px; letter-spacing: .015em; text-transform: uppercase; }
.brand svg { width: 28px; height: 33px; }
.brand small { font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .4em; margin-top: 3px; }
.desktop-nav { gap: 30px; font-size: 13px; font-weight: 500; }
.desktop-nav a, .desktop-nav button { padding: 24px 0; position: relative; }
.desktop-nav a::after { bottom: 16px; }
.desktop-nav button:hover { color: var(--clay); }
.garage-link { font-size: 12px; }
.mobile-nav button { text-align: left; padding: 11px 0; font-size: 14px; }

/* A single, open photographic lead. The image is an unchanged Honda photo. */
.home-hero {
  max-width: 1600px;
  height: clamp(382px, 30.5vw, 470px);
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  background: #bdac86;
  border-bottom: 1px solid var(--line);
}
.home-hero-copy {
  width: 45.5%;
  height: 100%;
  position: relative;
  z-index: 1;
  padding: 35px 56px 32px 48px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 88% 56%, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.home-hero-copy .eyebrow { font-size: 12px; letter-spacing: .28em; margin-bottom: 14px; }
.home-hero-copy h1 { font-size: clamp(96px, 9.2vw, 137px); line-height: .84; letter-spacing: -.018em; margin-bottom: 21px; }
.home-hero-copy p { font-size: 16px; color: var(--ink); line-height: 1.45; }
.home-hero-copy .button-row { margin-top: 23px; gap: 22px; }
.home-hero-copy .button { min-height: 47px; padding: 12px 21px; }
.home-hero-copy .text-link { font-size: 13px; white-space: nowrap; padding-inline: 0; padding-bottom: 5px; }
.home-hero-photo { position: absolute; left: 37%; top: 0; bottom: 0; right: 0; overflow: hidden; }
.home-hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 59%; transform: translateX(7%) scale(1.1); transform-origin: 30% 60%; }
.home-hero-photo::after { content: ''; position: absolute; inset: 70% 0 0; background: linear-gradient(transparent, #2018156b); pointer-events: none; }
.home-hero-caption { position: absolute; bottom: 23px; right: 35px; color: white; display: flex; align-items: center; gap: 20px; z-index: 1; font-size: 13px; font-weight: 500; text-shadow: 0 1px 8px #0007; }
.home-hero-caption small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; }
.home-hero-caption > svg { border: 1px solid #ffffff8f; box-sizing: content-box; padding: 9px; border-radius: 50%; }

/* Shopping is immediately below the lead, with every category one tap away. */
.home-shopping { padding-top: 14px; }
.home-search { display: flex; align-items: stretch; min-height: 52px; padding: 5px; border: 1px solid #ded7cb; border-radius: 5px; background: #fdfcf8; gap: 5px; }
.home-category-field { display: flex; flex: 0 0 175px; border-right: 1px solid var(--line); }
.home-category-field select { width: 100%; border: 0; border-radius: 3px; background: var(--pine); color: white; font-size: 13px; padding: 10px 29px 10px 15px; margin-right: 11px; }
.home-query-field { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; padding-inline: 12px; }
.home-query-field input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); outline-offset: 6px; font-size: 13px; }
.home-query-field input::placeholder { color: #767068; opacity: 1; }
.home-search > .button { min-height: 42px; font-size: 12px; padding: 9px 17px; }
.category-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 11px; border-bottom: 1px solid var(--line); }
.category-rail .category-card { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 2px 13px; min-width: 0; overflow: hidden; }
.category-rail .category-card:first-child { padding-left: 0; }
.category-rail .category-card:last-child { border-right: 0; padding-right: 0; }
.category-rail .category-card:hover { transform: none; background: #f0ebe1; }
.category-photo { width: 75px; height: 61px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.category-rail .category-card img { width: 100%; height: 100%; object-fit: contain; margin: 0; padding: 0; }
.category-photo img.model-photo { --photo-display-scale: var(--photo-width-scale, 1); }
.category-name { font-size: 12px; line-height: 1.3; font-weight: 600; }
.category-name small { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; color: var(--muted); }
.category-arrow { font-size: 17px; margin-left: auto; padding-left: 4px; }

/* Frame transparent OEM canvases without changing or repainting the vehicle. */
.product-image > a { display: block; height: 100%; }
.product-image img, .vehicle-gallery > img { padding: 0; }
.product-image img.model-photo,
.vehicle-gallery > img.model-photo,
.category-photo img.model-photo,
.studio-machine-photo img.model-photo {
  transform: scale(var(--photo-display-scale, var(--photo-scale, 1))) translate(var(--photo-x, 0%), var(--photo-y, 0%));
}
.product-card:hover .product-image img.model-photo,
.category-card:hover .category-photo img.model-photo {
  transform: scale(calc(var(--photo-display-scale, var(--photo-scale, 1)) * 1.025)) translate(var(--photo-x, 0%), var(--photo-y, 0%));
}
.product-card { border-radius: 5px; border-color: #e3ddd2; background: #fcfbf7; }
.product-card:hover { box-shadow: 0 8px 22px #9e1b1b09; border-color: #cdbfb4; }
.product-image { height: 241px; background: radial-gradient(ellipse at 55% 72%, #e5dfd4 0, #ece7dc 49%, #f2efe7 100%); }
.product-image img { mix-blend-mode: normal; }
.card-body { padding: 18px 19px 15px; }
.card-eyebrow { font-size: 12px; margin-bottom: 5px; }
.card-body h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 29px; line-height: 1.05; }
.card-tagline { font-size: 12px; min-height: 34px; }
.card-specs { font-size: 12px; line-height: 1.5; gap: 8px; margin: 13px 0 16px; }
.card-price { padding-top: 13px; }
.card-price strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.card-price small { font-size: 12px; line-height: 1.45; }
.card-badge { font-size: 12px; top: 13px; left: 13px; }
.card-bottom { min-height: 45px; padding: 7px 19px; font-size: 12px; }
.card-detail-link { color: var(--clay); font-weight: 600; }
.card-detail-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.price-footnote { font-size: 12px; line-height: 1.6; }
.home-featured { padding-top: 26px; }
.home-featured .section-heading { margin-bottom: 18px; }
.home-featured h2 { font-size: 43px; }
.home-featured .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-featured .product-image { height: clamp(220px, 20vw, 284px); }
.home-featured .card-tagline, .home-featured .card-specs { display: none; }
.home-featured .card-body { padding: 15px 19px 14px; }
.home-featured .card-body h3 { font-size: 32px; }
.home-featured .card-price { border-top: 0; padding-top: 11px; }

/* Demonstrate the actual parts and the working quote-builder entry point. */
.build-studio { margin-top: 48px; padding: 34px 36px 0; background: #ece7da; border: 1px solid #e0d9cc; border-radius: 5px; overflow: hidden; }
.studio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 27px; border-bottom: 1px solid #ddd4c6; }
.studio-heading h2 { font-size: 51px; line-height: .98; }
.studio-heading .eyebrow { font-size: 12px; }
.studio-heading > p { max-width: 405px; font-size: 13px; line-height: 1.7; color: #695a4f; padding-bottom: 3px; }
.studio-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; }
.studio-machine { display: flex; flex-direction: column; padding-top: 22px; min-width: 0; }
.studio-model .eyebrow { margin-bottom: 3px; font-size: 12px; color: var(--muted); }
.studio-model h3 { font-family: var(--display); font-weight: 800; font-size: 33px; line-height: 1.1; letter-spacing: -.01em; }
.studio-model > span:last-child { font-size: 12px; color: #695a4f; }
.studio-machine-photo { display: flex; align-items: center; justify-content: center; height: 293px; margin-top: 0; overflow: hidden; }
.studio-machine-photo img { height: 100%; width: 100%; object-fit: contain; }
.studio-machine-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid #ddd4c6; padding: 16px 0; font-size: 12px; color: #695a4f; }
.studio-machine-footer b { margin-inline: 9px; color: #a39389; }
.studio-accessories { padding: 28px 0 26px; }
.studio-accessories > .eyebrow { font-size: 12px; color: #8a5a50; margin-bottom: 15px; }
.studio-accessory { display: flex; align-items: center; gap: 15px; padding: 12px 13px; background: #faf8f2; border: 1px solid #ded6c9; border-radius: 4px; margin-bottom: 10px; min-width: 0; }
.studio-accessory:hover { border-color: #a08a80; background: white; }
.studio-accessory > img { width: 87px; height: 68px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; }
.studio-accessory > span { min-width: 0; }
.studio-accessory strong { display: block; font-size: 13px; line-height: 1.35; text-transform: capitalize; }
.studio-accessory small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.studio-part-price { margin-left: auto; text-align: right; white-space: nowrap; font-size: 14px; font-weight: 600; }
.studio-part-price small { font-weight: 400; }
.studio-accessories > p { color: #766256; font-size: 12px; line-height: 1.6; margin: 12px 0 17px; }
.home-guide .guide-card h3 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.home-guide .guide-card p { font-size: 13px; }
.home-guide .guide-card .number { color: var(--clay); }

/* Carry the visual hierarchy through inventory, detail, and builder pages. */
.page-intro { padding-top: 34px; padding-bottom: 25px; }
.page-intro .eyebrow { margin-bottom: 10px; }
.page-intro p { font-size: 14px; }
.page-intro .breadcrumbs { margin-bottom: 24px; font-size: 12px; }
.shop-toolbar { padding-block: 17px; }
.shop-layout { grid-template-columns: 186px minmax(0, 1fr); gap: 32px; }
.filter-group h3 { font-size: 13px; font-weight: 600; }
.check-label { font-size: 12px; }
.filter-availability-note { font-size: 12px; line-height: 1.6; }
.chip { font-size: 12px; border-radius: 4px; }
.product-heading h1, .builder-main .product-heading h1 { font-size: clamp(39px, 4.3vw, 62px); }
.detail-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 42px; }
.vehicle-gallery { border-radius: 5px; background: radial-gradient(ellipse at 55% 72%, #e6e0d5 0, #eeeae0 49%, #f3f0e9 100%); overflow: hidden; }
.vehicle-gallery, .vehicle-gallery > img { height: clamp(360px, 34vw, 504px); min-height: 0; }
.vehicle-gallery > img { object-fit: contain; mix-blend-mode: normal; }
.gallery-label, .gallery-actions { z-index: 2; }
.gallery-label { font-size: 12px; }
.photo-note { font-size: 12px; line-height: 1.55; }
.gallery-thumbnails { margin-top: 13px; }
.detail-price { font-size: 39px; font-weight: 600; }
.detail-price-sub { font-size: 12px; }
.price-explainer { font-size: 12px !important; }
.key-spec small { font-size: 12px; }
.key-spec strong { font-size: 15px; }
.detail-tabs { top: 74px; }
.builder-layout { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); gap: 35px; }
.builder-main .vehicle-gallery, .builder-main .vehicle-gallery > img { height: clamp(355px, 33vw, 480px); min-height: 0; }
.builder-summary { top: 96px; border-radius: 5px; padding: 26px; background: #f0ebe1; }
.builder-summary h2 { font-size: 39px; }
.summary-subtitle { font-size: 12px !important; }
.summary-line { font-size: 13px; }
.summary-line small { font-size: 12px; }
.summary-total small { font-size: 12px; }
.summary-total strong { font-weight: 600; font-size: 39px; }
.summary-total p { font-size: 12px; }
.accessory-section h2 { font-size: 41px; }
.accessory-card { border-radius: 4px; padding: 15px; grid-template-columns: 105px 1fr auto; }
.accessory-image, .accessory-placeholder { width: 105px; height: 88px; }
.accessory-info h3 { font-size: 15px; font-weight: 600; }
.accessory-info p { font-size: 12px; }
.accessory-info .part-number, .accessory-detail { font-size: 12px; }
.accessory-purchase strong { font-size: 16px; }
.accessory-purchase small { font-size: 12px; }
.accessory-purchase button { min-height: 37px; font-size: 12px; }
.site-footer { margin-top: 16px; }
.footer-brand { font-size: 47px; }
.footer-brand small { font-size: 12px; }
.footer-top p { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: 0; }

@media (min-width: 1600px) {
  .home-hero-copy { padding-left: 92px; }
}
@media (max-width: 1200px) {
  .header-inner { gap: 20px; }
  .desktop-nav { gap: 23px; font-size: 12px; }
  .home-hero-copy { padding-left: 32px; padding-right: 42px; width: 46.5%; }
  .home-hero-copy .button-row { gap: 16px; }
  .home-hero-copy .button { padding-inline: 17px; font-size: 13px; }
  .home-hero-copy .text-link { font-size: 12px; }
  .category-photo { width: 60px; height: 57px; }
  .category-rail .category-card { gap: 8px; padding-inline: 10px; }
  .category-name { font-size: 12px; }
  .category-name small { font-size: 12px; }
  .category-arrow { display: none; }
  .product-grid { gap: 17px; }
  .product-image { height: 212px; }
  .home-featured .product-image { height: 243px; }
  .card-body { padding: 17px 16px 14px; }
  .card-body h3 { font-size: 27px; }
  .card-specs { font-size: 12px; }
  .card-price strong { font-size: 23px; }
  .card-bottom { padding-inline: 16px; }
  .build-studio { padding-inline: 27px; }
  .studio-layout { grid-template-columns: 1.08fr 1fr; gap: 26px; }
  .studio-accessory { gap: 10px; padding-inline: 11px; }
  .studio-accessory > img { width: 76px; }
  .studio-accessory strong { font-size: 12px; }
  .studio-part-price { font-size: 13px; }
}
@media (max-width: 960px) {
  .header-inner { height: 72px; }
  .brand { font-size: 32px; }
  .desktop-nav { gap: 15px; font-size: 12px; }
  .desktop-nav a, .desktop-nav button { padding-block: 23px; }
  .header-actions { gap: 5px; }
  .home-hero { height: 369px; }
  .home-hero-copy { padding: 27px 35px 28px 32px; width: 48%; }
  .home-hero-copy h1 { font-size: 94px; }
  .home-hero-copy p { font-size: 14px; }
  .home-hero-copy .button-row { gap: 15px; margin-top: 20px; }
  .home-hero-copy .button { padding-inline: 13px; font-size: 12px; gap: 9px; min-height: 43px; }
  .home-hero-copy .text-link { font-size: 12px; gap: 8px; }
  .home-hero-photo { left: 37%; }
  .home-hero-caption { right: 23px; bottom: 21px; font-size: 12px; gap: 14px; }
  .home-category-field { flex-basis: 149px; }
  .home-search > .button { font-size: 12px; padding-inline: 12px; }
  .home-query-field input { font-size: 12px; }
  .category-photo { width: 47px; }
  .category-rail .category-card { padding-inline: 8px; gap: 6px; }
  .category-name { font-size: 12px; }
  .category-name small { font-size: 12px; }
  .home-featured h2 { font-size: 38px; }
  .home-featured .product-grid { gap: 13px; }
  .home-featured .product-image { height: 215px; }
  .home-featured .card-body { padding-inline: 14px; }
  .home-featured .card-body h3 { font-size: 29px; }
  .home-featured .card-eyebrow { font-size: 12px; flex-wrap: wrap; gap: 2px 5px; }
  .home-featured .card-price strong { font-size: 23px; }
  .home-featured .card-price small { font-size: 12px; }
  .home-featured .card-bottom { padding-inline: 14px; font-size: 12px; }
  .shop-layout { grid-template-columns: 164px minmax(0, 1fr); gap: 23px; }
  .studio-heading { gap: 30px; }
  .studio-heading h2 { font-size: 44px; }
  .studio-heading > p { max-width: 330px; font-size: 12px; }
  .studio-layout { gap: 24px; grid-template-columns: 1fr 1.06fr; }
  .studio-machine-photo { height: 293px; }
  .studio-accessory { flex-wrap: wrap; gap: 2px 11px; }
  .studio-accessory > img { width: 65px; height: 66px; grid-row: 1/3; }
  .studio-accessory > span:nth-child(2) { flex: 1; }
  .studio-part-price { width: 100%; padding-left: 76px; text-align: left; font-size: 12px; }
  .studio-part-price small { display: inline; margin-left: 5px; }
  .studio-accessory > span:nth-child(2) small { font-size: 12px; }
  .studio-machine-footer { font-size: 12px; }
  .studio-machine-footer b { margin-inline: 4px; }
  .studio-machine-footer > svg { display: none; }
  .detail-layout { grid-template-columns: minmax(0, 1.2fr) minmax(270px, .85fr); gap: 26px; }
  .detail-tabs { top: 72px; }
  .builder-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .builder-summary { top: 91px; padding: 21px; }
  .builder-summary h2 { font-size: 35px; }
  .summary-total strong { font-size: 35px; }
  .accessory-card { grid-template-columns: 79px 1fr; gap: 12px; }
  .accessory-image, .accessory-placeholder { width: 79px; height: 73px; }
  .accessory-purchase { grid-column: 2; display: flex; gap: 10px; align-items: center; }
  .accessory-purchase button { margin: 0 0 0 auto; }
  .accessory-purchase small { font-size: 12px; }
}
@media (max-width: 720px) {
  .container { width: calc(100% - 36px); }
  .header-inner { height: 65px; }
  .brand { font-size: 31px; }
  .brand small { font-size: 12px; }
  .brand svg { width: 24px; height: 29px; }
  .header-actions { gap: 10px; }
  .preview-ribbon { font-size: 12px; min-height: 24px; }
  .home-hero { height: auto; display: flex; flex-direction: column; }
  .home-hero-copy { width: 100%; height: auto; padding: 26px 24px 27px; clip-path: none; order: 0; }
  .home-hero-copy .eyebrow { font-size: 12px; letter-spacing: .23em; margin-bottom: 11px; }
  .home-hero-copy h1 { font-size: clamp(57px, 12.5vw, 84px); line-height: 1; margin-bottom: 10px; }
  .home-hero-copy h1 br { display: none; }
  .home-hero-copy p { font-size: 14px; }
  .home-hero-copy .button-row { margin-top: 17px; gap: 21px; }
  .home-hero-copy .button { font-size: 12px; min-height: 44px; padding-inline: 16px; }
  .home-hero-copy .text-link { font-size: 12px; }
  .home-hero-photo { position: relative; inset: auto; width: 100%; height: 242px; order: 1; }
  .home-hero-photo > img { object-position: 20% 67%; transform: scale(1.08); transform-origin: 30% 63%; }
  .home-hero-caption { right: 21px; bottom: 17px; font-size: 12px; gap: 11px; }
  .home-hero-caption small { font-size: 12px; }
  .home-hero-caption > svg { width: 15px; height: 15px; padding: 7px; }
  .home-shopping { padding-top: 13px; }
  .home-search { flex-wrap: wrap; gap: 0; padding: 5px; }
  .home-category-field { flex-basis: 135px; border: 0; min-height: 40px; }
  .home-category-field select { margin: 0; font-size: 12px; padding-left: 12px; padding-right: 22px; background: #efe8dc; color: var(--pine); }
  .home-query-field { order: -1; flex: 1 0 100%; min-height: 41px; border-bottom: 1px solid var(--line); margin-bottom: 5px; padding-inline: 10px; }
  .home-query-field input { font-size: 12px; }
  .home-query-field > svg { width: 17px; }
  .home-search > .button { min-height: 39px; margin-left: auto; font-size: 12px; padding: 9px 13px; }
  .category-rail { display: grid; grid-template-columns: 1fr 1fr; padding-block: 0; }
  .category-rail .category-card, .category-rail .category-card:first-child, .category-rail .category-card:last-child { display: flex; flex: none; padding: 11px 10px; gap: 10px; border-right: 0; grid-column: auto; }
  .category-rail .category-card:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); }
  .category-rail .category-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .category-rail .category-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .category-photo { width: 56px; height: 50px; }
  .category-rail .category-card img { height: 100%; margin: 0; }
  .category-name { font-size: 12px; }
  .category-name small { font-size: 12px; }
  .home-featured { padding-top: 24px; }
  .home-featured .section-heading { gap: 18px; align-items: center; }
  .home-featured h2 { font-size: 33px; max-width: 235px; }
  .section-heading .text-link { font-size: 12px; margin-top: 0; }
  .home-featured .section-heading .text-link { white-space: normal; flex-shrink: 0; max-width: 87px; line-height: 1.4; align-items: flex-start; }
  .home-featured .product-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 84%)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; gap: 13px; padding-bottom: 8px; }
  .home-featured .product-card { scroll-snap-align: start; }
  .home-featured .product-image { height: 268px; }
  .home-featured .card-body { padding: 15px 17px; }
  .home-featured .card-body h3 { font-size: 32px; min-height: 0; }
  .home-featured .card-eyebrow { font-size: 12px; }
  .home-featured .card-price small { font-size: 12px; max-width: none; }
  .home-featured .card-price strong { font-size: 25px; }
  .home-featured .card-bottom { padding-inline: 17px; font-size: 12px; }
  .card-badge { font-size: 12px; }
  .product-card .save-button { width: 33px; height: 33px; top: 10px; right: 10px; }
  .card-body { padding: 15px 14px; }
  .card-body h3 { font-size: 27px; min-height: 0; }
  .card-eyebrow { font-size: 12px; }
  .card-tagline { font-size: 12px; min-height: 0; }
  .card-specs { font-size: 12px; min-height: 0; margin-block: 13px; gap: 6px; }
  .card-price { padding-top: 12px; }
  .card-price strong { font-size: 24px; }
  .card-price small { font-size: 12px; line-height: 1.4; max-width: none; }
  .card-price a { width: 30px; height: 30px; }
  .card-bottom { font-size: 12px; padding-inline: 14px; }
  .price-footnote { font-size: 12px; }
  .build-studio { margin-top: 30px; padding: 25px 21px 0; }
  .studio-heading { display: block; padding-bottom: 23px; }
  .studio-heading h2 { font-size: 44px; }
  .studio-heading h2 br { display: none; }
  .studio-heading > p { font-size: 12px; margin-top: 16px; max-width: 450px; }
  .studio-layout { grid-template-columns: 1fr; gap: 0; }
  .studio-machine { padding-top: 20px; }
  .studio-model h3 { font-size: 31px; }
  .studio-machine-photo { height: 281px; margin-top: -3px; }
  .studio-machine-footer { font-size: 12px; padding-block: 13px; }
  .studio-machine-footer b { margin-inline: 7px; }
  .studio-accessories { padding-top: 25px; }
  .studio-accessory { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 11px; padding: 12px 11px; }
  .studio-accessory > img { width: 74px; height: 63px; grid-row: auto; }
  .studio-accessory strong { font-size: 12px; }
  .studio-accessory small { font-size: 12px; }
  .studio-part-price { width: auto; padding-left: 0; text-align: right; font-size: 12px; }
  .studio-part-price small { display: block; margin-left: 0; }
  .studio-accessories > p { font-size: 12px; }
  .home-guide { padding-block: 38px; }
  .home-guide .section-heading { align-items: flex-start; gap: 24px; }
  .home-guide .section-heading h2 { font-size: 34px; max-width: 260px; }
  .home-guide .section-heading .text-link { white-space: normal; line-height: 1.4; max-width: 80px; }
  .home-guide .guide-card h3 { font-size: 28px; }
  .home-guide .guide-card p { font-size: 12px; }
  .page-intro { padding-block: 28px 20px; }
  .page-intro h1 { font-size: 48px; }
  .page-intro p { font-size: 13px; }
  .shop-layout { display: block; }
  .shop-layout .product-grid { gap: 15px; }
  .product-image { height: 211px; }
  .shop-toolbar .search-field { min-height: 47px; }
  .shop-toolbar .select-field, .select-field select { font-size: 12px; }
  .mobile-filter-button, .filter-group h3, .check-label { font-size: 12px; }
  .chip { font-size: 12px; }
  .product-heading h1, .builder-main .product-heading h1 { font-size: 43px; }
  .detail-layout, .builder-layout { display: flex; flex-direction: column; gap: 26px; }
  .vehicle-gallery, .vehicle-gallery > img,
  .builder-main .vehicle-gallery, .builder-main .vehicle-gallery > img { height: 330px; min-height: 0; padding: 0; }
  .gallery-label { font-size: 12px; }
  .photo-note { font-size: 12px !important; }
  .detail-price { font-size: 39px; }
  .detail-tabs { top: 65px; gap: 25px; }
  .detail-tabs a { font-size: 12px; }
  .detail-section h2 { font-size: 35px; }
  .builder-steps { font-size: 12px; gap: 17px; }
  .builder-summary { position: static; width: 100%; padding: 24px; }
  .builder-summary h2 { font-size: 38px; }
  .summary-total p { font-size: 12px; }
  .summary-total strong { font-size: 39px; }
  .accessory-section h2 { font-size: 37px; }
  .accessory-card { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .accessory-image, .accessory-placeholder { width: 82px; height: 79px; }
  .accessory-info h3 { font-size: 14px; }
  .accessory-info p { font-size: 12px; }
  .accessory-info .part-number, .accessory-detail { font-size: 12px; }
  .accessory-purchase { grid-column: 2; display: flex; align-items: center; text-align: left; gap: 8px; }
  .accessory-purchase strong { font-size: 14px; }
  .accessory-purchase button { min-height: 36px; margin: 0 0 0 auto; }
  .accessory-purchase small { font-size: 12px; }
  .footer-brand { font-size: 43px; }
  .footer-brand small { font-size: 12px; }
}
@media (max-width: 480px) {
  .shop-layout .product-grid { grid-template-columns: 1fr; }
  .shop-layout .product-image, .home-featured .product-image { height: auto; aspect-ratio: 1.22; }
  .shop-layout .product-image img.model-photo,
  .home-featured .product-image img.model-photo,
  .vehicle-gallery > img.model-photo,
  .studio-machine-photo img.model-photo {
    --photo-display-scale: var(--photo-width-scale, 1);
  }
  .shop-layout .card-body h3 { font-size: 31px; }
  .home-hero-copy { padding-inline: 23px; }
  .home-hero-copy h1 { font-size: 64px; }
  .home-hero-copy .button-row { gap: 18px; }
  .home-hero-photo { height: 229px; }
  .studio-accessory { grid-template-columns: 68px minmax(0, 1fr); gap: 4px 10px; }
  .studio-accessory > img { width: 68px; height: 67px; grid-row: 1/3; }
  .studio-part-price { grid-column: 2; text-align: left; margin-left: 0; }
  .studio-part-price small { display: inline; margin-left: 7px; }
  .studio-accessory > span:nth-child(2) small { display: none; }
  .vehicle-gallery, .vehicle-gallery > img,
  .builder-main .vehicle-gallery, .builder-main .vehicle-gallery > img { height: 306px; }
}
@media (max-width: 360px) {
  .home-hero-copy h1 { font-size: 58px; }
  .home-hero-copy .button-row { gap: 13px; }
  .home-hero-copy .button { font-size: 12px; padding-inline: 13px; }
  .home-hero-copy .text-link { font-size: 12px; }
  .home-featured h2 { font-size: 30px; }
  .build-studio { padding-inline: 17px; }
  .studio-machine-footer b { margin-inline: 4px; }
  .card-bottom { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-image img.model-photo,
  .category-card:hover .category-photo img.model-photo {
    transform: scale(var(--photo-display-scale, var(--photo-scale, 1))) translate(var(--photo-x, 0%), var(--photo-y, 0%));
  }
}

/* HOL ratings — the kiosk's honest-take bars, website edition */
.hol-ratings { margin-top: 34px; padding: 22px 24px 18px; background: #f0ebe1; border-radius: 9px; }
.ratings-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 15px; }
.ratings-head h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.ratings-tagline { font-style: italic; color: var(--muted); font-size: 14px; }
.stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 30px; }
.stat-bar { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 11px; font-size: 12px; }
.stat-label { color: var(--muted); }
.stat-track { height: 7px; background: #ded5c3; border-radius: 4px; overflow: hidden; }
.stat-fill { display: block; height: 100%; background: var(--pine); border-radius: 4px; }
.stat-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ratings-note { margin-top: 14px; font-size: 12px; color: var(--muted); }
@media (max-width: 720px) { .stat-bars { grid-template-columns: 1fr; } .hol-ratings { padding: 18px 16px 14px; } }