/* Header, navigation, footer and the mobile bar. */

/* Header ------------------------------------------------------------------ */

.igm-header {
    position: relative;
    z-index: 20;
    background: var(--white);
    border-bottom: 1px solid var(--gray-300);
}

.igm-header__utility {
    position: relative;
    background: var(--navy-900);
}

/* Visible cue that the bar scrolls on narrow screens, not just an abrupt edge. */
@media (max-width: 720px) {
    .igm-header__utility::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        background: linear-gradient(to right, transparent, var(--navy-900));
        pointer-events: none;
    }
}

.igm-header__utility-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-block: 9px;
    font: 600 13px/1 var(--font-body);
}

.igm-header__utility-inner a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Without this the full-word channel labels push the row past the
       viewport and every item wraps — the phone number alone broke onto
       three lines and made the bar 72px tall. The row scrolls instead. */
    white-space: nowrap;
    flex: none;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.igm-header__utility-inner a:hover {
    color: var(--white);
}

@media (max-width: 720px) {
    .igm-header__utility-inner {
        overflow-x: auto;
        gap: 14px;
    }
}

.igm-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
}

.igm-header__title {
    font: 700 19px/1.2 var(--font-display);
    color: var(--navy-700);
    letter-spacing: var(--ls-tight);
}

.igm-header__utils {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* On narrow screens the search drops to its own row beneath the brand. */
@media (max-width: 720px) {
    .igm-header__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .igm-search {
        grid-column: 1 / -1;
        order: 3;
    }

    /*
     * Brand + utils (language/currency/account/cart) were both fixed-width
     * grid tracks with no wrap and no shrink allowance, so on real phone
     * widths (~360-390px) utils' combined intrinsic width (currency <select>
     * + language switcher + account + cart, none of which shrink below their
     * content) overflowed the grid track and rendered ON TOP OF the logo
     * text instead of pushing it aside or wrapping below it.
     */
    .igm-header__brand {
        min-width: 0;
        overflow: hidden;
    }

    .igm-header__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Kept to one row rather than wrapping: EN + currency stacked above
     * Account + cart read as two disconnected, lopsided rows beside an
     * otherwise-empty logo column. The "Account" label is dropped (icon only)
     * to buy back the width a single row needs — nothing else here shrinks
     * further without becoming illegible.
     */
    .igm-header__utils {
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-width: 0;
    }

    /*
     * `.igm-switcher--lang`/`--currency` are `flex: none` globally (below,
     * for desktop, where there's always room) — on real phone widths their
     * combined natural size can exceed what's left after the logo, and with
     * `justify-content: flex-end` the overflow doesn't push right into empty
     * space, it pushes LEFT, straight through the logo column (confirmed via
     * computed rects: the switcher rendered ~70px to the left of its own
     * parent's left edge on a 320px viewport).
     *
     * Only the language switcher is made to shrink (matched at the same
     * specificity as the unconditional `flex: none` below, via this
     * parent-scoped selector, since equal-specificity + later source order
     * would otherwise let that rule win regardless of viewport). Account and
     * cart are deliberately left alone — their icons are a fixed pixel size,
     * and shrinking their flex box below that just clips the icon rather
     * than rendering it smaller. Currency is a native <select> and is left
     * alone for the same reason as account/cart, but more so: letting a
     * native select's box shrink below its rendered content makes the
     * browser paint the control's own chrome (arrow, border) outside that
     * shrunk box — confirmed visually as the currency control overlapping
     * the account icon even though the two boxes' own getBoundingClientRect
     * showed a clean gap between them. Native selects don't support
     * shrinking the way a plain div does.
     */
    .igm-header__utils > .igm-switcher--lang {
        flex-shrink: 1;
        min-width: 0;
    }

    .igm-switcher__trigger {
        padding: 8px 10px;
    }

    .igm-header__utils {
        gap: 6px;
    }

    .igm-account-link__label {
        display: none;
    }
}

/* Below this, even a wrapped utils row is tight — shrink the currency
   select so it can't force the row wider than the logo can shrink for. */
@media (max-width: 400px) {
    .igm-header__utils select {
        max-width: 72px;
    }
}

/*
 * Below ~340px, currency + account + cart alone (all deliberately
 * non-shrinking — see the comment above `.igm-switcher--lang`'s shrink
 * rule) need more width than the row has left after the logo, however far
 * the logo itself is shrunk. Wrapping here is a graceful fallback for this
 * rare width, not the primary layout — real phone widths (360px+) stay on
 * the single-row layout above.
 */
@media (max-width: 340px) {
    .igm-header__utils {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* Search ------------------------------------------------------------------ */

.igm-search {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 520px;
    width: 100%;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-pill);
    background: var(--white);
    overflow: hidden;
}

.igm-search:focus-within {
    border-color: var(--navy-700);
    box-shadow: var(--focus-ring);
}

.igm-search__field {
    flex: 1;
    min-width: 0;
    /* 44px, the brief's minimum hit area — this and the submit were 42px. */
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    font: 15px/1.4 var(--font-body);
    color: var(--text-body);
    background: transparent;
}

.igm-search__field:focus {
    outline: none;
}

.igm-search__submit {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    background: var(--navy-700);
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
}

.igm-search__submit:hover {
    background: var(--navy-800);
}

/* Cart link --------------------------------------------------------------- */

.igm-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    color: var(--navy-700);
    font-size: 18px;
    line-height: 1;
}

.igm-cart-link:hover {
    background: var(--brand-tint-08);
    text-decoration: none;
}

.igm-cart-link__count {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--white);
    font: 700 11px/1.4 var(--font-body);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

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

.igm-nav {
    border-top: 1px solid var(--gray-200);
    background: var(--white);
}

.igm-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--navy-700);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
}

