/* ==========================================================================
   PipetTipFinder — responsive layer
   --------------------------------------------------------------------------
   Loaded AFTER style.css and deliberately additive: it overrides the old
   fixed-width float layout rather than replacing style.css, so the original
   typography and component classes (.title-small-bold, .price, .one-edge-shadow
   and friends) keep working on every content page untouched.

   Removing the <link> to this file in MasterPage.master reverts the site to
   its previous appearance. That is the intended rollback.

   The old layout was a 958px fixed container of floated columns with pixel
   widths baked into the markup. Those inline widths have been removed from
   MasterPage.master and the two search pages; anything still carrying one is
   neutralised here.
   ========================================================================== */

:root {
    /* Existing brand blue, kept so the site still looks like itself. */
    --ptf-blue:        #4b98ed;
    --ptf-blue-dark:   #2f74c0;
    --ptf-blue-tint:   #eef5fd;

    --ptf-ink:         #22303c;
    --ptf-ink-soft:    #596673;
    --ptf-ink-faint:   #8a949d;

    --ptf-line:        #e2e7ec;
    --ptf-line-soft:   #eef1f4;
    --ptf-surface:     #ffffff;
    --ptf-surface-alt: #f6f8fa;

    --ptf-radius:      8px;
    --ptf-radius-sm:   5px;
    --ptf-shadow:      0 1px 2px rgba(34, 48, 60, .07), 0 4px 14px rgba(34, 48, 60, .06);

    /* Wider than the old 958px, but still a readable measure on a big screen. */
    --ptf-wrap:        1180px;
}

/* --------------------------------------------------------------------------
   Reset-ish. border-box is what makes the old pixel widths survivable.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--ptf-surface-alt);
    color: var(--ptf-ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; }

a { color: var(--ptf-blue); }
a:hover { color: var(--ptf-blue-dark); }

/* The old markup is littered with <div class="clr">&nbsp;</div> spacers.
   Keep them clearing, but stop them injecting stray vertical space. */
.clr, p.clr {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    margin: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.main { padding: 0; }

.main_resize {
    width: 100%;
    max-width: var(--ptf-wrap);
    margin: 0 auto;
    padding: 0 16px 24px;
    border: 0;
    background: var(--ptf-surface);
}

@media (min-width: 60em) {
    .main_resize {
        border: 1px solid var(--ptf-line);
        border-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Header: logo, search, nav
   -------------------------------------------------------------------------- */

.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 0 0;
    background: none;
    border: 0;
    height: auto;
}

.logo {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}
.logo-mark { float: none; width: auto; height: auto; }
.logo img { width: 200px; height: auto; max-width: 100%; }
.logo .title-blue-small { font-size: 12px; }

.header-search {
    float: none;
    flex: 1 1 320px;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.search-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.search-scope {
    flex: 0 0 auto;
    width: auto;
    min-width: 92px;
    height: 42px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: var(--ptf-blue);
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
}

/* Targeted by position rather than by class: the TextBoxWatermarkExtender
   REPLACES CssClass with "watermarked" whenever the box is empty, so a
   .search-input rule alone would be dropped in exactly the state a visitor
   first sees. .watermarked is empty in style.css, which left the field at its
   unstyled browser default. */
.search-row input[type="text"],
.search-input,
.search-row .watermarked {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 42px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ptf-ink);
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
}
/* The watermark is placeholder text, so it should read as such. */
.search-row .watermarked { color: var(--ptf-ink-faint); }

.search-row input[type="text"]:focus,
.search-scope:focus {
    outline: 2px solid var(--ptf-blue);
    outline-offset: 1px;
    border-color: var(--ptf-blue);
}

.search-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 42px;
    background: var(--ptf-blue);
    border-radius: var(--ptf-radius-sm);
}
.search-go:hover { background: var(--ptf-blue-dark); }
.search-go img {
    width: 22px;
    height: 22px;
    margin: 0;
    border: 0;
    /* The icon art is dark; invert so it reads on the blue button. */
    filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Include.master variant of the search box.
   The 87 keyword landing pages use Include/Include.master rather than
   MasterPage.master. It shares every layout class but wraps its search
   controls differently, so those wrappers are normalised here.
   -------------------------------------------------------------------------- */

/* .keyword / .keyword_resize exist only on Include.master and were pinned to
   958px in style.css, which kept a horizontal scrollbar on the landing pages
   even after everything else had been made fluid. */
.keyword {
    width: 100%;
    background: var(--ptf-surface-alt);
    border-top: 1px solid var(--ptf-line-soft);
}
.keyword_resize {
    width: 100%;
    max-width: var(--ptf-wrap);
    margin: 0 auto;
    padding: 12px 16px;
}
.keyword p span { font-size: 14px; color: var(--ptf-ink-soft); }
.keyword a { color: var(--ptf-blue); }

.search-row-wrap { width: 100%; }

.search-row-wrap > div,          /* the asp:Panel renders as a div */
.search-row-wrap .search-input-wrap,
.search-row-wrap .search-go-wrap {
    float: none;
    width: auto;
    height: auto;
}

/* Lay the panel's children out as one row. */
.search-row-wrap > div {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.search-input-wrap { flex: 1 1 auto; min-width: 0; }
.search-go-wrap { flex: 0 0 auto; display: flex; align-items: center; }
.search-go-wrap input[type="image"] {
    width: 26px;
    height: 26px;
    margin: 0 0 0 4px;
    border: 0;
}

/* Same watermark caveat as MasterPage.master: the extender swaps CssClass,
   so size by position too. */
.search-input-wrap input[type="text"],
.search-input-wrap .watermarked {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ptf-ink);
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
}
.search-input-wrap .watermarked { color: var(--ptf-ink-faint); }

.search-scope-row {
    width: 100%;
    margin-top: 6px;
    font-size: 14px;
    color: var(--ptf-ink-soft);
}
.search-scope-row label { margin-right: 12px; }
.search-scope-row input { margin-right: 4px; }

/* The AutoCompleteExtender's list is positioned absolutely by the toolkit;
   only its appearance is adjusted here. */
.autoextender {
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
    box-shadow: var(--ptf-shadow);
    margin: 2px 0 0;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
}
.auto_extender_list { padding: 7px 10px; cursor: pointer; border-radius: 4px; }
.auto_extender_highlight { background: var(--ptf-blue-tint); color: var(--ptf-blue-dark); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ptf-ink);
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
    cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ptf-ink);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; }
