/* Dentiquip Promo: side banners from 1440 px, an in-page banner below that
   (on tool pages, the in-page banner only, at every width).
   Every rule stays inside .dqp blocks, except #content's position and
   .site's overflow on pages with side banners. Colours, corners and fonts
   read the site's design tokens (docs/design-system.md), the spec values
   as fallbacks. */

#content { position: relative; }
/* Storefront's .site has overflow-x: hidden, which turns it into the sticky
   container and stops the side banners following the scroll. clip cuts off
   the same overflow without that. Only on pages with side banners. */
body.dqp-rails .site { overflow-x: clip; }

.dqp-rail { position: absolute; top: 0; bottom: 0; width: 160px; display: none; }
/* Never outside the window: at 1440 px a classic scrollbar leaves 1425 px, which would put a rail at -3 px. */
.dqp-rail-left { left: max(8px, calc(50% - 532px - 24px - 160px)); }
.dqp-rail-right { right: max(8px, calc(50% - 532px - 24px - 160px)); }

.dqp { box-sizing: border-box; font-family: var(--dq-font, inherit); font-size: 14px; line-height: 1.4; color: var(--dq-ink, #1c2a33); background: var(--dq-surface, #ffffff); border: 0; border-radius: 18px; box-shadow: var(--dq-shadow-raised, 0 1px 2px rgba(28,42,51,.04), 0 8px 24px rgba(28,42,51,.08)); text-align: center; }
.dqp * { box-sizing: border-box; }
/* Sticks under the site's slim header (52 px), or 24 px from the top without it. */
.dqp-side { position: sticky; top: calc(var(--dq-header-h, 0px) + 24px); width: 160px; padding: 12px; }
.dqp-label { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: .02em; color: var(--dq-ink-2, #5f6f78); text-transform: none; }
.dqp-pic { display: block; margin: 0 0 8px; }
.dqp-pic img { display: block; width: 100%; height: auto; max-height: 140px; object-fit: contain; border-radius: var(--dq-radius-sm, 12px); }
.dqp-text { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dqp-title, .dqp-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; }
.dqp-title { font-weight: 600; font-size: 15px; }
.dqp-line { color: var(--dq-ink-2, #5f6f78); }
.dqp-button { display: inline-block; padding: .55em 1.1em; border-radius: var(--dq-radius-pill, 999px); background: var(--dq-brand, #1f5f7a); color: var(--dq-surface, #ffffff); font-weight: 500; text-decoration: none; }
.dqp-button:hover, .dqp-button:focus { background: var(--dq-brand-hover, #164556); color: var(--dq-surface, #ffffff); }
.dqp-button:focus-visible, .dqp-art-link:focus-visible { outline: 2px solid var(--dq-brand, #1f5f7a); outline-offset: 2px; }
.dqp-art { padding: 6px; }
.dqp-art img { display: block; width: 100%; height: auto; }

.dqp-inline { clear: both; padding: 0 1em; margin: 2em 0; }
.dqp-wide { position: relative; display: flex; align-items: center; gap: 16px; max-width: 46em; margin: 0 auto; padding: 24px 16px 14px; text-align: left; }
.dqp-wide .dqp-label { position: absolute; top: 6px; left: 16px; margin: 0; }
.dqp-wide .dqp-pic { flex: 0 0 160px; margin: 0; }
.dqp-wide .dqp-text { align-items: flex-start; }
.dqp-wide.dqp-art { display: block; max-width: 728px; }

@media (max-width: 600px) {
	.dqp-wide { flex-direction: column; text-align: center; }
	.dqp-wide .dqp-pic { flex-basis: auto; width: 100%; }
	.dqp-wide .dqp-text { align-items: center; }
}

@media (min-width: 1440px) {
	.dqp-rail { display: block; }
	.dqp-inline { display: none; }
	.dqp-inline.dqp-inline-only { display: block; } /* tool pages: no side banners */
}