.igm-nav__menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.igm-nav__menu.is-open {
    display: block;
    padding-bottom: 12px;
}

.igm-nav__link {
    display: block;
    padding: 11px 0;
    font: 600 14px/1.3 var(--font-body);
    color: var(--gray-900);
}

.igm-nav__panel,
.igm-nav__sublist {
    margin: 0;
    padding: 0 0 0 14px;
    list-style: none;
}

@media (max-width: 899px) {
    /*
     * Mobile branch collapsing (Sheet1 r50).
     *
     * Opening the drawer used to reveal the whole tree — 46 items, every category
     * and subcategory, in one flat scroll — while desktop showed the same
     * branches behind a hover panel. The phone was the odd one out.
     *
     * These rules are scoped to .igm-nav__menu--branching, a class initNav() adds
     * only after it has injected the branch buttons. With JavaScript off the
     * class never lands, every branch stays open exactly as before, and no link
     * becomes unreachable.
     */
    .igm-nav__item--has-branch {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .igm-nav__item--has-branch > .igm-nav__link {
        flex: 1;
        min-width: 0;
    }

    .igm-nav__branch-toggle {
        flex: none;
        width: 44px;
        min-height: 44px;
        border: 0;
        background: none;
        cursor: pointer;
        position: relative;
    }

    .igm-nav__branch-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--navy-700);
        border-bottom: 2px solid var(--navy-700);
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform .2s var(--ease-standard);
    }

    .igm-nav__item--has-branch.is-expanded > .igm-nav__branch-toggle::after {
        transform: translate(-50%, -30%) rotate(-135deg);
    }

    .igm-nav__menu--branching .igm-nav__item--has-branch > .igm-nav__panel,
    .igm-nav__menu--branching .igm-nav__item--has-branch > .igm-nav__sublist {
        display: none;
        flex-basis: 100%;
    }

    .igm-nav__menu--branching .igm-nav__item--has-branch.is-expanded > .igm-nav__panel,
    .igm-nav__menu--branching .igm-nav__item--has-branch.is-expanded > .igm-nav__sublist {
        display: block;
    }
}