.nav-toggle-bars::after  { position: absolute; top: 6px; }

.menu {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-top: 1px solid var(--ptf-line);
    flex-basis: 100%;
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
}

.menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    display: block;
}

.menu ul li a,
.menu ul li a:hover,
.menu ul li a.active {
    display: block;
    float: none;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ptf-ink);
    text-decoration: none;
    background: none;
    border-radius: var(--ptf-radius-sm);
}
.menu ul li a span { padding: 0; background: none; float: none; }
.menu ul li a:hover { background: var(--ptf-surface-alt); color: var(--ptf-blue-dark); }
.menu ul li a.active { background: var(--ptf-blue-tint); color: var(--ptf-blue-dark); }

.menu-account { border-top: 0; }
.menu-account ul { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 12px 2px;
    font-size: 14px;
    color: var(--ptf-ink-soft);
    border-top: 1px solid var(--ptf-line-soft);
}
.breadcrumb p { margin: 0; }
.breadcrumb-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .6; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Body columns. The old .main_left / .main_right floats become a grid that
   collapses to one column. Filters come first in the DOM, so on a phone they
   sit above the results, which is the conventional order.
   -------------------------------------------------------------------------- */

.slider_main {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
}

.main_left,
.main_right {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
}

@media (min-width: 62em) {
    .main_resize {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        grid-column-gap: 28px;
        column-gap: 28px;
        align-items: start;
    }
    /* Header, breadcrumb, top slot and footer span both columns. */
    .header,
    .slider_main,
    .breadcrumb,
    .main_resize > .clr { grid-column: 1 / -1; }

    .main_left  { grid-column: 1; }
    .main_right { grid-column: 2; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Sidebar panels (filters, manufacturer list)
   -------------------------------------------------------------------------- */

.main_left .right_text,
.main_right .right_text {
    background: var(--ptf-surface-alt);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius) var(--ptf-radius) 0 0;
    margin: 0;
    padding: 12px 14px;
}
.right_text p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ptf-ink);
}

.main_left select,
.main_left input[type="text"] {
    width: 100%;
    max-width: 100%;
    height: 38px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: var(--ptf-ink);
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius-sm);
}

/* --------------------------------------------------------------------------
   Buttons. The legacy .SearchButton is an <input type="submit">.
   -------------------------------------------------------------------------- */

.SearchButton,
.SearchButton:hover {
    display: inline-block;
    width: auto;
    min-width: 92px;
    height: auto;
    padding: 10px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--ptf-blue);
    border: 0;
    border-radius: var(--ptf-radius-sm);
    cursor: pointer;
    text-align: center;
}
.SearchButton:hover { background: var(--ptf-blue-dark); }

/* --------------------------------------------------------------------------
   Result cards
   -------------------------------------------------------------------------- */

