/*ki*/
:root {
    /*ki*/
    --ki-border-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    /*    --flex-item-min-width: 250px;
    --flex-item-max-width: 500px;
    --flex-item-min-height: 100px;
    --ki-card-media-height: auto;*/
    --ki-dropdown-min-width: 250px;
    --ki-shop-menu-width: 215px;
    /* Menu type scale. The top nav, the shop menu and the left nav panel were
       built from <small> (0.8rem), a fixed 0.8rem label and Bootstrap's .btn-sm,
       so their text was pinned at 12.8-14px however much room the display has,
       while the page beside them runs 15-16px and its banners and headings grow
       with the viewport. On a monitor at 100% scaling a CSS px is one screen px,
       so on a big screen that gap reads as fine print - and it cannot be seen on
       a 125% laptop, where the same 12.8px paints 16px tall. These tokens start
       one step above those original sizes and step up again at the wide
       breakpoints further down; a site that wants a different scale overrides
       the tokens rather than the rules. */
    --ki-nav-font: 0.875rem; /* .ki-cms-nav <small> labels, see the rule below the panel-left one */
    --ki-nav-search-font: 1rem; /* the nav's .ki-search-main and its placeholder - the body size it had */
    --ki-shop-menu-font: 0.875rem; /* section labels, search input */
    --ki-shop-menu-font-sm: 0.8125rem; /* category rows, the delivery note */
    --ki-panel-left-font: 0.9375rem; /* .btn-sm rows in the slide-out panel */
    --ki-category-hero-max-width: 175px;
    /* Category tiles come from the catalogue, so their art follows no single
       standard - 432x250 house banners, 225x225 squares, 205x246 portraits and
       1284x1053 photos all land in one grid. With height:auto each renders at
       its own ratio (88px to 210px tall at 175px wide) and the rows rag. This
       is the height of the box they all share; 100px is the house banner at
       full width (432x250 -> 173x100), so the branded art fills its box exactly
       and everything else letterboxes inside it. */
    --ki-category-hero-height: 100px;
    --ki-card-media-item-max-height: 200px;
    --ki-card-media-item-max-width: 250px;
    --ki-gallery-media-height: 420px;
    --ki-embed-blob-height: 250px;
    --bs-tertiary-bg: #f8f9fa;
}

@media (max-width: 575.98px) {
    :root {
        --ki-gallery-media-height: 280px;
        --ki-embed-blob-height: 320px;
    }
}


.pulse {
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0% {
        font-variation-settings: 'wght' 100;
    }

    50% {
        font-variation-settings: 'wght' 700;
    }

    100% {
        font-variation-settings: 'wght' 100;
    }
}

.nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}


.navbar {
    --bs-navbar-padding-y: 0.0rem;
}

.ki-cms-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.main-body {
    margin-top: 3rem !important; /*primary nav spaces*/
}

.ki-btn-back-to-top {   
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    /*display: none;*/
}




small {
    font-size: 0.8rem !important;
}

label {
    font-size: 0.85rem !important;
}


.xsmall {
    font-size: 0.7rem !important;
}

.input-small {
    width: 50px !important;
    max-width: 50px !important;
    font-size: 0.8rem !important;
}

/* flex grid */
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}

.flex-item-card {
    background: transparent;
/*    width: var(--flex-item-min-width) !important;
    max-width: var(--flex-item-max-width) !important;*/
/*    height: 100% !important;*/
/*    min-height: var(--flex-item-min-height) !important;*/
    margin-bottom: 1.5rem;
    padding-top: 1rem;
}

.ki-products-card {
    flex: 1 1 320px;
    width: min(100%, 380px);
    max-width: 380px;
    min-width: 280px;
    min-inline-size: 0;
}

.view-record {
    margin-right: 0.4rem;
}

.ki-products-record {
    /* 320px basis missed 3-up by 13px: 3 x (320 + 0.4rem margin) = 979 in a
       966px grid column, so it wrapped to 2. 300 fits 3 across at ~316px each,
       which still clears min-width and stays under max-width. */
    flex: 1 1 300px;
    width: min(100%, 380px);
    max-width: 380px;
    min-width: 280px;
    min-inline-size: 0;
}


.flex-col-rows {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}


.ki-dropdown {
    min-width: var(--ki-dropdown-min-width) !important;
}