@media (min-width: 900px) {
    .igm-nav__toggle {
        display: none;
    }

    /* The branch buttons are injected at every width by initNavBranches();
       desktop opens the same branches on hover, so they are not needed here
       and would otherwise render as stray pills under the parent links. */
    .igm-nav__branch-toggle {
        display: none;
    }

    .igm-nav__item--has-branch {
        display: block;
    }

    .igm-nav__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .igm-nav__item {
        position: relative;
    }

    .igm-nav__item > .igm-nav__link {
        padding: 13px 14px;
    }

    .igm-nav__item > .igm-nav__link:hover {
        color: var(--navy-700);
        text-decoration: none;
    }

    /* Mega panel: hidden until hover or keyboard focus enters the branch. */
    .igm-nav__panel {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 0;
        z-index: 30;
        display: none;
        min-width: 240px;
        padding: 14px 18px;
        border: 1px solid var(--gray-300);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        background: var(--white);
        box-shadow: var(--shadow-md);
    }

    .igm-nav__item--mega > .igm-nav__panel {
        display: none;
        min-width: 560px;
        columns: 2;
        column-gap: 26px;
    }

    .igm-nav__item:hover > .igm-nav__panel,
    .igm-nav__item:focus-within > .igm-nav__panel {
        display: block;
    }

    .igm-nav__panel .igm-nav__link {
        padding: 7px 0;
        font-weight: 400;
        color: var(--gray-700);
        break-inside: avoid;
    }

    .igm-nav__panel .igm-nav__item--depth-1 > .igm-nav__link {
        font-weight: 600;
        color: var(--navy-700);
    }
}

/* Breadcrumbs ------------------------------------------------------------- */

