/* =====================================================================
   Pro Secure Doors — "Charcoal & Brass" theme + left-sidebar layout
   ---------------------------------------------------------------------
   Loaded LAST (after style.css + prosecure-redesign.css). Pure CSS:
   no DOM or JS is changed, so all designer functionality is preserved.

   PART A  Theme tokens
   PART B  Global re-skin (all viewport widths)
   PART C  Desktop left-sidebar layout (>1235px only — where the top
           nav `.hidePad` is actually shown; smaller screens keep the
           original bottom-docked flow, just re-coloured)

   NOTE: we deliberately use our own --c-* tokens (not the --psd-* ones)
   because supplier-branding.js overwrites --psd-* inline on :root.
   ===================================================================== */

:root {
  /* Brand "Light & Brass": bright, premium light theme. White/cream surfaces
     so the door images pop, deep indigo ink text (from the logo mark #423682),
     and the logo's warm gold as the accent. Shadows are soft + indigo-tinted,
     never harsh black, to keep the light UI clean. */
  --c-bg:        #ffffff;  /* app backdrop — clean white       */
  --c-bg-2:      #ffffff;  /* radial centre highlight          */
  --c-surface:   #ffffff;  /* panels / sidebar / footer        */
  --c-surface-2: #f4f5f8;  /* raised tiles / hovers            */
  --c-surface-3: #eaecf1;  /* active tiles                     */
  --c-line:      #e4e6ec;  /* hairline borders (soft)          */
  --c-line-soft: #eef0f4;
  --c-brass:     #bf9034;  /* primary accent — readable gold  */
  --c-brass-2:   #a87d2a;  /* accent text / hover (deeper)    */
  --c-brass-dim: #87631f;
  --c-text:      #241c52;  /* primary text — deep indigo ink  */
  --c-text-2:    #4a4570;  /* secondary text                  */
  --c-muted:     #8a86a0;  /* muted / labels                  */
  --c-on-brass:  #2a2055;  /* text on gold — dark indigo      */
  --c-shadow:    rgba(40, 33, 80, 0.14);

  /* Logo purple — PRIMARY action colour (buttons, active selections).
     Gold (--c-brass) stays the SECONDARY accent, mirroring the logo:
     purple shapes with warm gold highlights. */
  --c-primary:      #423682;  /* logo mark purple            */
  --c-primary-2:    #35296b;  /* deeper purple — hover       */
  --c-on-primary:   #ffffff;  /* text on purple              */
  --c-primary-soft: rgba(66, 54, 130, 0.14); /* active tint  */
}

/* =====================================================================
   PART B — GLOBAL RE-SKIN (all widths)
   ===================================================================== */

html, body, #page {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  font-family: Nunito, "Segoe UI", Arial, sans-serif !important;
}

#preloader {
  background: var(--c-bg) !important;
}

/* Scrollbars */
::-webkit-scrollbar-track { background: var(--c-bg) !important; }
::-webkit-scrollbar-thumb { background: var(--c-line) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--c-brass-dim) !important; }

/* The door "studio" backdrop — a soft overhead spotlight on warm paper,
   with a gentle vignette, so the doors read as if shot in a showroom. */
#content {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(55% 46% at 50% 22%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(135% 105% at 50% 32%, #ffffff 0%, #f6f7f9 55%, #eceef2 100%) !important;
  box-shadow: inset 0 0 200px rgba(40, 33, 80, 0.05) !important;
}

/* ---- Header / sidebar shell ------------------------------------- */
header,
header#header {
  background: var(--c-surface) !important;
}

#logo img,
#welcomeLogo,
#quoteLogo img {
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Logos are dark wordmarks (and supplier logos vary), so sit them on a
   warm cream plate that reads on any dark surface. */
#logo a,
#welcomeLogo,
#quoteLogo img {
  display: inline-block !important;
  background: #f4f1ea !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 6px 16px rgba(40, 33, 80, 0.12) !important;
}
#logo a img { display: block !important; }

/* ---- Top nav (step tabs) ---------------------------------------- */
.mainNav,
header .mainNav {
  background: transparent !important;
}
.mainNav li a {
  background: transparent !important;
  color: var(--c-text-2) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.mainNav li a:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  box-shadow: none !important;
}
.mainNav li a:hover:after { display: none !important; border: 0 !important; }
.mainNav li a.current {
  background: var(--c-primary-soft) !important;
  color: var(--c-primary) !important;
}
.mainNav a.disAble,
.mainNav a[disabled] { opacity: .32 !important; }

/* ---- Operate buttons (Share / Home view / Rotate / Zoom / Restart) */
nav#visualoptions {
  background: transparent !important;
  border: 0 !important;
}
#visualoptions ul {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px var(--c-shadow) !important;
  overflow: hidden !important;
}
#visualoptions li { border-left: 1px solid var(--c-line-soft) !important; }
#visualoptions li:first-child { border-left: 0 !important; }
#visualoptions .operateButtons {
  background: transparent !important;
  color: var(--c-text-2) !important;
}
#visualoptions .operateButtons::before { display: none !important; }
#visualoptions .operateButtons:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-primary) !important;
}
#visualoptions .operateButtons:hover .material-symbols-outlined { color: var(--c-primary) !important; }
#visualoptions .material-symbols-outlined,
#visualoptions .operateButtons p {
  color: inherit !important;
  letter-spacing: 0 !important;
}

/* ---- Summary strip (door style / colour / glass…) --------------- */
#summaryStatus {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--c-text-2) !important;
  border-bottom: 1px solid var(--c-line) !important;
  box-shadow: 0 6px 16px var(--c-shadow) !important;
  backdrop-filter: blur(4px) !important;
}
#summaryStatus .hidePhone { color: var(--c-muted) !important; }
#summaryStatus .summaryType {
  color: var(--c-primary) !important;
  font-weight: 800 !important;
  border-right-color: var(--c-line) !important;
}

/* ---- Mobile status pill ----------------------------------------- */
#mobileStatus {
  background: var(--c-surface) !important;
  color: var(--c-primary) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 800 !important;
}

/* ---- Door rotate shadow (tuned for the light studio backdrop) --- */
#fulldoordisplay {
  filter: drop-shadow(0 26px 30px rgba(40, 34, 24, 0.28)) !important;
}

/* Smooth the colour / finish change on the door layers so swapping a
   colour reads as a soft cross-fade rather than a hard cut. (Velocity
   already tweens the colour; this softens the grain/glass/opacity swaps.) */
.doorColour.colour img,
.colour img,
.sideLightcolourBG,
.doorGrain,
.doorSmooth,
.glass,
.sideLightglass {
  transition: opacity .45s ease, background-color .45s ease, filter .45s ease !important;
}

