/* Keep the photograph and its most-used controls together. */
.picture-controls{margin:0 0 10px;background:#fff;border:1px solid #c9c2b7;border-top:0;border-radius:0 0 14px 14px;box-shadow:0 4px 14px #29251e0a}
#room-stage{position:relative;top:auto;border-radius:14px 14px 0 0}
.render-progress{margin:0 0 12px;padding:16px;background:#f1e8d9;border:1px solid #bc9a64;border-radius:12px;color:#332b20}
.render-progress-heading{display:flex;gap:10px;align-items:center;line-height:1.4}
.render-progress p{font-size:14px;line-height:1.5;margin:8px 0 0}.render-progress #render-selection:empty{display:none}
.render-elapsed{display:block;margin-top:8px;font-size:13px;color:#62523a;font-variant-numeric:tabular-nums}
.render-spinner{flex:0 0 20px;width:20px;height:20px;border:2px solid #c4b397;border-top-color:#4a3720;border-radius:50%;animation:picture-spin 1s linear infinite}
@keyframes picture-spin{to{transform:rotate(360deg)}}
.picker-quote-link{display:block;padding:12px 4px;margin-bottom:10px;color:#51402a;font-size:14px;text-align:center;text-underline-offset:4px}
/* A floating enquiry button and thumbnail covered the selectors in Facebook's
   mobile browser. The inline quote link and View room bar keep them reachable. */
#mobile-room-preview,.mobile-whatsapp{display:none!important}
.picture-controls .finish-options{display:grid;grid-template-columns:repeat(var(--finish-count,4),minmax(0,1fr));gap:6px}
.picture-controls .finish-options button,.picture-controls .finish-options button[aria-pressed=true]{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:68px;padding:7px 3px;border:2px solid transparent;border-radius:9px;font-size:13px;line-height:1.15;background:#f5f3ee;color:#242526}
.picture-controls .finish-options button[aria-pressed=true]{border-color:#725327;background:#f1e8d9}
.picture-controls .finish-options .finish-swatch{width:23px;height:23px;box-shadow:inset 0 0 0 2px #ffffff45}
.picture-control-panel .field{font-size:13px;margin:0;color:#625c52}
.picture-control-panel select{margin:4px 0 0;min-height:44px;padding:8px 25px 8px 9px;font-size:16px}
.picture-control-panel p{margin:7px 0 0;font-size:13px;color:#625c52;line-height:1.3}
.picture-control-panel p a{margin-left:3px;display:inline-block;min-height:24px}
.preview-feedback{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:12px;background:#f0ebe2;border-radius:10px}
.preview-feedback p{flex:1 1 150px;margin:0;font-size:13px;line-height:1.4;color:#625c52}
.preview-feedback #render-preview,.preview-feedback #retry-preview{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;font-size:13px}
.preview-details,.preview-tools{margin:8px 0;padding:8px 12px;box-shadow:none;background:transparent;border:1px solid #c9c2b7;border-radius:9px}
.preview-details summary,.preview-tools summary{font-size:14px;min-height:36px;line-height:36px}
.preview-details strong{font-size:15px;margin-top:8px}.preview-details p{font-size:13px;line-height:1.45}
.preview-tools .compare-actions{margin:8px 0}.preview-tools .compare-actions button{font-size:14px;padding:9px}
.tile-samples>summary{font-size:18px;line-height:1.35;display:list-item;min-height:28px}
.tile-samples[open]>summary{margin-bottom:14px}.tile-samples{scroll-margin-top:16px}
#preview-status:empty{display:none}.preview-tabs{position:static}
@media(min-width:851px){.preview{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow-y:auto;scrollbar-width:thin;padding:0 5px 5px}}
@media(max-width:850px){.preview{position:static}.heading{margin-bottom:14px}.heading h1{font-size:26px}.heading .eyebrow{font-size:12px}.preview .supplier-board{padding:8px 12px}.preview .supplier-board summary{font-size:14px;min-height:36px;line-height:1.4;display:flex;align-items:center}.mobile-room-preview:not([hidden]){width:92px;bottom:78px}.mobile-whatsapp{min-height:48px;padding:11px 16px;font-size:15px}.preview-feedback #render-preview{display:inline-flex}}
@media(max-width:850px){body{padding-bottom:0}.preview-feedback{display:grid;grid-template-columns:1fr}.preview-feedback #render-preview{width:100%;min-height:48px;font-size:16px}.mobile-preview-bar{top:0}.render-progress{padding:12px}.render-progress-heading{font-size:15px}}
@media(prefers-reduced-motion:reduce){.picture-controls *{transition:none}.render-spinner{animation:none}}

.custom-introduction{margin:0 0 24px;padding:14px 18px;background:#ede4d4;border:1px solid #d3c1a1;border-radius:10px}.custom-introduction a{font-size:14px}.custom-introduction p{margin:8px 0 0;font-size:14px;line-height:1.5}

.room-picture-notice{margin:12px 0;padding:10px 12px;border-left:3px solid #aa8650;border-radius:4px;background:#f4eee3;color:#59472f;font-size:14px;line-height:1.5;text-align:left}

/* One choice layout for every room; additional products stay beside the photo. */
.picture-control-panel .step{padding:0;margin:0;box-shadow:none;border:0;background:transparent}
.picture-control-panel h2{font-size:20px;margin:4px 0 12px}
.picture-control-panel .field{margin:12px 0;font-size:15px;line-height:1.45}
.picture-control-panel p{font-size:14px;line-height:1.5}
.picture-control-panel .tile-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.picture-coverage{padding:12px 14px;background:#f4eee3;border-radius:8px;font-size:15px;line-height:1.5}
.finished-looks{margin:14px 0;padding:14px;border:1px solid #c9c2b7;border-radius:10px;background:#fff}
.finished-looks h2{font-size:20px;margin:0}.finished-looks p{font-size:14px;line-height:1.5}
.finished-look-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.finished-look-options button{padding:6px;border:2px solid #ded6c8;border-radius:8px;background:#faf8f4;text-align:left;min-height:48px}
.finished-look-options button[aria-pressed=true]{border-color:#725327;background:#f1e8d9}
.finished-look-options img{width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:4px}
.finished-look-options strong,.finished-look-options small{display:block;line-height:1.4;font-size:14px;margin-top:5px}
.picture-controls [hidden],.finished-looks[hidden]{display:none!important}

.change-product{display:inline-flex;align-items:center;min-height:44px;margin:6px 8px 0 0;padding:6px 10px;border:1px solid #b8a890;border-radius:6px;font-size:14px;text-decoration:none}
.cabinet-colour-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cabinet-colour-options button{min-height:48px;padding:8px 10px;border:1px solid #b8a890;border-radius:7px;background:#faf8f4;font-size:14px;line-height:1.4}
.cabinet-colour-options button[aria-pressed=true]{background:#ede0c9;border:2px solid #725327}
.selected-cabinet-photo{margin:12px 0;padding:12px;border:1px solid #ded6c8;border-radius:8px;background:white}
.selected-cabinet-photo img{display:block;width:100%;max-height:240px;object-fit:contain}
.selected-cabinet-photo strong,.selected-cabinet-photo small{display:block;margin-top:8px;font-size:15px;overflow-wrap:anywhere}

/* ---- One shared editor layout for every bathroom ----
   The picture and its status label form the "dock". On phones the dock stays at the top of the screen, the category strip sticks beneath it,
   and the open choices scroll inside their own panel, so a customer never has to leave the picture to change a tile, shower or bath. */
.workspace>*,.preview{min-width:0}
.picture-dock{background:#f6f5f0}
.picture-dock .room-stage{border-radius:14px 14px 0 0}
.picture-state{margin:0;padding:7px 12px;background:#efe9dd;border-radius:0 0 10px 10px;color:#3f3a31;font-size:14px;line-height:1.4}
.picture-control-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;background:#eae5dc}
.picture-control-tabs button{min-width:0;min-height:48px;padding:6px 4px;border:0;border-radius:7px;font-size:14px;line-height:1.2;background:transparent;color:#514b41}
.picture-control-tabs button[aria-selected=true]{background:#242526;color:#f4efe6;box-shadow:0 2px 5px #0002}
.picture-control-tabs button:focus-visible{outline-offset:-3px;outline-color:#d5b57e}
.picture-control-panel{padding:12px;scroll-margin-top:calc(var(--dock-h,260px) + 64px)}
.panel-done{display:none}
.is-collapsed .picture-control-panel{display:none}
.choice-group{margin:0 0 20px}.choice-group h3{font-size:17px;margin:0 0 8px}
.selected-choice{display:grid;grid-template-columns:76px minmax(0,1fr);gap:2px 10px;align-items:center;margin:0 0 10px;padding:10px;background:#f4eee3;border-radius:10px;font-size:14px;line-height:1.4}
.selected-choice strong{grid-column:1/-1}.selected-choice img{grid-row:2/5;width:76px;height:76px;object-fit:contain;background:#fff;border-radius:6px}
.selected-choice span,.selected-choice small{grid-column:2;overflow-wrap:anywhere}.selected-choice .selected-none{grid-column:1/-1}
.selected-choice small{color:#625c52;font-size:13px}
.product-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.product-card-wrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.product-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:48px;padding:6px;border:2px solid #ded6c8;border-radius:10px;background:#fff;color:#242526;font:inherit}
.product-card img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:6px}
.product-card .card-nophoto{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f1ede5;border-radius:6px;color:#625c52;font-size:14px}
.product-card strong{margin-top:6px;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.product-card small{margin-top:2px;font-size:13px;line-height:1.35;color:#625c52;overflow-wrap:anywhere}
.product-card .card-tick{display:none}
.product-card[aria-pressed=true]{border-color:#725327;background:#f1e8d9}
.product-card[aria-pressed=true] .card-tick{display:block;position:absolute;top:9px;right:9px;padding:2px 9px;border-radius:99px;background:#725327;color:#fff;font-size:12px;line-height:1.5}
.product-card[aria-pressed=true] .card-tick::before{content:"\2713\00a0"}
.product-card:focus-visible{outline:3px solid #d5b57e;outline-offset:2px}
.card-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px}
.choice-list{margin-top:10px}
@media(min-width:560px){.product-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){
 /* Anything the browser scrolls into view (a focused field, a link target) must land below the pinned picture and strip. */
 html{scroll-padding-top:calc(var(--dock-h,260px) + 64px)}
 .picture-dock{position:sticky;top:0;z-index:30;box-shadow:0 8px 12px -10px #0007}
 .picture-dock .room-stage{height:min(30dvh,56vw);width:100%;min-height:0}
 .picture-controls{overflow:visible}
 .picture-control-tabs{position:sticky;top:var(--dock-h,260px);z-index:20;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:5px 5px 5px 5px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .picture-control-tabs::-webkit-scrollbar{display:none}
 .picture-control-tabs button{flex:0 0 auto;min-width:84px;padding:6px 12px;scroll-snap-align:center;white-space:nowrap}
 .picture-control-tabs button:last-child{margin-right:30px}
 .picture-control-panel{max-height:calc(100dvh - var(--dock-h,260px) - 76px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:76px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .panel-done{display:block;position:sticky;bottom:0;width:100%;min-height:48px;margin:14px 0 0;border:0;border-radius:9px;background:#242526;color:#f4efe6;font-size:16px}
 .picture-state{padding:5px 10px;font-size:13px}
}
@media(max-width:850px) and (max-height:520px){
 html{scroll-padding-top:0}
 .picture-dock{position:static;box-shadow:none}.picture-dock .room-stage{height:auto;aspect-ratio:1536 / 978;max-height:70dvh}
 .picture-control-tabs{position:static}.picture-control-panel{max-height:none;overflow:visible}.panel-done{position:static}
}
@media(max-width:340px){.product-cards{grid-template-columns:1fr}}

.heading{flex-wrap:wrap;gap:10px}
.heading-actions{display:flex;flex-wrap:wrap;gap:8px}
.heading-actions button{min-height:44px;padding:8px 14px;font-size:15px}
.heading-actions button:disabled{opacity:.45;cursor:default}

.picture-control-tabs button[hidden]{display:none}

.dock-row{display:flex;align-items:center;gap:8px;background:#efe9dd;border-radius:0 0 10px 10px}
.dock-row .picture-state{flex:1 1 auto;min-width:0;background:none;border-radius:0}
.dock-quote{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;margin:2px 8px 2px 0;border-radius:9px;background:#242526;color:#f4efe6;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.dock-quote:focus-visible{outline:3px solid #b4863a;outline-offset:2px}

/* With only a few tabs shown they share the row evenly and sit together. */
.picture-control-tabs[data-count="3"] button{flex:1 1 0;min-width:0;padding:6px 8px}
.picture-control-tabs[data-count="3"] button:last-child{margin-right:0}
@media(min-width:851px){.picture-control-tabs[data-count="3"]{grid-template-columns:repeat(3,1fr)}}

/* Phone tap targets: header, back, product and footer links get a full 44px touch height. */
@media(max-width:850px){body>header a,.custom-introduction a,.material .text a,footer a{display:inline-flex;align-items:center;min-height:44px}.picture-control-panel summary{padding-block:8px}}

/* Simple journey: choose tiles and fitting colour, then send it to DLS. DLS works out the rest, so the room brief form, the full product
   package, the product-photo board, the picture comparison tools, the make-a-new-picture controls and the shop link are not shown to customers. They stay in the page
   so saved links, the WhatsApp/email message and the download still carry everything. */
#room-brief,details.supplier-board,details.preview-tools,details.preview-details,.preview-feedback,#shop-package,#shop-package+p.small{display:none}

/* Chosen wall tile, floor tile and fitting colour shown on the picture. */
.room-stage{position:relative}
.choice-chips{position:absolute;left:8px;top:8px;z-index:3;display:flex;gap:6px;pointer-events:none}
.choice-chips:empty{display:none}
.choice-chips .chip{display:flex;align-items:center;gap:5px;padding:3px 7px 3px 3px;border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px #0003;color:#222;font-size:12px;font-weight:600}
.choice-chips .chip img,.choice-chips .chip-swatch{display:block;width:28px;height:28px;border-radius:5px;object-fit:cover}
/* Six tiles first. */
#wall-options:not(.show-all)>button:nth-of-type(n+7):not([aria-pressed=true]),#floor-options:not(.show-all)>button:nth-of-type(n+7):not([aria-pressed=true]){display:none}
.show-all-tiles{display:block;width:100%;min-height:48px;margin:10px 0 0;border:1px solid #242526;border-radius:9px;background:#fff;color:#242526;font-size:16px;font-weight:600}
.show-all-tiles[hidden]{display:none}
/* One main button: WhatsApp. Email and the quote form are small links; then what happens next. */
#quote-actions .other-ways{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:10px 0 0}
#quote-actions .other-ways a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:underline;background:none;border:0;color:inherit;padding:0}
#quote-actions .what-next{margin:18px 0 14px;padding:14px 16px;border-radius:10px;background:#fffdf8;border:1px solid #e3d9c6}
#quote-actions .what-next h3{margin:0 0 8px;font-size:17px}
#quote-actions .what-next ol{margin:0;padding-left:22px;font-size:16px;line-height:1.5}
#quote-actions .what-next li+li{margin-top:4px}
.picker-quote-link{display:none}

/* Header call link (17 Oct): a way to talk to Dave without leaving the editor. */
header #header-call{margin-left:auto;margin-right:12px;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid #b79566;border-radius:6px;color:inherit;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}