/*
 * Regal theme overrides. Loads on every page, after the platform's unilogweb.css.
 * Sticky header and category toolbar classes are set by fs/regalScript.js (see the class list at the top of that file).
 * Some rules need !important to beat platform rules that use it (.btn-primary padding, Bootstrap spacing utilities).
 */
:root {
  --hdr-top-compact: 28px; /* utility bar while scrolled: 26px content + 1px padding top and bottom */
  --hdr-dock: 56px;        /* where the category toolbar docks: 1px under the slim header (~56.7px), so no hairline gap */
}

/* ===== Sticky header =====
   The header is always position:fixed and .cimm_stickyPageWrap keeps its full top padding, so page content never moves. */
#normalHead {
  height: auto !important; /* safeguard: the old platform sticky code (if ever restored) set an inline height here */
  transition: top .3s ease-out, box-shadow .3s ease-out;
}
#normalHead .cimm_header_top,
#normalHead .cimm_header_mid {
  transition: padding .3s ease-out;
}
#normalHead .cimm_logo {
  width: auto;
  transition: height .3s ease-out;
}
#normalHead .cimm_header_mid [data-bs-toggle="dropdown"] > .form-select {
  transition: padding .3s ease-out, line-height .3s ease-out;
}
body.hdr-scrolled #normalHead {
  top: calc(-1 * var(--hdr-top-compact));
  box-shadow: 0 1px 0 rgba(17, 24, 39, .06), 0 4px 16px rgba(17, 24, 39, .06);
}
body.hdr-scrolled.hdr-up #normalHead {
  top: 0;
}
body.hdr-scrolled #normalHead .cimm_header_top {
  padding-top: 1px;
  padding-bottom: 1px;
}
body.hdr-slim #normalHead .cimm_header_mid {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body.hdr-slim #normalHead .cimm_logo {
  height: 44px;
}
/* Signed in: the two-line account box would keep the slim header at 73px; tighten it to the cart button's height. */
body.hdr-slim #normalHead .cimm_header_mid [data-bs-toggle="dropdown"] > .form-select {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 17px;
}

/* Header row: keep logo, search, menu, cart and account on one line from 1200px up. */
@media (min-width: 1200px) {
  #normalHead .cimm_header_mid .cimm_searchWrapper {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  nav.navbar.cimm_nav > ul > li > a {
    padding: 8px 10px;
    font-size: 16px;
  }
  nav.navbar.cimm_nav > ul > li > a.has-children {
    padding: 8px 30px 8px 10px;
  }
  nav.navbar.cimm_nav > ul > li > a.has-children em {
    right: 10px;
  }
}

/* Phones: the slim header's wordmark fades out and its crown slides to the center.
   The overlay starts exactly on logo.png's crown (x 296-392, y 1-80 of 600x323). */
@media (max-width: 767.98px) {
  body.hdr-slim #normalHead .cimm_logo {
    height: 36px;
    opacity: 0;
  }
  #normalHead .cimm_logo {
    transition: height .3s ease-out, opacity .2s ease-out;
  }
  #normalHead .cimm_logoWrap > a[itemprop="url"] {
    position: relative;
  }
  #normalHead .cimm_logoWrap > a[itemprop="url"]::after {
    content: "";
    position: absolute;
    left: 49.3%;
    top: .3%;
    width: 16.2%;
    height: 24.8%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1023.258 846.6223'%3E%3Cpolygon fill='%23ef1d1c' points='101.1072 846.6223 920.9186 846.6223 1023.258 86.5584 707.5359 426.3174 521.0551 0 341.0576 419.8564 0 93.1615 101.1072 846.6223'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: left .35s ease-out, top .35s ease-out, width .35s ease-out, height .35s ease-out, opacity 0s linear .35s;
  }
  body.hdr-slim #normalHead .cimm_logoWrap > a[itemprop="url"]::after {
    left: 26%;
    top: 13%;
    width: 48%;
    height: 74%;
    opacity: 1;
    transition: left .35s ease-out, top .35s ease-out, width .35s ease-out, height .35s ease-out, opacity 0s;
  }
}

/* Narrow phones (under 360px wide, e.g. Safari page zoom at 115-125%): keep the utility bar on one line and the header
   row inside the screen. The header is 22px shorter here (logo 72 -> 56px, utility bar 38 -> 32px), so the space reserved
   above the page content (188px on phones, from unilogweb.css) shrinks to match. 300px is the narrowest width we support. */