/* ---- Prev / Next / Order buttons -------------------------------- */
a.NextBtn, a.PrevBtn, #orderNow {
  border-radius: 10px !important;
  letter-spacing: .01em !important;
  box-shadow: 0 12px 26px var(--c-shadow) !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
a.PrevBtn {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text-2) !important;
}
a.NextBtn, #orderNow {
  background: var(--c-primary) !important;
  border: 1px solid var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}
a.PrevBtn:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  box-shadow: 0 0 0 3px rgba(40, 33, 80, .08), 0 12px 26px var(--c-shadow) !important;
}
a.NextBtn:hover, #orderNow:hover {
  background: var(--c-primary-2) !important;
  color: var(--c-on-primary) !important;
  box-shadow: 0 0 0 3px rgba(66, 54, 130, .28), 0 12px 26px var(--c-shadow) !important;
}
a.NextBtn p, a.PrevBtn p, #orderNow p { font-weight: 900 !important; letter-spacing: .01em !important; }

/* ---- Footer / option carousel ----------------------------------- */
#footer {
  background: var(--c-surface) !important;
  border: 0 !important;
  border-top: 1px solid var(--c-line) !important;
  box-shadow: 0 -14px 34px var(--c-shadow) !important;
}
#slideFooterUp {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 800 !important;
}
#slideFooterUp:hover { background: var(--c-primary-2) !important; color: var(--c-on-primary) !important; }
#closefooter, #footer .close.button {
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-line) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  color: var(--c-text-2) !important;
}
#closefooter.close:hover { background: var(--c-primary) !important; color: var(--c-on-primary) !important; }

#footertabs a, #hardwarefootertabs a {
  background: var(--c-surface-2) !important;
  color: var(--c-text-2) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
#footertabs a:hover, #hardwarefootertabs a:hover { color: var(--c-primary) !important; text-decoration: none !important; }
#footertabs a.current {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}

/* Option tiles in the carousel */
.owl-item {
  background: transparent !important;
  border-radius: 10px !important;
  transition: background .18s ease, box-shadow .18s ease !important;
}
.owl-item:hover { background: rgba(40, 33, 80, 0.05) !important; }
.owl-item.active {
  background: var(--c-primary-soft) !important;
  box-shadow: inset 0 0 0 2px var(--c-primary) !important;
}

.box .label,
.doorlink .label,
.glasslink .box .label,
.sideglasslink .box .label,
.frameStylelink .box .label,
#footer .box .label,
#footer .doorlink .label {
  background: var(--c-surface-3) !important;
  color: var(--c-text) !important;
  border-radius: 7px 7px 0 0 !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
#footer .owl-item.active .box .label,
#footer .owl-item.active .doorlink .label {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}
a .box .sublabel,
a.colourlink .box .sublabel,
#footer .box .sublabel {
  background: #f4f5f8 !important;
  color: var(--c-text-2) !important;
  border-radius: 0 0 7px 7px !important;
  font-weight: 700 !important;
}

.colourlink .box, .framecolourlink .box,
.glasslink .box, .sideglasslink .box,
.frameStylelink .box, .doorlink {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.colourlink .box, .framecolourlink .box {
  box-shadow: 0 8px 18px var(--c-shadow) !important;
}
.handlethumb .box { background: var(--c-surface-2) !important; }

/* ---- Footer controls (RAL, toggles, hinge/finish/cassette) ------ */
#footerControls .button-cover,
.button-cover {
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  color: var(--c-text) !important;
}
.button-cover p { color: var(--c-text-2) !important; }
.button-cover input.ral { background: var(--c-bg) !important; color: var(--c-text) !important; border-color: var(--c-line) !important; }
#ralform a#changeRal { background: var(--c-primary) !important; color: var(--c-on-primary) !important; border-radius: 6px !important; }
.infoButt {
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  color: var(--c-text-2) !important;
}
.infoButt:hover { color: var(--c-primary) !important; }

#colourbothsides, #framecolourbothsides, #ralform,
#hingesideOptions, #finishType, #cassetteType { color: var(--c-text) !important; }
.toggleButton .knobs::before { background: var(--c-primary) !important; box-shadow: 0 4px 12px rgba(66,54,130,.4) !important; }

/* hinge / finish / cassette / generic current selections -> brass */
.hingeOption.current, .openOption.current, .finishOption.current,
.cassetteOption.current, .urbanlink.current, .quoteSelectBtn.current,
#fullsidelightOptions a.current, #patternedglassOveride a.current,
#glazedsidelightWidths a.current, #glazedSidelights a.current,
#glassoptions ul.colourlist li.current, #sglassoptions ul.colourlist li.current,
#orientation ul li.current, #orientation ul li:hover {
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}
#glassoptions, #sideliteglassoptions, #orientation, #fullsidelightOptions {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
}
#glassoptions ul li:hover, #sideliteglassoptions ul li:hover { background-color: rgba(40,33,80,.05) !important; }

/* ---- Welcome / popups / tip boxes ------------------------------- */
.tipBox, .popupScreen, #welcomeScreen, #restartWarning, #doorchangeWarning {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 70px rgba(40, 33, 80, 0.16) !important;
}
.tipBox h2, .popupScreen h2, .tipBox h3 { color: var(--c-text) !important; }
.tipBox p, .popupScreen p, .tipBox small { color: var(--c-text-2) !important; }
.tipBox .close, .tipBox .close i { color: var(--c-muted) !important; }

.MainButton, .Button, .editButton, .genericBttn, .submitButton {
  background: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  border: 1px solid var(--c-primary) !important;
  border-radius: 10px !important;
  color: var(--c-on-primary) !important;
  box-shadow: 0 14px 30px rgba(40, 33, 80, 0.14) !important;
}
.MainButton:hover, .Button:hover, .editButton:hover, .genericBttn:hover, .submitButton:hover {
  background: var(--c-primary-2) !important;
  color: var(--c-on-primary) !important;
}
.Button.altButtoncol { background: var(--c-surface-2) !important; border-color: var(--c-line) !important; color: var(--c-text) !important; }
.materialLink, a.materialLink { color: var(--c-primary) !important; }

/* ---- Quote / order form ----------------------------------------- */
#formscreen, #galleryscreen, #fullscreen { background: var(--c-bg) !important; }
#galleryscreen h1, #formscreen h1, #fullscreen h1 { color: var(--c-text) !important; }
#forminputs {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 26px 64px rgba(40, 33, 80, 0.16) !important;
}
#forminputs h3, #forminputs h3#formdetailsTitle { color: var(--c-text) !important; }
#forminputs p, #formDisclaimer { color: var(--c-muted) !important; }
.form-group input, .form-group textarea, .input__field {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border-radius: 8px 8px 0 0 !important;
}
.control-label { color: var(--c-muted) !important; }
.form-group .bar:before, .form-group .bar:after { background: var(--c-brass) !important; }
.door-size-divider span { color: var(--c-muted) !important; }
.door-size-divider::before, .door-size-divider::after { background: var(--c-line) !important; }
.door-size-hint { color: var(--c-muted) !important; }

