.view-tools{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid #d9cbc2;background:transparent}
.view-tools>summary{display:none}
.views{position:static;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.views button{grid-column:span 2;min-height:40px;padding:8px 6px;font-size:12px;line-height:1.35;white-space:normal}
.views button:nth-child(n+4){grid-column:span 3}
button:focus-visible,summary:focus-visible{outline:2px solid #13234b;outline-offset:2px}
.panel{padding-bottom:28px;scroll-padding-bottom:20px}
.panel>.pricebar{position:static;width:auto;margin:26px 0 0;padding:20px 0 0;z-index:auto}
.mobile-section{display:none}
@media(max-width:850px){
 html,body{height:100%;overflow:hidden}
 body{height:100vh;height:100dvh;display:flex;flex-direction:column}
 header{height:52px;min-height:52px;padding:0 16px}
 header img{height:46px;width:100px}
 header>span{font-size:13px}
 main.config{display:flex;flex-direction:column;flex:1;min-height:0;height:auto;overflow:hidden}
 .scene{height:auto;flex:0 0 44%;min-height:0}
 .scene iframe{display:block}
 .panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 16px max(24px,env(safe-area-inset-bottom));border-left:0;border-top:1px solid #d9cbc2;scroll-padding-top:80px;scroll-padding-bottom:16px}
 .view-tools{margin:0;padding:0;border-bottom:1px solid #d9cbc2}
 .view-tools>summary{display:list-item;padding:13px 0;font-size:14px}
 .view-tools .views{padding-bottom:14px}
 .mobile-section{position:sticky;top:0;z-index:2;display:grid;gap:4px;padding:10px 0;background:#f4f0e9;font-size:12px}
 .mobile-section select{width:100%;min-height:44px;font-size:16px;color:#112250}
 #steps{display:none}
 #content>h2{font-size:21px;margin:14px 0}
 .option-section{margin:0;padding:0;background:transparent;border-bottom:1px solid #d9cbc2}
 .option-section>summary{font-size:17px;font-weight:600;padding:15px 2px;min-height:48px}
 .option-section[open]{padding-bottom:14px}
 .choice{min-height:48px;padding:11px;font-size:15px}
 .field input,.field select{font-size:16px}
 .panel>.pricebar{margin-top:22px;padding:20px 0 0}
 dialog{max-height:90vh;max-height:90dvh;overflow:auto}
}
@media(max-width:850px) and (orientation:landscape){
 .scene{flex-basis:38%}
 header{height:42px;min-height:42px}
 header img{height:38px}
}

/* Equal side columns keep the reset control in the centre. */
header{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px}
header .brand-lido{justify-self:start;display:flex;align-items:center;min-height:44px}
header .brand-og{justify-self:end;display:flex;align-items:center;min-height:44px;text-decoration:none;text-align:right}
header #resetConfigurator{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:white}
header #resetConfigurator:hover{background:#ffffff18}
header a:focus-visible,header #resetConfigurator:focus-visible{outline:2px solid white;outline-offset:1px}
@media(max-width:850px){header .brand-og{font-size:13px}header .brand-lido img{max-width:100%;width:100px}}
@media(max-width:850px) and (orientation:landscape){header #resetConfigurator,header .brand-lido,header .brand-og{min-height:38px;height:38px}}
