/* The viewport is the scrollport, not the non-scrolling rounded app shell. */
.app-shell:has(:is(#buySellScreen,#showroomListScreen,#publicSectionScreen,.rental-surface):not([hidden])){overflow:clip}
/* Gold stays in normal document flow; only section controls are sticky. */
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero),
#publicSectionScreen div:has(>.lorry-gold),
#publicSectionScreen div:has(>.section-gold){position:relative!important;top:auto;z-index:4;align-self:start;overflow-anchor:none}
/* Content, media loading and ad eligibility must never determine frame geometry. */
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero,.lorry-gold,.section-gold){
 box-sizing:border-box;height:var(--gold-frame-height,210px)!important;min-height:var(--gold-frame-height,210px)!important;max-height:var(--gold-frame-height,210px)!important;aspect-ratio:auto!important;contain:layout size;overflow:hidden;overflow-anchor:none;
}
#goldCars{--gold-frame-height:200px}
#showroomGold{--gold-frame-height:250px}
.rental-gold{--gold-frame-height:240px}
.office-gold-hero{--gold-frame-height:240px}
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero,.lorry-gold,.section-gold)>.gold-record-content{position:absolute;inset:0;min-height:0!important;height:100%;box-sizing:border-box}
:is(#goldCars,.section-gold) .gold-car,.lorry-gold .lorry-gold-slide,.rental-gold .rental-gold-slide{height:100%;min-height:0!important;aspect-ratio:auto!important}
:is(#goldCars,.section-gold) .gold-copy,.lorry-gold-copy,.rental-gold-copy{box-sizing:border-box;max-height:100%;overflow:hidden}

/* Compact content retains the same palette, imagery and carousel controls. */
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold){margin-block:8px!important}
:is(#goldCars,.section-gold) .gold-copy{min-height:0!important;height:100%;padding:36px 14px 32px!important;gap:2px;overflow:auto}
:is(#goldCars,.section-gold) .gold-title{font-size:18px;line-height:1.2}
:is(#goldCars,.section-gold) :is(.gold-city,.gold-specs,.gold-eyebrow){font-size:12px;line-height:1.3}
:is(#goldCars,.section-gold) .gold-price{font-size:21px;line-height:1.2}
:is(#goldCars,.section-gold) .gold-badge:not(.listing-promotion-badge){top:8px;inset-inline-end:10px;padding:4px 8px;font-size:12px}
.lorry-gold .lorry-gold-copy{min-height:0;height:100%;padding:8px 14px 32px;gap:2px;font-size:12px;overflow:auto}
.lorry-gold .lorry-gold-badge:not(.listing-promotion-badge){font-size:14px;padding:2px 8px}
.lorry-gold :is(.lorry-gold-heading,.lorry-gold-title){font-size:17px;line-height:1.2}
.lorry-gold .lorry-gold-price{font-size:21px}.lorry-gold .lorry-gold-cta{padding:5px 9px}
.rental-gold .rental-gold-copy{height:100%;padding:40px 14px 32px;gap:3px;overflow:auto}
.rental-gold .rental-gold-copy>strong{font-size:19px;line-height:1.2}
.rental-gold .rental-gold-copy :is(small,span){font-size:12px;line-height:1.3}
.rental-gold .rental-gold-badge:not(.listing-promotion-badge){top:8px;padding:4px 8px;font-size:12px}
.rental-gold .rental-price-row{padding-top:4px;margin-top:0}.rental-gold .rental-price-row strong{font-size:18px}
#showroomListScreen .showroom-gold-copy{inset-inline:18px;bottom:45px;gap:3px;max-height:110px;overflow:auto}
#showroomListScreen .showroom-gold-name{font-size:21px;line-height:1.15;display:block;overflow:visible}
#showroomListScreen .showroom-gold-meta{font-size:13px;line-height:1.3}
#showroomListScreen .showroom-gold-eyebrow{font-size:11px}
#showroomListScreen .showroom-gold.is-empty{padding:125px 18px 12px}
#showroomListScreen .showroom-gold.is-empty h2{font-size:20px;margin:4px 0}
#showroomListScreen .showroom-gold.is-empty p{font-size:13px;line-height:1.3}
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) :is(.gold-car>img,.rental-gold-media img,.lorry-gold-slide>img){object-fit:contain!important}
#showroomGold .showroom-gold-photo{object-fit:contain}
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) .home-ad-copy{padding:10px 14px 36px;max-height:100%;overflow:auto;box-sizing:border-box}
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) .home-ad-copy strong{font-size:18px}
/* Keep navigation below the text rather than over compact prices/titles. */
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) :is(.gold-prev,.gold-next,.rental-gold-prev,.rental-gold-next,.lorry-prev,.lorry-next){top:auto!important;bottom:2px;width:30px;height:30px;font-size:23px}
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) :is(.gold-next,.rental-gold-next,.lorry-next){right:48px!important;left:auto}
:is(#goldCars,.rental-gold,.lorry-gold,.section-gold) :is(.gold-dots,.rental-gold-dots,.lorry-dots){left:48px;right:86px;bottom:2px;max-height:30px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#showroomGold .gold-ad-slide .section-home-ad-media{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#showroomGold .gold-ad-slide:has(video) .section-home-ad-link{top:125px}
/* Swipe replaces visible arrow controls; dots use the released horizontal space. */
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero,.lorry-gold,.section-gold) :is(.gold-prev,.gold-next,.showroom-gold-arrow,.rental-gold-prev,.rental-gold-next,.office-gold-prev,.office-gold-next,.lorry-prev,.lorry-next){display:none!important}
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero,.lorry-gold,.section-gold){touch-action:pan-y pinch-zoom}
:is(#goldCars,#showroomGold,.rental-gold,.office-gold-hero,.lorry-gold,.section-gold) :is(.gold-dots,.showroom-gold-dots,.rental-gold-dots,.office-gold-dots,.lorry-dots){left:12px!important;right:12px!important;padding-inline:32px;box-sizing:border-box}

/* Existing public section controls: preserve their normal-flow footprint. */
.app-shell:has(:is(#buySellScreen,#showroomCityScreen,#showroomListScreen,#publicSectionScreen):not([hidden])){--section-header-height:56px;--section-safe-top:env(safe-area-inset-top,0px);overflow:clip}
.app-shell:has(:is(#buySellScreen,#showroomCityScreen,#showroomListScreen,#publicSectionScreen):not([hidden]))>.top-header{position:sticky;top:var(--section-safe-top);z-index:40;background:#fff}
.app-shell:has(:is(#buySellScreen,#showroomCityScreen,#showroomListScreen,#publicSectionScreen):not([hidden]))>.top-header::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:var(--section-safe-top);background:inherit;pointer-events:none}
.app-shell.buy-car-page{--section-header-height:44px}
.app-shell:has([data-rental-view="rental-offices"]:not([hidden])){--section-header-height:40px}
/* The showroom header originally overlays its hero: retain that exact footprint. */
.app-shell:has(#showroomListScreen:not([hidden])){--section-header-height:48px}
.app-shell:has(#showroomListScreen:not([hidden]))>.top-header{left:auto;right:auto;margin:6px 16px -54px;background:#f7f9fd}
#publicSectionScreen :is(.lorry-toolbar,.rental-market-toolbar){position:sticky;top:calc(var(--section-safe-top) + var(--section-header-height));z-index:30;background:#fff}
/* Existing filter row and showroom back control remain usable while pinned. */
.app-shell:has(:is(#buySellScreen,#showroomCityScreen,#showroomListScreen,#publicSectionScreen):not([hidden]))>.search-row{position:sticky;top:calc(var(--section-safe-top) + var(--section-header-height));z-index:30;background:#fff}
#showroomListScreen>.showroom-page-header{position:sticky;top:calc(env(safe-area-inset-top,0px) + 4px);z-index:41;margin:40px 0 -80px 16px;height:40px}
.app-shell:has(:is(#buySellScreen,#showroomCityScreen,#showroomListScreen,#publicSectionScreen):not([hidden]))>.side-drawer{position:fixed;width:min(100%,510px);margin-inline:auto}
/* Stack the existing Gold frame below all visible control rows. Pin the
   dedicated slot where a carousel has a same-height wrapper. */
:is(#goldCars,#showroomGold,.rental-gold),
#publicSectionScreen div:has(>.lorry-gold),
#publicSectionScreen div:has(>.section-gold),
#publicSectionScreen .office-feature-slot{
 position:sticky!important;top:calc(var(--section-safe-top,0px) + var(--section-controls-height,var(--section-header-height,56px)));z-index:20;align-self:start;overflow-anchor:none;
}
#publicSectionScreen .office-feature-slot>.office-gold-hero{position:relative!important;top:auto}