/* Transparent vehicle artwork stays complete within the existing model row. */
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model>img.brand-model-render{object-fit:contain;background:#000;padding:10px 14px;width:100%;height:190px;box-sizing:border-box}
@media(max-width:650px){:is(.brand-rollout-page,.acura-model-card-standard) .acura-model>img.brand-model-render{height:180px;padding:10px}}

/* Reuse the original red artwork; present its baked-in labels as readable HTML. */
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-services.model-recommendations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px;margin-top:auto;margin-bottom:24px;padding-top:18px}
.model-recommendations li{min-width:0}
:is(.brand-rollout-page,.acura-model-card-standard) .model-recommendations a{display:grid;grid-template-rows:62px minmax(3.6em,auto);gap:8px;justify-items:center;align-content:start;color:#fff;font-size:.875rem;line-height:1.2;text-align:center;text-decoration:none;border-radius:2px;padding:4px 0}
.model-recommendations .model-recommendation-art{display:block;width:62px;height:59px;overflow:hidden;align-self:center}
.model-recommendation-art img{display:block;width:62px!important;height:auto!important;max-width:none;aspect-ratio:228/300;object-fit:contain;background:transparent}
.model-recommendation-label{display:block;max-width:100%;font-weight:600}
:is(.brand-rollout-page,.acura-model-card-standard) .model-recommendations a:hover{color:#ff94a7;background:#242429}
:is(.brand-rollout-page,.acura-model-card-standard) .model-recommendations a:focus-visible{outline:2px solid #ff94a7;outline-offset:3px}
@media(min-width:561px) and (max-width:720px),(max-width:400px){:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-services.model-recommendations{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep a complete model card readable within a normal desktop viewport. */
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model>img.brand-model-render{height:190px;padding:10px 14px}
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-body{padding:18px}
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-body h3{font-size:1.6rem;line-height:1.15;margin:0 0 10px}
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model .porsche-model-description{line-height:1.4;margin:0 0 12px}
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-services.model-recommendations{padding-top:4px;margin-bottom:12px}
:is(.brand-rollout-page,.acura-model-card-standard) .model-recommendations a{grid-template-rows:44px minmax(3.6em,auto);gap:5px;padding:2px 0}
.model-recommendations .model-recommendation-art{width:44px;height:42px}
.model-recommendation-art img{width:44px!important}
:is(.brand-rollout-page,.acura-model-card-standard) .acura-model .btn{padding:11px 14px;min-height:44px;display:flex;align-items:center;justify-content:center}
@media(min-width:1101px) and (max-height:760px){:is(.brand-rollout-page,.acura-model-card-standard) .acura-carousel .acura-model{flex-basis:calc((100% - 24px)/2)}:is(.brand-rollout-page,.acura-model-card-standard) .model-recommendations a{grid-template-rows:44px minmax(2.4em,auto)}}
@media(max-width:650px){:is(.brand-rollout-page,.acura-model-card-standard) .acura-model>img.brand-model-render{height:180px;padding:10px}}
@media(max-width:560px){:is(.brand-rollout-page,.acura-model-card-standard) .acura-model-body{padding:16px}}

/* Acura retains its full model-specific context within the compact card rows. */
.acura-model-card-standard .acura-model .eyebrow{font-size:.875rem;line-height:1.2;letter-spacing:.04em;min-height:var(--model-card-subtitle,0px);margin:0 0 10px}
.acura-model-card-standard .acura-model .acura-model-note{font-size:1rem;line-height:1.4;min-height:var(--model-card-note,0px);margin:0 0 12px}
.acura-model-card-standard .model-recommendations-three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Short supporting lines sit beneath Bentley model names, as on the Acura cards. */
.has-model-supporting-lines .acura-model-body{padding:16px}
.has-model-supporting-lines .acura-model-body h3{margin-bottom:6px}
.has-model-supporting-lines .acura-model .model-card-supporting-line{font-size:.875rem;line-height:1.2;letter-spacing:.04em;min-height:1.2em;margin:0 0 8px;gap:8px}
.has-model-supporting-lines .model-card-supporting-line:before{width:20px}
.has-model-supporting-lines .acura-model-services.model-recommendations{padding-top:2px;margin-bottom:10px}
@media(min-width:561px) and (max-width:720px){.has-model-supporting-lines .acura-model .model-card-supporting-line{min-height:2.4em}}

.model-recommendation-art.model-recommendation-square img{height:42px!important;aspect-ratio:1;object-fit:contain}

/* October 31 model recommendations: preserve approved glyphs; theme monochrome
   variants in brand red. This rule applies only to model-card service icons. */
.model-recommendations .model-recommendation-square[style*="--model-icon"]{background:var(--model-icon-backdrop,#fff);border-radius:2px}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
 .model-recommendations .model-recommendation-square[style*="--model-icon"]{background:#c8102d;-webkit-mask:var(--model-icon) center/contain no-repeat;mask:var(--model-icon) center/contain no-repeat}
 .model-recommendations .model-recommendation-square[style*="--model-icon"] img{opacity:0}
}