/* ==========================================================================
   Page header breadcrumb
   Karma renders items at 0.8em of the parent (~11px) with a 24px line height.
   Slightly larger text and line height, still well below the page title (20px+).
   ========================================================================== */
.page-header .breadcrumb {
    flex-wrap: wrap;
    row-gap: 2px;
}

.page-header .breadcrumb > li {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.02em;
}

.page-header .breadcrumb > li + li::before {
    padding: 0 8px 0 6px;
}

/* Karma splits title/breadcrumb 7/5 columns; let a long path use the free space next to a short title */
@media (min-width: 992px) {
    .page-header .row > [class*="col-lg-"]:has(> h1) {
        flex: 1 1 0;
        width: auto;
        min-width: 30%;
    }

    .page-header .row > [class*="col-lg-"]:has(> .breadcrumb) {
        flex: 0 1 auto;
        width: auto;
        max-width: 70%;
    }
}

@media (max-width: 991.98px) {
    .page-header-classic.page-header-sm .breadcrumb {
        margin-top: 6px;
    }

    .page-header .breadcrumb > li {
        font-size: 0.78125rem; /* 12.5px */
        line-height: 25px;
    }
}

@media (max-width: 575.98px) {
    .page-header .breadcrumb > li {
        font-size: 0.75rem; /* 12px */
    }

    .page-header .breadcrumb > li + li::before {
        padding: 0 6px 0 4px;
    }
}

/* ==========================================================================
   Product tile (card style "producttile")
   Square tile, cover image, dark gradient under the text. Text sits on
   ≥ ~60% black, so white text keeps ≥ 4.5:1 contrast on any photo.
   ========================================================================== */
.ns-product-tile {
    position: relative;
    isolation: isolate;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius, 6px);
    background: linear-gradient(135deg, var(--primary, #007560) 0%, #00402f 100%);
    color: #fff;
}

.ns-product-tile__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ns-product-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.78) 45%,
        rgba(0, 0, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

.ns-product-tile--fallback::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
}

/* The text block carries its own shade: text always sits on ≥ 72% black,
   however tall the text gets (small tiles, long names, white photos). */
.ns-product-tile__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    padding: 48px 22px 22px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.72) calc(100% - 48px),
        rgba(0, 0, 0, 0) 100%
    );
}

.ns-product-tile--fallback .ns-product-tile__body {
    background: none;
}