/* gallery thumbs */
#galleryscreen .gallerythumb { border-color: var(--c-line) !important; }

/* misc accent text recolours from base theme */
p.greenTxt, .greenTxt, p.blueTxt, p.redTxt { color: var(--c-primary) !important; }
#fullscreen, .close1, .mainNav1 { }

/* =====================================================================
   PART C — DESKTOP LEFT-SIDEBAR LAYOUT  (only where top nav is shown)
   ===================================================================== */
@media all and (min-width: 1236px) {

  :root { --c-rail: 224px; }

  /* Turn the fixed top bar into a static, always-visible left rail.
     transform:none neutralises Velocity's show/hide translateY so the
     rail is deterministic and not a containing-block for fixed children. */
  header#header {
    transform: none !important;
    -webkit-transform: none !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: var(--c-rail) !important;
    height: 100vh !important;
    flex-direction: column !important;
    -webkit-flex-direction: column !important;
    align-items: stretch !important;
    -webkit-align-items: stretch !important;
    justify-content: flex-start !important;
    background: var(--c-surface) !important;
    border-right: 1px solid var(--c-line) !important;
    box-shadow: 6px 0 28px rgba(40, 33, 80, 0.12) !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 2000 !important;
  }

  /* Logo block at the top of the rail */
  header#header .logo,
  header#header #logo {
    position: static !important;
    order: 0 !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 22px 20px 18px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--c-line) !important;
  }
  header#header #logo img {
    height: auto !important;
    max-height: 64px !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Vertical step nav fills the rail */
  header#header #nav-main.mainNav {
    position: static !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 auto !important;
    padding: 14px 12px !important;
    overflow-y: auto !important;
  }
  header#header #nav-main.mainNav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
  }
  header#header .mainNav li { display: block !important; width: 100% !important; margin: 0 !important; }
  header#header .mainNav li a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-transform: none !important;
    font-size: 13px !important;
    padding: 13px 16px !important;
    border-radius: 9px !important;
    border-left: 3px solid transparent !important;
    color: var(--c-text-2) !important;
  }
  header#header .mainNav li a:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-text) !important;
  }
  header#header .mainNav li a.current {
    background: rgba(200, 164, 92, 0.14) !important;
    border-left-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
  }

  /* Hide the price block / pricing curve inside the rail (already
     visibility:hidden, but ensure it takes no rail space) */
  header#header #priceBlock,
  header#header #pricingCurve { position: absolute !important; left: -9999px !important; }

  /* Operate buttons (Share / Home view / Rotate / Zoom / Restart) dock
     at the BOTTOM of the rail — keeps them in the column flow (no fixed
     positioning) and avoids overlapping the summary strip. */
  header#header nav#visualoptions {
    position: static !important;
    order: 2 !important;
    width: 100% !important;
    margin-top: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    border-top: 1px solid var(--c-line) !important;
    background: var(--c-surface) !important;
    padding: 8px 6px !important;
  }
  header#header #visualoptions ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  header#header #visualoptions li { float: none !important; border: 0 !important; }
  header#header #visualoptions ul li a { width: 60px !important; height: 54px !important; }
  header#header #visualoptions .operateButtons:hover { border-radius: 9px !important; }

  /* Push the whole designer canvas right of the rail. #footer, #display
     and #visualization all live inside #content, so they shift too. */
  section#content {
    left: var(--c-rail) !important;
    width: calc(100% - var(--c-rail)) !important;
    right: 0 !important;
  }

  /* Summary strip sits at the very top of the canvas */
  #summaryStatus {
    top: 0 !important;
    border-radius: 0 !important;
  }

  /* Back button must clear the rail (it is viewport-fixed) */
  a.PrevBtn { left: calc(var(--c-rail) + 16px) !important; }

  /* Slide-up "Change …" handle stays within the canvas column */
  #slideFooterUp { right: 0 !important; }

  /* Subtle entrance for the rail */
  header#header { animation: psd-rail-in .5s ease both; }
  @keyframes psd-rail-in {
    from { opacity: 0; transform: translateX(-18px) !important; }
    to   { opacity: 1; transform: none !important; }
  }
}

/* =====================================================================
   PART D — DESKTOP RIGHT-SIDE OPTIONS PANEL  (>1235px)
   The bottom owl-carousel drawer becomes a tall, scrollable panel docked
   on the right. JS still toggles its `display` per step, so it appears
   with the right options exactly as before — only its position/flow
   changes. Owl 1.x has no clones, and thumbnail clicks are bound to the
   <a> links (not owl nav), so selection keeps working.
   ===================================================================== */