.igm-breadcrumbs {
    margin-bottom: 14px;
    font: 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

.igm-breadcrumbs a {
    color: var(--gray-600);
}

.igm-breadcrumbs__sep {
    margin-inline: 6px;
    color: var(--gray-400);
}

/*
 * Rank Math renders the breadcrumb trail on products, categories, molecules
 * and policy pages, and it had no styling at all — which is why a five-level
 * trail looked like loose text and wrapped over several lines on a phone.
 *
 * The trail is NOT hidden on small screens. Google indexes the mobile version
 * ("only the content shown on the mobile site is used for indexing") and its
 * structured-data policy is "don't mark up content that is not visible to
 * readers", while it names Breadcrumb as a structured-data type to
 * prioritise. Hiding the trail on mobile while still emitting BreadcrumbList
 * would mark up invisible content on the exact version that gets indexed, and
 * put the breadcrumb rich result — which only shows on mobile — at risk.
 *
 * So it stays visible and is compacted instead: one line that scrolls
 * sideways if it overruns, rather than three wrapped lines.
 */
.rank-math-breadcrumb {
    margin-bottom: 14px;
}

.rank-math-breadcrumb p {
    margin: 0;
    font: 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
    white-space: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rank-math-breadcrumb p::-webkit-scrollbar {
    display: none;
}

.rank-math-breadcrumb a {
    color: var(--gray-600);
}

.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus-visible {
    color: var(--navy-700, inherit);
}

.rank-math-breadcrumb .separator {
    margin-inline: 6px;
    color: var(--gray-400);
}

/* The current page is the last node and is not a link; mute it like a label. */
.rank-math-breadcrumb p > :last-child:not(a) {
    color: var(--gray-500, var(--gray-600));
}

@media (min-width: 780px) {
    .rank-math-breadcrumb p {
        white-space: normal;
        overflow-x: visible;
    }
}

/* Mobile bar -------------------------------------------------------------- */

.igm-mobile-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 40;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
    padding-bottom: env(safe-area-inset-bottom);
}

.igm-mobile-bar__menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.igm-mobile-bar__menu li {
    flex: 1;
}

.igm-mobile-bar__menu a {
    display: block;
    padding: 11px 4px 13px;
    font: 400 11px/1.4 var(--font-body);
    color: var(--gray-600);
    text-align: center;
}

.igm-mobile-bar__menu .current-menu-item a {
    color: var(--navy-700);
    font-weight: 600;
}

@media (min-width: 900px) {
    .igm-mobile-bar {
        display: none;
    }
}

/* The fixed bar would otherwise cover the end of the page on mobile. */
@media (max-width: 899px) {
    .igm-site {
        padding-bottom: 62px;
    }
}

/* Quick view -------------------------------------------------------------- */

.igm-quickview {
    width: min(720px, 92vw);
    padding: 22px;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.igm-quickview::backdrop {
    background: var(--brand-tint-30);
}

.igm-quickview__close {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 20px;
    cursor: pointer;
}

.igm-quickview__body {
    display: grid;
    gap: 20px;
}

@media (min-width: 640px) {
    .igm-quickview__body {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.igm-quickview__media img {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--gradient-product-frame);
}

.igm-quickview__excerpt {
    font: 14px/1.7 var(--font-body);
    color: var(--gray-700);
}

/* Elements referenced by templates ---------------------------------------- */

.igm-header__brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: none;
}

/* WordPress outputs the custom logo at its uploaded intrinsic size (currently
   972x198) with no cap — unconstrained, it ate ~60% of the header's width and
   squeezed the 1fr search column down to ~2px, effectively hiding it. Mockup
   spec: height 38px, object-fit contain, left-aligned. */
.igm-header__brand img,
.igm-header__brand .custom-logo {
    height: 38px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.igm-footer__col {
    min-width: 0;
}

.igm-widget {
    margin-bottom: 18px;
}

.igm-switcher--lang,
.igm-switcher--currency {
    flex: none;
}

.igm-switcher--currency select {
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 12px/1 var(--font-body);
    color: var(--gray-700);
}

/* Editorial entries (blog, pages) */
.igm-entry {
    margin-bottom: 32px;
}

.igm-entry__head {
    margin-bottom: 12px;
}

.igm-entry__title {
    margin-bottom: 4px;
    font-size: clamp(20px, 3vw, 26px);
}

.igm-entry__body {
    font: 16px/1.75 var(--font-body);
    color: var(--gray-700);
}

.igm-entry__body h2,
.igm-entry__body h3 {
    margin-top: 1.6em;
}

/* Contact channel icons ----------------------------------------------------
 * Brand-coloured marks in the utility bar and footer chips. Colour is baked
 * into each SVG (this is the one place brand colour is the point), so these
 * rules only handle size and alignment. */

.igm-channel-icon {
    width: 16px;
    height: 16px;
    flex: none;
    vertical-align: -3px;
    margin-inline-end: 6px;
}

.igm-footer__chip .igm-channel-icon {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
}

/* The utility bar sits on navy; the Viber and email marks are dark enough to
   lose their edges against it, so they get a light disc behind them. */
.igm-header__utility .igm-channel-icon {
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    padding: 1px;
    box-sizing: content-box;
}

/* Site logo ---------------------------------------------------------------- */

.igm-header__brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.igm-header__brand .custom-logo {
    width: auto;
    height: 38px;
    max-width: 210px;
    object-fit: contain;
}

/*
 * A fixed max-width here (previously 150px) is a guess against a moving
 * target: the actual room left for the logo depends on how much the utils
 * cluster (language/currency/account/cart) claims, which itself changes with
 * viewport width and content. `max-width: 100%` instead asks the *real*
 * available space in `.igm-header__brand` (which already shrinks correctly —
 * see the min-width:0/overflow:hidden rule above) rather than a number that
 * has to be re-guessed every time the utils row's width changes.
 */
@media (max-width: 720px) {
    .igm-header__brand .custom-logo { height: 28px; max-width: 100%; }
}

/* Sticky header (desktop) --------------------------------------------------
 * Only the brand / search / cart row and the nav stick. The utility bar of
 * contact links scrolls away: it is useful once, not continuously, and
 * sticking it would cost ~40px of every screen for no repeat value.
 *
 * --igm-header-h is published so the page's other sticky things (filter
 * sidebar, order summary, product gallery) can offset themselves instead of
 * sliding underneath it. */
@media (min-width: 900px) {
    :root {
        --igm-utility-h: 36px;  /* contact bar, allowed to scroll away */
        --igm-header-h: 116px;  /* what actually stays pinned */
    }

    /* Sticking the inner wrapper does not work: a sticky element is confined
       to its parent's box, so a wrapper inside .igm-header could only travel
       the ~36px of the utility bar before scrolling off with it. The header
       itself sticks instead, pulled up by exactly the utility bar's height —
       so that bar slides out of view and the brand/search/nav row pins at 0. */
    .igm-header {
        position: sticky;
        top: calc(-1 * var(--igm-utility-h));
        z-index: 60;
        background: var(--white);
    }

    /* In-page anchors must not land under the pinned bar. */
    html { scroll-padding-top: calc(var(--igm-header-h) + 12px); }
}

/* Wider measure on large screens -------------------------------------------
 * 1180px was set for a 4-up grid. With 6-up product grids it left the cards
 * cramped and the page gutters oversized on a 1440px+ display. */
@media (min-width: 1400px) {
    .igm-container { max-width: 1320px; }
}

@media (min-width: 1700px) {
    .igm-container--wide { max-width: 1560px; }
}

/* =========================================================================
   FOOTER — design 1g, with the 1l mobile accordion.

   Navy ground, five columns, a trust strip and a legal bar. Each column is a
   <details> so the accordion the mobile design shows needs no JavaScript: it
   is forced open above the breakpoint and collapsible below it.
   ========================================================================= */

.igm-footer {
    margin-top: 40px;
    background: #00305e;
    color: rgba(255, 255, 255, .82);
}

.igm-footer a {
    font: 400 13px/1.4 var(--font-body);
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.igm-footer a:hover {
    color: var(--white);
    text-decoration: underline;
}

.igm-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Newsletter band ---------------------------------------------------------- */

.igm-footer__signup {
    background: var(--gray-50);
    border-bottom: 1px solid #e3e9f0;
    padding-block: 20px;
}

.igm-footer__signup-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.igm-footer__signup-text { flex: 1 1 280px; }

.igm-footer__signup-text h2 {
    margin: 0 0 5px;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-footer__signup-text p {
    margin: 0;
    font: 400 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

.igm-footer__signup-form { flex: 0 1 380px; }

.igm-footer__signup-form input[type="email"],
.igm-footer__signup-form input[type="text"] {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 400 14.5px/1 var(--font-body);
}

/* Columns ------------------------------------------------------------------ */

.igm-footer__main { padding-block: 34px 26px; }

.igm-footer__cols {
    display: grid;
    gap: 28px;
    margin-bottom: 28px;
}

@media (min-width: 720px) {
    .igm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .igm-footer__cols { grid-template-columns: 1.25fr 1fr 1fr 1fr 1.15fr; }
}

.igm-footer__col { min-width: 0; }

/* The brand orange is only 4.40:1 on the footer navy, which fails AA for text
   this size. --orange-300 is the same hue at 6.42:1. */
.igm-footer__eyebrow {
    margin: 0 0 14px;
    font: 700 12px/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange-300);
}

.igm-footer__eyebrow--inner { margin-top: 22px; }

/* Accordion behaviour. Open and non-interactive on desktop.
 *
 * The columns ship with `open` set, so with no JavaScript the footer is fully
 * expanded at every width — the same state it has always had, and every link
 * stays in the DOM for crawlers. igm_footer_accordion() in theme.js then
 * closes them below 720px so the phone footer is not a full screen of stacked
 * links.
 *
 * Doing the reverse — shipping them closed and forcing them open in CSS above
 * 720px — does NOT work: modern engines hide details content with
 * content-visibility, which `display: block` does not override, and the
 * desktop columns render empty. */
.igm-footer details > summary {
    list-style: none;
    /* Above the accordion breakpoint the columns are static headings, so the
       summary must not toggle when a mouse user clicks the label. */
    cursor: default;
    pointer-events: none;
}
.igm-footer details > summary::-webkit-details-marker { display: none; }

.igm-footer__brand {
    margin: 0 0 12px;
    font: 800 21px/1.2 var(--font-display);
    color: var(--white);
}

.igm-footer__blurb {
    margin: 0 0 16px;
    font: 400 12.5px/1.75 var(--font-body);
    color: rgba(255, 255, 255, .72);
}

.igm-footer__office address {
    font: 400 12.5px/1.8 var(--font-body);
    font-style: normal;
    color: rgba(255, 255, 255, .72);
}

.igm-footer__office a { color: var(--white); }

.igm-footer__links li { margin-bottom: 10px; }

.igm-footer__more { color: var(--white); font-weight: 600; }

.igm-footer__cta {
    display: block;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

.igm-footer__cta:hover { text-decoration: none; background: rgba(255, 255, 255, .06); }

.igm-footer__cta-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 13.5px/1.4 var(--font-body);
    color: var(--white);
    margin-bottom: 6px;
}

.igm-footer__cta-note {
    display: block;
    font: 400 12px/1.6 var(--font-body);
    color: rgba(255, 255, 255, .7);
}

.igm-footer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.igm-footer__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-md);
    font: 500 12px/1 var(--font-body);
    color: rgba(255, 255, 255, .85);
}

.igm-footer__chip:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }

.igm-footer__languages {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* 44px, matching the brief's minimum hit area — these were 40px. */
.igm-footer__lang {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-md);
    font: 500 12px/1 var(--font-body);
}

.igm-footer__lang.is-current {
    background: var(--white);
    border-color: var(--white);
    color: #00305e;
    font-weight: 600;
}

.igm-footer__lang.is-current:hover { color: #00305e; text-decoration: none; }

/* Trust strip -------------------------------------------------------------- */

.igm-footer__trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}

.igm-footer__trust li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--white);
}

