/* Product page: the sections under the specification (inc/product-page.php decides which appear), the gallery lightbox
   and the on-page bar. Shares the site's tokens; each section opens with the same two-column head as the overview. */
.bl-site .bl-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hero: the terms sit two by two, so a wrapped line never starts with a divider; the gallery opens larger. */
.bl-site ul.bl-product-terms{display:grid;grid-template-columns:repeat(2,max-content);gap:10px clamp(24px,2vw,48px)}
.bl-site ul.bl-product-terms li+li::before{display:none}
.bl-site .bl-product-main-image{overflow:hidden}
.bl-site .bl-gallery-zoom{position:absolute;right:clamp(10px,.8vw,18px);bottom:clamp(10px,.8vw,18px);display:inline-flex;align-items:center;gap:10px;padding:9px 14px;background:#ffffffe6;border:1px solid var(--line);font-size:var(--fs-label);font-weight:700;transition:background .2s,border-color .2s}
.bl-site .bl-gallery-zoom .bl-icon{width:16px;height:16px}
@media(hover:hover){.bl-site .bl-gallery-zoom:hover{background:#fff;border-color:var(--ink)}}
.bl-site .bl-gallery-zoom[hidden]{display:none}
.bl-site .bl-product-main-image #product-photo{cursor:zoom-in}

/* The on-page bar: pinned under the header, with the quote button at its end. */
.bl-site .bl-product-section-nav{display:block;min-height:0;padding:0;gap:0}
.bl-site .bl-product-section-nav>.bl-shell{display:flex;align-items:center;gap:clamp(20px,2vw,48px);min-height:clamp(64px,3.4vw,86px)}
.bl-site .bl-product-section-nav ol{display:flex;flex:1;min-width:0;gap:clamp(22px,2vw,52px);margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.bl-site .bl-product-section-nav ol::-webkit-scrollbar{display:none}
.bl-site .bl-product-section-nav ol a{display:block;padding:8px 0;white-space:nowrap;transition:color .2s}
@media(hover:hover){.bl-site .bl-product-section-nav ol a:hover{color:#7aa4ff}}
.bl-site .bl-product-section-nav .bl-section-nav-cta .bl-icon{width:16px;height:16px}
.bl-site .bl-product-wa{display:none}

/* Section heads: the small descriptive heading and the display line on the left, a sentence and a signpost on the right. */
.bl-site .bl-product-section-head{display:grid;grid-template-columns:1fr 1.1fr;gap:9%;align-items:end;margin-bottom:clamp(32px,2.6vw,64px)}
.bl-site .bl-product-section-head>div:last-child{display:grid;justify-items:start;gap:clamp(16px,1.2vw,26px);max-width:620px;font-size:var(--fs-body);line-height:1.85;color:var(--muted)}
.bl-site .bl-product-section-head .bl-text-link{color:var(--ink)}
.bl-site .bl-product-works,.bl-site .bl-product-where,.bl-site .bl-product-photos,.bl-site .bl-product-buying,.bl-site .bl-product-faq{padding-block:clamp(64px,calc(49.1px + 2.14vw),104px)}
.bl-site .bl-product-where,.bl-site .bl-product-faq{border-top:1px solid var(--line)}

/* Overview: the points that set the model apart, under the description. */
.bl-site .bl-product-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;margin-top:clamp(28px,2.2vw,48px);background:var(--line);border:1px solid var(--line)}
.bl-site .bl-product-highlights li{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,1.4vw,30px);background:var(--paper)}
.bl-site .bl-product-highlights strong{font:700 var(--fs-h5)/1.1 var(--display)}
.bl-site .bl-product-highlights-stacked{grid-template-columns:1fr}
.bl-site .bl-product-highlights p{font-size:var(--fs-small);line-height:1.65;color:var(--muted)}

/* Specification with a dimension drawing beside it. */
.bl-site .bl-spec-body-drawing{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(24px,2.4vw,56px);align-items:start}
.bl-site .bl-spec-body-drawing .bl-spec-sheet,.bl-site .bl-spec-body-drawing .bl-spec-sheet[data-groups="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-site .bl-spec-drawing{margin:clamp(40px,3.2vw,72px) 0 0;display:grid;gap:10px}
.bl-site .bl-spec-drawing button{display:block;width:100%;background:#fff;padding:clamp(12px,1vw,24px);cursor:zoom-in;border:1px solid transparent;transition:border-color .2s}
@media(hover:hover){.bl-site .bl-spec-drawing button:hover{border-color:var(--ink)}}
.bl-site .bl-spec-drawing figcaption{font-size:var(--fs-label);color:var(--muted)}

/* Attachments (loaders). */
/* The cards share the whole row however few there are (auto-fit drops the empty columns); a very short list stops growing at
   520px a card, so two or three attachments do not turn into poster-sized pictures. */
.bl-site .bl-product-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(14px,1.2vw,28px);max-width:calc(var(--tools,8) * 520px)}
.bl-site .bl-product-tools li{display:flex;flex-direction:column;gap:4px}
.bl-site .bl-product-tools img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;margin-bottom:10px}
.bl-site .bl-product-tools .bl-attachment-film{margin-bottom:10px}
.bl-site .bl-product-tools strong{font-size:var(--fs-small);line-height:1.3}
.bl-site .bl-product-tools span{font-size:var(--fs-label);line-height:1.5;color:var(--muted)}
/* Applications and cases. */
.bl-site .bl-product-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,1.2vw,28px)}
.bl-site .bl-product-apps a{display:grid;grid-template-columns:clamp(96px,8vw,180px) minmax(0,1fr) auto;align-items:center;gap:clamp(14px,1.2vw,28px);padding:clamp(10px,.8vw,16px);background:#fff;border:1px solid var(--line);transition:border-color .2s}
@media(hover:hover){.bl-site .bl-product-apps a:hover{border-color:var(--ink)}}
.bl-site .bl-product-apps img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bl-site .bl-product-apps strong{display:block;font:700 var(--fs-h5)/1.05 var(--display)}
.bl-site .bl-product-apps small{display:block;margin-top:6px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;color:var(--muted)}
.bl-site .bl-product-apps .bl-icon{width:18px;height:18px;transition:transform .2s}
@media(hover:hover){.bl-site .bl-product-apps a:hover .bl-icon{transform:translate(3px,-3px)}}
.bl-site .bl-product-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,2.2vw,56px) clamp(20px,1.4vw,36px);margin-top:clamp(36px,2.8vw,64px)}

/* Photographs: a grid that opens the lightbox. */
.bl-site .bl-product-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(12px,1vw,24px)}
.bl-site .bl-product-photo-grid li{display:flex;flex-direction:column;gap:10px}
.bl-site .bl-product-photo-grid button{display:block;overflow:hidden;background:var(--ink);cursor:zoom-in}
.bl-site .bl-product-photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s,opacity .3s}
@media(hover:hover){.bl-site .bl-product-photo-grid button:hover img{transform:scale(1.04);opacity:.92}}
.bl-site .bl-product-photo-grid p{font-size:var(--fs-label);line-height:1.5;color:var(--muted)}