.dropdown-menu {
    transform: translate3d(5px, 35px, 0px) !important;
    min-width: var(--ki-dropdown-min-width) !important;
    max-height: 500px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-item {
    min-width: var(--ki-dropdown-min-width) !important;
}

.ki-dropdown-menu-scroller {
    width: 100% !important;
    max-height: 800px !important;
    overflow-y: scroll;
}

.ki-scroll {
    max-height: 250px !important;
    overflow-y: scroll;
}

/* Shop Menu block (ViewAttributes.ShopMenu) - the page copy of the nav's left
   menu, wearing the previous storefront's sidebar look: a plain left aligned
   label with a +/- expander floated right, and a rule under each header.
   The expander runs off Bootstrap's own .collapsed class on the toggle button,
   so the +/- flip needs no script. Everything is scoped to .ki-shop-menu. */
/* Width: fill the column, up to a ceiling. Two problems are being solved at once.
   Expanding a section must not resize the menu: the block lands in a Designer
   .gjs-cell inside a flex .gjs-row, and a flex item defaults to min-width:auto,
   so it will not shrink below its content and a wide category card drags the cell
   - and the menu - wider. But a definite width cannot be the answer either: the
   cell then grows straight through a row narrower than that width and overlaps
   whatever sits to its right, which is what happens on a 1280px screen where the
   row is only ~187px.
   So: width 100% of the column, capped at --ki-shop-menu-width, with min-width 0
   on the cell so it is actually allowed to shrink to the row. The menu is the
   ceiling width where there is room and the column width where there is not, and
   it never overflows. The overflow rules further down stop the lists pushing past
   whichever of the two applies.
   To get the full width on a narrow screen the Designer column itself has to be
   wider - that is a page layout change, not something CSS can conjure. */
.ki-shop-menu {
    width: 100%;
    max-width: var(--ki-shop-menu-width);
    min-width: 0;
}

.gjs-cell:has(.ki-shop-menu) {
    min-width: 0;
}

/* From xl up the page keeps a gutter between this column and the content beside
   it, so the menu is allowed to spend it rather than be squeezed into a col-lg-2.
   The cell keeps its own width - min-width:0 above lets it shrink back to the row
   - so only the menu spills, and the page layout is untouched. Below xl the
   gutter is too small to borrow from, so it goes back to filling the column. */
@media (min-width: 1200px) {
    .ki-shop-menu {
        width: var(--ki-shop-menu-width);
        max-width: none;
    }
}

/* Search row: same rule and padding as the menu's other rows. .ki-search-main
   carries a 400px min-width from ~641px up, sized for the top nav - in a column
   this narrow that would blow the menu open, so it sizes to the row instead. */
.ki-shop-menu .ki-shop-menu-search {
    border-bottom: 1px solid var(--bs-primary);
    padding: 0.5rem 0.7rem;
}

.ki-shop-menu .ki-search-main {
    min-width: 0 !important;
    width: 100%;
    /* the input carries no size of its own, so it takes the host page's body
       size - 16px bare, 15px inside a .kic-page - either way well above the
       labels beside it, and the placeholder then runs out of a column this
       narrow. Share the label's token so the row reads as part of the menu
       rather than something dropped into it, and so it steps with the rest. */
    font-size: var(--ki-shop-menu-font);
    font-weight: 400;
}

/* Flex rather than the markup's float for the expander. The row is icon, label,
   expander on one line, and a float only reaches the right edge while the label
   leaves it room - at the wide type steps below, 'About Delivery Charges' grows
   until it runs into the +/- and eventually pushes it onto a second line. As flex
   items they cannot collide at any size: the label takes the slack, the expander
   keeps its own column, and a label with nowhere left to go wraps instead. */
.ki-shop-menu .ki-shop-menu-btn {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--bs-primary);
    border-radius: 0;
    padding: 0.5rem 0.7rem; /* 0.35rem read as cramped once the type went up */
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ki-shop-menu .ki-shop-menu-btn > .ki-shop-menu-label {
    flex: 1 1 auto;
    min-width: 0;
}

.ki-shop-menu .ki-shop-menu-btn > .ki-shop-menu-expander {
    flex: 0 0 auto;
}

/* the site's own control scale - matching the nav's <small> (--ki-nav-font) at 400.
   the previous storefront used 13px/500, but that sat on a different base face
   and reads heavy against Barlow */
.ki-shop-menu .ki-shop-menu-label {
    font-size: var(--ki-shop-menu-font);
    font-weight: 400;
}

.ki-shop-menu .ki-shop-menu-expander {
    font-style: normal; /* it is an <i>, matching the previous storefront markup */
}

/* the controls are <a role="button"> rather than <button> so the Designer does
   not rewrite them to "Send"; the ones that act via onclick carry no href, so
   they need the pointer back */
.ki-shop-menu a[role="button"]:not([href]) {
    cursor: pointer;
}

/* Ceiling on the two open ended lists so a long catalogue does not run the page.
   It sits on the list itself, not the collapse panel, so the Clear Filters
   controls above and below the attribute list stay put while the list scrolls.
   auto rather than scroll: no phantom scrollbar when the list is short. */
.ki-shop-menu .categories-menu-main,
.ki-shop-menu .attributes-menu-main {
    max-height: 850px;
    overflow-y: auto;
    overflow-x: hidden; /* a wide row must not widen the menu, it clips instead */
    overflow-wrap: anywhere; /* long category names wrap rather than push */
    min-width: 0; /* these are flex children in places - let them actually shrink */
}

/* Category rows are .ki-dropdown, sized for the nav's 400px offcanvas: a 250px
   min-width, and a .dropdown-item label that Bootstrap sets to white-space:nowrap.
   In a page column narrower than that the name cannot wrap, so it forces its full
   single line width and the row is clipped. Inside this menu the rows size to the
   menu and long names wrap onto a second line instead. */
.ki-shop-menu .ki-dropdown,
.ki-shop-menu .dropdown-item {
    min-width: 0 !important;
}

/* Category links, in the list and in the popup. They come in at 14px and 16px,
   larger than or equal to the section headers above them, which reads upside
   down and costs width in a narrow column. The -sm token sits one step under
   the headers. */
.ki-shop-menu .dropdown-item {
    white-space: normal;
    font-size: var(--ki-shop-menu-font-sm);
}

/* The category popup is 250px wide by default and opens inside the scrolling
   list above, which is a clipping context - so anything past the list's width is
   cut off and the entries cannot be read. Size the popup to the row it belongs to
   instead, and let its entries wrap, so it opens fully inside the menu. */
.ki-shop-menu .dropdown-menu {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
}

.ki-shop-menu .ki-shop-menu-expander::after {
    content: '+';
}

.ki-shop-menu .ki-shop-menu-btn:not(.collapsed) .ki-shop-menu-expander::after {
    content: '\2212'; /* minus sign, as the previous storefront used */
}

/* About Delivery Charges panel. The shipping agent service lines are written
   straight into [data-name="about-delivery-charges"] as bare text - see the
   kicShipAgentServiceApi case in koala-impala-view.js - so they carry no class
   of their own and land on the body's 16px. That is larger than the 14px
   .btn-sm header sitting right above them and than every other row in the nav,
   which is why the section reads as the odd one out. Size the container and the
   text follows it. */
[data-name="about-delivery-charges"] {
    font-size: 0.875rem; /* .btn-sm, the nav's own scale */
    line-height: 1.4; /* the lines are <br> separated, they need the room */
}

/* The shop menu block runs its own scale - --ki-shop-menu-font headers, the -sm
   token for category rows - so in there the note sits with the rows, the same
   way .dropdown-item does above. */
.ki-shop-menu [data-name="about-delivery-charges"] {
    font-size: var(--ki-shop-menu-font-sm);
}

/* Left nav panel rows. They are Bootstrap .btn-sm, so the scale is applied here
   rather than by touching .btn-sm itself - that class is also every small button
   on the page and in the admin forms. .panel-left scopes it to the slide-out
   menu, its admin rows included, so the whole panel moves as one. */
.panel-left .btn-sm,
.panel-left .dropdown-item,
.panel-left [data-name="about-delivery-charges"] {
    font-size: var(--ki-panel-left-font);
}

/* Top nav labels. Nav.cshtml writes every label in the nav band, its dropdowns
   and its offcanvas as <small>, which the global small rule above pins at
   0.8rem !important - so this needs !important too, and the .ki-cms-nav class
   is what makes it win. Scoped to the nav so <small> elsewhere keeps its size. */
.ki-cms-nav small {
    font-size: var(--ki-nav-font) !important;
}

/* The nav search input carries no size of its own, so it sat on the body's
   16px while the labels beside it stepped up; on a wide band the placeholder
   read as the small thing in the row. The placeholder inherits from the input,
   so sizing the input sizes both. Scoped to the nav: the shop menu's copy of
   the same input shares the menu's label token instead. */
.ki-cms-nav .ki-search-main {
    font-size: var(--ki-nav-search-font);
}

/* The wide steps. 1400, 1600 and 1800, not the 1200 the menu already uses for its
   width: at 1200 the column is still the binding constraint and larger type just
   wraps more, and it is past ~1400 that the page around the menu has visibly
   outgrown it. The aim is that on a large display the menu reads as part of the
   page - close to the 15-16px the body runs at - rather than as a footnote
   beside it. Nothing below 1400px moves. */
@media (min-width: 1400px) {
    :root {
        /* the shop menu holds its base here: 0.875rem is the widest that keeps
           every label on one line at 215px - the width goes up at 1600 */
        --ki-nav-font: 0.9375rem;
        --ki-nav-search-font: 1.125rem;
        --ki-panel-left-font: 1rem;
    }
}

/* Past 14px the shop menu is width bound rather than size bound: 'About
   Delivery Charges' is the longest label, its box is 143px in the 215px menu,
   and it needs 150px at 15px, 160px at 16px and 170px at 17px. So the width
   goes up with the type, at the viewport where the wider menu still clears the
   content column beside it: the Designer cell the menu sits in grows with the
   viewport (187px at 1400, 220px at 1600 on the storefront template), the menu
   is allowed past the cell into the row's gutter, but not into the column
   after it, and at 1600 a 250px menu ends 4px short of that column's text. */
@media (min-width: 1600px) {
    :root {
        --ki-shop-menu-width: 250px; /* label box 178px: one line up to 1.0625rem */
        --ki-shop-menu-font: 1rem;
        --ki-shop-menu-font-sm: 0.9375rem;
    }
}

@media (min-width: 1800px) {
    :root {
        --ki-shop-menu-font: 1.0625rem;
        --ki-shop-menu-font-sm: 1rem;
        --ki-nav-font: 1rem;
        --ki-nav-search-font: 1.25rem;
        --ki-panel-left-font: 1.0625rem;
    }
}

.autocomplete-items {
    position: fixed;
    z-index: 9999;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--bs-body-bg, #fff);
    border: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.autocomplete-items div {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    color: var(--bs-body-color, #212529);
}

.autocomplete-items div:hover,
.autocomplete-items div.autocomplete-active {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.ki-box-shadow {
    box-shadow: var(--ki-border-box-shadow);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
    border-radius: 0 !important;
    
}

.ki-promotion-title-row {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ki-pdp-promotion-card {
    position: relative;
}

.ki-pdp-promotion-card::before,
.ki-pdp-promotion-card::after {
    content: '';
    display: block;
    width: 75%;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.ki-pdp-promotion-card::before {
    margin-bottom: 1rem;
}

.ki-pdp-promotion-card::after {
    margin-top: 1rem;
}

.ki-promotion-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ki-promotion-summary,
.ki-promotion-summary a,
.ki-promotion-item-title {
    overflow-wrap: anywhere;
}

.ki-promo-scroll {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The render layer writes its own utility classes onto the data-name slots, so
   Bootstrap classes in the template cannot reach them. These two rules are the
   only ones that need CSS; everything else on the PDP uses Bootstrap utilities.

   1. Breadcrumb: slots arrive as w-100 + d-inline-block + text-center, which
      breaks them out of the crumb row. */
.ki-pdp-buy .breadcrumb [data-name="titleCategory"],
.ki-pdp-buy .breadcrumb [data-name="titleDescription"] {
    width: auto !important;
    display: inline !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 2. Buy rail: slots arrive text-center; the rail reads as a left-aligned
      column. titleInventory is deliberately excluded so it stays centred. */
.ki-pdp-buy [data-name="commerceBrand"],
.ki-pdp-buy [data-name="titlePrice"],
.ki-pdp-buy [data-name="titleProductInformation"],
.ki-pdp-buy [data-name="kicItemApiprices"] {
    text-align: left !important;
}

.ki-card-media {
    /*    background-color: transparent;
    color: transparent;
    width: auto;
    height: auto;
    max-height: var( --ki-card-media-item-max-height);
    max-width: var(--ki-card-media-item-max-width);
    object-fit: contain;
    display: block;
    margin: 0 auto;*/

    color: transparent;
    width: var(--ki-card-media-item-max-width);
    height: var(--ki-card-media-item-max-height);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.ki-hero-media {
    background-color: transparent;
    color: transparent;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* product text fields (description, category, brand) render as headings/spans for semantics.
   strip the browser heading styling so they look exactly like the element they replaced -
   layout still comes from .lead-ki and the bootstrap utility classes */
.ki-product-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding-right: .5rem;
    padding-left: .5rem;
}

.lead-ki {
    margin-top: 5px;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center !important;
    height: 80px; /* fixed height */
    resize: none; /* prevents user resizing */
}

.cart-menu-line {
    display: flex;
    overflow-wrap: break-word;
    text-align:start !important;
    font-size: 14px;
}


.ki-thumbnail-media {
    background-color: transparent;
    color: transparent;
    display: block;
    margin: auto;
    height: auto;
    max-width: 150px !important;
    align-self: auto !important;
}

/* product/category media gallery carousel: pin every slide (img / video / pdf) to one fixed box so the size doesn't jump between slides */
.ki-gallery .carousel-item {
    height: var(--ki-gallery-media-height);
}

.ki-gallery .carousel-item-img,
.ki-gallery video,
.ki-gallery embed {
    width: 100%;
    height: var(--ki-gallery-media-height);
    object-fit: contain;
    display: block;
    margin: 0 auto;
    background-color: transparent;
}

/* quick-order products table (Tabulator) — smaller headings */
.ki-products-table .tabulator {
    font-size: .85rem;
}
.ki-products-table .tabulator-col-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* flatten the reused ProductCard field renderers into an evenly-spaced row (desktop).
   order + wrap: description | category ... price (right) on line 1, inventory on its own line under. */
.ki-products-info-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem .9rem;                  /* small row gap, even column gap */
    width: 100%;
}
.ki-products-info-inline > div {
    margin: 0 !important;
    width: auto !important;
    min-width: 0;                       /* let the description shrink instead of overflowing */
}
.ki-products-info-inline > .ki-info-titledescription {
    order: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ki-products-info-inline > .ki-info-titlecategory {
    order: 2;
}
.ki-products-info-inline > .ki-info-titleprice {
    order: 3;
    margin-left: auto !important;       /* push price to the far right of line 1 */
    flex: 0 0 auto;
}
.ki-products-info-inline > .ki-info-titleinventory {
    order: 4;
    flex: 0 0 100%;                     /* always a new line, under the description */
}
.ki-products-info-inline texarea,
.ki-products-info-inline textarea,
.ki-products-info-inline .ki-product-text,
.ki-products-info-inline .lead-ki {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    resize: none;
    border: 0;
    background: transparent;
}
.ki-products-info-inline .btn {
    width: auto !important;
    padding: .15rem .5rem;
    white-space: nowrap;
}

/* mobile: stack the description values so the row fits, allow wrapping, prevent table overflow */
@media (max-width: 575.98px) {
    .ki-products-info-inline {
        display: block;
    }
    .ki-products-info-inline > div {
        display: block;
        margin: 0 0 .15rem 0 !important;
    }
    .ki-products-info-inline > .ki-info-titleprice {
        margin-left: 0 !important;
    }
    .ki-products-info-inline texarea,
    .ki-products-info-inline textarea,
    .ki-products-info-inline .ki-product-text,
    .ki-products-info-inline .lead-ki {
        white-space: normal !important;
        display: block !important;
        overflow: visible;
    }
}
.ki-products-table,
.ki-products-table .tabulator,
.ki-products-table .tabulator-tableholder {
    max-width: 100%;
}

/* toolbar: search on the left, pager (moved up from the footer) inline on the right */
.ki-products-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.ki-products-table-toolbar .tabulator-footer {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
}
.ki-products-table-toolbar .tabulator-paginator {
    display: flex;
    align-items: center;
    gap: .2rem;
}
/* page buttons styled like the app buttons (outline-primary, square, border-0) */
.ki-products-table .tabulator-page {
    border: 0 !important;
    background: transparent !important;
    color: var(--bs-primary);
    border-radius: 0 !important;
    padding: .2rem .55rem;
    font-size: .8rem;
}
.ki-products-table .tabulator-page:hover:not(:disabled) {
    background: var(--bs-primary) !important;
    color: #fff !important;
}
.ki-products-table .tabulator-page.active {
    color: var(--bs-primary);
    text-decoration: underline;
    font-weight: 600;
}
.ki-products-table .tabulator-page[disabled] {
    opacity: .4;
}
.ki-products-table-toolbar .tabulator-page-size {
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    background: transparent;
}


.ki-category-hero {
    background-color: transparent;
    color: transparent;
    display: block;
    margin: auto;
    /* A definite box, not height:auto - see the token. object-fit:contain
       letterboxes any ratio, so nothing is cropped or stretched; the previous
       storefront pinned height:75px with width auto, which squashed anything
       wider than its 150px cap. */
    width: var(--ki-category-hero-max-width);
    max-width: 100%;
    height: var(--ki-category-hero-height);
    object-fit: contain;
    margin: 0 auto; /* centre the art in a tile wider than it */
    align-self: auto !important;
}

/* Category tiles are .ki-dropdown, so like the shop menu's rows they inherit the
   250px .dropdown-item min-width meant for the nav's 400px offcanvas. On a tile
   the label sits inside a .btn, so that 250px becomes 274px once the button's
   padding and the tile's own pe-2 are added - and 274px is what costs the grid a
   column: four need 1096px where the page column is 1083px, so only three fit and
   the row ends in most of a tile's worth of white space.

   Release the nav's min-width here and the tile falls back to its own 250px from
   .ki-dropdown, padding included, so four fit in 1000px. Labels wrap rather than
   force the tile wider, the same way .ki-shop-menu .dropdown-item does - at 250px
   every current category name still holds one line. */
.grid-categories .dropdown-item {
    min-width: 0 !important;
    white-space: normal;
}

/* The tile's whole face is one .btn, and a .btn is inline-block: with the nav's
   min-width gone it shrink-wraps to its content (191px of a 250px tile) and sits
   against the left edge, taking the art and the label with it. The centring is
   all there already - margin:auto on the image, .text-center on the label - it
   just has nothing to centre inside. Fill the tile and both land in the middle. */
.grid-categories > .btn {
    width: 100%;
}

/* Space between tiles. The renderer gives each tile mb-2 and pe-2, which reads as
   a seam rather than a gap once the tiles are evenly sized. 1rem is the most the
   row can spend and still hold four: 4 x 250 + 3 x 16 = 1048 in the 1083px column
   these grids get, and past ~27px the fourth tile wraps. */
.categories-grid {
    gap: 1rem;
}

/* Promoted categories bar. The categories menu block, holding only the few
   categories the merchant flags as promoted, laid out as one full width band
   meant to sit under the site header. Layout only: the dropdowns are the ones
   the menu block builds and keep its colours, and the band itself carries
   .themeclass like every other surface in the app, so it wears the site's theme
   rather than anything named here. The cells divide the band between them
   rather than standing at their natural width, so it reads as one piece of
   navigation instead of a line of loose buttons. 10rem is about the longest
   current label on one line ('INFECTION CONTROL'); under that the cells wrap,
   six to a row on a desktop down to two on a phone. */
.categories-promoted {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.categories-promoted .promoted-categories {
    flex: 1 1 10rem;
    /* .ki-dropdown is sized for the 400px nav offcanvas (250px min-width), which
       here would stop more than four cells sharing a page column. The cell takes
       its width from the band instead. */
    min-width: 0 !important;
    /* the cells tile the band edge to edge, so the .mb-2 every .ki-dropdown
       carries would open a stripe of background under the last row */
    margin-bottom: 0 !important;
}

/* Fill the cell so the whole cell is the target, and centre the label - the
   toggle comes in .text-start, which on an evenly divided band leaves every
   label hanging off the left edge of its own cell. */
.categories-promoted .promoted-categories > .btn {
    width: 100%;
    height: 100%;
    padding: 0.75rem 0.5rem;
    text-align: center !important;
    white-space: normal;
}

/* The label inside the toggle is a .dropdown-item (the same node the menu rows
   are built from), so it brings the 250px min-width with it and would hold the
   cell open at that width, and its own padding on top of the toggle's. The rows
   inside the open menu keep their own size. */
.categories-promoted .promoted-categories > .btn .dropdown-item {
    min-width: 0 !important;
    white-space: normal;
    padding: 0;
}

/* product thumbnail in the recent activity toast - the toast body is narrow, so this is
   deliberately smaller than .ki-thumbnail-media and does not centre itself */
/* The related cards read as product tiles, so their menu gets a white ground instead of
   the grey every other dropdown shares (--bs-dropdown-bg is #f8f9fa app-wide). Setting the
   variable leaves bootstrap's own .dropdown-menu rule in charge. */
.ki-related-menu {
    --bs-dropdown-bg: #fff;
}

/* related-product cards in the Related dropdown: image over description over a
   quantity + add-to-cart row, each card the full width of the menu */
.ki-related-card {
    display: block;
    width: 100%;
    padding: 0.75rem 0.5rem;
    white-space: normal;
}

/* a rule between cards so it is clear where one product ends and the next begins */
.ki-related-card + .ki-related-card {
    border-top: 1px solid var(--bs-border-color);
}

/* a definite box, not height:auto - the menu is display:none until opened, and an
   unloaded lazy image with no intrinsic size would sit at 0x0 and so never come into
   view to load. A fixed height also keeps every card the same size. */
.ki-related-card .ki-related-media {
    display: block;
    margin: 0 auto 0.5rem auto;
    width: 100%;
    height: 140px;
    object-fit: contain;
}

.ki-related-card .ki-related-title {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
}

.ki-activity-thumbnail {
    height: auto;
    max-width: 64px;
}

input[type="checkbox"] {
    height: 25px;
    width: 25px;
}

.carousel-fluid {
    width: 100%;
    min-width: 100%;
}

.carousel-item-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.carousel-item-img-min {
    height: var( --ki-card-media-item-max-height);
    max-height: var( --ki-card-media-item-max-height);
    max-width: var(--ki-card-media-item-max-width);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.ki-psp-form {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width:320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    .ki-search-main {
        width: auto;
    }
}

@media (min-width:481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets 600 or 640 wide. */
    .ki-search-main {
        width: auto;
    }
}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .ki-search-main {
        width: auto;
        min-width: 400px;
    }
}

@media (min-width:961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .ki-search-main {
        width: auto;
        min-width: 400px;
    }
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
    .ki-search-main {
        width: auto;
        min-width: 400px;
    }
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */

    .ki-search-main {
        width: auto;
        min-width: 400px;
    }


    .ki-dropdown-menu-scroller {
        margin-left: -300%;
    }
}

/* The search stops holding a floor once it has company. Below xl the nav band is
   just logo, search and burger, so the 400px above is free money. From xl up
   (navbar-expand-xl) the whole item row joins it, and a floor there is what
   pushes the row past the band: the form is already allowed to shrink
   (flex: 0 1 auto), it is the input's own min-width that refuses.

   So from 1200 up the input asks for 400px and gives it back as the row needs
   it, which is what a flex item does once min-width stops blocking it. The
   search then sizes itself to whatever the items leave - no breakpoint has to
   guess a number, and a site that adds a nav button or a longer account name
   costs the search width instead of breaking the band. */
@media (min-width: 1200px) {
    .ki-cms-nav form[name="search-main"] {
        min-width: 0;
    }

    .ki-cms-nav .ki-search-main {
        min-width: 0;
        width: 400px;
        flex: 0 1 auto;
    }
}

/* blob list block | document / catalogue grid */
.ki-blob-grid {
    display: grid;
    grid-template-columns: repeat(var(--ki-blob-cols, 4), minmax(0, 1fr));
    gap: 1rem;
}

.ki-blob-cols-2 {
    --ki-blob-cols: 2;
}

.ki-blob-cols-4 {
    --ki-blob-cols: 4;
}

.ki-blob-cols-6 {
    --ki-blob-cols: 6;
}

.ki-blob-grid > .view-record {
    min-width: 0;
}

.ki-blob-item {
    margin: 0;
}

.ki-blob-item embed {
    width: 100%;
}

.ki-embed-blob {
    width: 100%;
    height: var(--ki-embed-blob-height);
}

@media (max-width: 991.98px) {
    .ki-blob-grid {
        --ki-blob-cols: 2 !important;
    }
}

@media (max-width: 575.98px) {
    .ki-blob-grid {
        --ki-blob-cols: 1 !important;
    }
}

/* password show / hide toggle | injected by koala-impala-account.js, so blocks already
   designed into a page get it without their markup changing */
.ki-psw-field {
    position: relative;
}

.ki-psw-field > input {
    padding-right: 2.75rem;
}

.ki-psw-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 5; /* over the floating label */
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

    .ki-psw-toggle:hover,
    .ki-psw-toggle:focus {
        opacity: 1;
    }

    .ki-psw-toggle span {
        font-size: 1.25rem;
    }