@media (max-width: 359.98px) {
  #normalHead .cimm_header_top > .d-flex {
    gap: 12px !important;
  }
  #normalHead .cimm_header_top a,
  #normalHead .cimm_header_top span,
  #normalHead .cimm_header_top button {
    font-size: 12px !important;
    white-space: nowrap;
  }
  #normalHead .cimm_logo {
    height: 56px;
  }
  .cimm_stickyPageWrap {
    padding-top: 168px; /* tallest narrow header, at 300px wide (the smallest width we support) */
  }
}

/* Mobile/tablet filter panel (category pages, under 1200px): a full-screen sheet that must sit above the fixed
   header (z-index 1032), or its Back button is hidden. */
#slideLeft {
  z-index: 1040;
}

/* ===== Category toolbar ===== */
#cimm_ControlsBlock {
  transition: top .3s ease-out;
}
body.hdr-slim #cimm_ControlsBlock {
  top: var(--hdr-dock);
}
body.hdr-slim.hdr-up #cimm_ControlsBlock {
  top: calc(var(--hdr-dock) + var(--hdr-top-compact));
}
#cimm_ControlsBlock .cimm_listGridTopControls {
  overflow: hidden;
  align-items: center !important;
  border-color: #E5E7EB !important;
  border-radius: 8px;
  transition: padding .25s ease-out, box-shadow .25s ease-out;
}
#cimm_ControlsBlock .cimm_listGridTopControls .btn-primary,
#cimm_ControlsBlock .globalclr2,
#cimm_ControlsBlock #stockMyBranchGrid,
#cimm_ControlsBlock .searchMatchPaginatnEncl,
#cimm_ControlsBlock #ItemsperPageForm > span,
#cimm_ControlsBlock #ItemsperPageForm a,
#cimm_ControlsBlock .bgBackground,
#cimm_ControlsBlock .itemView a {
  transition: padding .25s ease-out, margin .25s ease-out, font-size .25s ease-out, color .15s, background-color .15s, border-color .15s;
}

/* Labels */
#cimm_ControlsBlock #stockMyBranchGrid label,
#cimm_ControlsBlock #ItemsperPageForm > span,
#cimm_ControlsBlock .searchMatchPaginatnEncl > span,
#cimm_ControlsBlock .itemView > span {
  font-size: 14px !important;
  font-weight: 500;
  color: #6B7280;
}

/* Items per page and page numbers as small buttons */
#cimm_ControlsBlock #ItemsperPageForm a,
#cimm_ControlsBlock .pgnation a,
#cimm_ControlsBlock .pgnation .this-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin: 0 2px !important;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
}
#cimm_ControlsBlock #ItemsperPageForm a span {
  padding: 0 !important;
  font-size: 14px !important;
}
#cimm_ControlsBlock #ItemsperPageForm a:hover,
#cimm_ControlsBlock .pgnation a:hover {
  background: #F3F4F6;
}
#cimm_ControlsBlock #ItemsperPageForm a.selected,
#cimm_ControlsBlock .pgnation .this-page {
  background: #F2F4F7;
  font-weight: 600;
}
#cimm_ControlsBlock .pgnation svg,
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation svg {
  width: 18px;
  height: 18px;
}
#cimm_ControlsBlock .pgnation svg path,
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation svg path {
  fill: currentColor;
}

/* Grid/list view toggles */
#cimm_ControlsBlock .itemView a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 6px;
}
#cimm_ControlsBlock .itemView a.active {
  background: #F9FAFB;
  border-color: #E5E7EB;
}
#cimm_ControlsBlock .itemView a svg {
  margin: 0 !important;
}

/* Filter button (tablet and phone): outlined, with a funnel icon */
#cimm_ControlsBlock .cimm_listGridTopControls .btn-primary[data-function="slideLeft"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
  border-radius: 6px;
}
#cimm_ControlsBlock .cimm_listGridTopControls .btn-primary[data-function="slideLeft"]:hover {
  border-color: #9CA3AF !important;
}
#cimm_ControlsBlock .cimm_listGridTopControls .btn-primary[data-function="slideLeft"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#cimm_ControlsBlock .cimm_listGridTopControls .btn-primary[data-function="slideLeft"] .glyphicon {
  display: none;
}

/* Compare box only once something is ticked */
#cimm_ControlsBlock:not(.has-compare) .bgBackground {
  display: none !important;
}

