/* Painted port scenes and cargo stay separate from every interaction target. */
.commerce-panorama{position:relative;overflow:hidden;margin:0;border-radius:11px;background:#d7e4ef;pointer-events:none}
.commerce-panorama img{display:block;width:100%;height:100%;object-fit:cover}
.commerce-panorama-strip{height:clamp(145px,16vw,210px);margin:0 0 22px;border:1px solid #c2d2e3}
.painted-commerce-scene{position:relative;display:block;isolation:isolate;overflow:hidden;min-height:240px;padding:0;border-color:#afc3d8;background:#304e70}
.painted-commerce-scene>.commerce-panorama{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:-2}
.painted-commerce-scene:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#102d4aeb 0%,#18354a66 44%,#18354a00 78%)}
.commerce-scene-caption{position:absolute;left:0;bottom:0;padding:25px 28px;max-width:76%}
.commerce-scene-caption h2{font:27px/1.35 var(--display);color:#fff;margin:0 0 8px;text-shadow:0 2px 6px #12304c88}
.commerce-scene-caption p{font-size:12px;line-height:1.7;color:#e4edf6;margin:0}
.quay-scene .quay-buildings{position:absolute;right:23px;bottom:16px;align-items:end;gap:10px;margin:0;z-index:1}
.quay-scene .quay-building,.quay-scene .quay-building:nth-child(even){width:67px;height:auto;display:flex;flex-direction:column;justify-content:end;gap:3px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.quay-building .quay-building-art{width:67px;height:77px;object-fit:contain;filter:saturate(.5) brightness(.7);opacity:.85}
.quay-building.lit .quay-building-art{filter:drop-shadow(0 4px 8px #06203a80);opacity:1}
.quay-building small{padding:2px 8px;min-width:37px;text-align:center;border-radius:4px;background:#153553c9;color:#e7eff7;font-size:10px}
.painted-estate{overflow:hidden}
.commerce-building-portrait{display:flex;align-items:center;justify-content:center;align-self:stretch;height:154px;margin:-21px -21px 5px;padding:10px 18px 0;background:linear-gradient(0deg,#e4edf5,#f1f6fa);border-bottom:1px solid #dce6f0}
.commerce-building-portrait .estate-building-art{display:block;width:100%;height:100%;max-width:235px;object-fit:contain;filter:drop-shadow(0 7px 7px #24496818)}
.painted-estate.built .commerce-building-portrait{background:linear-gradient(0deg,#dbe9f5,#edf4fa)}
.public-work .commerce-building-portrait{height:174px;margin:-23px -23px 3px}
.commerce-goods{display:inline-block;flex:none;width:49px;height:49px;object-fit:contain;vertical-align:middle}
.warehouse-row .warehouse-cargo{display:flex;align-items:center;gap:11px;min-width:0}
.warehouse-cargo>div{min-width:0}
.warehouse-cargo small{white-space:nowrap}
.manifest-cargo>span{display:flex;align-items:center;gap:12px;min-width:0}
.manifest-cargo .commerce-goods{width:70px;height:65px}
.recipe-art-heading{display:flex;align-items:center;gap:12px;min-width:0}
.recipe-art-heading .recipe-product{display:block;flex:none;width:54px;height:54px;object-fit:contain}
.recipe-art-heading h3{display:block;min-width:0;margin:0;font-size:16px;line-height:1.5}
.recipe-art-heading h3 small{display:block;margin-top:4px}
.flotilla-banner.painted-commerce-scene{min-height:245px}
.flotilla-banner.painted-commerce-scene>.btn{position:absolute;right:23px;top:22px;margin:0;background:#f9fcfff0;color:#2d547a;border-color:#d9e5ef;z-index:1;box-shadow:0 2px 8px #14355325}
.commerce-fleet-offer .ship-drawing{display:block;align-self:stretch;width:100%;height:145px;margin:-4px 0 1px;padding:0;border:0;border-radius:0;background:none;object-fit:contain;filter:drop-shadow(0 7px 6px #23496820)}
.council-banner.painted-commerce-scene{min-height:275px}
.council-banner .commerce-scene-caption{max-width:100%;padding-top:50px}
.council-banner .council-metrics{margin-top:14px;gap:12px 25px;color:#dbe8f5;line-height:1.6}
.council-banner .council-metrics b{color:#fff}

@media(max-width:1150px){
  .quay-scene .commerce-scene-caption{max-width:65%}
  .quay-scene .quay-buildings{gap:3px;right:17px}
  .quay-scene .quay-building,.quay-scene .quay-building:nth-child(even){width:53px}
  .quay-building .quay-building-art{width:53px;height:65px}
  .public-work .commerce-building-portrait{margin:-18px -18px 3px}
}
@media(max-width:700px){
  .commerce-panorama-strip{height:145px;margin-bottom:17px}
  .painted-commerce-scene{min-height:205px}
  .commerce-scene-caption{max-width:100%;padding:20px}
  .commerce-scene-caption h2{font-size:23px}
  .quay-scene .commerce-scene-caption{max-width:100%}
  .quay-scene .quay-buildings{display:none}
  .commerce-building-portrait{height:133px;margin:-17px -17px 3px;padding:8px 10px 0}
  .commerce-goods{width:39px;height:39px}
  .warehouse-row{gap:6px}
  .warehouse-row .warehouse-cargo{gap:7px}
  .warehouse-cargo small{font-size:9px}
  .warehouse-row>div:last-child{gap:5px}
  .warehouse-row .btn{min-width:55px;padding-left:8px;padding-right:8px}
  .manifest-cargo .commerce-goods{width:58px;height:55px}
  .manifest-cargo>span{gap:8px}
  .recipe-art-heading{gap:10px}
  .recipe-art-heading .recipe-product{width:46px;height:46px}
  .recipe-art-heading h3{font-size:15px}
  .flotilla-banner.painted-commerce-scene{min-height:225px}
  .flotilla-banner.painted-commerce-scene>.btn{right:16px;top:16px;font-size:10px;padding:8px 11px}
  .commerce-fleet-offer .ship-drawing{height:160px}
  .fleet-vessel .vessel-heading{flex-wrap:wrap}
  .fleet-vessel .vessel-heading .ship-drawing{display:block;width:99px;height:79px;flex:none;padding:0;background:none;border:0}
  .fleet-vessel .vessel-heading>div{gap:10px}
  .fleet-vessel .vessel-heading h2{font-size:22px}
  .council-banner.painted-commerce-scene{min-height:265px}
  .council-banner .commerce-scene-caption{padding:20px}
  .council-banner .council-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 15px;font-size:10px}
  .council-banner .council-metrics b{font-size:17px}
  .public-work .commerce-building-portrait{height:165px}
}