/* Factory and inspection: the one dark band on the page. */
.bl-site .bl-product-built{background:var(--ink);color:#e9eef2;padding-block:clamp(64px,calc(49.1px + 2.14vw),104px)}
.bl-site .bl-product-built .bl-product-section-head>div:last-child{color:#a9bac6}
.bl-site .bl-product-built .bl-product-section-head .bl-text-link{color:#fff}
.bl-site .bl-product-built .bl-blue-text{color:#8fb0ff}
.bl-site .bl-product-built-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1vw,24px);margin-bottom:clamp(36px,2.8vw,64px)}
.bl-site .bl-product-built-photos figure{margin:0;display:grid;gap:10px}
.bl-site .bl-product-built-photos img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bl-site .bl-product-built-photos figcaption{font-size:var(--fs-label);color:#a9bac6}
.bl-site .bl-product-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2vw,56px);margin:0;padding:0;list-style:none}
.bl-site .bl-product-checks li{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding-top:clamp(16px,1.2vw,28px);border-top:1px solid #2b4456}
.bl-site .bl-product-checks span{grid-row:span 2;font:700 var(--fs-h5)/1 var(--display);color:#8fb0ff}
.bl-site .bl-product-checks strong{font:700 var(--fs-h5)/1.1 var(--display);color:#fff}
.bl-site .bl-product-checks p{font-size:var(--fs-small);line-height:1.7;color:#a9bac6}

/* Shipping, warranty and documents: three columns under one head. */
/* The three cards share one set of rows (label, figure, text, link), so the big figures, the text and the links line
   up across the cards whatever each one holds. */
.bl-site .bl-product-buying-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:1px;background:var(--line);border:1px solid var(--line)}
.bl-site .bl-product-buying-grid article{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:start;align-content:start;row-gap:clamp(14px,1vw,22px);padding:clamp(22px,1.8vw,40px);background:var(--paper);min-width:0}
.bl-site .bl-product-buying-grid article>h3{grid-row:1}
.bl-site .bl-product-buying-grid article>.bl-product-figure{grid-row:2}
.bl-site .bl-product-buying-grid article>p:not(.bl-product-figure){grid-row:3}
.bl-site .bl-product-buying-grid article>.bl-product-docs{grid-row:2/4;align-self:start}
.bl-site .bl-product-buying-grid article>.bl-text-link{grid-row:4;align-self:end}
.bl-site .bl-product-buying-grid h3{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.bl-site .bl-product-buying-grid p{font-size:var(--fs-small);line-height:1.7;color:var(--muted)}
.bl-site .bl-product-buying-grid .bl-text-link{color:var(--ink);font-size:var(--fs-label)}
.bl-site .bl-product-loading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.2vw,28px);width:100%;margin:0}
/* The container counts read like the warranty figure: number first, container under it. */
.bl-site .bl-product-loading>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px}
.bl-site .bl-product-loading dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-product-loading dd,.bl-site p.bl-product-big{margin:0;font:600 clamp(40px,3vw,72px)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.bl-site .bl-product-loading small,.bl-site p.bl-product-big small{font:600 var(--fs-h5)/1 var(--display);color:var(--muted)}
.bl-site .bl-product-docs{display:grid;gap:10px;width:100%}
.bl-site .bl-product-docs a,.bl-site .bl-product-docs button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;background:#fff;border:1px solid var(--line);text-align:left;font-size:var(--fs-small);font-weight:700;transition:border-color .2s}
@media(hover:hover){.bl-site .bl-product-docs a:hover,.bl-site .bl-product-docs button:hover{border-color:var(--ink)}}
.bl-site .bl-product-docs small{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--muted)}
.bl-site .bl-product-docs .bl-icon{width:18px;height:18px}

/* Questions. */
/* Questions: the heading holds the left column (it stays in view while the answers are read), the questions the right,
   on the same line as the text column of the sections above. */
.bl-site .bl-product-faq{display:grid;grid-template-columns:1fr 1.1fr;column-gap:9%;align-items:start}
.bl-site .bl-product-faq .bl-product-section-head{grid-template-columns:1fr;gap:clamp(20px,1.6vw,32px);align-items:start;margin-bottom:0;position:sticky;top:calc(var(--header-height) + clamp(72px,3.6vw,92px) + clamp(20px,1.6vw,40px))}
.bl-site .bl-product-faq-list{border-top:1px solid var(--ink);min-width:0}
.bl-site .bl-product-faq-list details{border-bottom:1px solid var(--line)}
.bl-site .bl-product-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(16px,1.2vw,26px) 0;list-style:none;cursor:pointer}
.bl-site .bl-product-faq-list summary::-webkit-details-marker{display:none}
.bl-site .bl-product-faq-list summary::after{content:'+';font-size:24px;line-height:1;transition:transform .2s}
.bl-site .bl-product-faq-list details[open] summary::after{content:'−'}
.bl-site .bl-product-faq-list h3{font:700 var(--fs-h5)/1.15 var(--display)}
@media(hover:hover){.bl-site .bl-product-faq-list summary:hover h3{color:var(--blue)}}
.bl-site .bl-product-faq-list details>div{display:grid;justify-items:start;gap:14px;max-width:820px;padding-bottom:clamp(18px,1.4vw,30px);font-size:var(--fs-body);line-height:1.85;color:var(--muted)}
.bl-site .bl-product-faq-list .bl-text-link{color:var(--ink);font-size:var(--fs-label)}

/* The enquiry, on the page itself. */
.bl-site .bl-product-enquiry{background:#e4e9ef;padding-block:clamp(64px,calc(49.1px + 2.14vw),104px)}
.bl-site .bl-product-enquiry-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:9%}
/* The form is usually the taller column, so the machine's figures and picture take whatever height the text leaves. The
   panel is sized from outside (container-type:size), so it never makes the column taller than the form; the figures scale
   with the height they are given (cqh) and the whole panel drops out below 210px (a short saved form) instead of clipping. */
.bl-site .bl-product-enquiry-aside{display:grid;grid-template-rows:repeat(4,auto) minmax(0,1fr);align-content:start;gap:clamp(16px,1.2vw,26px)}
.bl-site .bl-product-enquiry-model{container:enquiry-model/size;min-height:0;margin:clamp(8px,1vw,24px) 0 0}
.bl-site .bl-product-enquiry-model>div{display:grid;grid-template-columns:auto minmax(0,calc(100cqh*4/3));justify-content:start;height:100%;overflow:hidden}
.bl-site .bl-product-enquiry-model dl{display:flex;flex-direction:column;justify-content:center;gap:min(clamp(12px,1.2vw,22px),4cqh);margin:0;padding:0 clamp(18px,2vw,44px);border-right:1px solid var(--line);background:#fff}
.bl-site .bl-product-enquiry-model dt{font-size:var(--fs-micro);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.bl-site .bl-product-enquiry-model dd{font:600 min(clamp(24px,1.8vw,42px),12cqh)/1 var(--display);margin:8px 0 0;white-space:nowrap}
/* The card is its figures plus a 4:3 photograph at the height it is given (less when the column is narrower), so the photograph does not float in bare white. */
.bl-site .bl-product-enquiry-model span{position:relative;grid-column:2;background:#fff}
.bl-site .bl-product-enquiry-model img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(6px,.6vw,14px)}
@container enquiry-model (max-height:210px){.bl-site .bl-product-enquiry-model>div{display:none}}
.bl-site .bl-product-enquiry-aside>p:not(.bl-product-display){max-width:520px;font-size:var(--fs-body);line-height:1.85;color:var(--muted)}
.bl-site .bl-product-enquiry-direct{display:grid;gap:10px;margin-top:8px}
.bl-site .bl-product-enquiry-direct li{display:flex;gap:16px;align-items:baseline;font-size:var(--fs-small)}
.bl-site .bl-product-enquiry-direct span{min-width:90px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bl-site .bl-product-enquiry-direct a{font-weight:700;border-bottom:1px solid currentColor}
.bl-site .bl-product-enquiry-form{min-width:0;background:#fff;padding:clamp(24px,2vw,48px)}

/* The comparison with the models either side, above the related cards. */
.bl-site .bl-related-more{margin:0 0 clamp(20px,1.8vw,32px);padding:12px 0 0;border-top:1px solid var(--ink);font-size:var(--fs-label);color:var(--muted)}
.bl-site .bl-product-compare{overflow-x:auto;margin-bottom:clamp(40px,3.2vw,72px);border-top:1px solid var(--ink)}
.bl-site .bl-product-compare table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.bl-site .bl-product-compare caption{text-align:left;padding:12px 0;font-size:var(--fs-label);color:var(--muted)}
.bl-site .bl-product-compare th,.bl-site .bl-product-compare td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.bl-site .bl-product-compare thead th{font:700 var(--fs-h5)/1 var(--display)}
.bl-site .bl-product-compare thead th small{display:block;margin-top:4px;font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.bl-site .bl-product-compare thead a{border-bottom:1px solid currentColor}
@media(hover:hover){.bl-site .bl-product-compare thead a:hover{color:var(--blue)}}
.bl-site .bl-product-compare tbody th{font-weight:600;color:var(--muted);width:24%}
.bl-site .bl-product-compare [aria-current]{background:#fff}
.bl-site .bl-product-compare td[aria-current]{font-weight:700}

/* Lightbox. */
.bl-site .bl-lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(56px,4vw,96px) clamp(16px,6vw,140px);border:0;background:#03111ceb;color:#fff}
.bl-site .bl-lightbox[open]{display:grid;place-items:center}
.bl-site .bl-lightbox::backdrop{background:#03111c99}
.bl-site .bl-lightbox figure{margin:0;display:grid;gap:14px;justify-items:center;max-width:100%;max-height:100%}
.bl-site .bl-lightbox figure img{max-width:100%;max-height:calc(100dvh - 200px);object-fit:contain;background:#fff}
.bl-site .bl-lightbox figcaption{display:flex;gap:18px;align-items:baseline;font-size:var(--fs-small);color:#c9d6df}
.bl-site .bl-lightbox figcaption small{font-variant-numeric:tabular-nums;color:#8fa3b2}
.bl-site .bl-lightbox-close{position:absolute;top:clamp(12px,1.4vw,32px);right:clamp(12px,1.4vw,32px)}
.bl-site .bl-lightbox .bl-circle-button{background:#fff;border-color:#fff;color:var(--ink)}
.bl-site .bl-lightbox-step{position:absolute;top:50%;transform:translateY(-50%)}
.bl-site .bl-lightbox-prev{left:clamp(8px,1.4vw,32px)}
.bl-site .bl-lightbox-next{right:clamp(8px,1.4vw,32px)}
.bl-site .bl-lightbox-next .bl-icon{transform:rotate(180deg)}
.bl-site .bl-lightbox-step[hidden]{display:none}
@media(hover:hover){.bl-site .bl-lightbox-step:hover,.bl-site .bl-lightbox-close:hover{background:var(--blue);border-color:var(--blue)}}
@media(hover:hover){.bl-site .bl-lightbox-step:hover{transform:translateY(-50%)}}

@media(max-width:1100px){
  .bl-site .bl-product-checks,.bl-site .bl-product-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-site .bl-product-buying-grid{grid-template-columns:1fr;grid-template-rows:none}
  .bl-site .bl-product-buying-grid article>.bl-text-link{margin-top:6px}
  .bl-site .bl-spec-body-drawing{grid-template-columns:1fr}
}
@media(max-width:800px){
  .bl-site .bl-product-section-head,.bl-site .bl-product-enquiry-inner{grid-template-columns:1fr;gap:20px}
  /* One column: the picture would only lengthen the way to the form. */
  .bl-site .bl-product-enquiry-aside{grid-template-rows:none}
  .bl-site .bl-product-enquiry-model{display:none}
  .bl-site .bl-product-faq{grid-template-columns:1fr;row-gap:clamp(32px,6vw,48px)}
  .bl-site .bl-product-faq .bl-product-section-head{position:static}
  .bl-site .bl-product-built-photos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}
  .bl-site .bl-product-built-photos li{scroll-snap-align:start}
  /* Phones: the thumbnails become one swipeable row under the main photograph. */
  .bl-site .bl-gallery-thumbs{flex-wrap:nowrap!important;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .bl-site .bl-gallery-thumbs::-webkit-scrollbar{display:none}
  .bl-site .bl-gallery-thumbs button{flex:0 0 72px;scroll-snap-align:start}
}
@media(max-width:600px){
  .bl-site .bl-spec-body-drawing .bl-spec-sheet{grid-template-columns:minmax(0,1fr)} /* one stacked list on phones, drawing or not */
  .bl-site .bl-product-checks,.bl-site .bl-product-cases{grid-template-columns:1fr}
  /* The first card lines up with the heading above (scroll-padding: the snap point sits inside the row's padding). */
  .bl-site .bl-product-tools{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;max-width:none;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}
  .bl-site .bl-product-tools li{scroll-snap-align:start}
  .bl-site ul.bl-product-terms{grid-template-columns:1fr}
  .bl-site .bl-product-section-nav .bl-section-nav-cta{display:none}
  .bl-site .bl-product-section-nav ol{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .bl-site .bl-gallery-zoom span{display:none}
  .bl-site .bl-product-enquiry-form{padding:20px 16px}
  .bl-site .bl-lightbox-step,.bl-site .bl-lightbox-step:hover{top:auto;bottom:16px;transform:none}
  /* Hero: photograph, name, the three figures and the quote button share the first screen. */
  /* The photograph gives up height on short screens (3:2 at most) so the quote button clears the contact bar; its
     thumbnails become a row of dots along its foot. */
  .bl-site .bl-shell:has(+.bl-product-hero) .bl-breadcrumbs{padding-block:0}
  .bl-site .bl-product-hero{gap:8px;padding-top:4px}
  .bl-site .bl-product-gallery{position:relative;gap:6px}
  .bl-site .bl-product-main-image{aspect-ratio:3/2;max-height:max(150px,calc(100svh - 494px - env(safe-area-inset-bottom,0px)))}
  /* Without the name's key the photograph keeps more height, leaving room for a product name that runs to two lines. */
  .bl-site .bl-product-hero:not(:has(.bl-model-decode)) .bl-product-main-image{max-height:max(150px,calc(100svh - 456px - env(safe-area-inset-bottom,0px)))}
  .bl-site .bl-product-main-image>img{padding:8px 12px 22px}
  /* No photograph yet: a quiet panel with a frame drawn in, the line under it readable. */
  .bl-site .bl-product-main-image .bl-product-image-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background:#e9edf0;font-size:13px;line-height:1.45}
  .bl-site .bl-product-main-image .bl-product-image-empty::before{content:'';flex:none;width:40px;height:30px;border:1.5px solid currentColor;border-radius:3px;background:radial-gradient(circle at 50% 55%,#0000 6px,currentColor 6px 7.5px,#0000 7.5px)}
  .bl-site .bl-gallery-zoom{justify-content:center;min-width:44px;min-height:44px;padding:0 12px}
  .bl-site .bl-gallery-thumbs{position:absolute;grid-area:1/1;left:4px;right:64px;bottom:-6px;z-index:1;display:flex;gap:0;margin:0;padding:0;overflow-x:auto;scroll-snap-type:none}
  .bl-site .bl-gallery-thumbs button{flex:0 0 32px;width:auto;min-width:32px;height:44px;aspect-ratio:auto;padding:0;background:none;border:0}
  .bl-site .bl-gallery-thumbs button::before{content:'';display:block;width:8px;height:8px;margin:auto;border-radius:4px;background:#b9c4c9;transition:width .2s,background .2s}
  .bl-site .bl-gallery-thumbs button[aria-pressed=true]::before{width:18px;background:var(--blue)}
  .bl-site .bl-gallery-thumbs button:focus-visible{outline-offset:-6px}
  .bl-site .bl-gallery-thumbs img{display:none}
  .bl-site .bl-product-intro h1{font-size:var(--m-h1,clamp(48px,14vw,60px));margin:6px 0 8px}
  .bl-site .bl-product-intro h1>span{margin-top:6px;font-size:20px;line-height:1.2}
  /* The name's key: three chips on one line under the name, each as wide as its words, the link to the key beneath them. */
  .bl-site .bl-model-decode{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;font-size:12px}
  .bl-site .bl-model-decode span{flex:1 1 auto;gap:4px;padding:2px 4px 2px 2px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
  .bl-site .bl-model-decode b{flex:none;height:22px;padding:0 4px}
  .bl-site .bl-model-decode a{flex-basis:100%;max-width:max-content;margin:2px 0 0;font-size:12px;line-height:1.3}
  .bl-site .bl-model-decode a,.bl-site .bl-product-compare thead a{position:relative}
  .bl-site .bl-model-decode a::after,.bl-site .bl-product-compare thead a::after{content:'';position:absolute;inset:-14px -6px}
  /* The three figures: labels may run to two lines, the figures still share one line along the foot. */
  .bl-site .bl-product-key-specs{gap:12px;padding:8px 0;margin:0}
  .bl-site .bl-product-key-specs>div{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
  .bl-site .bl-product-key-specs dt{font-size:12px;line-height:1.3;letter-spacing:.04em}
  .bl-site .bl-product-key-specs dd{margin-top:4px;font-size:23px}
  .bl-site .bl-product-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 10px;margin-top:10px}
  .bl-site .bl-product-actions>.bl-text-link{grid-column:1/-1;justify-self:start}
  /* WhatsApp sits beside the quote button as a square of the same height; the line of contact links below it goes. */
  .bl-site .bl-product-wa{display:grid;place-items:center;align-self:stretch;width:54px;background:#fff;border:1px solid #b9c4c9;color:#1fb457;transition:transform .12s,background .2s}
  .bl-site .bl-product-wa svg{width:26px;height:26px}
  .bl-site .bl-product-wa:active{transform:scale(.95);background:#effbf3}
  .bl-site .bl-product-direct{display:none}
  /* WhatsApp, email and the terms link keep their look; an invisible layer makes each a 44px tall target. */
  .bl-site .bl-product-section-nav ol a{display:flex;align-items:center;min-height:44px;padding:0 10px;margin-inline:-10px}
  /* Factory checks: one number column, so every heading starts on the same line. */
  .bl-site .bl-product-checks li{grid-template-columns:2em minmax(0,1fr);column-gap:12px;padding-bottom:20px}
  .bl-site .bl-product-checks span{font-variant-numeric:tabular-nums}
  /* The model and its neighbours fit the width, the current one in the middle and marked; a longer row still scrolls. */
  .bl-site .bl-product-compare table{min-width:0;font-size:13.5px}
  .bl-site .bl-product-compare th,.bl-site .bl-product-compare td{padding:11px 6px;vertical-align:top}
  .bl-site .bl-product-compare tbody th{width:25%;padding-left:0;font-size:13px}
  /* The three model names share one line along the top; "This model" sits on one line under the current one. */
  .bl-site .bl-product-compare thead th{vertical-align:top;font-size:clamp(15px,4.2vw,18px);line-height:1.05;white-space:nowrap}
  .bl-site .bl-product-compare thead th small{margin-top:5px;font-size:12px;letter-spacing:.02em;white-space:nowrap}
  .bl-site .bl-product-compare thead th[aria-current]{box-shadow:inset 0 3px var(--blue)}
  .bl-site .bl-product-compare td.bl-compare-figure{white-space:nowrap}
  /* Sections: one rhythm down the page; the related models are a swipeable row. */
  .bl-site .bl-product-works,.bl-site .bl-product-where,.bl-site .bl-product-photos,.bl-site .bl-product-buying,.bl-site .bl-product-faq,.bl-site .bl-product-built,.bl-site .bl-product-enquiry{padding-block:var(--m-sec,56px)}
  /* Sections that share a background and are parted by a rule: the tighter rhythm either side of the rule. */
  .bl-site .bl-product-works:has(+.bl-product-where),.bl-site .bl-product-buying:has(+.bl-product-faq){padding-bottom:var(--m-sec-tight,40px)}
  .bl-site .bl-product-works+.bl-product-where,.bl-site .bl-product-buying+.bl-product-faq{padding-top:var(--m-sec-tight,40px)}
  .bl-site .bl-product-enquiry{scroll-margin-top:var(--header-height)}
  .bl-site .bl-product-compare{margin-bottom:36px}
  .bl-site .bl-related .bl-product-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72vw;gap:14px;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .bl-site .bl-related .bl-product-grid::-webkit-scrollbar{display:none}
  .bl-site .bl-related .bl-product-card{scroll-snap-align:start}
  .bl-site .bl-related .bl-product-card-image{aspect-ratio:4/3}
  /* The whole name on up to two lines, as on the range pages; every card keeps the same height. */
  .bl-site .bl-related .bl-product-card-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:2.7em;white-space:normal;line-height:1.35;text-wrap:pretty}
  .bl-site .bl-related .bl-card-arrow{right:10px;bottom:10px;width:36px;height:36px}
}
/* Tablets upright: photograph and name side by side again, so the figures and the quote button share the first screen. */
@media(min-width:601px) and (max-width:800px){
  .bl-site .bl-product-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
  .bl-site .bl-gallery-thumbs{margin-inline:0;padding-inline:0}
  .bl-site .bl-product-intro h1{font-size:60px;margin:14px 0 18px}
  .bl-site .bl-product-intro h1>span{margin-top:10px;font-size:20px}
  .bl-site .bl-product-key-specs{gap:12px;margin:18px 0 0;padding:14px 0}
  .bl-site .bl-product-key-specs>div{display:flex;flex-direction:column;justify-content:space-between}
  .bl-site .bl-product-key-specs dt{line-height:1.35}
  .bl-site .bl-product-key-specs dd{margin-top:8px;font-size:24px}
  .bl-site .bl-product-actions{margin-top:18px;gap:14px 24px}
  .bl-site ul.bl-product-terms{grid-template-columns:1fr}
}
/* Touch screens: WhatsApp, email and the terms link keep their look; an invisible layer makes each a 44px tall target, the rows far enough apart that the layers do not overlap. */
@media(max-width:800px){
  .bl-site .bl-product-direct{row-gap:20px}
  .bl-site .bl-product-direct a,.bl-site .bl-product-terms a{position:relative}
  .bl-site .bl-product-direct a::before,.bl-site .bl-product-terms a::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
/* Wherever the contact bar runs along the foot (its query in page-responsive.css), the bar's Enquiry brings the form, or
   in one column the heading above it, to the top of the screen (quick.js), clear of the header. */
@media(max-width:800px),(max-width:1000px) and (max-height:500px){
  .bl-site .bl-product-enquiry-form,.bl-site .bl-product-enquiry-aside h2{scroll-margin-top:calc(var(--header-height) + 16px)}
}
/* Phones on their side (the same query as the contact bar's in page-responsive.css): photograph and name side by side,
   the photograph no taller than the screen between the header and the contact bar, the on-page bar left in the page. */
@media(max-width:1000px) and (max-height:500px){
  .bl-site .bl-shell:has(+.bl-product-hero) .bl-breadcrumbs{padding-block:0}
  .bl-site .bl-product-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding-top:0}
  .bl-site .bl-product-gallery{grid-template-columns:1fr}
  .bl-site .bl-product-main-image{grid-column:1;aspect-ratio:auto;height:calc(100svh - var(--header-height) - var(--bl-bar-height) - 60px);min-height:200px}
  .bl-site .bl-product-main-image>img{padding:12px 16px}
  .bl-site .bl-gallery-thumbs{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:nowrap;align-self:auto;width:auto;contain:none;overflow-x:auto;scrollbar-width:none}
  .bl-site .bl-gallery-thumbs button{flex:0 0 56px;width:56px}
  .bl-site .bl-product-intro{align-self:start}
  .bl-site .bl-product-intro h1{font-size:var(--m-h1,clamp(48px,14vw,60px));margin:8px 0 14px}
  .bl-site .bl-product-intro h1>span{font-size:18px;margin-top:8px}
  .bl-site .bl-product-key-specs{margin:16px 0;padding:14px 0}
  .bl-site .bl-product-key-specs dd{font-size:26px}
  .bl-site .bl-product-actions{margin-top:16px}
  .bl-site .bl-product-section-nav{position:static}
}
/* Round 4, phones in the hand. Wherever the contact bar runs along the foot: the WhatsApp / email lines beside the
   form keep their look, an invisible layer making each a 44px tall target; a field
   the keyboard brings into view stops clear of the header above (its label too) and the contact bar below. */
@media(max-width:800px),(max-width:1000px) and (max-height:500px){
  .bl-site .bl-product-enquiry-direct{gap:0}
  .bl-site .bl-product-enquiry-direct li{align-items:center;min-height:44px}
  .bl-site .bl-product-enquiry-direct a{position:relative}
  .bl-site .bl-product-enquiry-direct a::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .bl-site .bl-product-enquiry :is(input:not([type=radio]),textarea,[type=submit]){scroll-margin-block:calc(var(--header-height) + 32px) calc(var(--bl-bar-height,58px) + 12px)}
}
/* The photograph counter stays "1 / 5" on one line under a caption that wraps. */
@media(max-width:600px),(max-width:1000px) and (max-height:500px){.bl-site .bl-lightbox figcaption small{white-space:nowrap}}
/* Phones on their side: the photograph takes the screen's height (the caption and arrows keep to its edges), and the
   enquiry fields keep 16px type so iOS does not zoom in on them. */
@media(max-width:1000px) and (max-height:500px){
  .bl-site .bl-lightbox{padding:12px 76px}
  .bl-site .bl-lightbox figure{gap:8px}
  .bl-site .bl-lightbox figure img{max-height:calc(100dvh - 88px)}
  .bl-site .bl-lightbox figcaption{line-height:1.4}
  .bl-site .bl-product-enquiry .bl-inquiry-form :is(input:not([type=radio]),textarea){font-size:16px}
}
/* Touch screens: the cards and buttons that only answered a hover now answer a tap. */
@media(hover:none){
  .bl-site :is(.bl-product-apps a,.bl-product-docs a,.bl-product-docs button,.bl-spec-drawing button):active{border-color:var(--ink);background:#f4f6f7}
  .bl-site .bl-product-photo-grid button:active img{opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .bl-site .bl-product-photo-grid img,.bl-site .bl-product-apps .bl-icon{transition:none}
}
@media print{
  .bl-site .bl-product-works,.bl-site .bl-product-where,.bl-site .bl-product-photos,.bl-site .bl-product-built,.bl-site .bl-product-buying,
  .bl-site .bl-product-faq,.bl-site .bl-product-enquiry,.bl-site .bl-product-compare,.bl-site .bl-gallery-zoom,.bl-site .bl-lightbox{display:none!important}
}