.result-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--ptf-surface);
    border: 1px solid var(--ptf-line);
    border-radius: var(--ptf-radius);
    box-shadow: var(--ptf-shadow);
}
.result-main { flex: 1 1 320px; min-width: 0; }
.result-aside {
    flex: 0 1 230px;
    min-width: 0;
    align-self: flex-start;
    padding: 12px;
    background: var(--ptf-surface-alt);
    border-radius: var(--ptf-radius-sm);
}
.result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.result-actions img { width: 28px; height: 28px; }

/* Classes below replace inline pixel widths that used to live in
   SearchTips.aspx and SearchPipettors.aspx. They were 640/425/233/340/280/245
   px floats, which is what forced a horizontal scrollbar on a phone. */

.result-toolbar {
    float: none;
    width: 100%;
    height: auto;
    text-align: right;
}

/* The ListView item is a flex row on a wide screen and stacks on a narrow
   one. :has() would be neater but has to work in older browsers, so the
   two halves are sized directly instead. */
.result-main {
    float: left;
    width: 58%;
    min-width: 0;
    padding-right: 16px;
}

.result-aside {
    float: left;
    width: 40%;
    min-width: 0;
    margin: 5px 0 0;
    padding: 10px;
    background: var(--ptf-surface-alt);
    border-radius: var(--ptf-radius-sm);
}

/* Specification lists under each result. */
.spec-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.spec-col {
    float: none;
    display: block;
    width: auto;
    flex: 1 1 210px;
    min-width: 0;
}
.spec-col p { margin: 0 0 4px; font-size: 14px; }

@media (max-width: 52em) {
    .result-main,
    .result-aside {
        float: none;
        width: 100%;
        padding-right: 0;
    }
    .result-aside { margin-top: 12px; }
    .spec-list { gap: 0 16px; }
}

/* Wide legacy content that cannot reflow gets a scroller rather than
   breaking the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.one-edge-shadow,
.one-edge-shadow-light {
    box-shadow: var(--ptf-shadow);
    border-radius: var(--ptf-radius-sm);
}

/* --------------------------------------------------------------------------
   Typography carried over from style.css, nudged for readability
   -------------------------------------------------------------------------- */

.main_resize p { font-size: 15px; line-height: 1.55; color: var(--ptf-ink); }
.main_resize h2 { font-size: 20px; color: var(--ptf-ink); padding: 10px 0; }
.main_resize h3 { font-size: 17px; color: var(--ptf-ink); }

.title-small-bold  { font-weight: 600; color: var(--ptf-ink); }
.title-large-gray  { font-size: 18px; color: var(--ptf-ink); }
.title-x-large-gray { font-size: 22px; color: var(--ptf-ink); }
.title-large-blue  { font-size: 18px; color: var(--ptf-blue); }
.title-blue        { color: var(--ptf-blue); }
.title-blue-small  { color: var(--ptf-blue); font-size: 12px; }
.title-show-details { color: var(--ptf-blue); font-size: 13px; }

.price { font-size: 17px; font-weight: 700; color: var(--ptf-ink); }
.price-per-tip { font-size: 12px; color: var(--ptf-ink-faint); }

.topic h1 { font-size: 26px; line-height: 1.25; color: var(--ptf-ink); }
.topic h2 { font-size: 21px; color: var(--ptf-ink); }
.topic h3 { font-size: 18px; color: var(--ptf-ink); }
.topic h4 { font-size: 16px; color: var(--ptf-ink); }

/* Article bodies on the Topics pages, which were sized for a 690px column. */
.main_right img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

/* Headline and intro, which sit in ContentPlaceHolderMainTop and so span
   the full width above the two columns. */
.slider_main h2 {
    font-size: clamp(20px, 1.1rem + 1vw, 27px);
    line-height: 1.25;
    font-weight: 650;
    color: var(--ptf-ink);
    padding: 18px 0 6px;
    margin: 0;
}
.slider_main h2 a { text-decoration: none; }
.slider_main h2 a:hover { text-decoration: underline; }

.slider_main > div > p {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ptf-ink-soft);
    margin: 0 0 18px;
}

/* --- slideshow -----------------------------------------------------------
   jquery.cycle 1.x positions slides absolutely and writes pixel width/height
   onto them at runtime. Inline styles cannot be beaten from a stylesheet
   without !important, so it is used deliberately and only here. The container
   holds its shape with an aspect ratio because absolutely positioned children
   give it no height of their own. Slides are 638x346. */

#slider {
    float: none;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

