/* The Colour Room - visual skin to match the rest of the site.
   Type, colour and buttons only. The 3D swatch, lighting, catalogue data, controls,
   CAD import and quote logic are untouched. */
body.brand-room{
  --orange:#f46a25; --brand-accent:#f46a25;
  --brand-carbon:#1f1d22; --brand-ink:#1f1d22; --ink:#1f1d22;
  --brand-paper:#eeece5; --brand-muted:#a29fa6;
  --sc-grad:linear-gradient(115deg,#f25c27 0%,#f56a21 45%,#ff7a0e 100%);
}
body.brand-room ::selection{background:#f46a25;color:#1f1d22}

/* Headings in the logo typeface */
.brand-room .room-heading h1,
.brand-room .swatch-id h2,
.brand-room .library-top h2,
.brand-room .part-intro h2,
.brand-room dialog h2{
  font-family:SCBarlow,DM,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.brand-room .room-heading h1{font-size:clamp(40px,3.8vw,68px)}
.brand-room .swatch-id h2{font-size:clamp(40px,4vw,72px);margin:10px 0 8px}
.brand-room .library-top h2{font-size:38px}

/* Labels, codes and small caps */
.brand-room .eyebrow,
.brand-room .room-heading .eyebrow,
.brand-room .swatch-id p,
.brand-room .light-control>span,
.brand-room .reference-label{font-family:SCBarlow,DM,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#f46a25}
.brand-room .swatch-id p{color:#5c5960}
.brand-room #selected-code,.brand-room .swatch-id>span{font-family:SCBarlow,DM,sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;color:#f25c27}
.brand-room .library-top>span,.brand-room #catalogue-count{color:#a29fa6;font-size:13px}

/* The dark library panel uses the site charcoal */
.brand-room .catalogue{background:#1f1d22}

/* Primary actions in the brand orange */
.brand-room #cad-upload-open,
.brand-room .project-link,
.brand-room #part-get-estimate,
.brand-room #quote-basket-continue{
  background:var(--sc-grad);color:#1f1d22;border:0;font-weight:500;font-size:14px;padding:15px 16px}
.brand-room #cad-upload-open:hover,.brand-room .project-link:hover,.brand-room #part-get-estimate:hover,.brand-room #quote-basket-continue:hover{background:#eeece5;color:#1f1d22}
.brand-room #cad-upload-open[aria-busy=true]{background:rgba(244,106,37,.15);color:#eeece5}
/* Once a part is loaded the upload block collapses: status line, small Change button, swatch link */
.brand-room .cad-upload.has-part #cad-upload-open{background:transparent;color:#eeece5;border:1px solid rgba(238,236,229,.25);font-size:12px;padding:8px 12px}
.brand-room .cad-upload.has-part #cad-upload-open:hover{background:rgba(238,236,229,.08);color:#eeece5}
.brand-room #cad-upload-open span{border-color:rgba(31,29,34,.3)}

/* Secondary buttons and toggles: neutral greys instead of the old sage greens */
.brand-room .catalogue button:not(#cad-upload-open):not(#part-get-estimate):not(#quote-basket-continue),
.brand-room .catalogue select,.brand-room .catalogue input{border-color:rgba(238,236,229,.18)}
.brand-room .catalogue button[aria-pressed=true]{border-color:#f46a25}
.brand-room [aria-current]{border-bottom-color:#f46a25}
.brand-room .presentation-switch button[aria-pressed=true],
.brand-room .lighting-switch button[aria-pressed=true]{background:#1f1d22;color:#eeece5}

/* Range slider and focus in the brand accent */
.brand-room input[type=range]{accent-color:#f46a25}
.brand-room :focus-visible{outline-color:#f46a25}

/* Catalogue: 3D-looking colour balls, as on the homepage */
.brand-room .colour-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px;padding:8px 6px 14px 4px}
.brand-room .colour-chip.ball{height:auto;aspect-ratio:1;width:100%;max-width:64px;border-radius:50%;overflow:visible;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.12),0 8px 16px -8px rgba(0,0,0,.8);
  outline:2px solid transparent;outline-offset:3px;transition:outline-color .25s,transform .35s cubic-bezier(.16,.84,.24,1)}
.brand-room .colour-option:hover{opacity:1}
.brand-room .colour-option:hover .colour-chip.ball{transform:translateY(-3px) scale(1.04)}
.brand-room .colour-option[aria-pressed=true] .colour-chip.ball{outline:2px solid #f46a25;outline-offset:3px}
.brand-room .colour-option[aria-pressed=true] .colour-chip.ball:after{display:none}
.brand-room .colour-option:focus-visible{outline:0}
.brand-room .colour-option:focus-visible .colour-chip.ball{outline-color:#eeece5}
.brand-room .colour-option strong{font-size:11px;line-height:1.3;margin:10px 0 2px;color:#e5e2db}
.brand-room .colour-option small{font-size:10px;color:#a29fa6;letter-spacing:.04em}
.brand-room .colour-option[aria-pressed=true] strong{color:#fff}
@media (min-width:1600px){.brand-room .colour-chip.ball{max-width:72px}}
@media (max-width:720px){.brand-room .colour-list{grid-template-columns:repeat(4,minmax(0,1fr))}.brand-room .colour-chip.ball{max-width:60px}}
.brand-room .colour-option{align-self:start;display:flex;flex-direction:column;align-items:flex-start}
.brand-room .filters select,.brand-room .compare-select select{background:#29272c;color:#e5e2db;border-color:rgba(238,236,229,.18)}
/* Keep the colour list usable when the part estimate is open: the panel grows taller
   instead of squeezing the list or hiding the buttons under it. */
@media (min-width:721px){
  .brand-room .colour-room{height:auto;min-height:max(930px,calc(100svh - var(--brand-header-height)));grid-template-rows:auto}
  .brand-room .catalogue{overflow:visible;min-height:0}
  .brand-room .colour-list{flex:1 0 320px;min-height:320px;max-height:none}
  .brand-room .sample-stage{align-self:start;position:sticky;top:0;height:max(930px,calc(100svh - var(--brand-header-height)))}
}
.brand-room .part-quote select,.brand-room .part-quote input{background:#29272c;color:#e5e2db;border:1px solid rgba(238,236,229,.18)}

/* Routes for people without a CAD file */
.brand-room .alt-routes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}
.brand-room .alt-routes>span{grid-column:1/-1;font-size:13px;color:#a29fa6}
.brand-room .alt-route{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(238,236,229,.28);color:#eeece5;font-size:13px;transition:border-color .2s,background .2s}
.brand-room .alt-route i{font-style:normal;color:#f46a25}
.brand-room .alt-route:hover{border-color:#f46a25;background:rgba(244,106,37,.08)}

/* ---------- Part studio (Customise & mask) and the estimate screen ---------- */
.brand-room .editor-header,.brand-room .estimate-header{background:#1f1d22;border-bottom:1px solid rgba(238,236,229,.12)}
.brand-room .estimate-header img,.brand-room .studio-brand img{filter:none;width:118px;height:auto}
.brand-room .studio-brand .eyebrow,.brand-room .estimate-header>span{font:700 12px/1 SCBarlow,DM,sans-serif;letter-spacing:.12em;color:#f46a25}
.brand-room .editor-header #editor-file{color:#a29fa6;font-size:13px}
body.brand-room .editor-header button,body.brand-room .estimate-header button{background:linear-gradient(115deg,#f25c27,#f56a21 45%,#ff7a0e);color:#1f1d22;border:0;padding:13px 20px;font:500 14px DM,sans-serif;cursor:pointer}
body.brand-room .editor-header button:hover,body.brand-room .estimate-header button:hover{background:#eeece5;color:#1f1d22}
.brand-room .editor-stage,.brand-room .estimate-preview{background:radial-gradient(ellipse at 54% 42%,#e4e3de,#d0cfc9 75%)}
.brand-room .editor-stage-heading :is(h1,h2),.brand-room .estimate-details :is(h1,h2){font-family:SCBarlow,DM,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.9;color:#1f1d22}
.brand-room .editor-stage-heading :is(h1,h2){font-size:clamp(40px,3.6vw,64px)}
.brand-room .estimate-details :is(h1,h2){font-size:clamp(46px,4.4vw,76px);margin:14px 0 18px}
.brand-room .editor-stage .eyebrow,.brand-room .editor-panel .eyebrow,.brand-room .estimate-details .eyebrow,.brand-room .estimate-preview-label .eyebrow{font:700 12px/1 SCBarlow,DM,sans-serif;letter-spacing:.12em;color:#f25c27}
.brand-room #estimate-preview-code{font:700 16px/1 SCBarlow,DM,sans-serif;letter-spacing:.04em;color:#f25c27}
.brand-room .editor-panel,.brand-room .estimate-details{background:#eeece5;color:#1f1d22}
.brand-room .editor-navigation button,.brand-room .estimate-preview-footer button,.brand-room .view-actions [data-save-render]{border:1px solid #1f1d22;background:transparent;color:#1f1d22;padding:9px 13px;font-size:13px}
.brand-room .editor-navigation button[aria-pressed=true]{background:#1f1d22;color:#eeece5}
.brand-room .editor-hint{font-size:15px;color:#1f1d22}

/* Tool buttons: clear icons instead of text glyphs */
.brand-room .editor-tools button{position:relative;font-size:0;background:#fff;border:1px solid #d3d1ca;color:#1f1d22;padding:44px 6px 12px;display:flex;flex-direction:column;align-items:center}
.brand-room .editor-tools button span{font-size:13px}
.brand-room .editor-tools button::before{content:"";position:absolute;top:14px;left:50%;width:24px;height:24px;margin-left:-12px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.brand-room .editor-tools [data-tool=rotate]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
.brand-room .editor-tools [data-tool=mask]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='black'/%3E%3C/svg%3E")}
.brand-room .editor-tools [data-tool=colour]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 1 0 17z' fill='black'/%3E%3C/svg%3E")}
.brand-room .editor-tools [data-tool=text]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 6h14M12 6v13M9 19h6'/%3E%3C/svg%3E")}
.brand-room .editor-tools [data-tool=logo]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16'/%3E%3Cpath d='M4 16l5-5 4 4 2-2 5 5'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.5'/%3E%3C/svg%3E")}
.brand-room .editor-tools button[aria-pressed=true]{background:#1f1d22;color:#eeece5;border-color:#1f1d22;box-shadow:inset 0 -3px #f46a25}
.brand-room .editor-tools button:hover:not([aria-pressed=true]){border-color:#1f1d22}
.brand-room .editor-panel label{font-size:14px;color:#1f1d22}
.brand-room .editor-panel select,.brand-room .editor-panel input:not([type=range]):not([type=file]){background:#fff;border:1px solid #cfcdc6;border-radius:0;color:#1f1d22;font-size:15px;padding:11px 12px}
.brand-room #editor-undo{color:#1f1d22;opacity:1}.brand-room #editor-undo:disabled{color:#a29fa6}
.brand-room #editor-download{border:1px solid #1f1d22;background:transparent;color:#1f1d22}
.brand-room #editor-download:disabled{border-color:#cfcdc6;color:#a29fa6}
.brand-room .fade-presets button,.brand-room .fade-buttons button{border:1px solid #cfcdc6;background:#fff;color:#1f1d22}
.brand-room .fade-presets button[aria-pressed=true],.brand-room #fade-reverse[aria-pressed=true]{background:#1f1d22;color:#eeece5;border-color:#1f1d22}
.brand-room #fade-add{background:linear-gradient(115deg,#f25c27,#f56a21 45%,#ff7a0e);border:0;color:#1f1d22}

/* Estimate screen */
.brand-room .estimate-price-block strong,.brand-room #screen-estimate-price{font-family:SCBarlow,DM,sans-serif;font-weight:800;font-size:clamp(46px,4.2vw,72px);letter-spacing:0;line-height:1;color:#1f1d22}
.brand-room .estimate-price-block p,.brand-room #quote-engine-status,.brand-room .estimate-footnote{color:#5c5960;font-size:13px}
.brand-room #quantity-offers-section h2{font:800 26px/1 SCBarlow,DM,sans-serif;text-transform:uppercase}
.brand-room #quantity-offers-section>p{color:#5c5960;font-size:13px}
.brand-room .quantity-offer{border:1px solid #d3d1ca;background:#fff;color:#1f1d22}
.brand-room .quantity-offer strong{font:800 28px/1 SCBarlow,DM,sans-serif;margin:8px 0}
.brand-room .quantity-offer em{color:#c2410c;font-weight:500}
.brand-room .quantity-offer:hover:not(:disabled){background:#f6f5f0;border-color:#1f1d22}
.brand-room .quantity-offer[aria-pressed=true]{background:#fff3e9;border-color:#f46a25;box-shadow:inset 0 0 0 1px #f46a25}
.brand-room .quantity-custom{color:#5c5960;font-size:13px}.brand-room .quantity-custom input,.brand-room .quantity-custom button{border-color:#d3d1ca;color:#1f1d22;background:#fff}.brand-room .quantity-custom button:hover{background:#f6f5f0;border-color:#1f1d22}
.brand-room .estimate-primary,.brand-room #screen-add-quote{background:linear-gradient(115deg,#f25c27,#f56a21 45%,#ff7a0e)!important;color:#1f1d22!important;border:0}
.brand-room .estimate-secondary{border:1px solid #1f1d22;background:transparent;color:#1f1d22}
.brand-room .estimate-spec{border-color:#d3d1ca}

/* Part panel on the Colour Room page */
.brand-room #part-editor-open{background:transparent;border:1px solid rgba(238,236,229,.35);color:#eeece5}
.brand-room #part-editor-open:hover{border-color:#f46a25}
.brand-room #part-estimate{display:block;font:700 24px/1.15 SCBarlow,DM,sans-serif;color:#eeece5;letter-spacing:.01em;margin:6px 0 4px}
.brand-room #part-add-quote{background:transparent;border:1px solid rgba(238,236,229,.35);color:#eeece5}
.brand-room .part-quote label{color:#cfccd2;font-size:14px}
.brand-room #part-material{min-width:200px}
body.brand-room #quote-engine-close{background:transparent;border:1px solid rgba(238,236,229,.35);color:#eeece5;padding:12px 18px;font:500 14px DM,sans-serif}
body.brand-room #quote-engine-close:hover{border-color:#f46a25;background:transparent;color:#eeece5}
@media (max-width:720px){
  body.brand-room .editor-header,body.brand-room .estimate-header{padding:0 16px;gap:12px}
  .brand-room .studio-brand img,.brand-room .estimate-header img{width:84px}
  .brand-room .studio-brand .eyebrow,.brand-room .editor-header #editor-file{display:none}
  body.brand-room .editor-header button{white-space:nowrap;padding:11px 14px;font-size:13px}
  .brand-room .view-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 14px;top:398px;bottom:auto;left:auto;right:6%;height:auto}
  .brand-room .view-actions [data-save-render]{padding:7px 10px;font-size:12px}
}
.brand-room .rating-boxes i{background:#c4c2bc}
.brand-room .rating-boxes .filled{background:#1f1d22}
.brand-room .rating-boxes .filled:last-of-type{background:#f46a25}

/* Match the Colour Room exactly: same grey stage, same charcoal side panel */
.brand-room .editor-stage,.brand-room .estimate-preview{background:#dedede}
.brand-room .editor-panel,.brand-room .estimate-details{background:#1f1d22;color:#eeece5;border-left:0}
.brand-room .estimate-layout{background:#1f1d22}
.brand-room .editor-panel label,.brand-room .editor-panel output{color:#eeece5}
.brand-room .editor-panel small,.brand-room .editor-panel p,.brand-room #editor-empty,.brand-room .editor-cost-note,.brand-room .editor-session-note{color:#a29fa6}
.brand-room .editor-panel select,.brand-room .editor-panel input:not([type=range]):not([type=file]){background:#29272c;border-color:rgba(238,236,229,.18);color:#eeece5}
.brand-room .editor-panel input[type=file]{color:#a29fa6}
.brand-room .editor-panel input[type=range]{accent-color:#f46a25}
.brand-room .editor-tools button{background:transparent;border-color:rgba(238,236,229,.18);color:#eeece5}
.brand-room .editor-tools button:hover:not([aria-pressed=true]){border-color:rgba(238,236,229,.5)}
.brand-room .editor-tools button[aria-pressed=true]{background:#29272c;color:#eeece5;border-color:#f46a25;box-shadow:inset 0 0 0 1px #f46a25}
.brand-room .editor-edits-heading,.brand-room .editor-panel hr{border-color:rgba(238,236,229,.12)}
.brand-room #editor-undo{color:#eeece5;background:none;border:0}.brand-room #editor-undo:disabled{color:#5c5960}
.brand-room #editor-download{border:1px solid rgba(238,236,229,.35);background:transparent;color:#eeece5}
.brand-room #editor-download:disabled{border-color:rgba(238,236,229,.12);color:#5c5960}
.brand-room #editor-reposition{border:1px solid rgba(238,236,229,.35);background:transparent;color:#eeece5}
.brand-room #editor-reposition:disabled{border-color:rgba(238,236,229,.12);color:#5c5960}
.brand-room .fade-presets button,.brand-room .fade-buttons button:not(#fade-add){border:1px solid rgba(238,236,229,.18);background:transparent;color:#eeece5}
.brand-room .fade-presets button[aria-pressed=true],.brand-room #fade-reverse[aria-pressed=true]{background:#29272c;border-color:#f46a25;color:#eeece5}
.brand-room #editor-edits li{border-color:rgba(238,236,229,.12);color:#eeece5}

.brand-room .estimate-details :is(h1,h2),.brand-room .estimate-price-block strong,.brand-room #screen-estimate-price{color:#eeece5}
.brand-room .estimate-details #estimate-filename,.brand-room .estimate-price-block p,.brand-room #quote-engine-status,.brand-room .estimate-footnote,.brand-room #quantity-offers-section>p{color:#a29fa6}
.brand-room .estimate-spec,.brand-room .estimate-spec>div{border-color:rgba(238,236,229,.12)}
.brand-room .estimate-spec dt{color:#a29fa6}.brand-room .estimate-spec dd{color:#eeece5}
.brand-room #quantity-offers-section h2{color:#eeece5}
.brand-room #quote-engine-dialog .quantity-custom{color:#a29fa6}.brand-room #quote-engine-dialog .quantity-custom input,.brand-room #quote-engine-dialog .quantity-custom button{background:transparent;border-color:rgba(238,236,229,.18);color:#eeece5}.brand-room #quote-engine-dialog .quantity-custom button:hover{background:rgba(238,236,229,.08);border-color:#eeece5}
.brand-room .quantity-offer{background:transparent;border-color:rgba(238,236,229,.18);color:#eeece5}
.brand-room .quantity-offer:hover:not(:disabled){background:#29272c;border-color:rgba(238,236,229,.5)}
.brand-room .quantity-offer[aria-pressed=true]{background:#29272c;border-color:#f46a25;box-shadow:inset 0 0 0 1px #f46a25}
.brand-room .quantity-offer em{color:#f46a25}
.brand-room .quantity-offer small,.brand-room .quantity-offer span{color:#cfccd2}
.brand-room .estimate-secondary{border-color:rgba(238,236,229,.35);color:#eeece5}
.brand-room #screen-draft-items{color:#cfccd2}
.brand-room .cad-privacy{margin-top:10px;font-size:12px;line-height:1.55;color:#a29fa6;padding-left:22px;position:relative}
.brand-room .cad-privacy::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;background:#f46a25;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.brand-room .cad-privacy b{color:#eeece5;font-weight:500}
/* Orange text on the light stage, darkened to pass WCAG AA contrast */
.brand-room .sample-stage .eyebrow,.brand-room .room-heading .eyebrow,.brand-room #selected-code,.brand-room .swatch-id>span,.brand-room .light-control>span,.brand-room .editor-stage .eyebrow,.brand-room .estimate-preview-label .eyebrow,.brand-room #estimate-preview-code{color:#a83c0c}

/* ---------- Phone layout ----------
   The sample viewer is pinned to the top of the screen while the colours scroll
   beneath it, so every colour you tap is visible straight away. Everything else
   flows in order: tools, catalogue, then the coating guide. */
.lbl-short{display:none}
@media (min-width:721px){.stage-viewer{display:contents}}
@media (max-width:720px){
  body.brand-room{--viewer-h:clamp(330px,54svh,470px)}
  body.brand-room .colour-room{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible}
  body.brand-room .sample-stage{display:contents}
  body.brand-room .room-heading{position:static;order:1;padding:22px 16px 16px;background:#dedede}
  body.brand-room .room-heading h1{font-size:36px;margin:8px 0 0;line-height:.95}
  body.brand-room .room-heading .eyebrow{font-size:11px;letter-spacing:.12em}

  /* Pinned viewer */
  body.brand-room .stage-viewer{order:2;position:sticky;top:0;z-index:20;height:var(--viewer-h);background:#dedede;overflow:hidden;box-shadow:0 1px 0 #0000001f}
  body.brand-room .stage-viewer .presentation-switch{position:absolute;top:10px;left:16px;right:auto;bottom:auto;z-index:4}
  body.brand-room .stage-viewer .lighting-switch{position:absolute;top:10px;right:16px;left:auto;bottom:auto;flex-direction:row;z-index:4;padding:2px}
  body.brand-room .stage-viewer :is(.presentation-switch,.lighting-switch) button{font-size:13px;min-height:36px;padding:0 11px}
  body.brand-room .lbl-short{display:inline}
  body.brand-room .lbl-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.brand-room .stage-viewer #swatch-canvas{position:absolute;top:54px;left:0;right:0;bottom:auto;width:100%;height:calc(100% - 54px - 68px)}
  body.brand-room .stage-viewer .reference-stage{inset:58px 16px 76px}
  body.brand-room .stage-viewer .reference-label{left:16px;right:auto;bottom:76px;font-size:10px}
  body.brand-room .stage-viewer .render-status{top:45%;left:16px;right:16px;font-size:13px}
  /* Name strip with Save and Compare */
  body.brand-room .stage-viewer .swatch-id,body.brand-room.brand-room .comparing .stage-viewer .swatch-id{position:absolute;top:auto;left:0;right:0;bottom:0;height:68px;padding:11px 16px;margin:0;background:#1f1d22;display:flex;flex-direction:column;justify-content:center;z-index:5}
  body.brand-room .stage-viewer #selected-code{font-size:12px;color:#ff7a3d}
  body.brand-room .stage-viewer .swatch-id h2,body.brand-room .comparing .stage-viewer .swatch-id h2{font-size:21px;line-height:1.05;margin:3px 0 0;max-width:calc(100% - 196px);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.brand-room .stage-viewer #selected-meta{display:none}
  body.brand-room .stage-viewer .selected-actions{position:absolute;right:12px;bottom:14px;z-index:6;margin:0;padding:0;border:0;gap:6px}
  body.brand-room .stage-viewer .selected-actions button{min-height:40px;padding:0 11px;font-size:13px;flex:none;color:#fff;border-color:#ffffff55;background:transparent;white-space:nowrap}
  body.brand-room .stage-viewer .selected-actions button[aria-pressed="true"]{background:#f25c27;border-color:#f25c27;color:#1f1d22}
  body.brand-room .stage-viewer .compare-caption,body.brand-room .has-part.comparing .stage-viewer .compare-caption{top:auto!important;bottom:76px;left:16px;right:16px;font-size:12px!important}

  /* Tools under the viewer */
  body.brand-room .view-actions{order:3;position:static;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;padding:12px 16px 0;margin:0;background:#dedede;height:auto}
  body.brand-room .view-actions button{flex:1 1 0;min-height:42px;padding:0 6px;font-size:13px;border:1px solid #1f1d2233;white-space:nowrap}
  body.brand-room .view-actions [data-save-render]{padding:0 6px;font-size:13px}
  body.brand-room .light-control{order:4;position:static;display:flex;align-items:center;gap:12px;padding:14px 16px 18px;margin:0;background:#dedede}
  body.brand-room .light-control>span{display:none}
  body.brand-room .light-control label{font-size:13px;white-space:nowrap}
  body.brand-room .light-control input{flex:1;width:auto;height:32px}
  body.brand-room .light-control output{font-size:12px;min-width:38px;text-align:right}

  body.brand-room .catalogue{order:5;padding:26px 16px 34px}
  body.brand-room .compare-performance{order:6;position:static;inset:auto;height:auto;max-height:none;overflow:auto;margin:0;padding:24px 16px;background:#dedede}
  body.brand-room .coating-guide{order:7;position:static;inset:auto;max-height:none;overflow:visible;margin:0;padding:26px 16px 10px;background:#dedede}
  body.brand-room .coating-guide>p{font-size:14px;line-height:1.5}
  body.brand-room .coating-guide summary{min-height:44px;display:flex;align-items:center;font-size:14px}
  body.brand-room .screen-colour-disclaimer{order:8;position:static;margin:0;padding:6px 16px 26px;background:#dedede;font-size:12px}

  /* Catalogue: the list flows with the page (no box-in-a-box scrolling) */
  body.brand-room .colour-list{height:auto;max-height:none;min-height:0;flex:none;overflow:visible;scroll-margin-top:calc(var(--viewer-h) + 12px)}
  body.brand-room .colour-list.is-folded{max-height:690px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .brand-room .list-more{width:100%;min-height:46px;margin:6px 0 4px;border:1px solid #ffffff40;background:transparent;color:#fff;font-size:14px}
  body.brand-room .colour-option strong{font-size:12px}
  body.brand-room .colour-option small{font-size:11px}
  body.brand-room .library-tabs button{min-height:40px;font-size:13px;padding:0 10px}
  body.brand-room .search-label{min-height:46px}
  body.brand-room #colour-search{height:44px}
  body.brand-room .filters select{min-height:44px}
  body.brand-room .reference-row button{min-height:44px;font-size:13px}
  body.brand-room .alt-route{min-height:44px}
  body.brand-room .cad-upload p,body.brand-room .range-summary,body.brand-room .colour-note{font-size:12px}
  body.brand-room :is(.catalogue,.coating-guide) .eyebrow{font-size:11px}
  /* iOS zooms into any field under 16px; keep them at 16px */
  body.brand-room :is(input:not([type=range]):not([type=checkbox]):not([type=file]),select,textarea){font-size:16px}
}

/* Account Colour Room (/new-quote): three plain steps, a live price, Add to quote. */
.acct-panel{display:grid;gap:18px;padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid rgba(238,236,229,.14);color:#e5e2db}
.acct-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.acct-back{color:#cfccd2;text-decoration:none;border-bottom:1px solid currentColor}
.acct-back:hover{color:#fff}
#acct-who{color:#9c99a0;font-size:12px;text-align:right}
.acct-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.acct-steps>li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.acct-n{width:30px;height:30px;border:1px solid #f46a25;color:#f46a25;display:grid;place-items:center;font:700 14px/1 'Barlow Condensed',sans-serif}
.acct-steps strong{display:block;font-size:16px;font-weight:500;color:#fff;margin:4px 0 4px}
.acct-steps p{margin:0;font-size:13px;line-height:1.5;color:#9c99a0}
#acct-colour{color:#e5e2db}
.acct-file-btn{margin-top:10px;width:100%;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;border:0;background:linear-gradient(90deg,#f04e23,#f46a25 60%,#ff7a2e);color:#1f1d22;font:500 16px/1 'DM Sans',sans-serif;cursor:pointer}
.acct-file-btn:hover{filter:brightness(1.06)}
.acct-file-name{margin-top:8px!important;color:#e5e2db!important;font-size:13px;word-break:break-all}
.acct-qty{display:inline-grid;grid-template-columns:48px 88px 48px;margin-top:8px;border:1px solid rgba(238,236,229,.25)}
.acct-qty button{height:48px;border:0;background:#29272c;color:#fff;font-size:22px;cursor:pointer}
.acct-qty button:hover{background:#353339}
.acct-qty input{height:48px;border:0;border-left:1px solid rgba(238,236,229,.25);border-right:1px solid rgba(238,236,229,.25);background:#1f1d22;color:#fff;text-align:center;font-size:18px;-moz-appearance:textfield}
.acct-qty input::-webkit-inner-spin-button,.acct-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.acct-price{border:1px solid rgba(238,236,229,.18);padding:16px;display:grid;gap:4px;background:#29272c}
.acct-price-label{font:700 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f46a25}
#acct-price{font:800 30px/1.05 'Barlow Condensed',sans-serif;text-transform:uppercase;color:#fff}
#acct-price-note{color:#9c99a0;font-size:12px;line-height:1.45}
.acct-primary{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border:0;background:#eeece5;color:#1f1d22;font:500 17px/1 'DM Sans',sans-serif;cursor:pointer}
.acct-primary:hover:not(:disabled){background:#fff}
.acct-primary:disabled{opacity:.4;cursor:not-allowed}
#acct-send{background:linear-gradient(90deg,#f04e23,#f46a25 60%,#ff7a2e)}
.acct-status{margin:0;min-height:1.2em;font-size:13px;color:#cfccd2}
.acct-basket{display:grid;gap:12px;border-top:1px solid rgba(238,236,229,.14);padding-top:16px}
.acct-basket ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.acct-basket li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;background:#29272c}
.acct-basket li strong{font-size:14px;font-weight:500;color:#fff}
.acct-basket li span{grid-column:1;font-size:13px;color:#cfccd2}
.acct-basket li em{grid-column:1;font-style:normal;font-size:12px;color:#f6a26d}
.acct-basket li button{grid-column:2;grid-row:1/span 3;align-self:center;background:none;border:0;color:#9c99a0;text-decoration:underline;font-size:13px;cursor:pointer;min-height:44px}
.acct-subtotal{display:flex;justify-content:space-between;font-size:14px;color:#cfccd2}
.acct-subtotal strong{color:#fff;font-size:18px}
.acct-basket small{color:#9c99a0;font-size:12px}

/* Shown inside the customer account (framed): the account supplies the menu. */
.is-embedded .site-header,.is-embedded .site-footer,.is-embedded .skip,.is-embedded .acct-back,.is-embedded .mnav{display:none!important}
.is-embedded body.brand-room{--brand-header-height:0px}
.is-embedded .acct-top{justify-content:flex-end}

/* ---------- Phone tidy-up (16 Oct 2026) ----------
   Short labels so the tool row and the name strip never crowd the screen edge,
   three colours per row with readable names, and a plainer reference row. */
@media (max-width:720px){
  body.brand-room{--viewer-h:clamp(290px,42svh,400px)}
  body.brand-room .stage-viewer .selected-actions{gap:6px;right:16px;width:auto;max-width:none}
  body.brand-room .stage-viewer .selected-actions button{min-height:40px;width:auto;min-width:0;padding:0 14px;font-size:14px;flex:none;display:inline-flex;align-items:center;justify-content:center}
  body.brand-room .stage-viewer .swatch-id h2,body.brand-room .comparing .stage-viewer .swatch-id h2{max-width:calc(100% - 178px)}

  body.brand-room .view-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  body.brand-room .view-actions button,body.brand-room .view-actions [data-save-render]{min-width:0;min-height:44px;padding:0 4px;font-size:14px;overflow:hidden;text-overflow:ellipsis}
  body.brand-room .view-actions button[aria-pressed="true"]{background:#1f1d22;color:#fff;border-color:#1f1d22}

  body.brand-room .colour-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px;padding:8px 0 14px}
  body.brand-room .colour-chip.ball{max-width:76px}
  body.brand-room .colour-option{min-width:0}
  body.brand-room .colour-option strong{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
  body.brand-room .colour-option small{font-size:12px;margin-top:2px}

  body.brand-room .library-top h2{font-size:34px}
  body.brand-room .library-tabs{gap:6px}
  body.brand-room .library-tabs #clear-filters{margin-left:auto;font-size:13px;text-decoration:underline;text-underline-offset:3px}

  body.brand-room .reference-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
  body.brand-room .reference-row #reference-open{gap:14px}
  body.brand-room .reference-row img{width:56px;height:56px;flex:none}
  body.brand-room .reference-row #reference-open span{font-size:14px}
  body.brand-room .reference-row #reference-open b{font-size:13px;text-decoration:underline;text-underline-offset:3px}
  body.brand-room .reference-row #official-link{min-height:46px;width:100%;justify-content:center;border:1px solid #ffffff40;padding:0 16px;font-size:14px;color:#fff}
  body.brand-room .colour-note{font-size:13px;line-height:1.55}

  body.brand-room .alt-route{font-size:14px}
}

/* Portal mode: the Colour Room inside the customer account (see portal-mode.js) */
.portal-mode .site-header,.portal-mode .site-footer,.portal-mode .mnav,.portal-mode .part-material-label,.portal-mode #material-help,.portal-mode .brand-header,.portal-mode #colour-project{display:none!important}
.portal-mode body{padding-top:0}
.portal-mode .colour-room{min-height:100svh}