.ns-product-tile__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ns-product-tile__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.875rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ns-product-tile__text p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Whole tile is the link */
a.ns-product-tile,
a.ns-product-tile:hover,
a.ns-product-tile:focus {
    display: block;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

a.ns-product-tile:focus {
    outline: none;
}

/* Focus ring for keyboard users only (not on mouse click) */
/* !important: Karma sets "body a { outline: none !important }" */
a.ns-product-tile:focus-visible {
    outline: 3px solid var(--primary, #007560) !important;
    outline-offset: 3px;
}

a.ns-product-tile:focus-visible .ns-product-tile__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Visual button (a span, so it avoids Karma's .btn pseudo-elements) */
.ns-product-tile__btn {
    align-self: flex-start;
    margin-top: 14px;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius, 4px);
    background-color: var(--primary, #007560);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all 0.2s;
}

/* Same hover as Karma's .btn-primary */
a.ns-product-tile:hover .ns-product-tile__btn,
a.ns-product-tile:focus-visible .ns-product-tile__btn {
    filter: saturate(1.5) brightness(1.1);
}

a.ns-product-tile:hover .ns-product-tile__image,
a.ns-product-tile:focus-visible .ns-product-tile__image {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .ns-product-tile__image {
        transition: none;
    }

    a.ns-product-tile:hover .ns-product-tile__image,
    a.ns-product-tile:focus-visible .ns-product-tile__image {
        transform: none;
    }
}

/* Grid: when a column container holds product tiles, flatten its columns into
   one row-major grid (1st tile of each column first, then 2nd, …). */
.row:has(> [class*="col-"] > .frame-product-tile) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] {
    display: contents;
}

/* Karma's frame-space-* margins (!important) would stack per row; apply them once to the grid instead */
.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame {
    margin: 0 !important;
    padding: 0;
}

.row:has(> [class*="col-"] > .frame-product-tile.frame-space-before-extra-small) { margin-top: 1em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-before-small) { margin-top: 2em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-before-medium) { margin-top: 3em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-before-large) { margin-top: 4em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-before-extra-large) { margin-top: 5em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-after-extra-small) { margin-bottom: 1em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-after-small) { margin-bottom: 2em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-after-medium) { margin-bottom: 3em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-after-large) { margin-bottom: 4em; }
.row:has(> [class*="col-"] > .frame-product-tile.frame-space-after-extra-large) { margin-bottom: 5em; }

.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame:nth-child(2) { order: 2; }
.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame:nth-child(3) { order: 3; }
.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame:nth-child(4) { order: 4; }
.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame:nth-child(5) { order: 5; }
.row:has(> [class*="col-"] > .frame-product-tile) > [class*="col-"] > .frame:nth-child(6) { order: 6; }

@media (max-width: 991.98px) {
    .row:has(> [class*="col-"] > .frame-product-tile) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 575.98px) {
    .row:has(> [class*="col-"] > .frame-product-tile) {
        grid-template-columns: minmax(0, 420px);
        justify-content: center;
        gap: 16px;
    }

    .ns-product-tile__body {
        padding: 48px 18px 18px;
    }
}

/* Column grids placed directly on a page (not inside a Container Grid) have no side padding, so
   Bootstrap's -12px row gutters widened the page; on phones the fixed header grew with it and
   pushed the language switcher off-screen. */
.ge-container:has(> .row):not(.container *, .container-fluid *) {
    overflow-x: clip;
}

/* ==========================================================================
   Language switcher (Partials/LanguageMenu.html)
   Modelled on helens.se: no button box, globe + bold uppercase code + chevron in
   the colour of the header's menu items; a slim panel with the codes stacked.
   Same markup in the desktop and mobile header (sits outside the collapsing nav).
   ========================================================================== */
.ns-lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.ns-lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    /* --ns-lang-color: colour of the header's menu items, set by language-switch.js */
    color: var(--ns-lang-color, #444);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ns-lang-switch__toggle .fa-globe {
    font-size: 17px;
}

.ns-lang-switch__chevron {
    font-size: 12px;
    -webkit-text-stroke: 0.6px currentColor;
    transition: transform 0.2s ease;
}

.ns-lang-switch__toggle[aria-expanded="true"] .ns-lang-switch__chevron {
    transform: rotate(180deg);
}

.ns-lang-switch__toggle:hover,
.ns-lang-switch__toggle[aria-expanded="true"] {
    color: var(--ns-lang-color, #444);
    opacity: 0.75;
}

.ns-lang-switch__toggle:focus {
    outline: none;
}

.ns-lang-switch__toggle:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px;
    border-radius: 2px;
}

.ns-lang-switch .ns-lang-switch__menu {
    min-width: 64px;
    margin-top: 6px !important;
    padding: 4px 0;
    border: 0;
    border-top: 2px solid var(--primary, #007560);
    border-radius: 0 0 var(--border-radius, 4px) var(--border-radius, 4px);
    background-color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Same font as the main menu's submenu items */
.ns-lang-switch .ns-lang-switch__item {
    display: block;
    padding: 6px 18px;
    color: #606060;
    font-size: 0.83rem;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
}

.ns-lang-switch a.ns-lang-switch__item:hover,
.ns-lang-switch a.ns-lang-switch__item:focus-visible {
    background-color: #f8f9fa;
    color: var(--primary, #007560);
}

.ns-lang-switch a.ns-lang-switch__item:focus-visible {
    outline: 2px solid var(--primary, #007560) !important;
    outline-offset: -2px;
}

.ns-lang-switch .ns-lang-switch__item.active {
    background: transparent;
    color: var(--primary, #007560);
}

.ns-lang-switch .ns-lang-switch__item.disabled {
    color: #a3a8ad;
    cursor: not-allowed;
    pointer-events: auto;
}

/* Headers with Karma's dark dropdowns (homepage): same black panel as the menu's submenus */
#header:has(.header-nav-dropdowns-dark) .ns-lang-switch .ns-lang-switch__menu {
    padding: 5px 0;
    border-top: 0;
    border-radius: 4px;
    background-color: #212529;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07);
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch li:not(:last-child) > .ns-lang-switch__item {
    border-bottom: 1px solid #2c3237;
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch .ns-lang-switch__item {
    color: #c1c1c1;
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch a.ns-lang-switch__item:hover,
#header:has(.header-nav-dropdowns-dark) .ns-lang-switch a.ns-lang-switch__item:focus-visible {
    background-color: #2c3237;
    color: #fff;
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch a.ns-lang-switch__item:focus-visible {
    outline-color: #fff !important;
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch .ns-lang-switch__item.active {
    color: #fff;
}

#header:has(.header-nav-dropdowns-dark) .ns-lang-switch .ns-lang-switch__item.disabled {
    color: #6c757d;
}

@media (max-width: 991.98px) {
    .ns-lang-switch {
        margin-left: 8px;
    }

    /* Karma's 14px side padding made the header row wider than phone screens */
    #header .header-nav-features:has(> .ns-lang-switch) {
        padding-right: 0;
        padding-left: 6px;
    }
}

/* Small phones (320-374px): logo (210px) + menu button + switcher are wider than the header,
   which pushed the switcher off-screen. Tighten the gaps and let the logo scale down. */
@media (max-width: 374.98px) {
    #header .header-logo img {
        max-width: 150px;
        object-fit: contain;
        object-position: left center;
    }

    #header .header-nav-features:has(> .ns-lang-switch) {
        padding-right: 0;
        padding-left: 0;
    }

    .ns-lang-switch {
        margin-left: 10px;
    }

    .ns-lang-switch__toggle {
        gap: 5px;
    }
}

/* Layouts that place the switcher in Karma's top bar (hidden below md, e.g. centernavbtn):
   keep the bar for the switcher only on phones */
@media (max-width: 767.98px) {
    #header .header-nav-top:has(.ns-lang-switch) {
        display: flex !important;
    }

    #header .header-nav-top:has(.ns-lang-switch) .nav > li {
        display: none;
    }

    /* Centered-logo layouts (centernavbtn) also keep the search icon in this row */
    #header .header-nav-top:has(.ns-lang-switch) .header-nav-features {
        padding-right: 0;
        padding-left: 0;
    }

    #header .header-nav-top .ns-lang-switch {
        margin-left: 0;
    }
}

/* Pages with the search icon enabled (e.g. Sitemap) have one more item in the phone header row */
@media (max-width: 991.98px) {
    #header .header-body:has(.ns-lang-switch) .header-nav-features:has(> .header-nav-features-search) {
        padding-right: 6px;
        padding-left: 6px;
    }
}

@media (max-width: 413.98px) {
    #header .header-body:not(.header-body-center-logo):has(.header-nav-features-search):has(.ns-lang-switch) .header-logo img {
        max-width: 180px;
        object-fit: contain;
        object-position: left center;
    }
}

@media (max-width: 374.98px) {
    #header .header-body:not(.header-body-center-logo):has(.header-nav-features-search):has(.ns-lang-switch) .header-logo img {
        max-width: 130px;
    }
}

@media (max-width: 413.98px) {
    #header .header-body-center-logo:has(.header-nav-top .ns-lang-switch) .header-logo img {
        max-width: 170px;
        object-fit: contain;
        object-position: left center;
    }
}

@media (max-width: 374.98px) {
    #header .header-body-center-logo:has(.header-nav-top .ns-lang-switch) .header-logo img {
        max-width: 120px;
    }
}