@media all and (min-width: 1236px) {

  :root { --c-panel: 348px; }

  /* ---- The panel shell -------------------------------------------- */
  #footer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--c-panel) !important;
    max-width: var(--c-panel) !important;
    height: 100vh !important;
    /* neutralise Velocity's translateY (built for the bottom drawer) so
       the panel stays put; JS still shows/hides it via display/opacity */
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    background: var(--c-surface) !important;
    border-left: 1px solid var(--c-line) !important;
    border-top: 0 !important;
    box-shadow: -14px 0 38px var(--c-shadow) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1500 !important;
  }

  /* Panel header: current-step label stays pinned while the grid scrolls */
  #footer #mobileStatus {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 46px 15px 20px !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(6px) !important;
    color: var(--c-primary) !important;
    font-size: 14px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    z-index: 6 !important;
  }
  /* Close control pinned to the panel's top-right corner (panel is at
     right:0 with no transform, so position:fixed resolves to the corner) */
  #footer #closefooter,
  #footer #closefooter.close.button {
    position: fixed !important;
    top: 13px !important;
    right: 14px !important;
    left: auto !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 9px !important;
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-line) !important;
    color: var(--c-text-2) !important;
    z-index: 4 !important;
  }
  #footer #closefooter:hover { background: var(--c-primary) !important; color: var(--c-on-primary) !important; }

  /* ---- Owl carousel -> vertical scrolling thumbnail grid ---------- */
  #footer #carouselWrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px 0 !important;
    animation: psd-panel-in .4s ease both;
  }
  #footer .owl-carousel { display: block !important; width: 100% !important; }
  #footer .owl-carousel .owl-wrapper-outer { overflow: visible !important; width: 100% !important; }
  #footer .owl-carousel .owl-wrapper {
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: flex-start !important;
    gap: 12px !important;
  }
  #footer .owl-carousel .owl-item {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: psd-thumb-in .4s ease both;
    transition: transform .15s ease !important;
  }
  #footer .owl-carousel .owl-item:hover { transform: translateY(-2px) !important; }
  /* hide the horizontal prev/next arrows + any owl controls/clones */
  #footer .owl-carousel .nav-btn,
  #footer .owl-carousel .owl-controls,
  #footer .owl-carousel .owl-item.cloned { display: none !important; }

  /* ---- Contextual controls (RAL, both-sides, hinge/finish/cassette)
     were absolutely positioned above the old drawer — stack them in the
     panel flow instead. ----------------------------------------------- */
  #footer #footerControls { position: static !important; margin-top: 14px !important; padding: 0 14px !important; }
  #footer #colourbothsides,
  #footer #framecolourbothsides,
  #footer #hingesideOptions,
  #footer #opensOptions,
  #footer #finishType,
  #footer #cassetteType,
  #footer #ralform {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 10px auto !important;
  }
  #footer .infoButt { display: inline-block !important; margin: 8px auto !important; }
  #footer #footertabs, #footer #hardwarefootertabs {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    margin-bottom: 10px !important;
  }

  /* ---- Re-centre the door in the space between rail and panel so it
     is always fully visible. #fulldoordisplay is width:868 with margin:auto
     (centres in full #content). Asymmetric margins make its box exactly
     fill the visible area (rail-right .. panel-left) so the door sits dead
     centre of that gap, regardless of the velocity scale transform. ----- */
  #fulldoordisplay {
    width: calc(100% - var(--c-panel)) !important;
    margin-left: 0 !important;
    margin-right: var(--c-panel) !important;
    height: 93% !important;            /* a touch larger so it fills the stage */
  }

  /* Grounded floor shadow under the door — sits in the visible canvas
     gap, behind the door, for a premium product-shot feel. */
  #display::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: var(--c-panel) !important;   /* centre within the visible gap */
    bottom: 5% !important;
    margin: 0 auto !important;
    width: 300px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse at center,
                rgba(46, 36, 18, 0.30) 0%, rgba(46, 36, 18, 0.12) 45%, transparent 72%) !important;
    filter: blur(3px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: psd-shadow-in .6s ease .2s both !important;
  }
  @keyframes psd-shadow-in { from { opacity: 0; transform: scaleX(.7); } to { opacity: 1; transform: none; } }

  /* Next button must clear the right panel */
  a.NextBtn { right: calc(var(--c-panel) + 16px) !important; left: auto !important; }
  /* Order button (final step) likewise */
  #orderNow.NextBtn { right: calc(var(--c-panel) + 16px) !important; }

  /* Summary strip must stop at the panel's left edge. The base CSS sets
     width:100% which over-constrains right, so force width:auto and let
     left:0 + right:panel bound it to the visible canvas. */
  #summaryStatus {
    left: 0 !important;
    right: var(--c-panel) !important;
    width: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  #summaryStatus::-webkit-scrollbar { display: none !important; }

  /* "Change …" reopen handle parks just left of the panel */
  #slideFooterUp { right: var(--c-panel) !important; bottom: 0 !important; }

  /* ---- Panel & thumbnail entrance animations ---------------------- */
  @keyframes psd-panel-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes psd-thumb-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  #footer .owl-item:nth-child(1) { animation-delay: .02s; }
  #footer .owl-item:nth-child(2) { animation-delay: .05s; }
  #footer .owl-item:nth-child(3) { animation-delay: .08s; }
  #footer .owl-item:nth-child(4) { animation-delay: .11s; }
  #footer .owl-item:nth-child(5) { animation-delay: .14s; }
  #footer .owl-item:nth-child(6) { animation-delay: .17s; }
  #footer .owl-item:nth-child(7) { animation-delay: .20s; }
  #footer .owl-item:nth-child(8) { animation-delay: .23s; }

  /* Gentle lift on door-style / colour tiles for a premium feel */
  #footer .owl-item.active { transform: translateY(-2px) !important; }
}

/* =====================================================================
   PART E — POLISH: richer brass, depth & motion (all viewports unless
   noted). Purely cosmetic, additive.
   ===================================================================== */

