/* NAJOLA Build-a-Boat v50 - simplified, mobile-first, user friendly */ :root{ --bb-navy:#071d33; --bb-navy2:#0b2a45; --bb-blue:#0ea5e9; --bb-bg:#f4f7fb; --bb-card:#fff; --bb-text:#172033; --bb-muted:#667085; --bb-border:#e6edf3; --bb-shadow:0 10px 28px rgba(7,29,51,.10); } html,body{background:var(--bb-bg)!important;color:var(--bb-text)!important;font-family:Poppins,Open Sans,Arial,sans-serif!important;overflow-x:hidden!important} *{box-sizing:border-box} /* kill duplicate fake buttons from older CSS */ .boatThumbnail:after{content:none!important;display:none!important}.buildBoatBtn{position:relative!important;z-index:3!important} /* MODEL PAGE */ #boatSelectionDiv{min-height:100vh!important;padding:32px 14px 80px!important;background:linear-gradient(180deg,#fff 0%,#f4f7fb 100%)!important} #boatSelectionDiv:before{content:"Choose your model";display:block;text-align:center;font-size:clamp(28px,4vw,44px);font-weight:900;color:var(--bb-navy);letter-spacing:-.04em;margin:14px auto 6px} #boatSelectionDiv:after{content:"Start with a model, then customize add-ons and request a quote.";display:block;text-align:center;font-size:14px;color:var(--bb-muted);margin-bottom:24px} .PageSection{font-size:20px!important;font-weight:900!important;color:var(--bb-navy)!important;border:0!important;background:transparent!important;padding:12px 8px!important;margin:0 0 12px!important;text-align:center!important;cursor:default!important}.PageSection i{display:none!important} #boatSelectionDiv .container-fluid{max-width:1180px!important;margin:0 auto!important}.boatSelectionDiv .row{} #boatSelectionDiv .row{display:flex!important;justify-content:center!important;gap:18px!important;margin:0!important} #boatSelectionDiv .col-xs-6,#boatSelectionDiv .col-sm-3,#boatSelectionDiv .col-md-2{width:300px!important;flex:0 0 300px!important;max-width:300px!important;padding:0!important} .boatThumbnail{background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:18px!important;box-shadow:var(--bb-shadow)!important;overflow:hidden!important;cursor:pointer!important;min-height:0!important;transition:.18s ease!important}.boatThumbnail:hover{transform:translateY(-3px)!important;box-shadow:0 18px 34px rgba(7,29,51,.15)!important} .boatThumbImageWrap{height:230px!important;background:#f8fafc!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:12px!important}.boatThumbImageWrap img,.boatThumbnail .thumb{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;padding:0!important;background:transparent!important} .boatThumbnail .designator{padding:12px 14px 6px!important;text-align:center!important;background:#fff!important}.boatThumbnail .designator img{max-height:42px!important;object-fit:contain!important} .buildBoatBtn{width:calc(100% - 28px)!important;margin:12px 14px 16px!important;border:0!important;border-radius:999px!important;background:var(--bb-navy)!important;color:#fff!important;font-weight:900!important;padding:11px 14px!important;font-size:13px!important;cursor:pointer!important}.buildBoatBtn:hover{background:var(--bb-blue)!important} /* TOP BAR */ .buildTopBar{position:sticky!important;top:0!important;z-index:5000!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid var(--bb-border)!important;color:var(--bb-navy)!important;padding:8px 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}.buildTopBar button{border:0!important;border-radius:999px!important;padding:9px 13px!important;font-weight:900!important;font-size:12px!important}.backModelsBtn{background:#edf5fb!important;color:var(--bb-navy)!important}.summaryBtn{background:var(--bb-navy)!important;color:#fff!important}.buildStepTitle{font-size:14px!important;color:var(--bb-navy)!important} /* TOP MODEL CARD - not huge, photo floats */ #Headerimg,#boattitle{display:none!important}.modelHeroCompact{display:none!important} .modelHeroDock{max-width:1180px!important;margin:14px auto 12px!important;padding:18px!important;border:1px solid var(--bb-border)!important;border-radius:22px!important;background:linear-gradient(135deg,#fff,#f7fbff)!important;box-shadow:var(--bb-shadow)!important;display:grid!important;grid-template-columns:1fr 330px!important;gap:18px!important;align-items:center!important;position:relative!important;overflow:visible!important}.modelHeroCopy{padding:4px 0!important}.heroEyebrow{display:inline-block!important;color:var(--bb-blue)!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:900!important;margin-bottom:6px!important}.modelHeroCopy h1{color:var(--bb-navy)!important;font-weight:900!important;font-size:clamp(26px,3vw,38px)!important;line-height:1!important;margin:0!important;padding:0!important;white-space:normal!important}.modelHeroCopy p{color:var(--bb-muted)!important;margin:8px 0 14px!important;font-size:14px!important}.heroActions{display:flex!important;gap:10px!important;flex-wrap:wrap!important}.heroActions button{border:0!important;border-radius:999px!important;padding:11px 16px!important;font-weight:900!important;cursor:pointer!important}.heroAddonBtn{background:var(--bb-navy)!important;color:#fff!important}.compactHeroPhotoBtn{background:#eaf7ff!important;color:var(--bb-navy)!important}.modelPhotoFloat{width:330px!important;height:185px!important;border:0!important;border-radius:20px!important;background:#fff!important;padding:10px!important;box-shadow:0 18px 42px rgba(7,29,51,.18)!important;cursor:zoom-in!important;transform:translateY(6px)!important}.modelPhotoFloat img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important} /* MAIN CONFIG LAYOUT */ #colorsOptionsDiv{background:var(--bb-bg)!important;padding-bottom:90px!important}.container-fluid.notsummary{max-width:1360px!important;margin:0 auto!important;padding:0 12px!important}.optionSearchBox{max-width:1360px!important;margin:8px auto 12px!important;padding:0 12px!important}.optionSearchBox input{width:100%!important;border:1px solid var(--bb-border)!important;border-radius:999px!important;background:#fff!important;padding:12px 16px!important;font-size:14px!important;box-shadow:var(--bb-shadow)!important} #optionalHolder>.row{display:grid!important;grid-template-columns:minmax(270px,.9fr) minmax(340px,1.05fr) minmax(360px,1fr)!important;gap:12px!important;align-items:start!important;margin:0!important}.optionbox.notsummary{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}.optioncontent,#colorSelections,#optionalEquipment{background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:16px!important;box-shadow:var(--bb-shadow)!important;padding:10px!important;margin:0!important}.columnarlayout,#colorSelections{max-height:calc(100vh - 235px)!important;overflow:auto!important;padding-right:4px!important}.rightcolumn,.leftcolumn{width:100%!important;float:none!important}.OptionSection{font-size:14px!important;font-weight:900!important;border:0!important;background:#eef6fc!important;color:var(--bb-navy)!important;border-radius:12px!important;padding:10px 12px!important;margin:8px 0!important;cursor:default!important}.OptionSection i{display:none!important}#optionalEquipment table,#colorSelections table{width:100%!important;border-radius:12px!important;overflow:hidden!important;margin:0 0 8px!important;background:#fff!important;border:1px solid #edf2f7!important}#optionalEquipment tr,#colorSelections tr{display:table-row!important}.optionalEquipmentLineItem,.optiontext{font-size:13px!important;line-height:1.35!important;color:var(--bb-text)!important}.optioncost{font-size:12px!important;font-weight:900!important;color:var(--bb-navy)!important}.radioButton,.checkBox{width:20px!important;height:20px!important;min-width:20px!important;border:2px solid #cfd8e3!important;border-radius:50%!important;background:#fff!important}.checkBox{border-radius:6px!important}.radioButtonChecked,.checkboxChecked{background:var(--bb-blue)!important;border-color:var(--bb-blue)!important;box-shadow:inset 0 0 0 4px #fff!important}.colorSwatch{width:34px!important;height:34px!important;border-radius:10px!important} #ColorToolSection{background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:16px!important;box-shadow:var(--bb-shadow)!important;padding:8px!important;margin:0 0 10px!important;overflow:hidden!important}#ColorToolSection .col-md-12{min-height:185px!important;position:relative!important}#ColorToolSection img{max-height:210px!important;object-fit:contain!important} #planimage img{max-height:180px!important;object-fit:contain!important;background:#fff!important;border-radius:14px!important;padding:8px!important;box-shadow:var(--bb-shadow)!important;cursor:zoom-in!important} #speccontainerright{max-width:1180px!important;background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:18px!important;box-shadow:var(--bb-shadow)!important;margin:10px auto 14px!important;padding:12px!important}#specbox td{font-size:12px!important;padding:7px!important;border-bottom:1px solid #eef2f7!important}.specmetric{color:var(--bb-muted)!important} /* LIVE SUMMARY: add-ons and included side by side */ .liveSummaryPanel{position:sticky!important;top:62px!important;align-self:start!important;background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:18px!important;box-shadow:var(--bb-shadow)!important;padding:12px!important;max-height:calc(100vh - 88px)!important;display:flex!important;flex-direction:column!important;gap:10px!important;overflow:hidden!important}.liveSummaryHead{display:flex!important;justify-content:space-between!important;gap:10px!important;border-bottom:1px solid var(--bb-border)!important;padding-bottom:10px!important}.liveSummaryHead strong{font-size:15px!important;color:var(--bb-navy)!important}.liveSummaryHead small{display:block!important;color:var(--bb-muted)!important;font-size:11px!important}.liveSummaryHead span{font-size:11px!important;color:var(--bb-muted)!important;text-align:right!important}.summaryColumns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;min-height:0!important;overflow:hidden!important}.summaryColumn{border:1px solid #edf2f7!important;border-radius:14px!important;padding:10px!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:8px!important;background:#fbfdff!important}.summaryColumnTitle{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;border-bottom:1px solid #edf2f7!important;padding-bottom:8px!important}.summaryColumnTitle strong{font-size:13px!important;color:var(--bb-navy)!important}.summaryColumnTitle span{background:#eaf7ff!important;color:var(--bb-navy)!important;border-radius:999px!important;padding:2px 8px!important;font-size:11px!important;font-weight:900!important}.showIncludedBtn{border:0!important;border-radius:999px!important;background:#eef6fc!important;color:var(--bb-navy)!important;font-size:11px!important;font-weight:900!important;padding:6px 9px!important;white-space:nowrap!important;cursor:pointer!important}.liveSummaryItems,.liveSummaryStandard{overflow:auto!important;max-height:40vh!important;padding-right:3px!important}.liveSummaryItem{display:flex!important;justify-content:space-between!important;gap:8px!important;border-bottom:1px solid #f0f3f7!important;padding:7px 0!important;font-size:12px!important}.liveSummaryItem span{line-height:1.3!important}.liveSummaryItem strong{white-space:nowrap!important;font-size:11px!important;color:var(--bb-navy)!important}.standardSummaryGroup{border-bottom:1px solid #f0f3f7!important;padding:0 0 8px!important;margin-bottom:8px!important}.standardSummaryGroup strong{display:block!important;font-size:12px!important;color:var(--bb-navy)!important;margin-bottom:5px!important}.standardSummaryGroup span{display:block!important;font-size:11px!important;color:var(--bb-muted)!important;line-height:1.3!important;margin-bottom:4px!important}.inlineIncludedBtn{width:100%!important;margin-top:4px!important}.liveSummaryTotal{display:flex!important;justify-content:space-between!important;align-items:center!important;border-top:1px solid var(--bb-border)!important;padding-top:10px!important;font-weight:900!important}.liveSummaryTotal strong{font-size:18px!important;color:var(--bb-blue)!important}.liveSummaryQuoteBtn{width:100%!important;border:0!important;border-radius:999px!important;background:var(--bb-navy)!important;color:#fff!important;font-weight:900!important;padding:12px 14px!important;cursor:pointer!important}.liveSummaryQuoteBtn:hover{background:var(--bb-blue)!important}.emptySummary{font-size:12px!important;color:var(--bb-muted)!important;margin:0!important} /* Remove bottom standard equipment; popup replaces it */ #standardEquipment,#standardEquipment.closest,.optionbox:has(#standardEquipment){display:none!important} #standardEquipment{display:none!important} #standardEquipment .standardFeature{background:none!important} /* Included popup */ .includedPopup{position:fixed!important;inset:0!important;background:rgba(7,29,51,.68)!important;z-index:99999!important;display:none;align-items:center!important;justify-content:center!important;padding:14px!important}.includedPopupCard{width:min(980px,96vw)!important;max-height:88vh!important;background:#fff!important;border-radius:20px!important;box-shadow:0 25px 80px rgba(0,0,0,.3)!important;overflow:hidden!important}.includedPopupHead{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 16px!important;background:var(--bb-navy)!important;color:#fff!important}.includedPopupHead strong{font-size:16px!important}.closeIncludedPopup{border:0!important;background:transparent!important;color:#fff!important;font-size:28px!important;line-height:1!important;cursor:pointer!important}.includedPopupBody{padding:14px!important;overflow:auto!important;max-height:calc(88vh - 58px)!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.includedPopupGroup{border:1px solid var(--bb-border)!important;border-radius:14px!important;padding:12px!important;background:#fbfdff!important}.includedPopupGroup h3{font-size:14px!important;font-weight:900!important;color:var(--bb-navy)!important;margin:0 0 8px!important;white-space:normal!important}.includedPopupGroup p{font-size:12px!important;color:#344054!important;line-height:1.35!important;margin:0 0 6px!important} /* lightbox */ .lightboxOverlay{position:fixed!important;inset:0!important;background:rgba(0,0,0,.9)!important;z-index:99999!important;display:none;align-items:center!important;justify-content:center!important;padding:20px!important}.lightboxOverlay img{max-width:96%!important;max-height:90vh!important;object-fit:contain!important;border-radius:16px!important;background:#fff!important}.lightboxOverlay span{position:fixed!important;top:15px!important;right:24px!important;color:#fff!important;font-size:42px!important;cursor:pointer!important} /* hide old bottom float on mobile-ish layouts where it blocks content */ #footerFloat{display:none!important}.selectedBuildBar{display:none!important} .mobileSummaryBar{display:none;position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:8000!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;border:1px solid var(--bb-border)!important;border-radius:16px!important;box-shadow:0 14px 38px rgba(7,29,51,.2)!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important}.mobileSummaryBar strong{display:block!important;color:var(--bb-navy)!important;font-size:13px!important}.mobileSummaryBar span{display:block!important;color:var(--bb-muted)!important;font-size:11px!important}.mobileSummaryBar button{border:0!important;border-radius:999px!important;background:var(--bb-navy)!important;color:#fff!important;font-weight:900!important;padding:10px 12px!important;font-size:12px!important} /* Tablet */ @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr 260px!important}.modelPhotoFloat{width:260px!important;height:150px!important} #optionalHolder>.row{grid-template-columns:1fr 1fr!important}.liveSummaryPanel{grid-column:1 / -1!important;position:relative!important;top:auto!important;max-height:none!important}.summaryColumns{grid-template-columns:1fr 1fr!important}.liveSummaryItems,.liveSummaryStandard{max-height:220px!important}.columnarlayout,#colorSelections{max-height:460px!important} } /* Phone: phone-specific layout, not desktop squeezed */ @media(max-width:768px){ body{font-size:13px!important;padding-bottom:78px!important} #boatSelectionDiv{padding:22px 10px 90px!important}#boatSelectionDiv:before{font-size:28px!important;margin-top:8px!important}#boatSelectionDiv:after{font-size:13px!important;margin-bottom:16px!important;padding:0 10px!important}#boatSelectionDiv .row{display:block!important}#boatSelectionDiv .col-xs-6,#boatSelectionDiv .col-sm-3,#boatSelectionDiv .col-md-2{width:100%!important;max-width:420px!important;flex:0 0 100%!important;margin:0 auto 14px!important}.boatThumbImageWrap{height:210px!important}.boatThumbnail .designator img{max-height:36px!important}.buildBoatBtn{padding:12px!important} .buildTopBar{padding:7px 8px!important}.buildTopBar button{padding:8px 10px!important;font-size:11px!important}.buildStepTitle{font-size:13px!important} .modelHeroDock{display:block!important;margin:8px 10px 10px!important;padding:12px!important;border-radius:18px!important}.heroEyebrow{font-size:10px!important}.modelHeroCopy h1{font-size:24px!important}.modelHeroCopy p{font-size:12px!important;margin:6px 0 10px!important}.heroActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.heroActions button{padding:10px 8px!important;font-size:12px!important}.modelPhotoFloat{width:100%!important;height:170px!important;margin-top:12px!important;transform:none!important;border-radius:16px!important} #speccontainerright{margin:8px 10px 12px!important}.PageSection{font-size:17px!important;padding:10px!important}.container-fluid.notsummary{padding:0 10px!important}.optionSearchBox{position:sticky!important;top:46px!important;z-index:4500!important;background:var(--bb-bg)!important;padding:8px 10px!important;margin:0!important}.optionSearchBox input{padding:11px 14px!important;font-size:13px!important} #optionalHolder>.row{display:flex!important;flex-direction:column!important;gap:12px!important}.optionbox.notsummary{width:100%!important;display:block!important}.columnarlayout,#colorSelections{max-height:52vh!important;overflow:auto!important}.optioncontent,#colorSelections,#optionalEquipment,#ColorToolSection{border-radius:14px!important;padding:8px!important}.OptionSection{font-size:13px!important}.optionalEquipmentLineItem,.optiontext{font-size:12px!important}.optioncost{font-size:11px!important} .liveSummaryPanel{order:3!important;width:100%!important;position:relative!important;top:auto!important;max-height:none!important;margin:0!important;border-radius:16px!important}.summaryColumns{display:block!important}.summaryColumn{margin-bottom:10px!important}.liveSummaryItems,.liveSummaryStandard{max-height:210px!important}.liveSummaryHead span{display:none!important}.liveSummaryTotal strong{font-size:16px!important}.mobileSummaryBar{display:flex!important} .includedPopupBody{grid-template-columns:1fr!important;max-height:calc(88vh - 58px)!important}.includedPopupCard{width:96vw!important}.includedPopupGroup p{font-size:12px!important} } /* v51 requested improvements */ :root{ --bb-selected:#fff7db; --bb-selected-border:#f59e0b; --bb-glow:0 0 0 3px rgba(245,158,11,.18),0 12px 26px rgba(245,158,11,.20); } #boatSelectionDiv:before{content:"Choose your boat model"!important} #boatSelectionDiv:after{content:"Select a model, build your boat, then download or send the quote."!important} #boatSelectionDiv .row{align-items:stretch!important} .boatThumbnail{height:100%!important;display:flex!important;flex-direction:column!important} .boatThumbnail .designator{min-height:70px!important;display:flex!important;align-items:center!important;justify-content:center!important} .buildBoatBtn{margin-top:auto!important} .container-fluid.notsummary{max-width:1500px!important} #optionalHolder>.row{ grid-template-columns:minmax(330px,1fr) minmax(420px,1.28fr) minmax(420px,1.18fr)!important; align-items:stretch!important; } .optionbox.notsummary,.optioncontent,#colorSelections,#optionalEquipment,#ColorToolSection,.liveSummaryPanel{height:100%!important} #colorSelections,#optionalEquipment,.liveSummaryPanel{min-height:calc(100vh - 230px)!important} .columnarlayout,#colorSelections{max-height:calc(100vh - 285px)!important} .liveSummaryPanel{max-height:calc(100vh - 84px)!important;min-width:420px!important} .liveSummaryItems,.liveSummaryStandard{max-height:none!important;min-height:0!important;flex:1!important} .summaryColumns{flex:1!important} .summaryColumn{height:100%!important;min-height:0!important} .summaryColumnTitle strong:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bb-blue);margin-right:7px} .showIncludedBtn{background:#dff3ff!important;border:1px solid #b6e7ff!important} .topQuoteActions,.mobileQuoteActions,.liveSummaryActions{display:flex!important;gap:8px!important;align-items:center!important} .topQuoteActions button,.liveSummaryActions button,.mobileQuoteActions button{ border:0!important;border-radius:999px!important;font-weight:900!important;cursor:pointer!important } .topQuoteActions button{padding:9px 12px!important;font-size:12px!important} .downloadQuoteBtn{background:linear-gradient(135deg,#0ea5e9,#38bdf8)!important;color:#fff!important} .sendQuoteBtn{background:linear-gradient(135deg,#071d33,#0b2a45)!important;color:#fff!important} .themeToggleBtn{background:#eef6fc!important;color:var(--bb-navy)!important} .liveSummaryActions{display:grid!important;grid-template-columns:1fr 1fr!important} .liveSummaryActions button{padding:12px 14px!important} .mobileQuoteActions button{padding:9px 11px!important;font-size:12px!important} .selectedAddon{ background:linear-gradient(90deg,var(--bb-selected),#fff)!important; border:2px solid var(--bb-selected-border)!important; box-shadow:var(--bb-glow)!important; } .selectedAddon .optionalEquipmentLineItem:after{ content:" ADDED"; display:inline-block; margin-left:7px; padding:2px 7px; border-radius:999px; background:#f59e0b; color:#fff; font-size:10px; font-weight:900; letter-spacing:.04em; } .addonJustAdded{animation:addonPulse .45s ease} @keyframes addonPulse{0%{transform:scale(1)}50%{transform:scale(1.015)}100%{transform:scale(1)}} .liveSummaryItemSelected{ background:#f0f9ff!important; border:1px solid #bae6fd!important; border-radius:10px!important; padding:8px!important; margin-bottom:6px!important; } .liveSummaryItemSelected strong{color:var(--bb-blue)!important} /* clearer scrollbars */ .columnarlayout,#colorSelections,.liveSummaryItems,.liveSummaryStandard,.includedPopupBody{ scrollbar-width:thin!important; scrollbar-color:#0ea5e9 #e6edf3!important; } .columnarlayout::-webkit-scrollbar,#colorSelections::-webkit-scrollbar,.liveSummaryItems::-webkit-scrollbar,.liveSummaryStandard::-webkit-scrollbar,.includedPopupBody::-webkit-scrollbar{width:8px!important} .columnarlayout::-webkit-scrollbar-thumb,#colorSelections::-webkit-scrollbar-thumb,.liveSummaryItems::-webkit-scrollbar-thumb,.liveSummaryStandard::-webkit-scrollbar-thumb,.includedPopupBody::-webkit-scrollbar-thumb{background:#0ea5e9!important;border-radius:999px!important} .columnarlayout::-webkit-scrollbar-track,#colorSelections::-webkit-scrollbar-track,.liveSummaryItems::-webkit-scrollbar-track,.liveSummaryStandard::-webkit-scrollbar-track,.includedPopupBody::-webkit-scrollbar-track{background:#e6edf3!important;border-radius:999px!important} /* dark theme */ body.bb-dark{ --bb-bg:#08111f; --bb-card:#0f1b2d; --bb-text:#eef6ff; --bb-muted:#a7b4c7; --bb-border:#22324a; --bb-shadow:0 10px 28px rgba(0,0,0,.35); --bb-selected:#3a2a09; } body.bb-dark,body.bb-dark #colorsOptionsDiv{background:var(--bb-bg)!important;color:var(--bb-text)!important} body.bb-dark #boatSelectionDiv{background:linear-gradient(180deg,#101c2f 0%,#08111f 100%)!important} body.bb-dark .boatThumbnail, body.bb-dark .buildTopBar, body.bb-dark .modelHeroDock, body.bb-dark .optioncontent, body.bb-dark #colorSelections, body.bb-dark #optionalEquipment, body.bb-dark #ColorToolSection, body.bb-dark #speccontainerright, body.bb-dark .liveSummaryPanel, body.bb-dark .summaryColumn, body.bb-dark .includedPopupCard, body.bb-dark .includedPopupGroup, body.bb-dark .mobileSummaryBar{ background:var(--bb-card)!important; color:var(--bb-text)!important; border-color:var(--bb-border)!important; } body.bb-dark .boatThumbnail .designator, body.bb-dark #optionalEquipment table, body.bb-dark #colorSelections table, body.bb-dark .modelPhotoFloat, body.bb-dark #planimage img{background:#111f34!important} body.bb-dark .PageSection, body.bb-dark .OptionSection, body.bb-dark .buildStepTitle, body.bb-dark .liveSummaryHead strong, body.bb-dark .summaryColumnTitle strong, body.bb-dark .standardSummaryGroup strong, body.bb-dark .optioncost{color:var(--bb-text)!important} body.bb-dark .modelHeroCopy p, body.bb-dark .liveSummaryHead small, body.bb-dark .liveSummaryHead span, body.bb-dark .standardSummaryGroup span, body.bb-dark .emptySummary{color:var(--bb-muted)!important} body.bb-dark .liveSummaryItemSelected{background:#102b3f!important;border-color:#155e75!important} body.bb-dark .themeToggleBtn{background:#1d2b40!important;color:#fff!important} @media(max-width:1180px){ .liveSummaryPanel{min-width:0!important} #colorSelections,#optionalEquipment,.liveSummaryPanel{min-height:auto!important} } @media(max-width:768px){ .topQuoteActions{gap:5px!important} .topQuoteActions button{padding:8px 8px!important;font-size:10px!important} #optionalHolder>.row{display:flex!important;align-items:stretch!important} .columnarlayout,#colorSelections{max-height:55vh!important;overflow-y:scroll!important} .liveSummaryItems,.liveSummaryStandard{max-height:260px!important;overflow-y:scroll!important} .liveSummaryPanel{min-width:0!important;max-height:none!important} .summaryColumns{display:grid!important;grid-template-columns:1fr!important} .mobileSummaryBar{background:var(--bb-card)!important} .mobileSummaryBar button{font-size:11px!important} } #optionalHolder>.row>.optionbox,#optionalHolder>.row>.liveSummaryPanel{display:flex!important;flex-direction:column!important} #optionalHolder>.row>.optionbox>*:last-child{flex:1!important} /* v53 refinements */ .buildTopBar{box-shadow:0 8px 24px rgba(7,29,51,.08)!important}.buildStepTitle{font-size:18px!important;font-weight:950!important;letter-spacing:-.03em!important} .floatingThemeToggle{position:fixed!important;right:18px!important;bottom:92px!important;z-index:9000!important;border:0!important;border-radius:999px!important;padding:12px 15px!important;background:linear-gradient(135deg,#071d33,#0ea5e9)!important;color:#fff!important;box-shadow:0 12px 30px rgba(7,29,51,.28)!important;font-weight:900!important} .topQuoteActions .themeToggleBtn{display:none!important} /* stronger hero */ .modelHeroDock{max-width:1500px!important;grid-template-columns:1.25fr 340px!important;padding:22px!important;margin-top:18px!important} .modelHeroCopy h1{font-size:clamp(36px,4vw,58px)!important;letter-spacing:-.055em!important;line-height:.92!important;color:var(--bb-navy)!important;text-transform:uppercase!important}.heroEyebrow{font-size:12px!important;background:#eaf7ff!important;border-radius:999px!important;padding:6px 10px!important}.heroSpecsMini{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:12px 0 14px!important}.heroSpecsMini div{background:#fff!important;border:1px solid var(--bb-border)!important;border-radius:14px!important;padding:9px 10px!important;box-shadow:0 6px 16px rgba(7,29,51,.06)!important}.heroSpecsMini small{display:block!important;color:var(--bb-muted)!important;font-size:10px!important;line-height:1.1!important}.heroSpecsMini strong{display:block!important;color:var(--bb-navy)!important;font-size:12px!important;line-height:1.15!important;margin-top:3px!important} /* equal, shorter working columns */ .container-fluid.notsummary{max-width:1500px!important}.container-fluid.notsummary>.PageSection{font-size:28px!important;font-weight:950!important;letter-spacing:-.04em!important;color:var(--bb-navy)!important;margin-top:6px!important} #optionalHolder>.row{grid-template-columns:minmax(260px,.72fr) minmax(430px,1.18fr) minmax(460px,1.22fr)!important;align-items:stretch!important;height:min(650px,calc(100vh - 300px))!important;min-height:500px!important} #optionalHolder>.row>.optionbox,#optionalHolder>.row>.liveSummaryPanel{height:100%!important;min-height:0!important}.optioncontent,#colorSelections,#optionalEquipment,#ColorToolSection,.liveSummaryPanel{min-height:0!important;height:100%!important}.columnarlayout,#colorSelections{max-height:none!important;height:100%!important;overflow-y:auto!important}.liveSummaryPanel{max-height:none!important;min-width:0!important}.summaryColumns{min-height:0!important;flex:1!important}.summaryColumn{min-height:0!important;height:100%!important}.liveSummaryItems,.liveSummaryStandard{max-height:none!important;min-height:0!important;overflow-y:auto!important;box-shadow:inset 0 -22px 18px -24px #0ea5e9!important} /* make selected add-ons louder */ .selectedAddon{background:linear-gradient(90deg,#fff7cc,#ffffff)!important;border:2px solid #f59e0b!important;box-shadow:0 0 0 3px rgba(245,158,11,.22),0 8px 20px rgba(245,158,11,.14)!important}.selectedAddon .optionalEquipmentLineItem{font-weight:900!important;color:#071d33!important}.selectedAddon .optioncost{background:#f59e0b!important;color:#fff!important;border-radius:999px!important;padding:4px 7px!important} /* expand all must stand out */ .showIncludedBtn{background:linear-gradient(135deg,#f59e0b,#facc15)!important;color:#071d33!important;border:0!important;box-shadow:0 8px 20px rgba(245,158,11,.28)!important;animation:includedPulse 1.8s ease-in-out infinite!important}.showIncludedBtn:before{content:'View all • '!important}@keyframes includedPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} /* scrollable frame visual cue */ .columnarlayout,#colorSelections,.liveSummaryItems,.liveSummaryStandard{border-right:4px solid #dff3ff!important;padding-right:8px!important;background-image:linear-gradient(to bottom,rgba(14,165,233,.07),rgba(14,165,233,0) 34px),linear-gradient(to top,rgba(14,165,233,.10),rgba(14,165,233,0) 42px)!important;background-attachment:local,local!important} /* better dark mode coverage */ body.bb-dark .modelHeroCopy h1,body.bb-dark .heroSpecsMini strong,body.bb-dark .optionalEquipmentLineItem,body.bb-dark .optiontext,body.bb-dark #specbox td,body.bb-dark .liveSummaryItem span,body.bb-dark .includedPopupGroup p,body.bb-dark .boatThumbnail:before,body.bb-dark .container-fluid.notsummary>.PageSection{color:var(--bb-text)!important}body.bb-dark .heroSpecsMini div,body.bb-dark #optionalEquipment table,body.bb-dark #colorSelections table{background:#12233a!important;border-color:#263954!important}body.bb-dark .OptionSection,body.bb-dark .heroEyebrow{background:#173451!important;color:#eaf7ff!important}body.bb-dark .selectedAddon{background:linear-gradient(90deg,#3a2a09,#12233a)!important;border-color:#f59e0b!important}body.bb-dark .selectedAddon .optionalEquipmentLineItem{color:#fff!important}body.bb-dark .floatingThemeToggle{background:linear-gradient(135deg,#f8fafc,#bae6fd)!important;color:#071d33!important} /* mobile footer only after model selected */ .mobileSummaryBar{display:none!important}body.bb-building .mobileSummaryBar{display:flex!important}body.bb-model-step .mobileSummaryBar{display:none!important} @media(max-width:1180px){#optionalHolder>.row{height:auto!important;min-height:0!important}.modelHeroDock{grid-template-columns:1fr 280px!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:768px){.floatingThemeToggle{right:12px!important;bottom:88px!important;padding:10px 12px!important;font-size:12px!important}.buildStepTitle{font-size:14px!important}.modelHeroDock{display:block!important}.modelHeroCopy h1{font-size:32px!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important}.container-fluid.notsummary>.PageSection{font-size:22px!important}#optionalHolder>.row{height:auto!important;min-height:0!important}.optioncontent,#colorSelections,#optionalEquipment,#ColorToolSection,.liveSummaryPanel{height:auto!important}.columnarlayout,#colorSelections{height:auto!important;max-height:55vh!important;overflow-y:scroll!important;border-right:5px solid #0ea5e9!important}.liveSummaryItems,.liveSummaryStandard{max-height:260px!important;overflow-y:scroll!important;border-right:5px solid #0ea5e9!important}.mobileSummaryBar{left:8px!important;right:8px!important;bottom:8px!important}.mobileQuoteActions{display:grid!important;grid-template-columns:1fr 1fr!important}} /* v54 requested fixes */ :root{--bb-dirham:"D"} .modelHeroDock{ max-width:1500px!important; grid-template-columns:minmax(360px,1.05fr) minmax(360px,.95fr) minmax(330px,.8fr)!important; background:linear-gradient(135deg,#dff6ff 0%,#ffffff 42%,#eef7ff 100%)!important; border:1px solid rgba(14,165,233,.32)!important; box-shadow:0 24px 60px rgba(7,29,51,.18),inset 0 1px 0 rgba(255,255,255,.8)!important; transform:translateY(-1px)!important; } .modelHeroCopy h1{font-size:clamp(40px,4.3vw,64px)!important;text-shadow:0 12px 28px rgba(7,29,51,.13)!important} .heroSpecCard{background:rgba(255,255,255,.82)!important;border:1px solid rgba(14,165,233,.22)!important;border-radius:20px!important;padding:14px!important;box-shadow:0 16px 36px rgba(7,29,51,.12)!important;height:100%!important;display:flex!important;flex-direction:column!important;gap:10px!important;min-width:0!important} .heroSpecCard>strong{font-size:15px!important;font-weight:950!important;color:var(--bb-navy)!important;letter-spacing:-.03em!important} .heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:0!important;overflow:auto!important;max-height:180px!important;padding-right:4px!important} .heroSpecsMini div{box-shadow:none!important;background:#f8fcff!important} .heroPlanCard{border:0!important;border-radius:16px!important;background:#fff!important;padding:8px!important;box-shadow:0 8px 20px rgba(7,29,51,.08)!important;cursor:zoom-in!important;height:125px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important} .modelPhotoFloat{height:100%!important;min-height:260px!important;align-self:stretch!important;transform:none!important;cursor:zoom-in!important} #speccontainerright{display:none!important} #optionalHolder>.row{grid-template-columns:minmax(250px,.72fr) minmax(470px,1.25fr) minmax(470px,1.25fr)!important;height:min(560px,calc(100vh - 330px))!important;min-height:440px!important} #optionalHolder>.row>.optionbox:first-child{display:flex!important;flex-direction:column!important;gap:10px!important} #optionalHolder>.row>.optionbox:first-child #ColorToolSection, #optionalHolder>.row>.optionbox:first-child #colorSelections{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;flex:1!important} #ColorToolSection{height:190px!important;min-height:190px!important;flex:0 0 190px!important;cursor:zoom-in!important} #ColorToolSection .col-md-12{height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} #ColorToolSection img,#planimage img{left:0!important;right:0!important;margin:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;cursor:zoom-in!important} #optionalEquipment{display:flex!important;flex-direction:column!important;gap:8px!important} #optionalEquipment .optionSearchBox{order:-5!important;width:100%!important;max-width:none!important;margin:0 0 8px!important;padding:0!important;position:relative!important;top:auto!important;background:transparent!important} #optionalEquipment .optionSearchBox input{box-shadow:none!important;border:2px solid #d9ecf8!important;border-radius:14px!important;background:#f8fcff!important;padding:12px 14px 12px 40px!important;font-size:13px!important} #optionalEquipment .optionSearchBox:before{content:"🔎";position:absolute!important;left:14px!important;top:10px!important;z-index:1!important;font-size:14px!important;opacity:.65!important} #optionalEquipment .columnarlayout{flex:1!important;min-height:0!important;height:auto!important} .showIncludedBtn{font-size:12px!important;padding:9px 12px!important;text-transform:uppercase!important;letter-spacing:.03em!important;white-space:normal!important;text-align:center!important} .showIncludedBtn:before{content:""!important} .liveSummaryTotal{background:linear-gradient(135deg,#071d33,#0ea5e9)!important;color:#fff!important;border-radius:16px!important;border:0!important;padding:14px 16px!important;box-shadow:0 14px 30px rgba(14,165,233,.28)!important;margin-top:2px!important} .liveSummaryTotal span{color:#eaf7ff!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.06em!important} .liveSummaryTotal strong{color:#fff!important;font-size:24px!important;text-shadow:0 4px 14px rgba(0,0,0,.25)!important} .selectedAddon .optioncost{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:76px!important;line-height:1.1!important;text-align:center!important;margin:0!important;vertical-align:middle!important} #optionalEquipment table td[align="right"]{text-align:center!important;vertical-align:middle!important;padding:6px!important} .selectedAddon .optionalEquipmentLineItem:after{vertical-align:middle!important;line-height:1!important;transform:translateY(-1px)!important} body.bb-dark #optionalEquipment, body.bb-dark #colorSelections, body.bb-dark #ColorToolSection, body.bb-dark .optioncontent, body.bb-dark .heroSpecCard{background:#111f34!important;color:#e8eef8!important;border-color:#263954!important} body.bb-dark #optionalEquipment table, body.bb-dark #colorSelections table, body.bb-dark #optionalEquipment td, body.bb-dark #colorSelections td{background:#12233a!important;color:#e8eef8!important;border-color:#263954!important} body.bb-dark .optionalEquipmentLineItem, body.bb-dark .optiontext, body.bb-dark .optioncost, body.bb-dark .heroSpecCard>strong, body.bb-dark .heroSpecsMini strong{color:#e8eef8!important} body.bb-dark .OptionSection{background:#183757!important;color:#fff!important} body.bb-dark #optionalEquipment .optionSearchBox input{background:#0b1626!important;color:#e8eef8!important;border-color:#29415f!important} body.bb-dark .modelHeroDock{background:linear-gradient(135deg,#10233b 0%,#08111f 58%,#0e3150 100%)!important;border-color:#23577d!important;box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)!important} body.bb-dark .heroPlanCard,body.bb-dark .modelPhotoFloat{background:#0b1626!important} body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr!important}.modelPhotoFloat{min-height:210px!important;width:100%!important}.heroSpecsMini{max-height:none!important} #optionalHolder>.row{height:auto!important;min-height:0!important} } @media(max-width:768px){ .modelHeroDock{margin:8px 10px 10px!important}.modelPhotoFloat{min-height:180px!important}.heroSpecCard{margin-top:10px!important}.heroPlanCard{height:110px!important} #ColorToolSection{height:170px!important;min-height:170px!important;flex-basis:170px!important} #optionalEquipment .optionSearchBox input{border-radius:12px!important} .columnarlayout,#colorSelections,.liveSummaryItems,.liveSummaryStandard{border-right:6px solid #0ea5e9!important;box-shadow:inset 0 -30px 24px -28px #0ea5e9!important} } /* v55 fixes */ #colorsOptionsDiv > .container-fluid.no-padding:first-of-type, #speccontainerright{display:none!important} .buildTopBar{background:#071d33!important;color:#fff!important;box-shadow:0 12px 30px rgba(7,29,51,.22)!important}.buildTopBar .buildStepTitle{color:#fff!important;letter-spacing:.02em!important}.buildTopBar .backModelsBtn{background:rgba(255,255,255,.14)!important;color:#fff!important}.topQuoteActions button{box-shadow:0 6px 16px rgba(0,0,0,.18)!important} .modelHeroDock{max-width:1500px!important;grid-template-columns:minmax(260px,.95fr) minmax(420px,1.15fr) minmax(270px,.75fr)!important;gap:14px!important;padding:14px 16px!important;margin:14px auto 10px!important;min-height:0!important;background:linear-gradient(135deg,#071d33 0%,#0b3457 55%,#0ea5e9 140%)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 24px 55px rgba(7,29,51,.24),inset 0 1px 0 rgba(255,255,255,.18)!important;color:#fff!important}.modelHeroCopy h1{color:#fff!important;font-size:clamp(28px,3vw,42px)!important;text-shadow:0 3px 18px rgba(0,0,0,.26)!important}.modelHeroCopy p{color:rgba(255,255,255,.82)!important;margin:6px 0 0!important}.heroEyebrow{color:#9ee7ff!important}.heroActions{display:none!important}.modelPhotoFloat{height:150px!important;width:100%!important;transform:none!important;background:rgba(255,255,255,.96)!important;box-shadow:0 18px 38px rgba(0,0,0,.23)!important}.heroSpecCard{background:rgba(255,255,255,.96)!important;color:#071d33!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:18px!important;padding:10px!important;box-shadow:0 16px 34px rgba(0,0,0,.18)!important}.heroSpecCard>strong{font-size:13px!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-height:none!important;overflow:visible!important}.heroSpecsMini div{padding:6px 8px!important}.heroSpecsMini small{font-size:10px!important}.heroSpecsMini strong{font-size:11px!important}.heroPlanCard{height:82px!important;margin-top:8px!important;border-radius:14px!important;background:#fff!important} .container-fluid.notsummary>.PageSection{font-size:26px!important;font-weight:950!important;color:#071d33!important;background:#eaf7ff!important;border:1px solid #cbefff!important;border-radius:18px!important;max-width:1500px!important;margin:10px auto 12px!important;box-shadow:0 12px 28px rgba(14,165,233,.13)!important}.container-fluid.notsummary>.PageSection::after{content:'Select colors and add-ons, then review the quote on the right.';display:block!important;font-size:12px!important;font-weight:700!important;color:#667085!important;margin-top:4px!important} #optionalHolder>.row{height:min(590px,calc(100vh - 285px))!important;min-height:500px!important;grid-template-columns:minmax(275px,.82fr) minmax(440px,1.16fr) minmax(440px,1.16fr)!important;align-items:stretch!important}.optionbox.notsummary,#optionalHolder>.row>.liveSummaryPanel{height:100%!important;min-height:0!important}.optionbox.notsummary:first-child{display:flex!important;flex-direction:column!important;gap:10px!important}.optionbox.notsummary:first-child>.row{background:transparent!important;margin:0!important;flex:0 0 178px!important}.optionbox.notsummary:first-child #ColorToolSection{height:178px!important;min-height:178px!important;flex:0 0 178px!important;margin:0!important}.optionbox.notsummary:first-child #colorSelections{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}.columnarlayout{height:calc(100% - 62px)!important;max-height:none!important;overflow-y:auto!important}.optionSearchBox{max-width:none!important;margin:0 0 10px!important;padding:0!important}.optionSearchBox input{box-shadow:none!important;border:2px solid #d8eaf5!important;background:#f8fcff!important;padding:12px 16px 12px 42px!important;background-image:linear-gradient(transparent,transparent)!important}.optionSearchBox::before{content:'⌕';position:absolute;margin:8px 0 0 15px;font-size:19px;color:#0ea5e9;z-index:2}.optionSearchBox{position:relative!important} #ColorToolSection{background:#fff!important;border:1px solid var(--bb-border)!important;box-shadow:var(--bb-shadow)!important}#ColorToolSection .col-md-12{height:100%!important;min-height:0!important;background:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}#ColorToolSection img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}#ColorToolSection img[style*="position: absolute"]{top:50%!important;transform:translateY(-50%)!important}.optionbox.notsummary:first-child>.row[style]{background:transparent!important} .moneyNow{display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important;direction:ltr!important;line-height:1!important}.moneyAmount{white-space:nowrap!important}.dirhamMark{position:relative!important;display:inline-block!important;font-weight:950!important;font-family:Arial,Helvetica,sans-serif!important;line-height:1!important;padding:0 .04em!important;transform:skew(-5deg)!important}.dirhamMark:before,.dirhamMark:after{content:''!important;position:absolute!important;left:.08em!important;right:.02em!important;height:1.5px!important;background:currentColor!important;border-radius:2px!important}.dirhamMark:before{top:42%!important}.dirhamMark:after{top:57%!important}.optioncost{white-space:nowrap!important;min-width:72px!important;text-align:center!important}.selectedAddon .optioncost{display:flex!important;align-items:center!important;justify-content:center!important;min-width:82px!important;white-space:nowrap!important;line-height:1!important;padding:6px 8px!important;margin-left:auto!important}.selectedAddon td:last-child{vertical-align:middle!important;text-align:right!important}.selectedAddon .moneyNow{justify-content:center!important} .liveSummaryTotal{background:linear-gradient(135deg,#071d33,#0ea5e9)!important;color:#fff!important;border-radius:16px!important;padding:14px 16px!important;box-shadow:0 15px 32px rgba(14,165,233,.28)!important;border-top:0!important}.liveSummaryTotal strong,.liveSummaryTotal span{color:#fff!important}.showIncludedBtn{background:linear-gradient(135deg,#ffb703,#fb8500)!important;color:#111827!important;box-shadow:0 8px 18px rgba(251,133,0,.32)!important;border:2px solid rgba(255,255,255,.9)!important;animation:viewPulse 1.8s ease-in-out infinite!important}@keyframes viewPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} body.bb-dark .optionbox.notsummary:first-child>.row[style]{background:transparent!important}body.bb-dark #ColorToolSection{background:#0f1f33!important;border-color:#23577d!important}body.bb-dark .container-fluid.notsummary>.PageSection{background:#10233b!important;color:#fff!important;border-color:#23577d!important}body.bb-dark .container-fluid.notsummary>.PageSection::after{color:#9fb3c8!important}body.bb-dark .optionSearchBox input{background:#0b1625!important;color:#fff!important;border-color:#23577d!important}body.bb-dark .modelHeroDock{background:linear-gradient(135deg,#07111f 0%,#10233b 58%,#0e3150 100%)!important} @media(max-width:1180px){#optionalHolder>.row{height:auto!important;min-height:0!important}.modelHeroDock{grid-template-columns:1fr!important}.modelPhotoFloat{height:190px!important}.heroPlanCard{height:105px!important}.heroSpecCard{margin-top:8px!important}.optionbox.notsummary:first-child #ColorToolSection{height:180px!important}.columnarlayout{height:auto!important;max-height:460px!important}} @media(max-width:768px){.modelHeroDock{padding:12px!important}.modelHeroCopy h1{font-size:28px!important}.modelPhotoFloat{height:170px!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important}.container-fluid.notsummary>.PageSection{font-size:23px!important;margin:8px 10px 10px!important}.optionbox.notsummary:first-child #ColorToolSection{height:165px!important}.optionbox.notsummary:first-child #colorSelections,.columnarlayout{max-height:54vh!important;overflow-y:scroll!important;border-right:5px solid #0ea5e9!important;background-image:linear-gradient(to bottom,transparent 80%,rgba(14,165,233,.14))!important}.optionSearchBox input{font-size:15px!important}.mobileSummaryBar{display:flex}.bb-model-step .mobileSummaryBar{display:none!important}} /* v56 fixes from feedback */ /* remove extra repeated headings */ .buildTopBar .buildStepTitle{display:none!important} #colorsOptionsDiv > .container-fluid.no-padding:first-of-type{display:none!important} .container-fluid.notsummary>.PageSection{font-size:0!important;background:linear-gradient(135deg,#eef9ff,#ffffff)!important;color:transparent!important;padding:14px 18px!important} .container-fluid.notsummary>.PageSection:before{content:'Customize Your Boat';display:block!important;font-size:24px!important;line-height:1.1!important;font-weight:950!important;color:#071d33!important;letter-spacing:-.035em!important} .container-fluid.notsummary>.PageSection:after{content:'Choose colors and add-ons, then review the quote on the right.'!important;display:block!important;font-size:12px!important;font-weight:700!important;color:#667085!important;margin-top:4px!important} /* selected model: no full outer frame, only specs card framed */ .modelHeroDock{max-width:1500px!important;grid-template-columns:minmax(250px,.9fr) minmax(300px,1fr) minmax(520px,1.35fr)!important;align-items:center!important;gap:16px!important;padding:8px 16px 10px!important;margin:8px auto 8px!important;min-height:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#071d33!important} .modelHeroCopy{background:linear-gradient(135deg,#071d33,#0b3457)!important;color:#fff!important;border-radius:18px!important;padding:18px!important;box-shadow:0 18px 40px rgba(7,29,51,.22)!important;min-height:155px!important;display:flex!important;flex-direction:column!important;justify-content:center!important} .modelHeroCopy h1{color:#fff!important;font-size:clamp(34px,4.1vw,58px)!important;line-height:.92!important;text-transform:uppercase!important;letter-spacing:-.055em!important;text-shadow:0 8px 22px rgba(0,0,0,.25)!important} .modelHeroCopy p{display:none!important}.heroEyebrow{display:inline-block!important;background:rgba(255,255,255,.14)!important;color:#9ee7ff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;padding:5px 9px!important;width:max-content!important;margin-bottom:8px!important} .modelPhotoFloat{height:155px!important;width:100%!important;transform:none!important;background:#fff!important;border:1px solid #e6edf3!important;border-radius:18px!important;padding:10px!important;box-shadow:0 18px 38px rgba(7,29,51,.12)!important;cursor:zoom-in!important}.modelPhotoFloat img{width:100%!important;height:100%!important;object-fit:contain!important} .heroSpecCard{background:#fff!important;color:#071d33!important;border:1px solid #d7e9f4!important;border-radius:18px!important;padding:12px!important;box-shadow:0 18px 42px rgba(7,29,51,.14)!important;display:grid!important;grid-template-columns:minmax(0,1fr) 190px!important;gap:10px!important;align-items:stretch!important}.heroSpecCard>strong{display:none!important}.heroSpecsMini{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin:0!important;max-height:none!important;overflow:visible!important}.heroSpecsMini div{padding:5px 7px!important;border:1px solid #edf2f7!important;border-radius:10px!important;background:#fbfdff!important;box-shadow:none!important}.heroSpecsMini small{font-size:9px!important;color:#667085!important}.heroSpecsMini strong{font-size:10.5px!important;color:#071d33!important;line-height:1.1!important}.heroPlanCard{height:100%!important;min-height:150px!important;margin:0!important;border:0!important;border-radius:14px!important;background:#f8fafc!important;padding:8px!important;box-shadow:inset 0 0 0 1px #edf2f7!important;cursor:zoom-in!important}.heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important} /* working area: color column same full height as add-ons */ #optionalHolder>.row{height:min(640px,calc(100vh - 235px))!important;min-height:540px!important;grid-template-columns:minmax(310px,.92fr) minmax(440px,1.12fr) minmax(440px,1.12fr)!important;align-items:stretch!important}.optionbox.notsummary:first-child{height:100%!important;display:grid!important;grid-template-rows:190px minmax(0,1fr) auto!important;gap:10px!important}.optionbox.notsummary:first-child>.row{min-height:0!important;height:190px!important;flex:0 0 auto!important}.optionbox.notsummary:first-child #ColorToolSection{height:190px!important;min-height:190px!important;max-height:190px!important}.optionbox.notsummary:first-child #colorSelections{height:100%!important;min-height:0!important;overflow-y:auto!important}.optioncontent,#optionalEquipment,.liveSummaryPanel{height:100%!important;min-height:0!important}.columnarlayout{height:calc(100% - 60px)!important;min-height:0!important;overflow-y:auto!important} /* remove ugly gradients under add-ons/included */ .columnarlayout,#colorSelections,.liveSummaryItems,.liveSummaryStandard{background-image:none!important;box-shadow:none!important;border-right:4px solid #dceefa!important} .liveSummaryItems:after,.liveSummaryStandard:after{content:'';display:block;height:12px} .summaryColumn{background:#fff!important}.includedColumn,.addonsColumn{background:#fff!important} /* total price: bigger and different color */ .liveSummaryTotal{background:linear-gradient(135deg,#0f766e,#14b8a6)!important;color:#fff!important;border-radius:18px!important;padding:16px 18px!important;box-shadow:0 16px 34px rgba(20,184,166,.30)!important}.liveSummaryTotal span{font-size:14px!important;font-weight:950!important;color:#ecfeff!important}.liveSummaryTotal strong{font-size:28px!important;color:#fff!important;line-height:1!important} /* UAE dirham symbol: D with two clear horizontal bars */ .moneyNow{display:inline-flex!important;align-items:baseline!important;gap:5px!important;white-space:nowrap!important;direction:ltr!important;line-height:1!important;unicode-bidi:isolate!important}.moneyAmount{display:inline-block!important;white-space:nowrap!important;line-height:1!important}.dirhamMark{position:relative!important;display:inline-block!important;font-family:Arial Black,Arial,Helvetica,sans-serif!important;font-weight:900!important;line-height:.9!important;font-size:1.02em!important;width:.78em!important;min-width:.78em!important;text-align:left!important;letter-spacing:-.06em!important;transform:skew(-6deg)!important}.dirhamMark:before,.dirhamMark:after{content:''!important;position:absolute!important;left:-.05em!important;width:.82em!important;height:.105em!important;background:currentColor!important;border-radius:10px!important;z-index:3!important}.dirhamMark:before{top:.33em!important}.dirhamMark:after{top:.52em!important}.optioncost,.optioncost *{white-space:nowrap!important}.optioncost{min-width:98px!important;text-align:right!important;padding-left:6px!important}.selectedAddon .optioncost{min-width:108px!important;text-align:center!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.selectedAddon td:last-child{min-width:118px!important;width:118px!important;white-space:nowrap!important;vertical-align:middle!important}.liveSummaryItem strong{min-width:96px!important;text-align:right!important;white-space:nowrap!important} /* dark mode keep photo frame clean */ body.bb-dark .modelHeroDock{background:transparent!important;border:0!important;box-shadow:none!important}body.bb-dark .modelHeroCopy{background:linear-gradient(135deg,#07111f,#10233b)!important}body.bb-dark .heroSpecCard,body.bb-dark .modelPhotoFloat{background:#0f1f33!important;border-color:#23577d!important}body.bb-dark .heroPlanCard{background:#0b1626!important;box-shadow:inset 0 0 0 1px #29415f!important}body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important}body.bb-dark .container-fluid.notsummary>.PageSection{background:#10233b!important;border-color:#23577d!important}body.bb-dark .container-fluid.notsummary>.PageSection:before{color:#fff!important}body.bb-dark .container-fluid.notsummary>.PageSection:after{color:#9fb3c8!important}body.bb-dark .summaryColumn{background:#0f1f33!important} @media(max-width:1180px){.modelHeroDock{grid-template-columns:1fr 1fr!important}.heroSpecCard{grid-column:1/-1!important}.heroPlanCard{min-height:130px!important}#optionalHolder>.row{height:auto!important;min-height:0!important}.optionbox.notsummary:first-child{display:flex!important}.optionbox.notsummary:first-child #ColorToolSection{height:180px!important}} @media(max-width:768px){.modelHeroDock{display:block!important;margin:8px 10px!important;padding:0!important}.modelHeroCopy{min-height:0!important;padding:14px!important;margin-bottom:10px!important}.modelHeroCopy h1{font-size:32px!important}.modelPhotoFloat{height:170px!important;margin-bottom:10px!important}.heroSpecCard{display:block!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important}.heroPlanCard{height:120px!important;margin-top:10px!important}.container-fluid.notsummary>.PageSection{margin:8px 10px 10px!important}.container-fluid.notsummary>.PageSection:before{font-size:22px!important}#optionalHolder>.row{height:auto!important}.optionbox.notsummary:first-child{display:flex!important}.optionbox.notsummary:first-child #colorSelections,.columnarlayout{max-height:54vh!important;overflow-y:scroll!important;border-right:6px solid #0ea5e9!important}} /* v57 final fixes */ #colorsOptionsDiv > .container-fluid.no-padding > .PageSection{display:none!important} #colorsOptionsDiv{background:#eef4fb!important} .modelHeroDock{ max-width:1500px!important; display:grid!important; grid-template-columns:minmax(250px,.75fr) minmax(300px,.85fr) minmax(520px,1.25fr)!important; grid-template-areas:"model photo specs"!important; gap:18px!important; align-items:stretch!important; padding:18px!important; margin:0 auto 12px!important; background:linear-gradient(135deg,#06182b 0%,#09243d 58%,#0b3457 100%)!important; border-radius:0 0 28px 28px!important; border:0!important; box-shadow:0 20px 46px rgba(7,29,51,.25)!important; } .modelHeroCopy{grid-area:model!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;min-height:0!important;color:#fff!important;align-self:center!important}.modelHeroCopy h1{color:#fff!important;font-size:clamp(34px,4vw,56px)!important}.heroEyebrow{background:rgba(255,255,255,.14)!important;color:#9ee7ff!important}.modelPhotoFloat{grid-area:photo!important;align-self:center!important;width:100%!important;height:190px!important;background:rgba(255,255,255,.96)!important;border:0!important;box-shadow:0 16px 36px rgba(0,0,0,.23)!important;transform:none!important}.heroSpecCard{grid-area:specs!important;background:#fff!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:20px!important;padding:12px!important;box-shadow:0 18px 38px rgba(0,0,0,.22)!important;max-height:230px!important;overflow:auto!important}.heroSpecCard>strong{display:none!important}.heroSpecsMini{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.heroSpecsMini div{background:#f8fbff!important;border:1px solid #e4edf6!important;border-radius:12px!important;padding:7px 9px!important}.heroSpecsMini small{font-size:10px!important;color:#667085!important}.heroSpecsMini strong{font-size:12px!important;color:#071d33!important}.heroPlanCard{display:none!important} .container-fluid.notsummary>.PageSection{background:linear-gradient(135deg,#0ea5e9,#071d33)!important;color:#fff!important;border-radius:20px!important;margin:0 auto 12px!important;max-width:1360px!important;box-shadow:0 16px 34px rgba(7,29,51,.18)!important}.container-fluid.notsummary>.PageSection:before{content:'Build Your Boat'!important;color:#fff!important}.container-fluid.notsummary>.PageSection:after{content:'Choose colors and add-ons, then download or send the quote.'!important;color:#dff5ff!important} #optionalHolder>.row{align-items:stretch!important;min-height:680px!important;height:calc(100vh - 305px)!important;max-height:820px!important}.optionbox.notsummary{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important}.optionbox.notsummary:first-child{gap:10px!important}.optionbox.notsummary:first-child>#ColorToolSection{height:210px!important;flex:0 0 210px!important}.optionbox.notsummary:first-child>#colorSelections{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important}.columnarlayout{height:100%!important;max-height:none!important;overflow:auto!important}.optioncontent,#colorSelections,#optionalEquipment{height:100%!important;min-height:0!important}.liveSummaryPanel{height:100%!important;max-height:none!important}.summaryColumns{flex:1 1 auto!important;min-height:0!important}.liveSummaryItems,.liveSummaryStandard{max-height:none!important;flex:1 1 auto!important;overflow:auto!important} .optionSearchBox{margin:0 0 12px!important;padding:0!important;position:relative!important}.optionSearchBox::before{content:'⌕'!important;position:absolute!important;left:15px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;line-height:1!important;font-size:20px!important;color:#0ea5e9!important}.optionSearchBox input{height:44px!important;padding-left:45px!important;box-shadow:none!important;border:2px solid #d8eaf5!important;background:#f8fcff!important;border-radius:14px!important} .summaryColumn{background:#fff!important;border:1px solid #e6edf3!important}.summaryColumnTitle{background:transparent!important;border-bottom:1px solid #eef2f7!important}.includedColumn .summaryColumnTitle strong{font-size:15px!important;color:#059669!important;background:#ecfdf5!important;border:1px solid #a7f3d0!important;border-radius:999px!important;padding:5px 10px!important;text-transform:uppercase!important;letter-spacing:.03em!important}.showIncludedBtn{background:linear-gradient(135deg,#0ea5e9,#0284c7)!important;color:#fff!important;box-shadow:0 8px 18px rgba(2,132,199,.28)!important;border:0!important;animation:viewPulse 1.8s ease-in-out infinite!important} .liveSummaryTotal{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;background:linear-gradient(135deg,#7c3aed,#0ea5e9)!important;color:#fff!important;border-radius:18px!important;padding:18px 20px!important;box-shadow:0 16px 34px rgba(124,58,237,.28)!important}.liveSummaryTotal span{font-size:16px!important;font-weight:950!important;color:#fff!important}.liveSummaryTotal strong{font-size:32px!important;color:#fff!important;line-height:1!important;display:flex!important;align-items:center!important}.liveSummaryTotal .moneyNow{align-items:center!important} .moneyNow{display:inline-flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important;direction:ltr!important;line-height:1!important;unicode-bidi:isolate!important}.moneyAmount{display:inline-block!important;white-space:nowrap!important;line-height:1!important}.dirhamMark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:1.05em!important;height:1.05em!important;min-width:1.05em!important;line-height:1!important;color:currentColor!important}.dirhamSvg{width:1.05em!important;height:1.05em!important;display:block!important;overflow:visible!important}.dirhamMark:before,.dirhamMark:after{display:none!important;content:none!important}.optioncost{white-space:nowrap!important;min-width:112px!important;text-align:right!important}.optioncost .moneyNow{justify-content:flex-end!important}.selectedAddon .optioncost{min-width:120px!important}.liveSummaryItem strong{min-width:112px!important;text-align:right!important;white-space:nowrap!important}.liveSummaryItem strong .moneyNow{justify-content:flex-end!important} body.bb-dark #colorsOptionsDiv{background:#07111f!important}body.bb-dark .mobileSummaryBar,body.bb-dark .topQuoteActions,body.bb-dark #footerFloat,body.bb-dark .optionfooter{background:#07111f!important;color:#fff!important;border-color:#23577d!important}body.bb-dark .optionSearchBox input{background:#0b1625!important;color:#fff!important;border-color:#23577d!important}body.bb-dark #ColorToolSection{background:#0f1f33!important;border-color:#23577d!important}body.bb-dark #ColorToolSection>.container,body.bb-dark #ColorToolSection .row,body.bb-dark #ColorToolSection [style*="background-color"]{background:transparent!important}body.bb-dark .summaryColumn{background:#0f1f33!important;border-color:#23577d!important}body.bb-dark .includedColumn .summaryColumnTitle strong{background:#062d23!important;color:#6ee7b7!important;border-color:#047857!important}body.bb-dark .heroSpecCard{background:#0f1f33!important;border-color:#23577d!important}body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important}body.bb-dark .heroSpecsMini strong{color:#fff!important}body.bb-dark .heroSpecsMini small{color:#9fb3c8!important} @media(max-width:1180px){.modelHeroDock{grid-template-columns:1fr 1fr!important;grid-template-areas:"model photo" "specs specs"!important}.heroSpecCard{max-height:260px!important}#optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important}.optionbox.notsummary:first-child>#ColorToolSection{height:190px!important;flex-basis:190px!important}.columnarlayout{max-height:460px!important}.liveSummaryPanel{height:auto!important}} @media(max-width:768px){.modelHeroDock{display:block!important;border-radius:0 0 22px 22px!important;padding:14px!important}.modelHeroCopy{margin-bottom:10px!important}.modelPhotoFloat{height:165px!important;margin-bottom:10px!important}.heroSpecCard{max-height:210px!important}.heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important}.container-fluid.notsummary>.PageSection{margin:8px 10px 10px!important}.optionbox.notsummary:first-child>#ColorToolSection{height:165px!important;flex-basis:165px!important}.optionbox.notsummary:first-child>#colorSelections,.columnarlayout{max-height:54vh!important;overflow-y:scroll!important;border-right:6px solid #0ea5e9!important;background-image:linear-gradient(to bottom,transparent 82%,rgba(14,165,233,.12))!important}.mobileSummaryBar{display:flex}.bb-model-step .mobileSummaryBar{display:none!important}} /* ===== v58 fixes from feedback ===== */ /* Remove only the old Specifications title, keep the specs content copied into the top card */ #colorsOptionsDiv > .container-fluid.no-padding:first-of-type, #colorsOptionsDiv > .container-fluid.no-padding:first-of-type .PageSection{ display:none!important; } /* Light selected-model header again: selected model + photo together, specs card on the right */ .modelHeroDock{ max-width:1500px!important; display:grid!important; grid-template-columns:minmax(520px,1.1fr) minmax(560px,1fr)!important; grid-template-areas:"model specs"!important; gap:18px!important; align-items:stretch!important; padding:18px!important; margin:12px auto 14px!important; background:linear-gradient(135deg,#eef8ff 0%,#ffffff 52%,#edf7ff 100%)!important; border:1px solid #dcecf7!important; border-radius:26px!important; box-shadow:0 18px 42px rgba(7,29,51,.13)!important; color:#071d33!important; } .modelHeroCopy{ grid-area:model!important; display:grid!important; grid-template-columns:minmax(220px,.9fr) minmax(260px,1fr)!important; gap:14px!important; align-items:center!important; background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%)!important; border:1px solid #dcecf7!important; border-radius:22px!important; box-shadow:0 12px 28px rgba(7,29,51,.10)!important; padding:16px!important; min-height:190px!important; color:#071d33!important; } .modelHeroCopy h1{ color:#071d33!important; font-size:clamp(34px,4vw,58px)!important; line-height:.92!important; text-transform:uppercase!important; letter-spacing:-.055em!important; text-shadow:none!important; margin:0!important; } .heroEyebrow{ background:#e6f6ff!important; color:#0284c7!important; border:1px solid #bde9ff!important; border-radius:999px!important; padding:5px 9px!important; width:max-content!important; margin-bottom:8px!important; } .modelHeroCopy p{display:none!important;} .modelPhotoFloat{ grid-area:model!important; justify-self:end!important; align-self:center!important; width:min(48%,360px)!important; height:168px!important; margin-right:16px!important; background:#fff!important; border:1px solid #dcecf7!important; border-radius:18px!important; box-shadow:0 12px 28px rgba(7,29,51,.13)!important; transform:none!important; z-index:2!important; } .modelPhotoFloat img{object-fit:contain!important;} .heroSpecCard{ grid-area:specs!important; display:grid!important; grid-template-columns:1fr 190px!important; gap:12px!important; align-items:stretch!important; background:#fff!important; border:1px solid #dcecf7!important; border-radius:22px!important; padding:12px!important; box-shadow:0 12px 28px rgba(7,29,51,.10)!important; max-height:none!important; overflow:hidden!important; } .heroSpecCard>strong{display:none!important;} .heroSpecsMini{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; overflow:auto!important; max-height:178px!important; padding-right:4px!important; } .heroSpecsMini div{ background:#f8fbff!important; border:1px solid #e4edf6!important; border-radius:12px!important; padding:7px 9px!important; } .heroSpecsMini small{font-size:10px!important;color:#667085!important;} .heroSpecsMini strong{font-size:12px!important;color:#071d33!important;} .heroPlanCard{ display:flex!important; align-items:center!important; justify-content:center!important; height:auto!important; min-height:150px!important; margin:0!important; border:1px solid #e4edf6!important; border-radius:16px!important; background:#fff!important; box-shadow:inset 0 0 0 1px rgba(7,29,51,.03)!important; overflow:hidden!important; cursor:zoom-in!important; } .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} /* Make the color section truly fill to the same height as add-ons */ #optionalHolder>.row{ align-items:stretch!important; min-height:700px!important; height:calc(100vh - 285px)!important; max-height:850px!important; } .optionbox.notsummary{height:100%!important;min-height:0!important;} .optionbox.notsummary:first-child{ display:flex!important; flex-direction:column!important; gap:10px!important; } .optionbox.notsummary:first-child > .row:first-child{ flex:0 0 220px!important; height:220px!important; min-height:220px!important; margin:0!important; background:transparent!important; } .optionbox.notsummary:first-child #ColorToolSection{ height:100%!important; min-height:0!important; width:100%!important; margin:0!important; } .optionbox.notsummary:first-child #ColorToolSection .col-md-12{ min-height:0!important; height:100%!important; } .optionbox.notsummary:first-child #ColorToolSection img{ max-height:100%!important; height:100%!important; object-fit:contain!important; } .optionbox.notsummary:first-child #colorSelections{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow:auto!important; margin:0!important; } body.bb-dark .modelHeroDock{background:linear-gradient(135deg,#10233b 0%,#07111f 100%)!important;border-color:#23577d!important;} body.bb-dark .modelHeroCopy,body.bb-dark .heroSpecCard{background:#0f1f33!important;border-color:#23577d!important;color:#fff!important;} body.bb-dark .modelHeroCopy h1,body.bb-dark .heroSpecsMini strong{color:#fff!important;} body.bb-dark .heroPlanCard,body.bb-dark .modelPhotoFloat{background:#0b1625!important;border-color:#29415f!important;} body.bb-dark .heroEyebrow{background:#173451!important;color:#eaf7ff!important;border-color:#23577d!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr!important;grid-template-areas:"model" "specs"!important;} .modelHeroCopy{grid-template-columns:1fr 280px!important;} .modelPhotoFloat{width:270px!important;margin-right:16px!important;} #optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important;} .optionbox.notsummary:first-child > .row:first-child{flex-basis:190px!important;height:190px!important;min-height:190px!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;margin:8px 10px 12px!important;padding:12px!important;border-radius:20px!important;} .modelHeroCopy{display:block!important;min-height:0!important;padding:14px!important;margin-bottom:10px!important;} .modelHeroCopy h1{font-size:32px!important;} .modelPhotoFloat{position:relative!important;display:block!important;width:100%!important;height:165px!important;margin:12px 0 0!important;} .heroSpecCard{display:block!important;max-height:none!important;overflow:visible!important;} .heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:180px!important;} .heroPlanCard{height:120px!important;min-height:120px!important;margin-top:10px!important;} .optionbox.notsummary:first-child > .row:first-child{flex-basis:165px!important;height:165px!important;min-height:165px!important;} } /* v61: user requested v58 base + v57 split top + v57 Customize frame + v60 extended color frame */ #colorsOptionsDiv > .container-fluid.no-padding:first-of-type, #colorsOptionsDiv > .container-fluid.no-padding > .PageSection{ display:none!important; } #colorsOptionsDiv{background:#eef4fb!important;} /* Top selected model area: split like v57 */ .modelHeroDock{ max-width:1500px!important; display:grid!important; grid-template-columns:minmax(250px,.75fr) minmax(300px,.85fr) minmax(520px,1.25fr)!important; grid-template-areas:"model photo specs"!important; gap:18px!important; align-items:stretch!important; padding:18px!important; margin:0 auto 12px!important; background:linear-gradient(135deg,#06182b 0%,#09243d 58%,#0b3457 100%)!important; border-radius:0 0 28px 28px!important; border:0!important; box-shadow:0 20px 46px rgba(7,29,51,.25)!important; color:#071d33!important; } .modelHeroCopy{ grid-area:model!important; display:flex!important; flex-direction:column!important; justify-content:center!important; background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; padding:10px 0!important; min-height:0!important; color:#fff!important; align-self:center!important; } .modelHeroCopy h1{ color:#fff!important; font-size:clamp(34px,4vw,56px)!important; line-height:.92!important; text-transform:uppercase!important; letter-spacing:-.055em!important; text-shadow:0 8px 22px rgba(0,0,0,.25)!important; } .heroEyebrow{ display:inline-block!important; background:rgba(255,255,255,.14)!important; color:#9ee7ff!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:999px!important; padding:5px 9px!important; width:max-content!important; margin-bottom:8px!important; } .modelPhotoFloat{ grid-area:photo!important; align-self:center!important; justify-self:stretch!important; width:100%!important; height:190px!important; margin:0!important; background:rgba(255,255,255,.96)!important; border:0!important; border-radius:18px!important; padding:10px!important; box-shadow:0 16px 36px rgba(0,0,0,.23)!important; transform:none!important; cursor:zoom-in!important; z-index:auto!important; } .modelPhotoFloat img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} .heroSpecCard{ grid-area:specs!important; background:#fff!important; border:1px solid rgba(255,255,255,.75)!important; border-radius:20px!important; padding:12px!important; box-shadow:0 18px 38px rgba(0,0,0,.22)!important; max-height:230px!important; overflow:auto!important; display:grid!important; grid-template-columns:minmax(0,1fr) 190px!important; gap:12px!important; align-items:stretch!important; } .heroSpecCard>strong{ display:block!important; grid-column:1 / -1!important; font-size:15px!important; font-weight:950!important; color:#071d33!important; letter-spacing:-.02em!important; margin:0!important; padding:0 0 2px!important; } .heroSpecsMini{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; margin:0!important; overflow:auto!important; max-height:160px!important; padding-right:4px!important; } .heroSpecsMini div{background:#f8fbff!important;border:1px solid #e4edf6!important;border-radius:12px!important;padding:7px 9px!important;box-shadow:none!important;} .heroSpecsMini small{font-size:10px!important;color:#667085!important;} .heroSpecsMini strong{font-size:12px!important;color:#071d33!important;} .heroPlanCard{ display:flex!important; align-items:center!important; justify-content:center!important; height:100%!important; min-height:150px!important; margin:0!important; border:1px solid #e4edf6!important; border-radius:16px!important; background:#fff!important; padding:8px!important; box-shadow:inset 0 0 0 1px rgba(7,29,51,.03)!important; overflow:hidden!important; cursor:zoom-in!important; } .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} /* Restore the Customize Your Boat frame */ .container-fluid.notsummary>.PageSection{ font-size:0!important; background:linear-gradient(135deg,#0ea5e9,#071d33)!important; color:transparent!important; border-radius:20px!important; margin:0 auto 12px!important; max-width:1500px!important; box-shadow:0 16px 34px rgba(7,29,51,.18)!important; padding:15px 18px!important; border:0!important; } .container-fluid.notsummary>.PageSection:before{ content:'Customize Your Boat'!important; display:block!important; color:#fff!important; font-size:26px!important; line-height:1.05!important; font-weight:950!important; letter-spacing:-.04em!important; } .container-fluid.notsummary>.PageSection:after{ content:'Choose colors and add-ons, then download or send the quote.'!important; display:block!important; color:#dff5ff!important; font-size:12px!important; line-height:1.25!important; font-weight:700!important; margin-top:4px!important; } /* Keep v60 full-height left choosing-colors frame */ #optionalHolder > .row{ align-items:stretch!important; height:min(640px,calc(100vh - 235px))!important; min-height:540px!important; grid-template-columns:minmax(310px,.92fr) minmax(440px,1.12fr) minmax(440px,1.12fr)!important; } #optionalHolder > .row > .optionbox.notsummary:first-child{ height:100%!important; min-height:0!important; display:grid!important; grid-template-rows:190px minmax(0,1fr) auto!important; gap:10px!important; } #optionalHolder > .row > .optionbox.notsummary:first-child > .row:first-child{ height:190px!important; min-height:190px!important; max-height:190px!important; margin:0!important; background:transparent!important; } #optionalHolder > .row > .optionbox.notsummary:first-child #ColorToolSection{ height:190px!important; min-height:190px!important; max-height:190px!important; width:100%!important; margin:0!important; } #optionalHolder > .row > .optionbox.notsummary:first-child #ColorToolSection .col-md-12{ min-height:0!important; height:100%!important; } #optionalHolder > .row > .optionbox.notsummary:first-child #ColorToolSection img{ max-height:100%!important; height:100%!important; object-fit:contain!important; } #optionalHolder > .row > .optionbox.notsummary:first-child #colorSelections{ height:100%!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; align-self:stretch!important; margin:0!important; } #CustomColorDis{margin:0!important;padding:0 0 4px!important;line-height:1.2!important;} /* Hide broken overlay images but keep valid boat rendering images */ #ColorToolSection img:not([src]), #ColorToolSection img[src=""]{opacity:0!important;} body.bb-dark .modelHeroDock{background:linear-gradient(135deg,#06182b 0%,#07111f 100%)!important;border:0!important;box-shadow:0 20px 46px rgba(0,0,0,.35)!important;} body.bb-dark .modelHeroCopy{background:transparent!important;} body.bb-dark .heroSpecCard,body.bb-dark .modelPhotoFloat{background:#0f1f33!important;border-color:#23577d!important;} body.bb-dark .heroSpecCard>strong,body.bb-dark .heroSpecsMini strong{color:#fff!important;} body.bb-dark .heroPlanCard{background:#0b1626!important;border-color:#29415f!important;box-shadow:inset 0 0 0 1px #29415f!important;} body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important;} body.bb-dark .heroSpecsMini small{color:#9fb3c8!important;} body.bb-dark .container-fluid.notsummary>.PageSection{background:linear-gradient(135deg,#0ea5e9,#071d33)!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr 1fr!important;grid-template-areas:"model photo" "specs specs"!important;} .heroSpecCard{max-height:260px!important;} #optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important;} #optionalHolder > .row > .optionbox.notsummary:first-child{display:flex!important;} #optionalHolder > .row > .optionbox.notsummary:first-child #ColorToolSection{height:180px!important;min-height:180px!important;max-height:180px!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;border-radius:0 0 22px 22px!important;padding:14px!important;margin:0 10px 12px!important;} .modelHeroCopy{margin-bottom:10px!important;} .modelPhotoFloat{height:165px!important;margin:0 0 10px!important;} .heroSpecCard{display:block!important;max-height:230px!important;} .heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:135px!important;} .heroPlanCard{height:110px!important;min-height:110px!important;margin-top:10px!important;} .container-fluid.notsummary>.PageSection{margin:8px 10px 10px!important;} .container-fluid.notsummary>.PageSection:before{font-size:22px!important;} #optionalHolder>.row{height:auto!important;} #optionalHolder > .row > .optionbox.notsummary:first-child #ColorToolSection{height:165px!important;min-height:165px!important;max-height:165px!important;} #optionalHolder > .row > .optionbox.notsummary:first-child #colorSelections,.columnarlayout{max-height:54vh!important;overflow-y:scroll!important;border-right:6px solid #0ea5e9!important;} } /* v62: keep v58 base, improve top layout + dark mode + equal frame height */ /* Top area: light page, only selected model is dark; photo left, specs right */ #colorsOptionsDiv{background:#eef4fb!important;} .modelHeroDock{ max-width:1500px!important; display:grid!important; grid-template-columns:minmax(300px,.95fr) minmax(260px,.72fr) minmax(540px,1.28fr)!important; grid-template-areas:"photo model specs"!important; gap:16px!important; align-items:stretch!important; margin:12px auto 14px!important; padding:0 16px!important; background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; } .modelPhotoFloat{ grid-area:photo!important; width:100%!important; height:205px!important; min-height:205px!important; margin:0!important; align-self:stretch!important; background:#fff!important; border:1px solid #dbe8f3!important; border-radius:22px!important; box-shadow:0 16px 34px rgba(7,29,51,.12)!important; padding:12px!important; transform:none!important; } .modelPhotoFloat img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} .modelHeroCopy{ grid-area:model!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; min-height:205px!important; padding:20px!important; background:linear-gradient(135deg,#06182b 0%,#0b3457 100%)!important; border:1px solid rgba(255,255,255,.18)!important; border-radius:22px!important; box-shadow:0 20px 42px rgba(7,29,51,.24)!important; color:#fff!important; } .heroEyebrow{ background:rgba(255,255,255,.14)!important; color:#9ee7ff!important; border:1px solid rgba(255,255,255,.2)!important; border-radius:999px!important; padding:6px 10px!important; font-size:11px!important; font-weight:950!important; margin-bottom:10px!important; } .modelHeroCopy h1{ color:#fff!important; font-size:clamp(38px,4.2vw,64px)!important; line-height:.9!important; letter-spacing:-.06em!important; text-transform:uppercase!important; text-shadow:0 10px 26px rgba(0,0,0,.34)!important; } .modelHeroCopy p,.heroActions{display:none!important;} .heroSpecCard{ grid-area:specs!important; display:grid!important; grid-template-columns:minmax(0,1fr) 190px!important; gap:12px!important; align-items:stretch!important; min-height:205px!important; max-height:205px!important; overflow:hidden!important; background:#fff!important; border:1px solid #dbe8f3!important; border-radius:22px!important; box-shadow:0 16px 34px rgba(7,29,51,.12)!important; padding:12px!important; } .heroSpecCard>strong{ display:block!important; grid-column:1/-1!important; color:#071d33!important; font-size:15px!important; font-weight:950!important; letter-spacing:-.02em!important; margin:0!important; padding:0!important; } .heroSpecsMini{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; margin:0!important; max-height:150px!important; overflow:auto!important; padding-right:4px!important; } .heroSpecsMini div{background:#f8fbff!important;border:1px solid #e5eef7!important;border-radius:12px!important;padding:7px 9px!important;box-shadow:none!important;} .heroSpecsMini small{font-size:10px!important;color:#667085!important;line-height:1.05!important;} .heroSpecsMini strong{font-size:12px!important;color:#071d33!important;line-height:1.1!important;} .heroPlanCard{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:145px!important; height:100%!important; background:#fff!important; border:1px solid #e5eef7!important; border-radius:16px!important; padding:8px!important; overflow:hidden!important; cursor:zoom-in!important; } .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} /* Bring back/polish Customize Your Boat frame */ .container-fluid.notsummary>.PageSection{ display:block!important; max-width:1500px!important; margin:0 auto 12px!important; padding:16px 20px!important; border:0!important; border-radius:22px!important; background:linear-gradient(135deg,#ffffff 0%,#eaf7ff 100%)!important; box-shadow:0 16px 34px rgba(7,29,51,.12)!important; color:transparent!important; font-size:0!important; } .container-fluid.notsummary>.PageSection:before{ content:'Customize Your Boat'!important; display:block!important; color:#071d33!important; font-size:28px!important; line-height:1.05!important; font-weight:950!important; letter-spacing:-.045em!important; } .container-fluid.notsummary>.PageSection:after{ content:'Choose colors and add-ons, then download or send the quote.'!important; display:block!important; color:#667085!important; font-size:12px!important; line-height:1.25!important; font-weight:700!important; margin-top:4px!important; } /* Make the three middle frames reach the same bottom */ #optionalHolder>.row{ align-items:stretch!important; height:calc(100vh - 330px)!important; min-height:610px!important; max-height:none!important; } #optionalHolder>.row>.optionbox.notsummary, #optionalEquipment, #colorSelections, .liveSummaryPanel{ height:100%!important; min-height:0!important; max-height:none!important; } .optionbox.notsummary:first-child{ display:grid!important; grid-template-rows:190px minmax(0,1fr) auto!important; gap:10px!important; } .optionbox.notsummary:first-child>#ColorToolSection, #optionalHolder > .row > .optionbox.notsummary:first-child > .row:first-child{ height:190px!important; min-height:190px!important; max-height:190px!important; } .columnarlayout,#colorSelections{max-height:none!important;height:100%!important;overflow-y:auto!important;} .liveSummaryItems,.liveSummaryStandard{max-height:none!important;overflow-y:auto!important;} /* Dark mode fixes */ body.bb-dark,body.bb-dark html,#colorsOptionsDiv.bb-dark{background:#07111f!important;} body.bb-dark #colorsOptionsDiv{background:#07111f!important;} body.bb-dark .mobileSummaryBar, body.bb-dark #footerFloat, body.bb-dark .optionfooter, body.bb-dark .selectedBuildBar{ background:#0b1626!important; border-color:#263954!important; color:#eaf2ff!important; } body.bb-dark .modelHeroDock{background:transparent!important;box-shadow:none!important;border:0!important;} body.bb-dark .modelPhotoFloat{background:#fff!important;border-color:#dbe8f3!important;} body.bb-dark .modelHeroCopy{background:linear-gradient(135deg,#06182b 0%,#0b3457 100%)!important;} body.bb-dark .heroSpecCard{background:#0f1f33!important;border-color:#23577d!important;color:#fff!important;} body.bb-dark .heroSpecCard>strong,body.bb-dark .heroSpecsMini strong{color:#fff!important;} body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important;} body.bb-dark .heroSpecsMini small{color:#9fb3c8!important;} body.bb-dark .heroPlanCard{background:#fff!important;border-color:#dbe8f3!important;} body.bb-dark .container-fluid.notsummary>.PageSection{background:linear-gradient(135deg,#10233b,#07111f)!important;border:1px solid #23577d!important;} body.bb-dark .container-fluid.notsummary>.PageSection:before{color:#fff!important;} body.bb-dark .container-fluid.notsummary>.PageSection:after{color:#9fb3c8!important;} body.bb-dark #colorSelections, body.bb-dark #optionalEquipment, body.bb-dark .optioncontent, body.bb-dark .summaryColumn, body.bb-dark .liveSummaryPanel{background:#0f1f33!important;border-color:#23577d!important;} body.bb-dark #colorSelections table, body.bb-dark #optionalEquipment table, body.bb-dark #colorSelections tr, body.bb-dark #optionalEquipment tr, body.bb-dark #colorSelections td, body.bb-dark #optionalEquipment td, body.bb-dark td[bgcolor="#E8EFF1"]{ background:#13263d!important; color:#eaf2ff!important; } body.bb-dark .optioncost, body.bb-dark .optioncostselected, body.bb-dark .dirhamAmount, body.bb-dark .dirhamSymbol, body.bb-dark .optiontext, body.bb-dark .optionalEquipmentLineItem{color:#eaf2ff!important;} body.bb-dark .optioncost{white-space:nowrap!important;display:inline-flex!important;align-items:center!important;gap:6px!important;} body.bb-dark .radioButton,.checkBox{background:#0b1626!important;border-color:#6b7d90!important;} body.bb-dark .radioButtonChecked,body.bb-dark .checkboxChecked{background:#0ea5e9!important;border-color:#0ea5e9!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr 1fr!important;grid-template-areas:"photo model" "specs specs"!important;padding:0 12px!important;} .heroSpecCard{max-height:260px!important;} #optionalHolder>.row{height:auto!important;min-height:0!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;margin:8px 10px 12px!important;padding:0!important;} .modelPhotoFloat,.modelHeroCopy,.heroSpecCard{min-height:0!important;height:auto!important;margin-bottom:10px!important;} .modelPhotoFloat{height:165px!important;} .modelHeroCopy{padding:16px!important;} .modelHeroCopy h1{font-size:34px!important;} .heroSpecCard{display:block!important;max-height:250px!important;overflow:auto!important;} .heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:145px!important;} .heroPlanCard{height:110px!important;min-height:110px!important;margin-top:10px!important;} .container-fluid.notsummary>.PageSection{margin:8px 10px 10px!important;} .container-fluid.notsummary>.PageSection:before{font-size:23px!important;} #optionalHolder>.row{height:auto!important;min-height:0!important;} } /* v63 final requested fixes: shorter frames, wider summary, restore customize bar, connected selected model */ /* Restore the exact Customize Your Boat frame look */ .buildTopBar .buildStepTitle{display:none!important} #colorsOptionsDiv > .container-fluid.no-padding:first-of-type{display:none!important} .container-fluid.notsummary>.PageSection{ display:block!important; max-width:1500px!important; margin:0 auto 12px!important; font-size:0!important; background:linear-gradient(135deg,#eef9ff,#ffffff)!important; color:transparent!important; padding:14px 18px!important; border:1px solid #d8eaf8!important; border-radius:0 0 22px 22px!important; box-shadow:0 14px 30px rgba(7,29,51,.12)!important; } .container-fluid.notsummary>.PageSection:before{ content:'Customize Your Boat'!important; display:block!important; font-size:24px!important; line-height:1.1!important; font-weight:950!important; color:#071d33!important; letter-spacing:-.035em!important; } .container-fluid.notsummary>.PageSection:after{ content:'Choose colors and add-ons, then review the quote on the right.'!important; display:block!important; font-size:12px!important; font-weight:700!important; color:#667085!important; margin-top:4px!important; } /* Selected model area: connect it to the top and make it less square */ .modelHeroDock{ margin:0 auto 0!important; padding:0 16px!important; gap:16px!important; } .modelHeroCopy{ border-radius:0 0 28px 28px!important; min-height:190px!important; box-shadow:0 22px 42px rgba(7,29,51,.26)!important; transform:translateY(-1px)!important; } .modelHeroCopy h1{ font-size:clamp(42px,4.6vw,70px)!important; color:#fff!important; } .heroEyebrow{ color:#b6f0ff!important; background:rgba(255,255,255,.16)!important; } .modelPhotoFloat,.heroSpecCard{ height:190px!important; min-height:190px!important; max-height:190px!important; } .heroSpecCard{grid-template-columns:minmax(0,1fr) 180px!important;} .heroSpecsMini{max-height:132px!important;} .heroPlanCard{min-height:128px!important;} /* Middle frames: keep equal, but stop before footer */ .container-fluid.notsummary{padding-bottom:95px!important;} #optionalHolder>.row{ align-items:stretch!important; grid-template-columns:minmax(310px,.85fr) minmax(470px,1.12fr) minmax(500px,1.28fr)!important; height:min(610px,calc(100vh - 375px))!important; min-height:500px!important; max-height:610px!important; margin-bottom:100px!important; } #optionalHolder>.row>.optionbox.notsummary, #optionalEquipment, #colorSelections, .liveSummaryPanel{ height:100%!important; min-height:0!important; max-height:100%!important; } .liveSummaryPanel{ min-width:470px!important; width:100%!important; max-height:100%!important; } .summaryColumns{grid-template-columns:1fr 1fr!important;} .optionbox.notsummary:first-child{ display:grid!important; grid-template-rows:185px minmax(0,1fr) auto!important; gap:10px!important; } .optionbox.notsummary:first-child>#ColorToolSection, #optionalHolder > .row > .optionbox.notsummary:first-child > .row:first-child{ height:185px!important; min-height:185px!important; max-height:185px!important; } .optionbox.notsummary:first-child>#colorSelections, .columnarlayout{ height:100%!important; max-height:none!important; overflow-y:auto!important; } .liveSummaryItems,.liveSummaryStandard{ max-height:none!important; overflow-y:auto!important; } /* Keep bottom quote/footer from visually clashing */ .mobileSummaryBar,.selectedBuildBar,#footerFloat,.optionfooter{ max-height:74px!important; } body.bb-dark .mobileSummaryBar, body.bb-dark #footerFloat, body.bb-dark .optionfooter, body.bb-dark .selectedBuildBar{ background:#07111f!important; color:#fff!important; border-color:#23577d!important; } body.bb-dark .container-fluid.notsummary>.PageSection{ background:linear-gradient(135deg,#10233b,#07111f)!important; border-color:#23577d!important; } body.bb-dark .container-fluid.notsummary>.PageSection:before{color:#fff!important;} body.bb-dark .container-fluid.notsummary>.PageSection:after{color:#9fb3c8!important;} body.bb-dark .modelPhotoFloat{background:#fff!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr 1fr!important;grid-template-areas:"photo model" "specs specs"!important;padding:0 12px!important;} .modelHeroCopy{border-radius:0 0 24px 24px!important;} #optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important;margin-bottom:90px!important;grid-template-columns:1fr 1fr!important;} .liveSummaryPanel{min-width:0!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;margin:0 10px 12px!important;padding:0!important;} .modelPhotoFloat,.modelHeroCopy,.heroSpecCard{height:auto!important;min-height:0!important;max-height:none!important;margin-bottom:10px!important;} .modelPhotoFloat{height:165px!important;} .modelHeroCopy{padding:16px!important;border-radius:0 0 22px 22px!important;} .modelHeroCopy h1{font-size:34px!important;} .heroSpecCard{max-height:250px!important;overflow:auto!important;} .container-fluid.notsummary>.PageSection{margin:0 10px 10px!important;border-radius:18px!important;} #optionalHolder>.row{height:auto!important;min-height:0!important;margin-bottom:90px!important;} .optionbox.notsummary:first-child{display:flex!important;} .optionbox.notsummary:first-child>#ColorToolSection{height:165px!important;min-height:165px!important;max-height:165px!important;} .liveSummaryPanel{min-width:0!important;} } /* ===== v64 requested fixes ===== */ /* Keep top layout neat again: selected model + photo in ONE left frame, specs on right */ .modelHeroDock{ max-width:1500px!important; display:grid!important; grid-template-columns:minmax(560px,1.08fr) minmax(520px,.92fr)!important; grid-template-areas:"model specs"!important; gap:18px!important; align-items:stretch!important; padding:16px!important; margin:12px auto 14px!important; background:linear-gradient(135deg,#eef8ff 0%,#ffffff 55%,#edf7ff 100%)!important; border:1px solid #dcecf7!important; border-radius:26px!important; box-shadow:0 18px 42px rgba(7,29,51,.13)!important; color:#071d33!important; } .modelHeroCopy{ grid-area:model!important; display:grid!important; grid-template-columns:minmax(250px,.86fr) minmax(260px,1fr)!important; gap:16px!important; align-items:center!important; min-height:200px!important; padding:18px!important; border-radius:24px!important; background:linear-gradient(135deg,#06182b 0%,#0b2a45 62%,#0ea5e9 160%)!important; border:1px solid rgba(255,255,255,.18)!important; box-shadow:0 22px 46px rgba(7,29,51,.24),inset 0 1px 0 rgba(255,255,255,.15)!important; color:#fff!important; transform:none!important; } .heroModelText{min-width:0!important;} .heroEyebrow{display:inline-flex!important;background:rgba(255,255,255,.14)!important;color:#aeefff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;padding:5px 10px!important;margin-bottom:10px!important;} .modelHeroCopy h1{color:#fff!important;font-size:clamp(40px,4.2vw,64px)!important;line-height:.95!important;text-shadow:0 4px 18px rgba(0,0,0,.28)!important;} .modelHeroCopy p{color:rgba(255,255,255,.84)!important;margin:8px 0 0!important;font-weight:700!important;} .modelPhotoFloat{ width:100%!important; height:170px!important; min-height:170px!important; max-height:170px!important; margin:0!important; transform:none!important; border-radius:20px!important; background:#fff!important; border:0!important; box-shadow:0 18px 38px rgba(0,0,0,.22)!important; } .heroSpecCard{ grid-area:specs!important; display:grid!important; grid-template-columns:minmax(0,1fr) 180px!important; gap:12px!important; align-items:stretch!important; max-height:236px!important; min-height:200px!important; overflow:auto!important; background:#fff!important; border:1px solid #dcecf7!important; border-radius:22px!important; padding:14px!important; box-shadow:0 14px 30px rgba(7,29,51,.10)!important; } .heroSpecCard>strong{display:block!important;grid-column:1/-1!important;font-size:16px!important;font-weight:950!important;color:#071d33!important;margin:0!important;} .heroSpecsMini{grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;max-height:170px!important;overflow:auto!important;} .heroSpecsMini div{background:#f8fbff!important;border:1px solid #e4edf6!important;border-radius:12px!important;padding:8px 10px!important;} .heroSpecsMini small{font-size:10px!important;color:#667085!important;} .heroSpecsMini strong{font-size:12px!important;color:#071d33!important;} .heroPlanCard{grid-column:2!important;grid-row:2!important;height:100%!important;min-height:145px!important;border-radius:16px!important;background:#fff!important;border:1px solid #e4edf6!important;padding:8px!important;box-shadow:0 10px 24px rgba(7,29,51,.08)!important;} .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;} /* EXACT Customize Your Boat frame requested */ .buildTopBar .buildStepTitle{display:none!important} #colorsOptionsDiv > .container-fluid.no-padding:first-of-type{display:none!important} .container-fluid.notsummary>.PageSection{font-size:0!important;background:linear-gradient(135deg,#eef9ff,#ffffff)!important;color:transparent!important;padding:14px 18px!important;border:1px solid #d8eaf8!important;border-radius:20px!important;box-shadow:0 14px 30px rgba(7,29,51,.12)!important;max-width:1500px!important;margin:10px auto 12px!important;} .container-fluid.notsummary>.PageSection:before{content:'Customize Your Boat';display:block!important;font-size:24px!important;line-height:1.1!important;font-weight:950!important;color:#071d33!important;letter-spacing:-.035em!important} .container-fluid.notsummary>.PageSection:after{content:'Choose colors and add-ons, then review the quote on the right.'!important;display:block!important;font-size:12px!important;font-weight:700!important;color:#667085!important;margin-top:4px!important} /* Frames: longer than v63, but still leave space for footer */ .container-fluid.notsummary{padding-bottom:90px!important;} #optionalHolder>.row{ grid-template-columns:minmax(310px,.82fr) minmax(470px,1.08fr) minmax(540px,1.36fr)!important; align-items:stretch!important; height:min(700px,calc(100vh - 320px))!important; min-height:560px!important; max-height:700px!important; margin-bottom:88px!important; } #optionalHolder>.row>.optionbox.notsummary,#optionalHolder>.row>.liveSummaryPanel{height:100%!important;min-height:0!important;} .optioncontent,#colorSelections,#optionalEquipment,#ColorToolSection,.liveSummaryPanel{min-height:0!important;} .liveSummaryPanel{min-width:500px!important;width:100%!important;} .optionbox.notsummary:first-child{display:grid!important;grid-template-rows:185px minmax(0,1fr) auto!important;gap:10px!important;} .optionbox.notsummary:first-child>#ColorToolSection,#optionalHolder > .row > .optionbox.notsummary:first-child > .row:first-child{height:185px!important;min-height:185px!important;max-height:185px!important;} .optionbox.notsummary:first-child>#colorSelections,.columnarlayout{height:100%!important;max-height:none!important;overflow-y:auto!important;} /* Footer total */ .mobileSummaryBar span b{color:#0ea5e9!important;font-size:13px!important;font-weight:950!important;} body.bb-dark .mobileSummaryBar{background:#07111f!important;color:#fff!important;border-color:#23577d!important;} body.bb-dark .modelHeroDock{background:linear-gradient(135deg,#0b1626 0%,#07111f 100%)!important;border-color:#23577d!important;} body.bb-dark .modelPhotoFloat{background:#fff!important;} body.bb-dark .heroSpecCard{background:#0f1f33!important;border-color:#23577d!important;} body.bb-dark .heroSpecCard>strong,body.bb-dark .heroSpecsMini strong{color:#fff!important;} body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important;} body.bb-dark .container-fluid.notsummary>.PageSection{background:linear-gradient(135deg,#10233b,#07111f)!important;border-color:#23577d!important;} body.bb-dark .container-fluid.notsummary>.PageSection:before{color:#fff!important;} body.bb-dark .container-fluid.notsummary>.PageSection:after{color:#9fb3c8!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr!important;grid-template-areas:"model" "specs"!important;} #optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important;grid-template-columns:1fr 1fr!important;margin-bottom:90px!important;} .liveSummaryPanel{min-width:0!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;margin:8px 10px 12px!important;padding:12px!important;} .modelHeroCopy{display:block!important;min-height:0!important;padding:14px!important;} .modelPhotoFloat{height:165px!important;margin-top:12px!important;} .heroSpecCard{display:block!important;max-height:260px!important;min-height:0!important;margin-top:10px!important;} .heroPlanCard{height:120px!important;margin-top:10px!important;} .container-fluid.notsummary>.PageSection{margin:8px 10px 10px!important;} #optionalHolder>.row{height:auto!important;min-height:0!important;margin-bottom:90px!important;} .optionbox.notsummary:first-child{display:flex!important;} .optionbox.notsummary:first-child>#ColorToolSection{height:165px!important;min-height:165px!important;max-height:165px!important;} .liveSummaryPanel{min-width:0!important;} } /* ===== v65 final requested fixes ===== */ /* Customize Your Boat banner - full width equal to the 3 frames */ .buildTopBar .buildStepTitle{display:none!important} #colorsOptionsDiv > .container-fluid.no-padding:first-of-type{display:none!important} #colorsOptionsDiv .container-fluid.notsummary>.PageSection{ display:block!important; visibility:visible!important; opacity:1!important; height:auto!important; min-height:78px!important; width:calc(100% - 24px)!important; max-width:1500px!important; margin:12px auto 14px!important; font-size:0!important; color:transparent!important; padding:15px 20px!important; border:1px solid #d8eaf8!important; border-radius:20px!important; background:linear-gradient(135deg,#eef9ff,#ffffff)!important; box-shadow:0 14px 30px rgba(7,29,51,.12)!important; } #colorsOptionsDiv .container-fluid.notsummary>.PageSection:before{ content:'Customize Your Boat'!important; display:block!important; font-size:24px!important; line-height:1.1!important; font-weight:950!important; color:#071d33!important; letter-spacing:-.035em!important; } #colorsOptionsDiv .container-fluid.notsummary>.PageSection:after{ content:'Choose colors and add-ons, then review the quote on the right.'!important; display:block!important; font-size:12px!important; font-weight:700!important; color:#667085!important; margin-top:5px!important; } /* top: remove outer white-frame feeling, make selected model dark and attached with photo */ .modelHeroDock{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0 12px!important; max-width:1500px!important; gap:16px!important; grid-template-columns:minmax(620px,1fr) minmax(520px,.82fr)!important; align-items:stretch!important; } .modelHeroCopy{ min-height:230px!important; height:230px!important; display:grid!important; grid-template-columns:minmax(300px,1.05fr) minmax(285px,.95fr)!important; align-items:center!important; gap:18px!important; padding:18px 20px!important; border-radius:26px!important; background:linear-gradient(135deg,#06182b 0%,#0b2a45 62%,#0ea5e9 155%)!important; border:1px solid rgba(255,255,255,.18)!important; box-shadow:0 22px 50px rgba(7,29,51,.25), inset 0 1px 0 rgba(255,255,255,.18)!important; overflow:hidden!important; } .heroModelText{align-self:center!important;min-width:0!important;position:relative!important;z-index:2!important;} .heroEyebrow{ display:inline-flex!important; align-items:center!important; width:max-content!important; padding:6px 11px!important; border-radius:999px!important; background:rgba(14,165,233,.22)!important; border:1px solid rgba(255,255,255,.22)!important; color:#b9efff!important; font-weight:950!important; letter-spacing:.10em!important; margin-bottom:10px!important; } .modelHeroCopy h1{ font-size:clamp(46px,4.8vw,72px)!important; line-height:.9!important; color:#fff!important; font-weight:1000!important; letter-spacing:-.065em!important; text-shadow:0 6px 22px rgba(0,0,0,.35)!important; } .modelHeroCopy p{color:rgba(255,255,255,.86)!important;font-size:14px!important;font-weight:800!important;margin-top:10px!important;} .modelPhotoFloat{ width:100%!important; height:190px!important; min-height:190px!important; max-height:190px!important; align-self:center!important; margin:0!important; padding:12px!important; transform:none!important; border-radius:22px!important; background:#fff!important; border:1px solid rgba(255,255,255,.55)!important; box-shadow:0 20px 42px rgba(0,0,0,.28)!important; } .modelPhotoFloat img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} .heroSpecCard{ min-height:230px!important; height:230px!important; max-height:230px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 190px!important; grid-template-rows:auto minmax(0,1fr)!important; gap:12px!important; align-items:stretch!important; padding:15px!important; border-radius:26px!important; background:#fff!important; border:1px solid #dcecf7!important; box-shadow:0 16px 36px rgba(7,29,51,.12)!important; overflow:hidden!important; } .heroSpecCard>strong{grid-column:1/-1!important;font-size:17px!important;font-weight:950!important;color:#071d33!important;margin:0!important;} .heroSpecsMini{grid-column:1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:auto!important;max-height:none!important;} .heroSpecsMini div{min-height:48px!important;background:#f8fbff!important;border:1px solid #e4edf6!important;border-radius:13px!important;padding:8px 10px!important;} .heroSpecsMini small{display:block!important;color:#667085!important;font-size:10px!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} .heroSpecsMini strong{display:block!important;color:#071d33!important;font-size:12px!important;font-weight:950!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} .heroPlanCard{grid-column:2!important;grid-row:2!important;width:100%!important;height:100%!important;min-height:0!important;border-radius:18px!important;background:#fff!important;border:1px solid #e4edf6!important;padding:10px!important;box-shadow:0 10px 24px rgba(7,29,51,.08)!important;} .heroPlanCard img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;} /* keep 3 working frames slightly taller */ #optionalHolder>.row{ height:min(740px,calc(100vh - 292px))!important; min-height:600px!important; max-height:740px!important; grid-template-columns:minmax(330px,.84fr) minmax(470px,1.08fr) minmax(560px,1.42fr)!important; } .liveSummaryPanel{min-width:520px!important;} /* color rows: Fresh White + N/C stay on one line */ #colorSelections table{table-layout:fixed!important;} #colorSelections td:nth-child(1){width:48px!important;} #colorSelections td:nth-child(2){width:auto!important;} #colorSelections td:nth-child(3){width:92px!important;white-space:nowrap!important;} #colorSelections .optiontext, #colorSelections .optioncost, #colorSelections .moneyNow, #colorSelections .moneyAmount{ white-space:nowrap!important; word-break:keep-all!important; } #colorSelections .optiontext{display:inline-block!important;max-width:calc(100% - 30px)!important;overflow:hidden!important;text-overflow:ellipsis!important;vertical-align:middle!important;} #colorSelections .optioncost{display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:78px!important;} .moneyNow{display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important;} .dirhamMark{flex:0 0 auto!important;} .moneyAmount{white-space:nowrap!important;} /* mobile footer total visible */ .mobileSummaryBar span{display:flex!important;align-items:center!important;gap:6px!important;white-space:nowrap!important;} .mobileSummaryBar span em{font-style:normal!important;} .mobileSummaryBar #mobileSummaryTotal{font-size:13px!important;font-weight:950!important;color:#0ea5e9!important;} /* dark mode fixes for top + customize */ body.bb-dark #colorsOptionsDiv .container-fluid.notsummary>.PageSection{background:linear-gradient(135deg,#10233b,#07111f)!important;border-color:#23577d!important;} body.bb-dark #colorsOptionsDiv .container-fluid.notsummary>.PageSection:before{color:#fff!important;} body.bb-dark #colorsOptionsDiv .container-fluid.notsummary>.PageSection:after{color:#9fb3c8!important;} body.bb-dark .modelHeroDock{background:transparent!important;border:0!important;box-shadow:none!important;} body.bb-dark .modelPhotoFloat{background:#fff!important;} body.bb-dark .heroSpecCard{background:#0f1f33!important;border-color:#23577d!important;} body.bb-dark .heroSpecCard>strong,body.bb-dark .heroSpecsMini strong{color:#fff!important;} body.bb-dark .heroSpecsMini small{color:#9fb3c8!important;} body.bb-dark .heroSpecsMini div{background:#10243c!important;border-color:#29415f!important;} body.bb-dark #colorSelections td[bgcolor], body.bb-dark #optionalEquipment td[bgcolor]{background:#10243c!important;} body.bb-dark #colorSelections .optioncost{color:#fff!important;} @media(max-width:1180px){ .modelHeroDock{grid-template-columns:1fr!important;grid-template-areas:"model" "specs"!important;padding:0 12px!important;} .modelHeroCopy,.heroSpecCard{height:auto!important;min-height:220px!important;} #optionalHolder>.row{height:auto!important;max-height:none!important;min-height:0!important;grid-template-columns:1fr 1fr!important;} .liveSummaryPanel{min-width:0!important;} } @media(max-width:768px){ .modelHeroDock{display:block!important;margin:8px 10px 12px!important;padding:0!important;} .modelHeroCopy{display:block!important;height:auto!important;min-height:0!important;padding:14px!important;} .modelPhotoFloat{height:165px!important;min-height:165px!important;max-height:165px!important;margin-top:12px!important;} .heroSpecCard{display:block!important;height:auto!important;min-height:0!important;max-height:270px!important;overflow:auto!important;margin-top:10px!important;} .heroPlanCard{display:block!important;height:120px!important;margin-top:10px!important;} #colorsOptionsDiv .container-fluid.notsummary>.PageSection{width:auto!important;margin:8px 10px 10px!important;} #optionalHolder>.row{height:auto!important;min-height:0!important;max-height:none!important;} .liveSummaryPanel{min-width:0!important;} } /* v66 requested polish */ /* footer total: bigger and flashier */ .mobileSummaryBar #mobileSummaryTotal{ font-size:18px!important; font-weight:1000!important; color:#fff!important; background:linear-gradient(135deg,#0ea5e9,#071d33)!important; padding:6px 10px!important; border-radius:999px!important; box-shadow:0 8px 20px rgba(14,165,233,.35)!important; letter-spacing:-.02em!important; } .mobileSummaryBar span{gap:8px!important;} body.bb-dark .mobileSummaryBar #mobileSummaryTotal{background:linear-gradient(135deg,#0ea5e9,#164e7a)!important;color:#fff!important;} /* selected model top area: richer background + hovering cards */ .modelHeroDock{ background:linear-gradient(135deg,#dbeeff 0%,#eef7ff 48%,#f8fcff 100%)!important; border-radius:0 0 30px 30px!important; padding:18px 18px 20px!important; box-shadow:0 18px 45px rgba(7,29,51,.14)!important; } .modelHeroCopy{ grid-template-columns:minmax(230px,48%) minmax(0,52%)!important; gap:18px!important; align-items:center!important; min-height:245px!important; background:linear-gradient(135deg,#071d33 0%,#0b2a45 60%,#0f3b5f 100%)!important; box-shadow:0 22px 55px rgba(7,29,51,.32), inset 0 1px 0 rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.16)!important; } .modelPhotoFloat{ height:220px!important; min-height:220px!important; max-height:220px!important; padding:8px!important; border-radius:22px!important; background:#fff!important; box-shadow:0 16px 38px rgba(0,0,0,.25)!important; } .modelPhotoFloat img{object-fit:contain!important;transform:scale(1.08)!important;} .heroModelText{align-self:center!important;} .heroEyebrow{ background:rgba(14,165,233,.28)!important; color:#d9f7ff!important; border-color:rgba(255,255,255,.28)!important; box-shadow:0 8px 20px rgba(14,165,233,.22)!important; } .modelHeroCopy h1{ font-size:clamp(54px,5.4vw,82px)!important; text-shadow:0 8px 26px rgba(0,0,0,.42)!important; } .heroSpecCard{ min-height:245px!important; height:245px!important; max-height:245px!important; box-shadow:0 22px 50px rgba(7,29,51,.18)!important; transform:translateY(-2px)!important; } @media(max-width:768px){ .modelHeroDock{padding:12px!important;border-radius:0 0 22px 22px!important;} .modelHeroCopy{display:block!important;min-height:0!important;} .modelPhotoFloat{height:185px!important;min-height:185px!important;max-height:185px!important;margin-bottom:12px!important;} .modelHeroCopy h1{font-size:44px!important;} .mobileSummaryBar #mobileSummaryTotal{font-size:15px!important;padding:5px 8px!important;} } /* ========================================================= v67 FINAL FIXES - Do not enlarge footer bar; only make amount readable - Fix selected model photo alignment/cropping - Improve mobile usability: compact live summary, included hidden behind View All - Remove extra empty page scrolling ========================================================= */ /* remove excess empty scroll space */ html,body{ min-height:0!important; overflow-x:hidden!important; } #colorsOptionsDiv{ min-height:0!important; padding-bottom:22px!important; } #optionalHolder{ padding-bottom:0!important; margin-bottom:0!important; } /* middle frames: long enough, but not causing empty scroll */ #optionalHolder>.row{ height:clamp(560px, calc(100vh - 335px), 690px)!important; min-height:560px!important; max-height:690px!important; align-items:stretch!important; } .optionbox.notsummary, .optionbox.notsummary > .optioncontent, #ColorToolSection, #colorSelections, #optionalEquipment, .liveSummaryPanel{ min-height:0!important; } .optionbox.notsummary:first-child{ display:flex!important; flex-direction:column!important; } .optionbox.notsummary:first-child > #ColorToolSection{ flex:0 0 190px!important; height:190px!important; max-height:190px!important; } .optionbox.notsummary:first-child > #colorSelections{ flex:1 1 auto!important; height:auto!important; max-height:none!important; overflow-y:auto!important; } #optionalEquipment .columnarlayout{ height:100%!important; max-height:none!important; overflow-y:auto!important; } .liveSummaryPanel{ height:100%!important; max-height:none!important; } /* selected model card: keep photo visible and aligned, no hidden bottom */ .modelHeroDock{ grid-template-columns:minmax(650px,1fr) minmax(520px,.82fr)!important; align-items:stretch!important; overflow:visible!important; } .modelHeroCopy{ display:grid!important; grid-template-columns:minmax(260px,48%) minmax(320px,52%)!important; align-items:stretch!important; gap:18px!important; height:235px!important; min-height:235px!important; max-height:235px!important; overflow:hidden!important; } .heroModelText{ align-self:center!important; min-width:0!important; } .modelPhotoFloat, .modelHeroDock .modelPhotoFloat{ width:100%!important; height:100%!important; min-height:0!important; max-height:none!important; align-self:stretch!important; justify-self:stretch!important; margin:0!important; padding:12px!important; transform:none!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:#fff!important; border-radius:22px!important; } .modelPhotoFloat img, #compactHeroImg{ width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center center!important; display:block!important; transform:none!important; margin:0!important; } .heroSpecCard{ height:235px!important; min-height:235px!important; max-height:235px!important; align-self:stretch!important; } /* footer/mobile amount: readable without making the footer bar bigger */ .mobileSummaryBar{ padding:9px 11px!important; min-height:0!important; height:auto!important; align-items:center!important; } .mobileSummaryBar > div{ min-width:0!important; } .mobileSummaryBar strong{ font-size:13px!important; line-height:1.05!important; } .mobileSummaryBar span{ display:flex!important; align-items:center!important; gap:6px!important; font-size:11px!important; line-height:1.1!important; white-space:nowrap!important; } .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ color:#ffffff!important; background:#0ea5e9!important; border:1px solid rgba(255,255,255,.55)!important; border-radius:999px!important; padding:3px 7px!important; font-size:15px!important; line-height:1!important; font-weight:1000!important; letter-spacing:-.02em!important; box-shadow:0 5px 14px rgba(14,165,233,.28)!important; display:inline-flex!important; align-items:center!important; gap:4px!important; } .mobileSummaryBar #mobileSummaryTotal .dirhamMark, .mobileSummaryBar span b .dirhamMark{ color:#fff!important; } .mobileSummaryBar button{ padding:9px 11px!important; font-size:12px!important; flex:0 0 auto!important; } body.bb-dark .mobileSummaryBar{ background:#07111f!important; border-color:#23577d!important; } body.bb-dark .mobileSummaryBar #mobileSummaryTotal, body.bb-dark .mobileSummaryBar span b{ color:#fff!important; background:#0ea5e9!important; } /* mobile: make configuring easier; keep live total visible and reduce included scrolling */ @media(max-width:768px){ body{ padding-bottom:68px!important; overflow-x:hidden!important; } #colorsOptionsDiv{ padding-bottom:78px!important; } #optionalHolder>.row{ height:auto!important; min-height:0!important; max-height:none!important; display:flex!important; flex-direction:column!important; } .modelHeroDock{ display:block!important; margin:8px 10px 10px!important; padding:12px!important; } .modelHeroCopy{ display:block!important; height:auto!important; min-height:0!important; max-height:none!important; padding:14px!important; } .modelPhotoFloat, .modelHeroDock .modelPhotoFloat{ width:100%!important; height:170px!important; min-height:170px!important; max-height:170px!important; margin-top:12px!important; } .heroSpecCard{ height:auto!important; min-height:0!important; max-height:240px!important; overflow:auto!important; } .optionbox.notsummary:first-child > #ColorToolSection{ height:155px!important; flex-basis:155px!important; } .optionbox.notsummary:first-child > #colorSelections, #optionalEquipment .columnarlayout{ max-height:46vh!important; overflow-y:auto!important; border-right:6px solid #0ea5e9!important; background-image:linear-gradient(to bottom,transparent 82%,rgba(14,165,233,.12))!important; } .liveSummaryPanel{ position:relative!important; top:auto!important; height:auto!important; max-height:none!important; padding:10px!important; margin-bottom:0!important; } .summaryColumns{ display:block!important; } .summaryColumn{ margin-bottom:8px!important; } .liveSummaryItems{ max-height:145px!important; overflow-y:auto!important; } /* included is still available from View All, but no longer eats the page */ .includedColumn .liveSummaryStandard{ max-height:0!important; overflow:hidden!important; padding:0!important; border:0!important; } .includedColumn .summaryColumnTitle{ padding-bottom:0!important; border-bottom:0!important; } .includedColumn .summaryColumnTitle strong{ font-size:14px!important; } .includedColumn .showIncludedBtn, .includedColumn .inlineIncludedBtn{ display:inline-flex!important; justify-content:center!important; align-items:center!important; } .mobileSummaryBar{ display:flex!important; left:8px!important; right:8px!important; bottom:8px!important; padding:8px 10px!important; } body.bb-model-step .mobileSummaryBar{ display:none!important; } .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ font-size:14px!important; padding:3px 6px!important; } } @media(max-width:1180px) and (min-width:769px){ #optionalHolder>.row{ height:auto!important; min-height:0!important; max-height:none!important; } .modelHeroDock{ grid-template-columns:1fr!important; } .modelHeroCopy, .heroSpecCard{ height:auto!important; min-height:220px!important; max-height:none!important; } } /* ========================================================= v68 FINAL PATCH - Big selected-model photo without cropping/hiding - Footer amount clearer, but footer bar not enlarged - Mobile live summary shows add-ons first, included preview second - Reduce empty page scroll ========================================================= */ /* DESKTOP/TABLET selected model: image takes almost half of the dark EQM card */ @media (min-width:769px){ .modelHeroDock{ grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)!important; gap:18px!important; overflow:visible!important; } .modelHeroCopy{ position:relative!important; display:block!important; height:250px!important; min-height:250px!important; max-height:250px!important; padding:28px 52% 28px 28px!important; overflow:hidden!important; } .heroModelText{ width:100%!important; max-width:none!important; height:100%!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; position:relative!important; z-index:2!important; } .modelHeroCopy h1, #compactHeroTitle{ font-size:clamp(64px,6vw,96px)!important; line-height:.9!important; margin:10px 0 0!important; color:#fff!important; text-shadow:0 10px 30px rgba(0,0,0,.45)!important; } .heroEyebrow{ font-size:13px!important; padding:9px 16px!important; border-radius:999px!important; color:#e8fbff!important; background:rgba(14,165,233,.28)!important; border:1px solid rgba(255,255,255,.32)!important; box-shadow:0 10px 26px rgba(14,165,233,.25)!important; } .modelPhotoFloat, .modelHeroDock .modelPhotoFloat{ position:absolute!important; right:26px!important; top:26px!important; bottom:26px!important; left:auto!important; width:46%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:12px!important; transform:none!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:#fff!important; border-radius:24px!important; border:1px solid rgba(255,255,255,.9)!important; box-shadow:0 18px 45px rgba(0,0,0,.28)!important; z-index:1!important; } .modelPhotoFloat img, #compactHeroImg{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:contain!important; object-position:center center!important; transform:scale(1.28)!important; transform-origin:center center!important; display:block!important; } .heroSpecCard{ height:250px!important; min-height:250px!important; max-height:250px!important; align-self:stretch!important; } } /* Footer total: only the amount is stronger/readable; footer size stays compact */ .mobileSummaryBar{ min-height:0!important; height:auto!important; padding:8px 10px!important; background:rgba(7,29,51,.97)!important; border-color:rgba(14,165,233,.35)!important; } .mobileSummaryBar strong{ font-size:12px!important; line-height:1!important; } .mobileSummaryBar span{ font-size:10px!important; line-height:1!important; } .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ font-size:20px!important; line-height:1!important; font-weight:1000!important; color:#ffffff!important; background:linear-gradient(135deg,#0ea5e9,#0369a1)!important; border:1px solid rgba(255,255,255,.55)!important; border-radius:999px!important; padding:3px 9px!important; box-shadow:0 8px 20px rgba(14,165,233,.35)!important; display:inline-flex!important; align-items:center!important; white-space:nowrap!important; } .mobileSummaryBar .mobileQuoteActions button{ padding:8px 10px!important; font-size:11px!important; } /* Mobile usability: live summary remains compact and useful */ @media(max-width:768px){ body{padding-bottom:68px!important;} #colorsOptionsDiv{padding-bottom:72px!important;min-height:0!important;} .modelHeroDock{ display:block!important; padding:10px!important; margin:8px 10px 10px!important; } .modelHeroCopy{ position:relative!important; display:block!important; height:auto!important; min-height:0!important; max-height:none!important; padding:16px!important; overflow:hidden!important; } .heroModelText{width:100%!important;height:auto!important;} .modelPhotoFloat, .modelHeroDock .modelPhotoFloat{ position:relative!important; inset:auto!important; width:100%!important; height:190px!important; min-height:190px!important; max-height:190px!important; margin:12px 0 0!important; padding:10px!important; border-radius:18px!important; } .modelPhotoFloat img, #compactHeroImg{transform:scale(1.18)!important;} #optionalHolder>.row{ height:auto!important; min-height:0!important; max-height:none!important; display:flex!important; flex-direction:column!important; gap:10px!important; } .liveSummaryPanel{ order:3!important; height:auto!important; max-height:none!important; padding:10px!important; margin:0 0 4px!important; } .summaryColumns{ display:flex!important; flex-direction:column!important; gap:8px!important; } .addonsColumn{order:1!important;} .includedColumn{order:2!important;} .liveSummaryItems{ max-height:155px!important; overflow-y:auto!important; } .includedColumn .liveSummaryStandard{ max-height:95px!important; overflow:hidden!important; position:relative!important; padding-right:2px!important; } .includedColumn .liveSummaryStandard:after{ content:""; position:absolute; left:0;right:0;bottom:0;height:32px; background:linear-gradient(to bottom,rgba(255,255,255,0),#fbfdff); pointer-events:none; } body.bb-dark .includedColumn .liveSummaryStandard:after{ background:linear-gradient(to bottom,rgba(15,27,45,0),#0f1b2d)!important; } .includedColumn .showIncludedBtn{ background:#0ea5e9!important; color:#fff!important; box-shadow:0 8px 18px rgba(14,165,233,.28)!important; } .liveSummaryTotal{ padding-top:8px!important; } .liveSummaryTotal strong{ font-size:20px!important; } .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ font-size:18px!important; padding:3px 8px!important; } } /* Stop empty blank scroll after the content */ #colorsOptionsDiv, #optionalHolder, .container-fluid.notsummary{ margin-bottom:0!important; } .page:empty{display:none!important;} /* v70: keep v68 top exactly; only fix footer total amount size + dirham visibility */ .mobileSummaryBar{ background:rgba(255,255,255,.96)!important; border:1px solid var(--bb-border)!important; color:var(--bb-navy)!important; } body.bb-dark .mobileSummaryBar{ background:#07111f!important; color:#fff!important; border-color:#23577d!important; } .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ font-size:24px!important; line-height:1!important; font-weight:1000!important; color:#0ea5e9!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; display:inline-flex!important; align-items:center!important; gap:6px!important; white-space:nowrap!important; } .mobileSummaryBar #mobileSummaryTotal .moneyNow, .mobileSummaryBar span b .moneyNow{ display:inline-flex!important; align-items:center!important; gap:6px!important; white-space:nowrap!important; line-height:1!important; } .mobileSummaryBar #mobileSummaryTotal .moneyAmount, .mobileSummaryBar span b .moneyAmount{ font-size:24px!important; line-height:1!important; font-weight:1000!important; } .mobileSummaryBar #mobileSummaryTotal .dirhamMark, .mobileSummaryBar span b .dirhamMark{ width:1.15em!important; height:1.15em!important; min-width:1.15em!important; color:currentColor!important; } .mobileSummaryBar #mobileSummaryTotal .dirhamSvg, .mobileSummaryBar span b .dirhamSvg{ width:1.15em!important; height:1.15em!important; } @media(max-width:768px){ .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b, .mobileSummaryBar #mobileSummaryTotal .moneyAmount, .mobileSummaryBar span b .moneyAmount{ font-size:22px!important; } } /* ========================================================= v71 PATCH - Keep v68/v70 layout, only adjust selected model photo shape - Make footer TOTAL amount + UAE dirham larger/vibrant without changing footer color ========================================================= */ @media (min-width:769px){ .modelHeroCopy{ padding:28px 50% 28px 28px!important; overflow:hidden!important; } .modelPhotoFloat, .modelHeroDock .modelPhotoFloat{ position:absolute!important; right:0!important; top:0!important; bottom:0!important; left:auto!important; width:50%!important; height:100%!important; min-height:100%!important; max-height:none!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0 30px 30px 0!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; } .modelPhotoFloat img, #compactHeroImg{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center center!important; transform:scale(1.28)!important; transform-origin:center center!important; display:block!important; filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))!important; } } /* Footer total: do NOT change footer color, only make amount + dirham clearer */ .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b{ font-size:28px!important; line-height:1!important; font-weight:1000!important; color:#00aef0!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; display:inline-flex!important; align-items:center!important; gap:7px!important; white-space:nowrap!important; text-shadow:0 2px 10px rgba(14,165,233,.22)!important; } .mobileSummaryBar #mobileSummaryTotal .moneyNow, .mobileSummaryBar span b .moneyNow{ display:inline-flex!important; align-items:center!important; gap:7px!important; white-space:nowrap!important; line-height:1!important; } .mobileSummaryBar #mobileSummaryTotal .moneyAmount, .mobileSummaryBar span b .moneyAmount{ font-size:28px!important; line-height:1!important; font-weight:1000!important; color:#00aef0!important; } .mobileSummaryBar #mobileSummaryTotal .dirhamMark, .mobileSummaryBar span b .dirhamMark{ width:1em!important; height:1em!important; min-width:1em!important; color:#00aef0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } .mobileSummaryBar #mobileSummaryTotal .dirhamSvg, .mobileSummaryBar span b .dirhamSvg{ width:1em!important; height:1em!important; display:block!important; } @media(max-width:768px){ .mobileSummaryBar #mobileSummaryTotal, .mobileSummaryBar span b, .mobileSummaryBar #mobileSummaryTotal .moneyAmount, .mobileSummaryBar span b .moneyAmount{ font-size:25px!important; } } /* ========================================================= v72 PATCH Dark mode footer total: keep footer color, remove blue pill highlight, make UAE dirham + amount readable and vibrant. ========================================================= */ body.bb-dark .mobileSummaryBar #mobileSummaryTotal, body.bb-dark .mobileSummaryBar span b{ background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; color:#7dd3fc!important; text-shadow:0 0 12px rgba(125,211,252,.35)!important; font-size:28px!important; line-height:1!important; font-weight:1000!important; padding:0!important; } body.bb-dark .mobileSummaryBar #mobileSummaryTotal .moneyAmount, body.bb-dark .mobileSummaryBar span b .moneyAmount, body.bb-dark .mobileSummaryBar #mobileSummaryTotal .dirhamMark, body.bb-dark .mobileSummaryBar span b .dirhamMark, body.bb-dark .mobileSummaryBar #mobileSummaryTotal .dirhamSvg, body.bb-dark .mobileSummaryBar span b .dirhamSvg{ color:#7dd3fc!important; fill:#7dd3fc!important; background:transparent!important; background-image:none!important; } @media(max-width:768px){ body.bb-dark .mobileSummaryBar #mobileSummaryTotal, body.bb-dark .mobileSummaryBar span b, body.bb-dark .mobileSummaryBar #mobileSummaryTotal .moneyAmount, body.bb-dark .mobileSummaryBar span b .moneyAmount{ font-size:25px!important; } } /* ========================================================= v73 PATCH Remove empty bottom scroll without changing layout/colors. Keeps enough room only for fixed mobile quote bar. ========================================================= */ html,body{ min-height:0!important; } body{ padding-bottom:0!important; } #main, .majorDiv, #colorsOptionsDiv, #optionalHolder, .container-fluid.notsummary{ min-height:0!important; } #colorsOptionsDiv{ padding-bottom:24px!important; } .page:empty, #footerFloat:empty, .selectedBuildBar:empty{ display:none!important; height:0!important; min-height:0!important; margin:0!important; padding:0!important; } /* prevent hidden old sections from adding blank height */ #yourCustomBuild:not(:visible), #standardEquipment, .optionbox:has(#standardEquipment){ margin-bottom:0!important; padding-bottom:0!important; } @media(max-width:768px){ body{ padding-bottom:0!important; } #colorsOptionsDiv{ padding-bottom:74px!important; } #optionalHolder, #optionalHolder>.row, .container-fluid.notsummary{ margin-bottom:0!important; padding-bottom:0!important; } .mobileSummaryBar{ bottom:8px!important; } } /* v76 final fixes: model chooser, image loading, wider specs */ html,body{background:#fff!important;} #boatSelectionDiv{ min-height:100vh!important; padding:30px 14px 80px!important; background:#fff!important; } #boatSelectionDiv:before{ content:"Choose your boat model"!important; display:block!important; text-align:center!important; font-size:clamp(32px,4vw,46px)!important; font-weight:950!important; color:#071d33!important; letter-spacing:-.045em!important; margin:4px auto 22px!important; } #boatSelectionDiv:after{display:none!important;content:none!important;} #boatSelectionDiv>.PageSection, #boatSelectionDiv>div>.PageSection{ max-width:760px!important; margin:0 auto 18px!important; padding:0!important; background:transparent!important; box-shadow:none!important; border:0!important; font-size:20px!important; font-weight:900!important; color:#071d33!important; text-align:center!important; } #boatSelectionDiv>div:not(:first-child){ max-width:760px!important; margin:34px auto 0!important; padding-top:34px!important; border-top:1px solid #c7f0ff!important; } #boatSelectionDiv>div:first-child{max-width:760px!important;margin:0 auto!important;} #boatSelectionDiv .container-fluid{max-width:760px!important;margin:0 auto!important;padding:0!important;} #boatSelectionDiv .row{ display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:stretch!important; gap:18px!important; margin:0!important; } #boatSelectionDiv .col-xs-6,#boatSelectionDiv .col-sm-3,#boatSelectionDiv .col-md-2{ width:280px!important; max-width:280px!important; flex:0 0 280px!important; padding:0!important; } .boatThumbnail{ height:100%!important; min-height:330px!important; display:flex!important; flex-direction:column!important; background:#fff!important; border:1px solid #e6edf3!important; border-radius:18px!important; box-shadow:0 14px 38px rgba(7,29,51,.10)!important; overflow:hidden!important; } .boatThumbImageWrap{ height:210px!important; background:#f7f9fb!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:12px!important; } .boatThumbImageWrap img,.boatThumbnail .thumb{ width:100%!important; height:100%!important; object-fit:contain!important; display:block!important; } .boatThumbnail .designator{ min-height:64px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:10px 14px 4px!important; background:#fff!important; } .boatThumbnail .designator img{max-height:42px!important;max-width:90%!important;object-fit:contain!important;} .buildBoatBtn{ width:calc(100% - 28px)!important; margin:auto 14px 14px!important; border:0!important; border-radius:999px!important; background:#071d33!important; color:#fff!important; font-size:13px!important; font-weight:900!important; padding:12px 14px!important; } #colorsOptionsDiv{background:#fff!important;} .modelHeroDock{max-width:1560px!important;} .heroSpecCard{grid-template-columns:minmax(0,1fr) 240px!important;max-height:270px!important;} .heroSpecsMini{grid-template-columns:repeat(2,minmax(170px,1fr))!important;max-height:195px!important;} .heroSpecsMini small{font-size:11px!important;} .heroSpecsMini strong{font-size:13px!important;line-height:1.2!important;word-break:normal!important;overflow-wrap:normal!important;} .heroPlanCard{min-height:180px!important;} #speccontainerright{max-width:1500px!important;width:calc(100% - 28px)!important;} #speccontainerright .row{display:flex!important;align-items:stretch!important;} #specbox{flex:0 0 58%!important;max-width:58%!important;} #speccontainerright .row>div:not(#specbox){flex:0 0 42%!important;max-width:42%!important;} #specbox td{font-size:14px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;} #planimage img{max-height:260px!important;width:100%!important;object-fit:contain!important;} #ColorToolSection img[src*="cdn.pursuitboats.com"]{display:none!important;} @media(max-width:768px){ #boatSelectionDiv .col-xs-6,#boatSelectionDiv .col-sm-3,#boatSelectionDiv .col-md-2{width:100%!important;max-width:320px!important;flex:0 0 100%!important;} #boatSelectionDiv>div:not(:first-child){margin-top:28px!important;padding-top:28px!important;} #specbox,#speccontainerright .row>div:not(#specbox){flex:0 0 100%!important;max-width:100%!important;} #speccontainerright .row{display:block!important;} .heroSpecCard{grid-template-columns:1fr!important;max-height:none!important;} .heroSpecsMini{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:none!important;} } /* ===== v78 fixes: only the new Catamaran models, do not touch EQM35 ===== */ /* Keep original page background feel */ #boatSelectionDiv{ background:#f3f5f7!important; } /* Section divider like the screenshot: soft center, fading sides */ #boatSelectionDiv > div > .PageSection{ position:relative!important; background:transparent!important; border:0!important; color:#071d33!important; text-align:center!important; padding:10px 0 24px!important; margin:0 auto 22px!important; } #boatSelectionDiv > div > .PageSection::after{ content:""!important; display:block!important; width:min(760px,94%)!important; height:3px!important; margin:18px auto 0!important; border-radius:999px!important; background:linear-gradient(90deg, rgba(14,165,233,0) 0%, rgba(14,165,233,.14) 16%, rgba(14,165,233,.68) 50%, rgba(14,165,233,.14) 84%, rgba(14,165,233,0) 100%)!important; } /* Only S24 + 343 card title images bigger, same visual weight as EQM35 */ #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/S24"], #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/TITAN343"]{ max-height:74px!important; width:auto!important; max-width:96%!important; object-fit:contain!important; } /* Only S24 + 343 thumbnail photos: same frame size and softer blend */ #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/S24"]) .boatThumbImageWrap, #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/TITAN343"]) .boatThumbImageWrap{ height:230px!important; background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 50%,#ffffff 100%)!important; overflow:hidden!important; } #boatSelectionDiv .boatThumbnail .thumb[src*="buildaboat-new/S24"], #boatSelectionDiv .boatThumbnail .thumb[src*="buildaboat-new/TITAN343"]{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)!important; mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)!important; } /* Selected model “header” photo: same size for both new models + top/bottom fade */ .modelPhotoFloat:has(img[src*="buildaboat-new/S24"]), .modelPhotoFloat:has(img[src*="buildaboat-new/TITAN343"]){ height:210px!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; overflow:hidden!important; } .modelPhotoFloat img[src*="buildaboat-new/S24"], .modelPhotoFloat img[src*="buildaboat-new/TITAN343"]{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%)!important; mask-image:linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%)!important; } /* Dark mode readability on model page */ body.bb-dark #boatSelectionDiv{ background:#0a1220!important; } body.bb-dark #boatSelectionDiv:before, body.bb-dark #boatSelectionDiv > div > .PageSection{ color:#f8fbff!important; } body.bb-dark #boatSelectionDiv > div > .PageSection::after{ background:linear-gradient(90deg, rgba(110,231,255,0) 0%, rgba(110,231,255,.18) 16%, rgba(110,231,255,.82) 50%, rgba(110,231,255,.18) 84%, rgba(110,231,255,0) 100%)!important; } body.bb-dark #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/S24"]), body.bb-dark #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/TITAN343"]){ background:linear-gradient(180deg,#0f1b2d 0%,#0b1626 100%)!important; border-color:#223651!important; } body.bb-dark #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/S24"], body.bb-dark #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/TITAN343"]{ filter:brightness(0) invert(1) grayscale(1) brightness(1.65)!important; } body.bb-dark #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/S24"]) .boatThumbImageWrap, body.bb-dark #boatSelectionDiv .boatThumbnail:has(.thumb[src*="buildaboat-new/TITAN343"]) .boatThumbImageWrap{ background:linear-gradient(180deg,rgba(13,27,46,.20) 0%,rgba(18,36,60,.72) 52%,rgba(13,27,46,.20) 100%)!important; } /* Mobile */ @media(max-width:768px){ #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/S24"], #boatSelectionDiv .boatThumbnail .designator img[src*="buildaboat-new/TITAN343"]{ max-height:66px!important; } .modelPhotoFloat:has(img[src*="buildaboat-new/S24"]), .modelPhotoFloat:has(img[src*="buildaboat-new/TITAN343"]){ height:180px!important; } } /* ===== v80 + v79 button centering ===== */ body.bb-dark #boatSelectionDiv .buildBoatBtn{ transform:translateY(6px)!important; }