/* MV1 vision: the home page and the six service pages (vision-home.html). Page-only styles; the kit is vision.css.
   Tokens only. Classes are prefixed mvh- so they never fight the kit's own rules. */

/* App mode: the h1 is read but not shown (the app bar holds the title), so the first row starts closer to the tabs. */
html.mv-app .mv-hero + .mv-section{margin-top:24px}

/* Wash types: one tile per wash, the name and its price on one line and a grey line under it. */
.mvh-types{display:grid;gap:12px}
@media(min-width:744px){.mvh-types{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.mvh-type{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:76px;padding:16px 20px;border-radius:var(--radius-tile-lg);background:var(--surface-subtle);color:inherit;text-decoration:none;transition:background var(--motion-feedback)}
@media(hover:hover){.mvh-type:hover{background:var(--surface-hover)}}
.mvh-type__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.mvh-type__top b{min-width:0;font-size:var(--type-body);line-height:1.375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mvh-type__price{flex:none;font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-primary)}
.mvh-type__price strong{font-weight:600}
.mvh-type__line{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tires: the car and its factory size first (every tire on the page fits it), then two quiet links. */
.mvh-fit{margin-top:24px}
.mvh-fit__card{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 18px 12px 12px;border:1px solid var(--border-divider);border-radius:var(--radius-tile-lg);background:#fff;color:inherit;text-decoration:none;transition:border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
@media(hover:hover){.mvh-fit__card:hover{border-color:var(--border-choice);box-shadow:var(--shadow-card-white)}}
.mvh-fit__car{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;background:var(--mv-photo-tile);overflow:hidden}
.mvh-fit__car .mv-carimg{width:100%}
.mvh-fit__car .mv-carimg>img,.mvh-fit__car .mv-carimg>canvas{width:100%;height:100%;object-fit:contain}
.mvh-fit__car .mv-carimg>svg{width:94%;margin:0 auto}
.mvh-fit__text{min-width:0;display:flex;flex-direction:column}
.mvh-fit__kicker{font-size:.75rem;line-height:1rem;font-weight:600;color:var(--text-secondary)}
.mvh-fit__text b{font-size:var(--type-body);line-height:1.375rem;font-weight:600;text-wrap:balance}
.mvh-fit__text>span:last-child{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mvh-fit__go{color:var(--text-secondary)}
.mvh-fit__more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:10px;padding-left:4px;font-size:var(--type-meta);color:var(--text-secondary)}
.mvh-fit__more .mv-link{position:relative;font-size:var(--type-meta);font-weight:500;color:var(--text-primary)}
.mvh-fit__more .mv-link::after{content:"";position:absolute;inset:-12px -4px}
@media(max-width:743px){.mvh-fit__card{grid-template-columns:112px minmax(0,1fr) auto;gap:14px;padding-right:12px}}
@media(min-width:744px){.mvh-fit__card{grid-template-columns:200px minmax(0,1fr) auto;max-width:620px;padding:14px 24px 14px 14px}.mvh-fit__text b{font-size:1.125rem;line-height:1.5rem}}

/* Shop by brand: the makers' logos on quiet tiles that open the catalogue on that brand. */
.mvh-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:744px){.mvh-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}
.mvh-logo{display:grid;place-items:center;height:64px;padding:0 12px;border:1px solid var(--border-divider);border-radius:var(--radius-choice);background:#fff;text-decoration:none;color:var(--text-primary);transition:border-color var(--motion-feedback)}
.mvh-logo .mv-logo-img{max-width:100%}
.mvh-logo .mv-logo-txt{font-size:.8125rem;letter-spacing:.02em}
@media(hover:hover){.mvh-logo:hover{border-color:var(--text-primary)}}

/* Wraps and film: "Custom" (pick the parts yourself) as one quiet row under the presets. */
.mvh-custom{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border:1px solid var(--border-divider);border-radius:var(--radius-tile-lg);color:inherit;text-decoration:none;transition:border-color var(--motion-feedback)}
@media(hover:hover){.mvh-custom:hover{border-color:var(--text-primary)}}
.mvh-custom__ico{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--surface-subtle)}
.mvh-custom__text{flex:1;min-width:0;display:flex;flex-direction:column}
.mvh-custom__text b{font-size:var(--type-body);line-height:1.375rem;font-weight:600}
.mvh-custom__text span{font-size:var(--type-meta);line-height:var(--leading-meta);color:var(--text-secondary)}
.mvh-custom>.mv-ui{flex:none;color:var(--text-secondary)}
@media(min-width:1128px){.mvh-custom{max-width:560px}}

/* Detailing packages: real Panda photos as listing cards; the way into today's booking sits under them. */
.mvh-pkgs-go{margin-top:20px}