/* ---- Brass given a brushed-metal sheen ----------------------------- */
a.NextBtn, #orderNow,
.MainButton, .Button:not(.altButtoncol), .editButton, .genericBttn, .submitButton {
  background-image: linear-gradient(180deg, #4d3f92 0%, var(--c-primary) 52%, var(--c-primary-2) 100%) !important;
  border-color: var(--c-primary-2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
a.NextBtn:hover, #orderNow:hover,
.MainButton:hover, .Button:not(.altButtoncol):hover, .editButton:hover, .genericBttn:hover, .submitButton:hover {
  background-image: linear-gradient(180deg, #5a4ab0 0%, var(--c-primary) 60%, var(--c-primary-2) 100%) !important;
  transform: translateY(-1px) !important;
}
a.NextBtn:active, #orderNow:active, .MainButton:active, .submitButton:active { transform: translateY(0) !important; }

/* Arrow nudges in the travel direction on hover */
a.NextBtn i, a.NextBtn .material-symbols-outlined,
a.PrevBtn i, a.PrevBtn .material-symbols-outlined { transition: transform .18s ease !important; }
a.NextBtn:hover i, a.NextBtn:hover .material-symbols-outlined { transform: translateX(4px) !important; }
a.PrevBtn:hover i, a.PrevBtn:hover .material-symbols-outlined { transform: translateX(-4px) !important; }

/* Light sheen sweeps across the brass buttons on hover.
   NOTE: NextBtn/#orderNow are already position:fixed — only add overflow
   to them (NOT position) so we don't knock them out of place. */
a.NextBtn, #orderNow { overflow: hidden !important; }
.MainButton, .submitButton, .editButton {
  position: relative !important;
  overflow: hidden !important;
}
a.NextBtn::after, #orderNow::after, .MainButton::after, .submitButton::after, .editButton::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -70% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
a.NextBtn:hover::after, #orderNow:hover::after,
.MainButton:hover::after, .submitButton:hover::after, .editButton:hover::after {
  animation: psd-sheen .75s ease !important;
}
@keyframes psd-sheen {
  0%   { left: -70%; opacity: 0; }
  28%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Brass current-step indicator on the nav (slim animated bar) */
.mainNav li a { position: relative !important; }

/* Operate buttons: soft brass glow on hover */
#visualoptions .operateButtons { transition: background .18s ease, color .18s ease, box-shadow .18s ease !important; }
#visualoptions .operateButtons:hover { box-shadow: 0 0 0 1px rgba(200,164,92,.35), 0 8px 18px rgba(40,33,80,.13) !important; }

/* Owl thumbnails: brass ring + glow on hover/active */
.owl-item .box,
.owl-item .doorlink { transition: box-shadow .18s ease, transform .18s ease !important; }
.owl-item:hover .box,
.owl-item:hover .doorlink { box-shadow: 0 0 0 2px rgba(200,164,92,.45), 0 10px 22px rgba(40,33,80,.13) !important; }
.owl-item.active .box,
.owl-item.active .doorlink { box-shadow: 0 0 0 2px var(--c-brass), 0 0 18px rgba(200,164,92,.35) !important; }

/* Brass-tinted scrollbar inside the options panel */
#footer::-webkit-scrollbar { width: 10px; }
#footer::-webkit-scrollbar-track { background: #eef0f4 !important; }
#footer::-webkit-scrollbar-thumb { background: var(--c-brass-dim) !important; border-radius: 10px !important; }
#footer::-webkit-scrollbar-thumb:hover { background: var(--c-brass) !important; }

/* Welcome "Start" button: a subtle attention pulse */
#welcomeScreen .MainButton { animation: psd-pulse 2.4s ease-in-out infinite !important; }
@keyframes psd-pulse {
  0%, 100% { box-shadow: 0 14px 30px rgba(40,33,80,.14), 0 0 0 0 rgba(200,164,92,.0); }
  50%      { box-shadow: 0 14px 30px rgba(40,33,80,.14), 0 0 0 8px rgba(200,164,92,.12); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Desktop-only motion polish ------------------------------------ */
@media all and (min-width: 1236px) {

  /* Animated brass underline under the panel step-title */
  #footer #mobileStatus::after {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    bottom: -1px !important;
    height: 2px !important;
    width: 46px !important;
    background: linear-gradient(90deg, var(--c-brass), transparent) !important;
    animation: psd-underline .5s ease both !important;
  }
  @keyframes psd-underline { from { width: 0; opacity: 0; } to { width: 46px; opacity: 1; } }

  /* Sliding brass indicator on the current nav step */
  header#header .mainNav li a.current::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: 8px !important; bottom: 8px !important;
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: var(--c-brass) !important;
    box-shadow: 0 0 10px rgba(200,164,92,.6) !important;
    animation: psd-ind .35s ease both !important;
  }
  @keyframes psd-ind { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Stagger the rail nav items in on first load */
  header#header .mainNav li { animation: psd-nav-in .45s ease both !important; }
  @keyframes psd-nav-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
  header#header .mainNav li:nth-child(1) { animation-delay: .18s; }
  header#header .mainNav li:nth-child(2) { animation-delay: .23s; }
  header#header .mainNav li:nth-child(3) { animation-delay: .28s; }
  header#header .mainNav li:nth-child(4) { animation-delay: .33s; }
  header#header .mainNav li:nth-child(5) { animation-delay: .38s; }
  header#header .mainNav li:nth-child(6) { animation-delay: .43s; }
  header#header .mainNav li:nth-child(7) { animation-delay: .48s; }
  header#header .mainNav li:nth-child(8) { animation-delay: .53s; }
  header#header .mainNav li:nth-child(9) { animation-delay: .58s; }

  /* Operate-button cluster fades up after the rail */
  header#header nav#visualoptions { animation: psd-nav-in .5s ease .5s both !important; }

  /* Brass top hairline pinned across the panel's top edge */
  #footer { border-top: 0 !important; }
  #footer::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important;
    width: var(--c-panel) !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--c-brass-dim), var(--c-brass), var(--c-brass-dim)) !important;
    z-index: 7 !important;
  }
}

/* =====================================================================
   PART F — DOOR STYLE CATEGORIES (popup + filter UI)
   ===================================================================== */

/* Hidden door thumbnails when a collection filter is active */
.owl-item.psd-hidden { display: none !important; }

/* ---- Category popup ------------------------------------------------ */
.psd-cat-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(33, 26, 68, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.psd-cat-screen.is-open { display: flex; animation: psd-cat-fade .28s ease; }
@keyframes psd-cat-fade { from { opacity: 0; } to { opacity: 1; } }

.psd-cat-box {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: 30px 32px 34px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 40px 90px rgba(40, 33, 80, 0.18);
  animation: psd-cat-rise .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes psd-cat-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.psd-cat-box::before {
  content: "";
  position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--c-brass), transparent);
}
.psd-cat-title {
  margin: 0 0 4px;
  color: var(--c-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
}
.psd-cat-sub {
  margin: 0 0 22px;
  color: var(--c-muted);
  font-size: 13px;
  text-align: center;
}
.psd-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.psd-cat-card {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  animation: psd-cat-card-in .4s ease both;
}
.psd-cat-card:nth-child(1) { animation-delay: .04s; }
.psd-cat-card:nth-child(2) { animation-delay: .09s; }
.psd-cat-card:nth-child(3) { animation-delay: .14s; }
.psd-cat-card:nth-child(4) { animation-delay: .19s; }
.psd-cat-card:nth-child(5) { animation-delay: .24s; }
@keyframes psd-cat-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.psd-cat-thumb {
  width: 100%;
  height: 206px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid var(--c-line);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#psdCategoryScreen .psd-cat-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .18s ease !important;
}
.psd-cat-card:hover .psd-cat-thumb img { transform: scale(1.04) !important; }
.psd-cat-card:hover .psd-cat-thumb {
  transform: translateY(-5px);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-brass), 0 18px 34px rgba(40, 33, 80, 0.14);
}
.psd-cat-name {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.psd-cat-card:hover .psd-cat-name { color: var(--c-primary); }
.psd-cat-count { color: var(--c-primary); font-size: 11px; font-weight: 700; }

/* ---- "Collection" reopen button in the panel ----------------------- */
#psdGroupBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 12px 14px 0;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  color: var(--c-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
#psdGroupBtn:hover { border-color: var(--c-primary); background: #eef0f4; }
#psdGroupBtn .psd-group-ic { font-size: 18px; color: var(--c-primary); }
#psdGroupBtn .psd-group-label { color: var(--c-text-2); }
#psdGroupBtn .psd-group-name { color: var(--c-primary); font-weight: 800; }
#psdGroupBtn .psd-group-change {
  margin-left: auto;
  color: var(--c-on-primary);
  background: var(--c-primary);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* On desktop the button pins just under the sticky panel header */
@media all and (min-width: 1236px) {
  #psdGroupBtn {
    position: sticky;
    top: 52px;
    z-index: 5;
    margin: 12px 14px 4px;
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psd-cat-screen.is-open, .psd-cat-box, .psd-cat-card { animation: none !important; }
}

/* =====================================================================
   PART G — QUOTE / "REQUEST A QUOTE" PAGE  (full rebuild)
   The legacy order form was a tall white page with stray dark bands.
   Rebuild it as a single, professional charcoal card with the door
   preview, design ref, and a clean form. CSS only.
   ===================================================================== */

/* Full-screen charcoal backdrop */
#doordesignform {
  background: #ffffff !important;
  background-image: radial-gradient(120% 80% at 50% -5%, #ffffff 0%, #f6f7f9 55%, #eceef2 100%) !important;
  padding: 44px 20px 120px !important;
  text-align: center !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Close (X) */
#doordesignform .requestClose,
.requestClose.orderNowReturn {
  top: 24px !important;
  right: 30px !important;
  color: var(--c-muted) !important;
  transition: color .16s ease, transform .16s ease !important;
}
#doordesignform .requestClose:hover { color: var(--c-primary) !important; transform: rotate(90deg) !important; }

/* Logo plate (cream plate already from PART B) */
#quoteLogo { margin: 0 auto 22px !important; }

/* The card */
#forminputs {
  position: relative !important;
  max-width: 660px !important;
  width: 92% !important;
  margin: 0 auto !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 18px !important;
  padding: 34px 36px 30px !important;
  box-shadow: 0 36px 80px rgba(40, 33, 80, 0.16) !important;
  text-align: left !important;
}
#forminputs::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 32px !important; right: 32px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--c-brass), transparent) !important;
}

/* "Your Design" eyebrow + REF */
#forminputs > h3 {
  margin: 0 0 2px !important;
  background: none !important;
  color: var(--c-primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
#forminputs > p {
  margin: 0 0 16px !important;
  text-align: center !important;
  color: var(--c-muted) !important;
  font-size: 12px !important;
}
#refNumberItem { color: var(--c-text-2) !important; font-weight: 700 !important; }

/* Door preview — a light studio inset, sensible height */
#clonedFulldoordisplay {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 20px !important;
  background: linear-gradient(180deg, #ffffff 0%, #efe8db 100%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
#clonedFulldoordisplay img {
  max-height: 340px !important;
  width: auto !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 16px 20px rgba(40, 30, 12, 0.30)) !important;
}

/* Edit Design button */
.avoid-this { text-align: center !important; margin: 0 0 6px !important; }
.avoid-this .orderNowReturn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  color: var(--c-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 9px !important;
  transition: background .16s ease, border-color .16s ease !important;
}
.avoid-this .orderNowReturn:hover { background: var(--c-surface-2) !important; border-color: var(--c-primary) !important; }
.avoid-this .orderNowReturn i { font-size: 16px !important; }

/* Details section */
.inputBlock {
  margin-top: 22px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--c-line) !important;
}
.inputBlock > h3,
#formdetailsTitle {
  margin: 0 0 18px !important;
  background: none !important;
  color: var(--c-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
}
.inputBlock fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* First + Last name on one row */
.inputBlock fieldset > .form-group:nth-child(1),
.inputBlock fieldset > .form-group:nth-child(2) {
  display: inline-block !important;
  width: 48.5% !important;
  vertical-align: top !important;
}
.inputBlock fieldset > .form-group:nth-child(1) { margin-right: 3% !important; }

.form-group { margin-bottom: 4px !important; }
.form-group input,
.form-group textarea,
.input__field {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 9px !important;
  padding: 12px 12px !important;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--c-primary) !important; outline: none !important; }