.igm-footer__trust .igm-icon { flex: none; }

.igm-footer__trust span {
    font: 400 11.5px/1.5 var(--font-body);
    color: rgba(255, 255, 255, .65);
}

.igm-footer__trust span strong {
    display: block;
    font: 600 12.5px/1.35 var(--font-body);
    color: var(--white);
}

/* Legal bar ---------------------------------------------------------------- */

.igm-footer__bar {
    background: var(--navy-800);
    padding-block: 16px;
}

.igm-footer__bar-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.igm-footer__legal-text { flex: 1 1 420px; }

.igm-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.igm-footer__licence,
.igm-footer__copy {
    margin: 0 0 6px;
    font: 400 12px/1.6 var(--font-body);
    color: rgba(255, 255, 255, .6);
}

.igm-footer__licence-nos {
    display: block;
    font-family: var(--font-meta, var(--font-body));
    color: rgba(255, 255, 255, .78);
}

.igm-footer__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-left: auto;
}

.igm-footer__methods li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-xs);
    font: 600 9.5px/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* Mobile — design 1l: the columns collapse into an accordion. */

@media (max-width: 719px) {
    .igm-footer details.igm-footer__col {
        border-bottom: 1px solid rgba(255, 255, 255, .14);
        padding-bottom: 12px;
    }

    .igm-footer details > summary {
        cursor: pointer;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin: 0;
    }

    .igm-footer details > summary::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--orange-300);
        border-bottom: 2px solid var(--orange-300);
        transform: rotate(45deg);
        transition: transform .2s var(--ease-standard);
    }

    .igm-footer details[open] > summary::after { transform: rotate(-135deg); }

    .igm-footer__trust { grid-template-columns: minmax(0, 1fr); }

    .igm-footer__methods { margin-left: 0; }
}