/* Tablet and desktop: a divider between Items per page and Page */
@media (min-width: 769px) {
  #cimm_ControlsBlock .searchMatchPaginatnEncl {
    align-items: center;
    margin-left: 12px !important;
    padding-left: 0 !important;
  }
  #cimm_ControlsBlock .searchMatchPaginatnEncl::before {
    content: "";
    width: 1px;
    height: 20px;
    margin-right: 20px;
    background: #E5E7EB;
  }

  /* .is-wrapped: the full toolbar doesn't fit one line, so row 1 is Filter, results, Sort; row 2 is
     Items per page | Page, with View on the right. */
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .cimm_listGridTopControls > div:first-child {
    justify-content: flex-start !important;
    column-gap: 24px;
    row-gap: 12px;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .cimm_listGridTopControls > div:first-child::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .col-lg-auto,
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .bgBackground,
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .searchMatchPaginatnEncl {
    order: 2;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .cimm_listGridTopControls .btn-primary[data-function="slideLeft"] {
    margin-right: 0 !important;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) #stockMyBranchGrid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .searchMatchPaginatnEncl {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #cimm_ControlsBlock.is-wrapped:not(.is-stuck) .itemView {
    align-self: flex-end;
  }
}

/* .is-stuck: slim bar docked under the header. The block keeps its full height (min-height, set by regalScript.js)
   so products don't move; its transparent lower part lets clicks through to the products. */
#cimm_ControlsBlock.is-stuck {
  pointer-events: none;
}
#cimm_ControlsBlock.is-stuck .cimm_listGridTopControls {
  pointer-events: auto;
  padding: 4px 16px;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .06);
}
#cimm_ControlsBlock.is-stuck .cimm_listGridTopControls .btn-primary {
  padding: 3px 12px !important;
  font-size: 14px !important;
  line-height: 20px;
}
#cimm_ControlsBlock.is-stuck .globalclr2 {
  font-size: 14px !important;
}
#cimm_ControlsBlock.is-stuck #stockMyBranchGrid {
  margin: 0 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#cimm_ControlsBlock.is-stuck .searchMatchPaginatnEncl {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
#cimm_ControlsBlock.is-stuck .searchMatchPaginatnEncl::before {
  margin-right: 14px;
}
#cimm_ControlsBlock.is-stuck #ItemsperPageForm > span {
  padding: 0 8px 0 0 !important;
}
#cimm_ControlsBlock.is-stuck .bgBackground {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
#cimm_ControlsBlock.is-tight #ItemsperPageForm {
  display: none !important;
}
/* Rows merge or split during the animation: keep contents pinned to the top so they don't jump. */
#cimm_ControlsBlock.is-reflowing .cimm_listGridTopControls {
  align-items: flex-start !important;
}
#cimm_ControlsBlock.is-measuring,
#cimm_ControlsBlock.is-measuring * {
  transition: none !important;
}

/* Phones (the platform makes the toolbar static at 768px and below): results + Items per page, Filter + Sort,
   page buttons. */
@media (max-width: 768px) {
  #cimm_ControlsBlock .cimm_listGridTopControls {
    padding: 10px 12px !important;
  }
  #cimm_ControlsBlock .cimm_listGridTopControls > div:first-child {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px;
  }
  #cimm_ControlsBlock .cimm_listGridTopControls > div:first-child::after {
    content: "";
    order: -1;
    flex-basis: 100%;
    height: 0;
    margin-top: -8px;
  }
  #cimm_ControlsBlock .globalclr2 {
    order: -2;
    flex: 1 1 auto;
    font-size: 13px !important;
    color: #6B7280;
  }
  #cimm_ControlsBlock .col-lg-auto {
    order: -1;
    margin-left: auto;
  }
  #cimm_ControlsBlock #ItemsperPageForm > span {
    padding: 0 4px 0 0 !important;
    font-size: 13px !important;
  }
  #cimm_ControlsBlock .cimm_listGridTopControls .btn-primary[data-function="slideLeft"] {
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 14px;
  }
  #cimm_ControlsBlock #stockMyBranchGrid {
    flex: 1 1 0;
    min-width: 140px;
    margin: 0 !important;
    padding: 0 !important;
  }
  #cimm_ControlsBlock #stockMyBranchGrid label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  #cimm_ControlsBlock #sortBy {
    width: 100%;
    height: 36px;
  }
  #cimm_ControlsBlock .searchMatchPaginatnEncl {
    order: 1;
    width: 100%;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #cimm_ControlsBlock .pgnation a,
  #cimm_ControlsBlock .pgnation .this-page {
    min-width: 32px;
    height: 32px;
  }
  #cimm_ControlsBlock .bgBackground {
    order: 1;
  }
}