.control-label { color: var(--c-muted) !important; }
.form-group .bar:before, .form-group .bar:after { background: var(--c-brass) !important; }

#formDisclaimer {
  color: var(--c-muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
}

/* Submit button — full width brass */
#submitRequest,
.submitButton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 18px auto 0 !important;
  padding: 15px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 11px !important;
}

#finishBlock { margin-top: 18px !important; text-align: center !important; }
#finishBlock .materialLink { color: var(--c-primary) !important; font-weight: 700 !important; }

/* Door-size block tidy-up inside the card */
.door-size-divider { margin-top: 18px !important; }
.door-size-divider span { color: var(--c-muted) !important; }
.door-size-divider::before, .door-size-divider::after { background: var(--c-line) !important; }
.door-size-hint { color: var(--c-muted) !important; }

@media (max-width: 560px) {
  #forminputs { padding: 26px 20px 24px !important; }
  .inputBlock fieldset > .form-group:nth-child(1),
  .inputBlock fieldset > .form-group:nth-child(2) { display: block !important; width: 100% !important; margin-right: 0 !important; }
}

/* Quote form stability patch: the original floating-label form used
   positional rules that can overlap once the quote card is restyled. */
#doordesignform #forminputs {
  box-sizing: border-box !important;
}

#doordesignform .inputBlock fieldset {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 20px !important;
}

#doordesignform .inputBlock fieldset > .form-group {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
}

#doordesignform .inputBlock fieldset > .form-group.email,
#doordesignform .inputBlock fieldset > .form-group.streetAddress,
#doordesignform .inputBlock fieldset > .form-group.addComments,
#doordesignform .door-size-divider,
#doordesignform .door-size-inputs,
#doordesignform .door-size-hint,
#doordesignform .quote-opening-direction,
#doordesignform .door-size-error {
  grid-column: 1 / -1 !important;
}

#doordesignform .form-group input,
#doordesignform .form-group textarea,
#doordesignform .input__field {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 20px 14px 9px !important;
  line-height: 1.35 !important;
}

#doordesignform .form-group textarea {
  min-height: 118px !important;
  resize: vertical !important;
}

#doordesignform .form-group .control-label {
  position: absolute !important;
  top: 7px !important;
  left: 14px !important;
  z-index: 2 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  transform: none !important;
}

#doordesignform .form-group .bar {
  display: none !important;
}

#doordesignform .door-size-inputs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 20px !important;
  width: 100% !important;
}

#doordesignform .door-size-divider {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 8px 0 0 !important;
}

#doordesignform .door-size-divider::before,
#doordesignform .door-size-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
}

#doordesignform .door-size-divider span,
#doordesignform .quote-opening-direction__label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

#doordesignform .door-size-hint {
  margin: -8px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#doordesignform .quote-opening-direction {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

#doordesignform .quote-opening-direction__label {
  grid-column: 1 / -1 !important;
  color: var(--c-muted) !important;
}

#doordesignform .quote-opening-direction__option {
  appearance: none !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  min-height: 46px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease !important;
}

#doordesignform .quote-opening-direction__option:hover {
  border-color: var(--c-primary) !important;
  transform: translateY(-1px) !important;
}

