/*
 * 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;
  }
}

/* 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,
.cimm_category > .searchMatchPaginatnEncl .pgnation svg {
  width: 18px;
  height: 18px;
}
#cimm_ControlsBlock .pgnation svg path,
.cimm_category > .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 ===== */
.cimm_category > .searchMatchPaginatnEncl .pgnation {
  justify-content: center !important;
  padding-top: 32px !important;
}
.cimm_category > .searchMatchPaginatnEncl .pagebarUTH {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.cimm_category > .searchMatchPaginatnEncl .pgnation a,
.cimm_category > .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;
}
.cimm_category > .searchMatchPaginatnEncl .pgnation a:hover {
  border-color: #9CA3AF;
  background: #F9FAFB;
}
.cimm_category > .searchMatchPaginatnEncl .pgnation .this-page {
  background: #F2F4F7;
  border-color: #D1D5DB;
  font-weight: 600;
}

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