#slideshow {
    position: relative;
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
    /* Matches the LabPro banners, which are 800x500. One of them
       (LPSTariff6e) is 794x529, so object-fit letterboxes it rather than
       cropping or stretching. */
    aspect-ratio: 800 / 500;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--ptf-radius);
    background: var(--ptf-surface-alt);
}

.slider-item {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}
.slider-item a,
.slider-item picture {
    display: block;
    width: 100%;
    height: 100%;
}
.slider-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--ptf-radius);
}

/* Browsers without aspect-ratio fall back to a padding box. */
@supports not (aspect-ratio: 1) {
    #slideshow { height: 0 !important; padding-bottom: 62.5%; }
}

.controls-center { width: 100%; }

#slider_controls {
    width: 100%;
    height: auto;
    margin: 8px 0 0;
    display: flex;
    justify-content: center;
}
.slider-nav-wrap { float: none; width: auto; height: auto; }

#slider_controls ul {
    display: flex;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}
#slider_controls ul li { float: none; margin: 0; }
#slider_controls ul li a {
    display: block;
    width: 11px;
    height: 11px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--ptf-line);
    text-indent: -9999px;
    overflow: hidden;
}
#slider_controls ul li a:hover { background: var(--ptf-ink-faint); }
#slider_controls ul li a.activeSlide { background: var(--ptf-blue); }

/* The promo blocks further down the home page. */
.bg, li.bg {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Article pages (/Topics/*)
   -------------------------------------------------------------------------- */

.topic { max-width: 72ch; }

.topic h1,
.topic h2,
.topic h3,
.topic h4 {
    margin: 1.6em 0 .4em;
    line-height: 1.25;
}
.topic h1:first-child,
.topic h2:first-child { margin-top: .4em; }

.topic p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 1.05em;
    color: var(--ptf-ink);
}

/* Article figures were sized in pixels for a 690px column. */
.topic img,
.main_right .topic img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2em 0;
    border-radius: var(--ptf-radius-sm);
}

/* Figure captions are plain bold spans in a paragraph under each image. */
.topic p > span > b,
.topic p > b {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ptf-ink-soft);
}

.topic ul,
.topic ol { padding-left: 1.3em; margin: 0 0 1.05em; }
.topic li { margin-bottom: .4em; line-height: 1.6; }

.topic table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 15px;
}
.topic th,
.topic td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--ptf-line-soft);
    vertical-align: top;
}
.topic th { font-weight: 600; color: var(--ptf-ink-soft); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--ptf-surface);
    border-top: 1px solid var(--ptf-line);
}

.footer_resize,
.footer_resize_white {
    width: 100%;
    max-width: var(--ptf-wrap);
    margin: 0 auto;
    padding: 18px 16px;
    height: auto;
}

/* Brand strip: was a fixed row of 138px logos that overflowed on a phone. */
.footer_resize_white {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    background: var(--ptf-surface);
}
.footer_resize_white img {
    width: auto;
    max-width: 118px;
    height: auto;
    margin: 0;
    filter: grayscale(100%);
    opacity: .7;
}
.footer_resize_white a:hover img { filter: none; opacity: 1; }

.footer p,
.footer p.leftt,
.footer p.right {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ptf-ink-soft);
    text-align: center;
}
.footer a { color: var(--ptf-ink-soft); text-decoration: none; }
.footer a:hover { color: var(--ptf-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 61.99em) {
    .nav-toggle { display: inline-flex; }

    /* Collapsed by default; the toggle adds .is-open. */
    .menu { display: none; }
    .menu.is-open { display: block; }

    .menu ul { flex-direction: column; gap: 0; }
    .menu ul li a,
    .menu ul li a:hover,
    .menu ul li a.active {
        padding: 14px 6px;
        border-bottom: 1px solid var(--ptf-line-soft);
        border-radius: 0;
    }

    /* The account menu is short; leave it inline rather than behind the toggle. */
    .menu-account { display: block; }
    .menu-account ul { flex-direction: row; justify-content: flex-start; }
}

@media (max-width: 40em) {
    body { font-size: 15px; }

    .main_resize { padding: 0 12px 20px; }

    .header { gap: 10px; padding-top: 12px; }
    .logo img { width: 170px; }

    /* Full-width search below the logo. */
    .header-search { flex: 1 1 100%; order: 3; }

    .result-card { padding: 12px; gap: 12px; }
    .result-aside { flex: 1 1 100%; }

    .footer_resize_white img { max-width: 92px; }
}

/* --------------------------------------------------------------------------
   Accessibility and print
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--ptf-blue);
    outline-offset: 2px;
}

@media print {
    .header, .menu, .nav-toggle, .footer, .main_left { display: none; }
    .main_resize { display: block; max-width: none; border: 0; }
    body { background: #fff; }
}