#doordesignform .quote-opening-direction__option.is-active {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}

#doordesignform .door-size-error {
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: rgba(190, 55, 55, .14) !important;
  border: 1px solid rgba(190, 55, 55, .38) !important;
  color: #ffb8b8 !important;
}

#doordesignform .door-size-error--hidden {
  display: none !important;
}

@media (max-width: 720px) {
  #doordesignform {
    padding: 24px 12px 90px !important;
  }

  #doordesignform #forminputs {
    width: 100% !important;
    padding: 26px 18px 24px !important;
  }

  #doordesignform .inputBlock fieldset,
  #doordesignform .door-size-inputs,
  #doordesignform .quote-opening-direction {
    grid-template-columns: 1fr !important;
  }
}

/* Main designer opening direction control. Keep this visible in the
   product configurator, not on the final quote/customer form. */
#openingDirectionPanel.designer-opening-direction {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: calc(100% - 24px) !important;
  max-width: 280px !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 8px 12px 10px !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(40,33,80,.10) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(243,238,229,.97), rgba(232,226,212,.97)) !important;
  box-shadow: 0 14px 26px rgba(40,33,80,.12) !important;
}

#openingDirectionPanel.designer-opening-direction p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: var(--c-primary) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#openingDirectionPanel.designer-opening-direction .openOption {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(40,33,80,.12) !important;
  border-radius: 11px !important;
  background: #f4f5f8 !important;
  color: #2a2055 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

#openingDirectionPanel.designer-opening-direction .openOption:hover {
  transform: translateY(-1px) !important;
  border-color: var(--c-primary) !important;
}

#openingDirectionPanel.designer-opening-direction .openOption.current {
  background: linear-gradient(180deg, #4d3f92, var(--c-primary)) !important;
  border-color: var(--c-primary-2) !important;
  color: var(--c-on-primary) !important;
  box-shadow: 0 10px 22px rgba(40,33,80,.12) !important;
}

@media all and (min-width: 1236px) {
  header#header nav#visualoptions {
    order: 3 !important;
    margin-top: 0 !important;
  }
}

/* Final quote page polish. The customer form should feel like one premium
   charcoal panel, not a white legacy sheet with dark inputs pasted on top. */
#doordesignform #forminputs,
#doordesignform #forminputs .inputBlock,
#doordesignform #forminputs fieldset {
  background: transparent !important;
}

#doordesignform #forminputs {
  background:
    linear-gradient(180deg, rgba(243,238,229,.98), rgba(232,226,212,.98)) !important;
  border-color: rgba(40,33,80,.10) !important;
}

#doordesignform #clonedFulldoordisplay {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(216,178,90,.16), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #efe8db 100%) !important;
  border-color: rgba(40,33,80,.10) !important;
}

#doordesignform .door-size-divider,
#doordesignform .door-size-inputs,
#doordesignform .door-size-hint,
#doordesignform #formDisclaimer {
  background: transparent !important;
}

#doordesignform .quote-opening-direction {
  display: none !important;
}

@media (max-width: 900px) {
  #openingDirectionPanel.designer-opening-direction {
    position: fixed !important;
    left: 12px !important;
    bottom: 112px !important;
    width: 232px !important;
    padding: 12px !important;
    z-index: 30 !important;
  }
}

/* =====================================================================
   PART H — Welcome screen re-layout
   Distinct, branded entry card (NOT the old centred logo+line template).
   Left-aligned editorial layout: eyebrow, headline, lede, feature pills,
   then the Start CTA, with the disclaimer demoted to a footnote.
   ===================================================================== */
#welcomeScreen {
  text-align: center !important;
  max-width: 540px !important;
  width: min(92vw, 540px) !important;
  padding: 46px 48px 36px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(204,168,98,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%) !important;
  border: 1px solid rgba(204,168,98,.28) !important;
  box-shadow: 0 40px 90px rgba(40,33,80,.18) !important;
  /* NOTE: do NOT set position/transform here — the engine centres this
     popup with position:fixed + translate(-50%,-50%). Overriding position
     breaks the centring. The fixed parent already anchors ::before. */
}
#welcomeScreen::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--c-brass-dim), var(--c-brass-2), var(--c-brass-dim));
}

.psd-welcome-eyebrow {
  display: inline-block !important;
  margin: 0 auto 20px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--c-brass-2) !important;
  background: rgba(204,168,98,.12) !important;
  border: 1px solid rgba(204,168,98,.32) !important;
  border-radius: 999px !important;
}

#welcomeScreen #welcomeLogo {
  display: block !important;
  max-width: 196px !important;
  margin: 0 auto 24px !important;
  padding: 12px 18px !important;
}

#welcomeScreen h2 {
  margin: 0 0 14px !important;
  font-size: clamp(25px, 3.2vw, 33px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--c-text) !important;
}

#welcomeScreen > p {
  margin: 0 auto 26px !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: var(--c-text-2) !important;
  max-width: 42ch !important;
  text-align: center !important;
}

/* 2026 brand refresh: the new Pro Secure mark is a self-contained square.
   Supplier-uploaded logos keep the neutral plate rules above. */
body:not(.supplier-branded-designer) #logo a,
body:not(.supplier-branded-designer) #welcomeLogo,
body:not(.supplier-branded-designer) #quoteLogo img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(40, 33, 80, 0.12) !important;
}

body:not(.supplier-branded-designer) #logo img {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
}

body:not(.supplier-branded-designer) #welcomeScreen #welcomeLogo {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  object-fit: contain !important;
  margin: 0 auto 24px !important;
}

body:not(.supplier-branded-designer) #quoteLogo img {
  width: 132px !important;
  height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  body:not(.supplier-branded-designer) #logo img {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  body:not(.supplier-branded-designer) #welcomeScreen #welcomeLogo {
    width: 138px !important;
    height: 138px !important;
    max-width: 138px !important;
    max-height: 138px !important;
  }
}

.psd-welcome-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 0 30px !important;
}
.psd-welcome-pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  background: rgba(40,33,80,.04) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
}
.psd-welcome-pills span::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-brass-2);
  box-shadow: 0 0 8px rgba(204,168,98,.7);
}

#welcomeScreen #standard.MainButton {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 15px 34px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 12px !important;
}
#welcomeScreen #standard.MainButton::after {
  content: "\2192";
  font-size: 18px;
  transition: transform .25s ease;
}
#welcomeScreen #standard.MainButton:hover::after { transform: translateX(5px); }

.psd-welcome-note {
  margin: 26px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--c-line) !important;
}
.psd-welcome-note small {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--c-muted) !important;
}