/* 404 ----------------------------------------------------------------------
 * A dead end gets three routes out — search, the catalogue, a person — so it
 * needs more structure than the single centred paragraph it had.
 */

.igm-404 {
    max-width: 1000px;
    margin: 0 auto;
    padding-block: 8px 40px;
}

.igm-404__head {
    max-width: 620px;
    margin-bottom: 32px;
}

.igm-404__code {
    margin: 0 0 8px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--orange-600);
}

.igm-404__head h1 {
    margin: 0 0 10px;
    font: 700 clamp(26px, 4vw, 34px)/1.2 var(--font-display);
    color: var(--navy-700);
}

.igm-404__lede {
    margin: 0 0 20px;
    font: 400 15px/1.65 var(--font-body);
    color: var(--gray-700);
}

.igm-404__search { max-width: 520px; }

.igm-404__cols {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
    .igm-404__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.igm-404__col {
    padding: 20px 22px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.igm-404__col--help { background: var(--gray-50); }

.igm-404__col h2 {
    margin: 0 0 14px;
    font: 700 16px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-404__col p {
    margin: 0 0 16px;
    font: 400 13.5px/1.65 var(--font-body);
    color: var(--gray-700);
}

.igm-404__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.igm-404__chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 500 13px/1.3 var(--font-body);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-404__chips a:hover {
    background: var(--gray-50);
    border-color: var(--navy-700);
}

.igm-404__more {
    font: 600 13px/1.4 var(--font-body);
    color: var(--navy-700);
}

.igm-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.igm-404__actions .igm-btn { justify-content: center; }

/* A language whose page is not translated links to that language's home
   instead. It is still a real destination, so it reads as a normal chip —
   only the title attribute says where it goes. */
.igm-footer__lang--home { opacity: .92; }

/* Permanent way back into the cookie choice, in the footer legal bar. */
.igm-footer__consent-link {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: 600 12px/1.6 var(--font-body);
    color: rgba(255, 255, 255, .82);
    text-decoration: underline;
    cursor: pointer;
}

.igm-footer__consent-link:hover,
.igm-footer__consent-link:focus-visible {
    color: var(--white);
}