/* ===== Page buttons under the product grid ===== */
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation {
  justify-content: center !important;
  padding-top: 32px !important;
}
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pagebarUTH {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation a,
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation .this-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  color: #374151;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation a:hover {
  border-color: #9CA3AF;
  background: #F9FAFB;
}
:is(.cimm_category, .cimm_mainContentEnclosure) > .searchMatchPaginatnEncl .pgnation .this-page {
  background: #F2F4F7;
  border-color: #D1D5DB;
  font-weight: 600;
}

/* ===== Product grid cards ===== */
#itemBlock > .gridView {
  margin-top: 16px;
}
.listGridContainer .gridView .sessionImg .prodImage {
  height: 176px;
}
.listGridContainer .gridView .prodImage a > img {
  max-height: 160px;
}
.listGridContainer .gridView .sessionDesp {
  padding: 12px 16px 16px;
}
.listGridContainer .gridView .skuInfo {
  margin-top: 0;
  justify-content: flex-start;
}
.listGridContainer .gridView .productTitle {
  display: -webkit-box;
  min-height: 42px;
  margin-bottom: 4px !important;
  overflow: hidden;
  font-size: 16px;
  line-height: 21px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listGridContainer .gridView .productTitle a {
  line-height: inherit;
}
.listGridContainer .gridView .listGridItemDesc {
  height: 40px;
  max-height: 40px;
  margin-bottom: 8px !important;
  font-size: 14px;
  line-height: 20px;
  color: #4B5563;
  -webkit-line-clamp: 2;
}
.listGridContainer .gridView .skuStyle {
  min-height: 36px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: #6B7280;
}
.listGridContainer .gridView .cimm_priceWrap {
  margin: 8px 0 10px;
}
.listGridContainer .gridView .priceSpan,
.listGridContainer .gridView .priceSpan .priceSpanFa {
  font-size: 20px;
  line-height: 28px;
}
.listGridContainer .gridView .priceAddtoCartWrapp .quantity,
.listGridContainer .gridView .priceAddtoCartWrapp .qtySub,
.listGridContainer .gridView .priceAddtoCartWrapp .qtyAdd,
.listGridContainer .gridView .priceAddtoCartWrapp .btn-addtocart {
  height: 38px;
}
.listGridContainer .gridView .priceAddtoCartWrapp .qtySub,
.listGridContainer .gridView .priceAddtoCartWrapp .qtyAdd {
  width: 32px;
  padding: 0;
  color: #4B5563;
}
.listGridContainer .gridView .priceAddtoCartWrapp .quantity {
  width: 40px;
}
.listGridContainer .gridView .priceAddtoCartWrapp [data-select^="addtoCartbtn_"] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.listGridContainer .gridView .priceAddtoCartWrapp .btn-addtocart {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 12px !important;
}
@media (max-width: 768px) {
  .listGridContainer .gridView .priceAddtoCartWrapp .quantity,
  .listGridContainer .gridView .priceAddtoCartWrapp .qtySub,
  .listGridContainer .gridView .priceAddtoCartWrapp .qtyAdd,
  .listGridContainer .gridView .priceAddtoCartWrapp .btn-addtocart {
    height: 44px;
  }
  .listGridContainer .gridView .priceAddtoCartWrapp .qtySub,
  .listGridContainer .gridView .priceAddtoCartWrapp .qtyAdd {
    width: 44px;
  }
}
.listGridContainer .gridView .compareSelectWrap {
  padding-top: 8px;
}
.listGridContainer .gridView .checkToCompare {
  margin-top: 0 !important;
}
/* Compact unit picker (EA/CS) and item flags (e.g. Non-Stock); the flag's size is set inline, hence !important */
.listGridContainer .gridView .cimm_priceWrap select.form-select {
  height: 30px;
  padding: 2px 28px 2px 8px;
  background-position: right 8px center;
  font-size: 14px;
}
.listGridContainer .gridView a[href*="item-flags"] > span {
  height: 20px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
}
.listGridContainer .gridView a[href*="item-flags"] > span > svg {
  width: 12px;
  height: 12px;
}
.listGridContainer .gridView .skuInfo > div:has(> a[href*="item-flags"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Phones: one card per row. Image (with any item flag under it) left; description, Item ID + MPN and price right; buttons full width underneath.
   The supplier title is hidden but its link is stretched over the image and text, so tapping there opens the product. */
@media (max-width: 575.98px) {
  #itemBlock > .gridView {
    flex-basis: 100%;
    min-height: 0;
    margin: 12px 0 0;
  }
  .listGridContainer .gridView .itemInfo_wrap {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px;
  }
  .listGridContainer .gridView .itemInfo_wrap > *,
  .listGridContainer .gridView .priceAddtoCartWrapp > * {
    grid-column: 1 / -1;
  }
  .listGridContainer .gridView .sessionDesp,
  .listGridContainer .gridView .skuInfo,
  .listGridContainer .gridView .priceAddtoCartWrapp {
    display: contents;
  }
  .listGridContainer .gridView .skuInfo > * {
    grid-column: 2;
  }
  .listGridContainer .gridView .itemInfo_wrap > .sessionImg {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
  }
  .listGridContainer .gridView .sessionImg .prodImage {
    height: 112px;
  }
  .listGridContainer .gridView .prodImage a > img {
    max-height: 104px;
    margin: auto;
  }
  .listGridContainer .gridView .skuInfo > .productTitle {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / span 4;
    z-index: 1;
    min-height: 0;
    margin: 0 !important;
  }
  .listGridContainer .gridView .productTitle a {
    display: block;
    height: 100%;
    font-size: 0;
    color: transparent;
  }
  .listGridContainer .gridView .productTitle a:focus-visible {
    outline: 2px solid #EF1D1C;
    outline-offset: -2px;
  }
  /* Item flags sit under the image as icons only (tap one for the explainer modal; the label stays for screen readers) */
  .listGridContainer .gridView .skuInfo > div:has(> a[href*="item-flags"]) {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    margin-top: 116px;
    margin-bottom: 0;
  }
  .listGridContainer .gridView a[href*="item-flags"] > span {
    justify-content: center;
    width: 24px;
    height: 24px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .listGridContainer .gridView a[href*="item-flags"] > span > svg {
    width: 14px;
    height: 14px;
    margin: 0 !important;
  }
  .listGridContainer .gridView .skuInfo > .listGridItemDesc {
    grid-row: 2;
    height: auto;
    max-height: 126px;
    margin-bottom: 4px !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: #111827;
    -webkit-line-clamp: 6;
  }
  .listGridContainer .gridView .skuInfo > .skuStyle {
    display: flex;
    flex-wrap: wrap;
    grid-row: 3;
    column-gap: 12px;
    min-height: 0;
  }
  .listGridContainer .gridView .skuStyle > [class*="productAvail_"] {
    flex-basis: 100%;
  }
  .listGridContainer .gridView .allBranchLink,
  .listGridContainer .gridView a[href*="item-flags"],
  .listGridContainer .gridView .cimm_priceWrap :is(select, a, button, input) {
    position: relative;
    z-index: 2;
  }
  .listGridContainer .gridView .priceAddtoCartWrapp > .cimm_priceWrap {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin: 4px 0 0;
  }
  /* Unit picker (EA/CS) sits under the image (below the flag, if any); the price stays in the text column.
     Fixed places, so nothing moves when the price loads. */
  .listGridContainer .gridView .cimm_priceWrap:has(select),
  .listGridContainer .gridView .cimm_priceWrap:has(select) > .d-flex {
    display: contents !important; /* both carry Bootstrap's .d-flex, which is !important */
  }
  .listGridContainer .gridView .cimm_priceWrap:has(select) > .d-flex > * {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin-top: 4px;
  }
  .listGridContainer .gridView .cimm_priceWrap:has(select) > .d-flex > select {
    grid-column: 1;
    grid-row: 1 / span 4;
    justify-self: start;
    max-width: 100%;
    margin-top: 118px; /* 112px image box + gap; 144px below = + one 24px row of flag icons + 4px gap */
  }
  .listGridContainer .gridView .itemInfo_wrap:has(a[href*="item-flags"]) .cimm_priceWrap > .d-flex > select {
    margin-top: 144px;
  }
  .listGridContainer .gridView .priceAddtoCartWrapp > .d-flex:not(.cimm_priceWrap) {
    margin-top: 12px;
  }
}

/* ===== Item flag modal (opened by fs/regalScript.js) ===== */
.regal-flag-modal .modal-content {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
}
.regal-flag-modal .modal-header,
.regal-flag-modal .modal-footer {
  border-color: #E5E7EB;
}
.regal-flag-modal .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}
.regal-flag-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.regal-flag-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 0;
}
.regal-flag-list li + li {
  border-top: 1px solid #E5E7EB;
}
.regal-flag-list li:first-child {
  padding-top: 0;
}
.regal-flag-list li:last-child {
  padding-bottom: 0;
}
.regal-flag-list p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #374151;
}
.regal-flag-modal .modal-footer .btn {
  border-radius: 6px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  #normalHead,
  #normalHead *,
  #normalHead .cimm_logoWrap > a[itemprop="url"]::after,
  #cimm_ControlsBlock,
  #cimm_ControlsBlock * {
    transition: none !important;
  }
}