/* =====================================================================
   PART I — Live FINAL price (bottom-right) + quote-page total
   ===================================================================== */
/* Hide the engine's "Nett Total" odometer — customers see the FINAL price
   widget instead (the odometer element stays in the DOM for the engine). */
#priceBlock, #pricingCurve { display: none !important; }

/* The .psd-live-price rule sets display:flex, which would otherwise beat the
   UA [hidden]{display:none}. Make hidden win so JS can toggle the widget off
   (e.g. on the quote page, which already shows its own price). */
.psd-live-price[hidden] { display: none !important; }

.psd-live-price {
  position: fixed;
  z-index: 1400;
  right: 16px;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  padding: 13px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(204, 168, 98, 0.4);
  box-shadow: 0 18px 40px rgba(40, 33, 80, 0.16);
  color: var(--c-text);
  pointer-events: none;
  animation: psd-lp-in 0.4s ease both;
}
@keyframes psd-lp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.psd-lp-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brass-2);
}
.psd-lp-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.psd-lp-note {
  font-size: 10.5px;
  color: var(--c-muted);
}

/* On desktop, sit it just left of the fixed options panel so it never
   overlaps the panel or the Next button. */
@media (min-width: 1236px) {
  .psd-live-price {
    right: calc(var(--c-panel, 348px) + 18px);
    bottom: 92px;
  }
}

/* Quote-page prominent total */
.psd-final-price {
  margin: 4px 0 22px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(204, 168, 98, 0.4);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(204, 168, 98, 0.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  display: grid;
  gap: 5px;
}
.psd-fp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brass-2);
}
.psd-fp-value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.psd-fp-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* =====================================================================
   PART J — FINISHING OPTIONS PANEL (Drip Bar / Door Numbers / Chains)
   Shown when "Request Quote" is clicked, before the quote form.
   ===================================================================== */
.psd-finishing {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(33, 26, 68, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.psd-finishing[hidden] { display: none !important; }
body.psd-finishing-open { overflow: hidden; }

.psd-fin-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px 32px 26px;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(204, 168, 98, 0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  box-shadow: 0 24px 60px rgba(40, 33, 80, 0.16);
  color: var(--c-text);
}
.psd-fin-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.psd-fin-close:hover { color: var(--c-text); background: var(--c-surface-2); }

.psd-fin-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass-2);
}
.psd-fin-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.psd-fin-lede {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
}

.psd-fin-row {
  padding: 16px 0;
  border-top: 1px solid var(--c-line-soft);
}
.psd-fin-row:first-of-type { border-top: 0; }
.psd-fin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.psd-fin-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
}

.psd-fin-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.psd-fin-toggle button {
  min-width: 56px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.psd-fin-toggle button.is-active {
  background: linear-gradient(180deg, #4d3f92, var(--c-primary));
  color: var(--c-on-primary);
}

.psd-fin-sub {
  margin-top: 14px;
}
.psd-fin-sub[hidden] { display: none; }
.psd-fin-sub--cols {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.psd-fin-sublabel {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.psd-fin-field { flex: 1 1 140px; }

.psd-fin-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.psd-fin-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.psd-fin-swatch:hover { border-color: var(--c-brass-dim); }
.psd-fin-swatch.is-active {
  border-color: var(--c-primary);
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-brass);
}
.psd-fin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(40, 33, 80, 0.2);
}

.psd-fin-select,
.psd-fin-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  font-family: inherit;
}
.psd-fin-select:focus,
.psd-fin-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(204, 168, 98, 0.25);
}

.psd-fin-error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #e8a0a0;
}
.psd-fin-error[hidden] { display: none; }

.psd-fin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.psd-fin-back {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.psd-fin-back:hover { border-color: var(--c-brass-dim); color: var(--c-text); }
.psd-fin-continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #4d3f92, var(--c-primary));
  color: var(--c-on-primary);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s;
}
.psd-fin-continue:hover { filter: brightness(1.05); }
.psd-fin-continue .material-symbols-outlined { font-size: 20px; }

/* Quote-page summary of the chosen finishing options */
.psd-finishing-summary {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
.psd-fs-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brass-2);
}
.psd-fs-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-2);
}

/* Drip-bar colour mode toggle (Match door colour / Different colour) */
.psd-fin-toggle--wide {
  display: flex;
  width: 100%;
}
.psd-fin-toggle--wide button {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
.psd-fin-field--full {
  display: block;
  width: 100%;
  margin-top: 14px;
}
.psd-fin-field--full[hidden] { display: none; }

/* Cill size selector */
.psd-fin-toggle--sizes {
  display: flex;
  width: 100%;
}
.psd-fin-toggle--sizes button { flex: 1 1 0; }

@media (max-width: 520px) {
  .psd-fin-card { padding: 26px 20px 22px; }
  .psd-fin-title { font-size: 22px; }
  .psd-fin-actions { flex-direction: column-reverse; align-items: stretch; }
  .psd-fin-continue { justify-content: center; }
}

/* =====================================================================
   PART K — Mobile usability polish (phones / small tablets, < 1236px)
   The designer already works on mobile (original bottom-docked flow,
   re-coloured); this tidies the rough edges: the crowded top operate
   bar, the tiny running-spec chips, and tap-target sizes.
   ===================================================================== */
@media (max-width: 1235px) {
  /* Operate buttons (Share / Home View / Rotate / Zoom / Restart):
     keep labels on one line, size evenly, comfortable taps. */
  header#header nav#visualoptions ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  header#header nav#visualoptions li {
    flex: 0 0 auto !important;
  }
  header#header nav#visualoptions li a.operateButtons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-height: 46px !important;
    padding: 4px 1px !important;
    gap: 1px !important;
  }
  header#header nav#visualoptions .operateButtons p {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    opacity: .9 !important;
  }
  header#header nav#visualoptions .operateButtons .material-symbols-outlined {
    font-size: 21px !important;
  }

  /* Running-spec chips: a clean, single scrollable row of brass pills. */
  #summaryStatus {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 5px 12px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #summaryStatus::-webkit-scrollbar { display: none !important; }
  #summaryStatus .summaryType {
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    border-radius: 999px !important;
    background: rgba(204, 168, 98, .12) !important;
    border: 1px solid rgba(204, 168, 98, .30) !important;
    color: var(--c-text-2) !important;
    white-space: nowrap !important;
  }

  /* Bigger tap targets in the option picker (door / colour / glass / etc). */
  #footer .owl-item a,
  #footer #thumbs a {
    min-height: 44px !important;
  }

  /* Next / Prev step buttons: easier to thumb. */
  #stepButtons .NextBtn,
  #stepButtons .PrevBtn {
    min-width: 46px !important;
    min-height: 46px !important;
  }
}