#lots{container:lots / inline-size;--bg:var(--paper);--alt:var(--surface);--brown:var(--muted);--faint:var(--muted);--dark:var(--ink);--serif:var(--font-display);--sans:var(--font-body);--latin:var(--font-display);font:400 13px/1.65 var(--font-body);color:var(--ink)}
#lots button,#lots input{font: inherit;}
#lots button{cursor: pointer;}
#lots button:disabled{cursor: not-allowed; opacity: 0.37;}
#lots button:focus-visible,#lots input:focus-visible{outline: rgb(136, 114, 98) solid 2px; outline-offset: 3px;}
#lots img{object-fit: cover; width: 100%; height: 100%; display: block;}
#lots a{color: inherit; text-decoration: none;}
#lots .kicker,#lots .overline{font-size: 10px; letter-spacing: 0.2em; font-weight: 650; text-transform: uppercase; color: var(--brown);}
#lots h2,#lots h3,#lots p{margin-top: 0px;}
#lots .stage{background: var(--bg); max-width: 1250px; margin: auto; overflow: hidden; position: relative; min-height: 400px; box-shadow: rgba(52, 44, 36, 0.03) 0px 13px 29px;}
#lots .h2{font: 400 clamp(30px,3.5vw,53px)/1.16 var(--serif); letter-spacing: -0.04em; margin: 16px 0px 0px;}
#lots .note{font-size: 12px; color: var(--brown); line-height: 1.8;}
#lots .fine{font-size: 10px; color: var(--brown); letter-spacing: 0.06em;}
#lots .rule{border-top: 1px solid var(--line);}
#lots .btn{border: 1px solid var(--ink); background: var(--ink); color: white; font-size: 11px; font-weight: 600; letter-spacing: 0.045em; padding: 15px 22px; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 45px; white-space: nowrap;}
#lots .btn:hover{background: rgb(81, 73, 63); border-color: rgb(81, 73, 63);}
#lots .btn.ghost{background: transparent; color: var(--ink); border-color: rgb(170, 164, 154);}
#lots .btn.ghost:hover{background: var(--alt);}
#lots .arrowlink{border: 0px; background: transparent; padding: 5px 0px; color: var(--ink); font-size: 11px; display: inline-flex; gap: 15px; align-items: center; white-space: nowrap;}
#lots .arrowlink span{font-size: 19px; font-weight: 400; line-height: 0;}
#lots .arrowlink:hover{text-decoration: underline; text-underline-offset: 4px;}
#lots .chipRow{display: flex; gap: 8px; flex-wrap: wrap; align-items: center;}
#lots .chip{border: 1px solid var(--line); color: var(--brown); padding: 10px 14px; background: transparent; font-size: 11px; line-height: 1.2; min-height: 37px;}
#lots .chip:hover{border-color: var(--ink);}
#lots .chip.active{background: var(--dark); border-color: var(--dark); color: white;}
#lots .badge{display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 6px 8px; background: var(--alt); color: var(--brown); white-space: nowrap;}
#lots .badge.available{background: rgb(228, 233, 224); color: rgb(78, 97, 81);}
#lots .badge.reserved{background: rgb(237, 229, 215); color: rgb(138, 115, 90);}
#lots .badge.sold{background: rgb(234, 232, 229); color: rgb(141, 138, 134);}
#lots .price{font: 400 25px/1.1 var(--serif); white-space: nowrap; letter-spacing: -0.035em;}
#lots .price small{font: 500 10px var(--sans); letter-spacing: 0.08em; color: var(--brown); margin-left: 4px;}
#lots .numberfont{font: 400 18px var(--latin);}
#lots .logoWord{font-family: var(--latin); letter-spacing: 0.06em; font-size: 15px;}
#lots .empty{padding: 27px; color: var(--brown); font-size: 12px; border: 1px dashed var(--line); margin-top: 12px;}
#lots .v1head{padding: 54px 55px 30px; display: flex; justify-content: space-between; align-items: end; gap: 30px;}
#lots .v1head .note{max-width: 245px; text-align: right; margin: 0px;}
#lots .v1filter{padding: 0px 55px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px;}
#lots .v1inner{display: grid; grid-template-columns: minmax(0px, 1.63fr) minmax(280px, 0.9fr); border-top: 1px solid var(--line);}
#lots .v1tableWrap{min-width: 0px; padding: 0px 0px 24px; border-right: 1px solid var(--line);}
#lots .v1grid{display: grid; grid-template-columns: 1.05fr 1.15fr 0.6fr 0.95fr 1.1fr 1.3fr; align-items: center; gap: 12px; padding: 15px 23px; min-width: 0px;}
#lots .v1tableHead{font: 650 9px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); border-bottom: 1px solid var(--line); white-space: nowrap;}
#lots .v1tableBody{min-height: 335px;}
#lots .v1row{border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; background: transparent; width: 100%; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink); transition: background 0.18s; min-height: 66px;}
#lots .v1row:hover{background: rgb(241, 238, 232);}
#lots .v1row.active{background: rgb(235, 232, 225); box-shadow: inset 3px 0 0 var(--ink);}
#lots .v1row span{font-size: 10px; white-space: nowrap;}
#lots .v1row .lotNo{font: 400 14px var(--latin);}
#lots .v1row .nm{font-weight: 600;}
#lots .v1row .vprice{font: 600 11px var(--sans);}
#lots .v1row .statusDot{font-size: 10px; white-space: nowrap;}
#lots .v1row .statusDot::before{content: ""; width: 5px; height: 5px; background: rgb(97, 124, 105); border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: 2px;}
#lots .v1row .statusDot.reserved::before{background: rgb(183, 155, 118);}
#lots .v1row .statusDot.sold::before{background: rgb(179, 176, 170);}
#lots .v1tableBottom{padding: 18px 23px 0px; display: flex; justify-content: space-between; align-items: center; gap: 16px;}
#lots .v1preview{padding: 24px 25px 27px; min-width: 0px;}
#lots .previewtop{display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line);}
#lots .planPanel{min-height: 237px; display: flex; align-items: center; justify-content: center; background: rgb(240, 238, 232); overflow: hidden; margin-top: 16px;}
#lots .planPanel svg{width: 100%; max-height: 244px; height: auto; display: block; mix-blend-mode: multiply;}
#lots .previewinfo{display: flex; justify-content: space-between; align-items: end; gap: 10px; padding-top: 14px;}
#lots .previewinfo h3{font: 400 18px var(--serif); margin: 0px 0px 5px;}
#lots .previewinfo p{font-size: 10px; color: var(--brown); margin: 0px;}
#lots .previewinfo .arrowlink{font-size: 11px;}
#lots .v1previewPhoto{height: 175px; position: relative; margin-top: 22px; overflow: hidden; background: var(--alt);}
#lots .v1previewPhoto::after{content: ""; position: absolute; inset: 40% 0px 0px; background: linear-gradient(transparent, rgba(23, 20, 18, 0.26));}
#lots .v1previewPhoto span{position: absolute; right: 12px; bottom: 10px; color: white; font-size: 9px; letter-spacing: 0.14em; z-index: 1;}
#lots .v2{padding: 54px 55px 55px;}
#lots .v2top{display: flex; justify-content: space-between; align-items: end; gap: 30px;}
#lots .v2top .note{max-width: 240px; text-align: right; margin: 0px;}
#lots .v2controls{display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px 0px 25px; border-bottom: 1px solid var(--line);}
#lots .carouselbuttons{display: flex; gap: 8px;}
#lots .carouselbuttons button{border: 1px solid var(--line); width: 41px; height: 41px; background: transparent; color: var(--ink); font-size: 22px;}
#lots .carouselbuttons button:hover{background: var(--alt);}
#lots .cards3{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 17px; margin-top: 25px; min-height: 440px;}
#lots .unitCard{border: 1px solid var(--line); background: rgb(247, 245, 241); min-width: 0px; text-align: left; color: var(--ink); padding: 0px; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column;}
#lots .unitCard:hover{transform: translateY(-3px); box-shadow: rgba(50, 39, 30, 0.08) 0px 15px 24px;}
#lots .unitCard .visual{position: relative; aspect-ratio: 1.16 / 1; min-height: 185px; overflow: hidden; background: var(--alt);}
#lots .unitCard .visual img{transition: transform 0.35s;}
#lots .unitCard:hover .visual img{transform: scale(1.045);}
#lots .unitCard .visual .flag{position: absolute; left: 14px; top: 14px; background: var(--bg); font-size: 9px; padding: 7px 11px; color: var(--ink);}
#lots .unitCard .content{padding: 19px 19px 16px; display: flex; flex: 1 1 0%; flex-direction: column;}
#lots .unitCard .titleline{display: flex; justify-content: space-between; align-items: center; gap: 14px;}
#lots .unitCard .titleline .id{font: 400 22px var(--latin);}
#lots .unitCard .titleline .badge{font-size: 9px;}
#lots .unitCard .details{font-size: 10px; letter-spacing: 0.03em; color: var(--brown); padding: 13px 0px 15px; flex: 1 1 0%; min-height: 55px;}
#lots .unitCard .cardbottom{border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; align-items: end; gap: 10px;}
#lots .unitCard .cardbottom .price{font-size: 20px;}
#lots .unitCard .openArrow{font-size: 23px; line-height: 1;}
#lots .v2foot{display: flex; justify-content: space-between; margin-top: 24px; align-items: center; font-size: 10px; color: var(--brown);}
#lots .v3header{padding: 54px 55px 30px; display: flex; justify-content: space-between; align-items: end; gap: 20px;}
#lots .v3header .note{max-width: 255px; text-align: right; margin: 0px;}
#lots .v3body{display: grid; grid-template-columns: 243px minmax(0px, 1fr) 276px; border-top: 1px solid var(--line); min-height: 530px;}
#lots .v3left{border-right: 1px solid var(--line); padding: 24px 0px;}
#lots .v3left .overline{padding: 0px 22px 17px; display: block;}
#lots .lotnav{display: flex; flex-direction: column; max-height: 447px; overflow: auto;}
#lots .lotnav button{padding: 14px 19px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); text-align: left; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--ink);}
#lots .lotnav button:hover{background: rgb(240, 238, 233);}
#lots .lotnav button.active{background: var(--alt); box-shadow: inset 3px 0 var(--ink);}
#lots .lotnav button strong{font: 400 18px var(--latin);}
#lots .lotnav button small{font-size: 10px; display: block; color: var(--brown);}
#lots .lotnav button .sideArea{font-size: 11px; white-space: nowrap;}
#lots .v3main{padding: 24px; min-width: 0px;}
#lots .v3switch{display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 18px; gap: 10px;}
#lots .texttabs{display: flex; gap: 22px;}
#lots .texttabs button{border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: transparent; color: var(--brown); padding: 5px 0px 8px; font-size: 11px;}
#lots .texttabs button.active{border-bottom-color: var(--ink); color: var(--ink);}
#lots .v3big{height: 386px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgb(240, 238, 232); margin-top: 19px;}
#lots .v3big svg{width: 100%; height: auto; max-height: 350px;}
#lots .v3big img{object-fit: cover; width: 100%; height: 100%;}
#lots .v3cap{display: flex; justify-content: space-between; gap: 8px; margin-top: 13px; font-size: 10px; color: var(--brown);}
#lots .v3right{background: rgb(239, 235, 229); padding: 26px 24px; display: flex; flex-direction: column;}
#lots .v3right h3{font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; line-height: 1.2; margin: 9px 0px 16px;}
#lots .v3metrics{display: grid; grid-template-columns: 1fr 1fr; gap: 19px 12px; margin: 0px 0px 22px;}
#lots .metric label{display: block; font-size: 9px; letter-spacing: 0.1em; color: var(--brown); margin-bottom: 4px; text-transform: uppercase;}
#lots .metric strong{font: 400 17px var(--latin);}
#lots .v3right .statusPrice{padding-top: 18px; margin-top: auto; border-top: 1px solid rgb(202, 195, 185);}
#lots .v3right .price{margin: 16px 0px 21px; font-size: 31px;}
#lots .v3right .btn{width: 100%;}
#lots .v4{padding: 52px 55px 48px;}
#lots .v4top{display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 25px; border-bottom: 1px solid var(--line);}
#lots .v4top .note{max-width: 270px; margin: 0px; text-align: right;}
#lots .elevation{display: grid; grid-template-columns: 390px 1fr; gap: 48px; margin-top: 32px; align-items: start;}
#lots .elevationPreview{background: rgb(236, 232, 225); position: relative; display: flex; align-items: stretch; justify-content: center; padding: 20px 21px 24px; min-height: 487px;}
#lots .elevLabel{display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.12em; font-size: 9px; color: var(--brown); padding: 8px 0px; white-space: nowrap;}
#lots .tower{width: 202px; border-width: 12px 7px 7px; border-style: solid; border-color: rgb(116, 110, 102); display: flex; flex-direction: column; background: rgb(211, 204, 194); margin: auto;}
#lots .floor{flex: 1 1 0%; min-height: 13px; display: grid; grid-template-columns: 29px 1fr; gap: 5px; background: rgb(217, 212, 204); border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(175, 167, 158); border-image: none; padding: 0px 4px 0px 5px; color: rgb(148, 139, 129); align-items: center; position: relative; width: 100%; text-align: left;}
#lots .floor:not(:disabled):hover{background: rgb(179, 170, 158); color: rgb(40, 39, 37);}
#lots .floor.active{background: rgb(45, 43, 41); color: rgb(247, 245, 241);}
#lots .floor .floorNum{font: 600 9px var(--sans); text-align: right;}
#lots .windows{display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 8px;}
#lots .windows i{background: rgb(189, 181, 172); display: block; border: 1px solid rgb(180, 171, 160);}
#lots .floor.haslots .windows i{background: rgb(232, 225, 215); border-color: rgb(193, 185, 176);}
#lots .floor.active .windows i{background: rgb(221, 209, 194); border-color: rgb(221, 209, 194);}
#lots .floor.haslots .floorNum{color: rgb(99, 84, 70);}
#lots .floor.active .floorNum{color: rgb(255, 255, 255);}
#lots .elevationPreview .legend{position: absolute; bottom: 11px; right: 12px; font-size: 9px; color: var(--brown); letter-spacing: 0.02em;}
#lots .elevDetail{display: grid; grid-template-columns: 1fr 198px; gap: 26px; align-items: start;}
#lots .elevDetail .floortitle{font: 400 37px var(--serif); margin: 9px 0px 12px;}
#lots .elevDetail .floorphoto{height: 186px; overflow: hidden; background: var(--alt);}
#lots .elevDetail .floorphoto img{object-position: center center;}
#lots .floorunits{margin-top: 25px; border-top: 1px solid var(--line);}
#lots .floorunits button{width: 100%; padding: 15px 0px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: transparent; display: flex; align-items: center; gap: 14px; text-align: left; color: var(--ink);}
#lots .floorunits button:hover{background: rgb(238, 234, 227);}
#lots .floorunits button .lotnm{font: 400 17px var(--latin); min-width: 77px;}
#lots .floorunits button .spread{display: flex; flex: 1 1 0%; justify-content: space-between; gap: 8px; align-items: center;}
#lots .floorunits button .spread small{font-size: 10px; color: var(--brown);}
#lots .floorunits button .spread strong{font: 600 11px var(--sans);}
#lots .elevBottom{display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px;}
#lots .v5{padding: 52px 55px 55px;}
#lots .v5header{display: flex; justify-content: space-between; align-items: end; gap: 28px; border-bottom: 1px solid var(--line); padding-bottom: 32px;}
#lots .v5header .note{max-width: 230px; text-align: right; margin: 0px;}
#lots .compareLayout{display: grid; grid-template-columns: 255px minmax(0px, 1fr); gap: 25px; padding-top: 24px;}
#lots .compareChooser{border-right: 1px solid var(--line); padding-right: 22px;}
#lots .chooserhead{display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;}
#lots .chooserhead span{font-size: 10px; letter-spacing: 0.1em; color: var(--brown);}
#lots .chooserlist{display: flex; flex-direction: column; border-top: 1px solid var(--line);}
#lots .choose{display: flex; align-items: center; gap: 12px; background: none; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); width: 100%; text-align: left; padding: 16px 0px; color: var(--ink);}
#lots .choose:hover{background: var(--alt);}
#lots .tick{width: 18px; height: 18px; border: 1px solid rgb(150, 144, 133); display: grid; place-items: center; flex-shrink: 0; font-size: 12px; color: white;}
#lots .choose.active .tick{background: var(--ink); border-color: var(--ink);}
#lots .choose span:nth-child(2){flex: 1 1 0%; min-width: 0px;}
#lots .choose strong{font: 400 17px var(--latin); display: block;}
#lots .choose small{font-size: 10px; color: var(--brown); display: block; white-space: nowrap;}
#lots .choose .ab{font: 600 10px var(--sans); white-space: nowrap;}
#lots .compareRight{min-width: 0px;}
#lots .compareStatus{display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: var(--brown); margin-bottom: 17px;}
#lots .compareGrid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 13px; min-height: 478px;}
#lots .compareGrid.cols3{grid-template-columns: repeat(3, minmax(0px, 1fr));}
#lots .compareCard{border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0px;}
#lots .compareCard .photo{height: 150px; overflow: hidden; position: relative;}
#lots .compareCard .photo img{height: 100%; object-fit: cover;}
#lots .compareCard .ctop{padding: 15px 15px 12px; display: flex; align-items: start; justify-content: space-between; gap: 7px;}
#lots .compareCard .ctop h4{font: 400 20px var(--latin); margin: 0px;}
#lots .compareCard .ctop button{border: 0px; background: none; color: var(--brown); font-size: 16px; padding: 0px;}
#lots .compareCard .data{padding: 0px 15px 18px; display: flex; flex-direction: column; flex: 1 1 0%;}
#lots .comprow{display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0px; border-bottom: 1px solid var(--line);}
#lots .comprow span{color: var(--brown); font-size: 10px;}
#lots .comprow strong{font-size: 11px; font-weight: 600; text-align: right;}
#lots .compareCard .money{font: 400 22px var(--serif); margin-top: auto; padding-top: 22px;}
#lots .compareCard .money span{font: 500 10px var(--sans);}
#lots .compareCard .data .arrowlink{margin-top: 13px; align-self: start;}
#lots .comparisonBottom{display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px;}
#lots .compareEmpty{display: grid; place-items: center; border: 1px dashed var(--line); padding: 40px; text-align: center; color: var(--brown);}
#lots .modal{border: 0px; max-width: min(870px, 100% - 30px); width: 870px; max-height: calc(-50px + 100vh); background: var(--bg); color: var(--ink); padding: 0px; box-shadow: rgba(15, 15, 15, 0.25) 0px 25px 90px;}
#lots .modal::backdrop{background: rgba(20, 19, 18, 0.66);}
#lots .modalHead{display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--line);}
#lots .modalHead strong{font-size: 11px; letter-spacing: 0.14em;}
#lots .close{font-size: 25px; line-height: 1; background: none; border: 0px; padding: 2px 8px;}
#lots .modalBody{padding: 26px 28px 32px; max-height: calc(-150px + 100vh); overflow: auto;}
#lots .modalColumns{display: grid; grid-template-columns: 1fr 1fr; gap: 27px;}
#lots .modalImage{height: 220px; overflow: hidden; background: var(--alt);}
#lots .modalPlan{background: rgb(238, 234, 227); margin-top: 12px; padding: 7px; height: 210px; display: grid; place-items: center;}
#lots .modalPlan svg{width: 100%; height: 100%;}
#lots .modalTitle{font: 400 37px var(--serif); margin: 12px 0px 24px;}
#lots .modalSpecs{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px;}
#lots .modalSpecs small{display: block; color: var(--brown); font-size: 10px;}
#lots .modalSpecs strong{font: 400 18px var(--latin);}
#lots .form-row{margin: 20px 0px 15px;}
#lots .form-row label{display: block; font-size: 10px; letter-spacing: 0.11em; margin-bottom: 9px; color: var(--brown);}
#lots .form-row input{background: transparent; border: 1px solid rgb(175, 168, 158); height: 47px; padding: 12px 14px; width: 100%; border-radius: 0px;}
#lots .toast{position: fixed; z-index: 200; bottom: 23px; left: 50%; transform: translateX(-50%); background: var(--dark); color: white; padding: 13px 19px; font-size: 12px; max-width: calc(100% - 30px); box-shadow: rgba(0, 0, 0, 0.18) 0px 7px 22px;}
#lots .toast[hidden]{display: none;}
@container lots (max-width: 1120px){#lots .v1head,#lots .v2,#lots .v3header,#lots .v4,#lots .v5{padding-left: 32px; padding-right: 32px;}
#lots .v1filter{padding-left: 32px; padding-right: 32px;}
#lots .v1inner{grid-template-columns: minmax(0px, 1.4fr) minmax(260px, 0.8fr);}
#lots .v1grid{gap: 6px; padding-left: 15px; padding-right: 15px;}
#lots .v1grid{grid-template-columns: 1fr 1.1fr 0.55fr 0.8fr 0.85fr 1.1fr;}
#lots .v1row span{font-size: 9px;}
#lots .v3body{grid-template-columns: 192px minmax(0px, 1fr) 242px;}
#lots .v3main{padding: 17px;}
#lots .v3right{padding: 22px 17px;}
#lots .elevation{grid-template-columns: 300px 1fr; gap: 24px;}
#lots .elevDetail{grid-template-columns: 1fr 143px; gap: 15px;}
#lots .v5 .compareLayout{grid-template-columns: 215px minmax(0px, 1fr); gap: 15px;}
#lots .compareChooser{padding-right: 13px;}
}
@container lots (max-width: 850px){#lots .v1inner{grid-template-columns: 1fr;}
#lots .v1tableWrap{border-right: 0px; border-bottom: 1px solid var(--line);}
#lots .v1preview{display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center;}
#lots .v1preview .previewtop{grid-column: 1 / -1;}
#lots .v1preview .planPanel{margin: 0px;}
#lots .v2top,#lots .v3header,#lots .v4top,#lots .v5header{align-items: start;}
#lots .v3body{grid-template-columns: 195px 1fr;}
#lots .v3right{grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 17px; align-items: center;}
#lots .v3right .statusPrice{margin: 0px;}
#lots .elevation{grid-template-columns: 1fr 1fr;}
#lots .elevDetail{grid-template-columns: 1fr;}
#lots .elevDetail .floorphoto{height: 120px;}
#lots .v5 .compareLayout{grid-template-columns: 1fr;}
#lots .compareChooser{border-right: 0px; padding-right: 0px;}
#lots .chooserlist{display: grid; grid-template-columns: repeat(3, 1fr);}
#lots .choose{padding: 10px; gap: 7px;}
#lots .choose .ab{display: none;}
}
@container lots (max-width: 620px){#lots .h2{font-size: 34px;}
#lots .v1head{display: block; padding: 33px 19px 20px;}
#lots .v1head .note{text-align: left; margin-top: 18px;}
#lots .v1filter{padding: 0px 19px 16px; display: block;}
#lots .v1filter .fine{display: block; margin-top: 13px;}
#lots .v1grid{grid-template-columns: 0.76fr 0.87fr 0.5fr 0.78fr 1.05fr; gap: 5px; padding: 13px 11px;}
#lots .v1grid > :nth-child(5){display: none;}
#lots .v1row span{font-size: 9px;}
#lots .v1row .lotNo{font-size: 11px;}
#lots .v1row .vprice{font-size: 9px;}
#lots .v1preview{padding: 18px; grid-template-columns: 1fr;}
#lots .v1preview .planPanel{height: 215px;}
#lots .v1preview .previewinfo{padding: 0px;}
#lots .v1tableBody{min-height: 0px;}
#lots .v1previewPhoto{height: 160px; margin-top: 18px;}
#lots .v1tableBottom{padding: 16px 14px 0px;}
#lots .v2{padding: 33px 19px;}
#lots .v2top{display: block;}
#lots .v2top .note{text-align: left; margin-top: 15px;}
#lots .v2controls{display: block; padding: 22px 0px 18px;}
#lots .v2controls .carouselbuttons{justify-content: flex-end; margin-top: 15px;}
#lots .cards3{grid-template-columns: 1fr; min-height: 0px;}
#lots .cards3 .unitCard:not(:first-child){display: none;}
#lots .unitCard .visual{aspect-ratio: 1.35 / 1;}
#lots .v3header{padding: 32px 19px 20px; display: block;}
#lots .v3header .note{text-align: left; margin-top: 14px;}
#lots .v3body{display: block;}
#lots .v3left{border-right: 0px; border-bottom: 1px solid var(--line); padding: 15px 0px;}
#lots .v3left .overline{padding: 0px 18px 10px;}
#lots .lotnav{display: flex; flex-direction: row; overflow: auto; max-height: none; padding: 0px 10px;}
#lots .lotnav button{min-width: 125px; display: block; text-align: left; border-bottom: 0px; border-right: 1px solid var(--line); padding: 10px;}
#lots .lotnav button strong{display: block;}
#lots .lotnav button .sideArea{margin-top: 4px; display: block;}
#lots .v3main{padding: 19px;}
#lots .v3big{height: 275px;}
#lots .v3right{display: block; padding: 24px;}
#lots .v3right h3{font-size: 28px;}
#lots .v3right .statusPrice{margin-top: 15px;}
#lots .v4{padding: 34px 19px;}
#lots .v4top{display: block;}
#lots .v4top .note{text-align: left; margin-top: 14px;}
#lots .elevation{grid-template-columns: 1fr; gap: 20px;}
#lots .elevationPreview{min-height: 420px; padding: 12px;}
#lots .tower{width: 180px;}
#lots .floor{min-height: 12px;}
#lots .elevDetail{grid-template-columns: 1fr 135px; gap: 13px;}
#lots .elevDetail .floorphoto{height: 137px;}
#lots .elevDetail .floortitle{font-size: 31px;}
#lots .floorunits{margin-top: 14px;}
#lots .elevBottom{display: block;}
#lots .elevBottom .btn{margin-top: 15px; width: 100%;}
#lots .v5{padding: 34px 19px;}
#lots .v5header{display: block;}
#lots .v5header .note{text-align: left; margin-top: 15px;}
#lots .chooserlist{grid-template-columns: 1fr 1fr;}
#lots .compareGrid{grid-template-columns: 1fr 1fr; gap: 8px;}
#lots .compareGrid.cols3{grid-template-columns: 1fr 1fr; gap: 8px;}
#lots .compareGrid.cols3 .compareCard:nth-child(3){grid-column: 1 / -1;}
#lots .compareCard .photo{height: 111px;}
#lots .compareCard .ctop{padding: 10px;}
#lots .compareCard .data{padding: 0px 10px 13px;}
#lots .compareCard .ctop h4{font-size: 16px;}
#lots .comprow span,#lots .comprow strong{font-size: 9px;}
#lots .comprow{display: block; padding: 8px 0px;}
#lots .comprow strong{display: block; text-align: left; margin-top: 2px;}
#lots .compareCard .money{font-size: 17px; padding-top: 16px;}
#lots .comparisonBottom{display: block;}
#lots .comparisonBottom .btn{margin-top: 14px; width: 100%;}
#lots .modalColumns{grid-template-columns: 1fr;}
#lots .modalBody{padding: 16px 18px;}
#lots .modalImage{height: 165px;}
#lots .modalPlan{height: 150px;}
#lots .modalTitle{font-size: 30px;}
}
#lots .stage{max-width:none;margin:0;box-shadow:none}
#lots img{object-fit:cover;width:100%;height:100%;display:block}
#lots button,#lots input,#lots .badge{border-radius:0}
#lots button:focus-visible,#lots input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#lots .chip,#lots .arrowlink,#lots .texttabs button,#lots .carouselbuttons button{min-height:44px}
#lots .carouselbuttons button,#lots .close{min-width:44px;min-height:44px}
#lots .chip.active{background:var(--ink);color:var(--paper)}
#lots .btn{border-radius:0}
#lots .note{font-size:13px}
#lots .v3right,#lots .planPanel,#lots .v3big{background:var(--surface)}
#lots .badge{white-space:normal}
#lots .unitCard .titleline{flex-wrap:wrap}
#lots .compareCard .money{font-size:clamp(16px,1.9cqw,22px);overflow-wrap:anywhere}
#lots .toast{z-index:1000}
#lots .modal{margin:auto;box-shadow:none}
#lots .modalHead{gap:16px}
#lots .modalHead strong{overflow-wrap:anywhere}
#lots [aria-invalid=true]{border-color:#99443b}
#lots [id="nf-lots-requestStatus"]{min-height:24px;color:var(--ink)}
#lots .compareCard .ctop button{min-width:32px;min-height:32px}
#lots .floor:focus-visible{outline-offset:0;outline-color:#fff}
html.nf-lots-modal-open{overflow:hidden}
@container lots (max-width:620px){
 #lots .v1grid{grid-template-columns:1fr 1.1fr .5fr .9fr 1.35fr;padding:13px 10px}
 #lots .v1row span{white-space:normal;font-size:10px}
 #lots .v1row .vprice{font-size:10px}
 #lots .comparisonBottom .btn{white-space:normal}
 #lots .compareStatus,#lots .v2foot{flex-wrap:wrap;gap:12px}
 #lots .modalSpecs{gap:12px}
 #lots .modal .price{font-size:26px!important}
 #lots .modal .btn{white-space:normal}
}
@media(prefers-reduced-motion:reduce){#lots *{transition:none!important;scroll-behavior:auto!important}}
#lots svg text{font-family:var(--font-body);font-weight:400}
#lots .comprow span,#lots .comprow strong,#lots .unitCard .details,#lots .lotnav button small,#lots .previewinfo p{font-size:12px}
#lots .unitCard .titleline .badge{font-size:10px}
#lots .v1tableHead{font-size:10px}
#lots .v1row span{font-size:11px}
#lots .modalTitle{font-family:var(--font-display)}
@container lots (max-width:620px){#lots .v1row span,#lots .v1row .vprice{font-size:10px}#lots .comprow span,#lots .comprow strong{font-size:11px}}
#lots .elevationPreview{padding-bottom:42px}
#lots .compareGrid.cols1{grid-template-columns:minmax(0,1fr);max-width:430px}
/* Variant 02: whole schematic plans instead of cropped residence photos. */
#lots .v2 .unitCard .unit-plan{display:flex;flex-direction:column;background:var(--bg)}
#lots .v2 .unitCard .unit-plan>svg{display:block;flex:1;min-height:0;width:100%;height:100%;max-height:260px;fill:none;stroke:none}
#lots .v2 .unitCard .unit-plan>svg>rect{fill:var(--bg)}
#lots .v2 .unitCard .unit-plan .flag{position:static;order:-1;align-self:flex-start;margin:12px 14px 0;padding:0;background:transparent;z-index:1}

/* Inverse type tokens keep modal actions readable after typography classification. */
#lots dialog .btn:not(.ghost){--nf-tone-heading:#F7F5F1;--nf-tone-body:#F7F5F1;--nf-tone-label:#F7F5F1;color:#F7F5F1!important}