/*
 * Box Staplers & Staples is the canonical category/search browse surface:
 * 220px rail, right-column heading, five compact catalog cards, thin rules.
 */
:root {
  --browse-reference-navy: #24397E;
  --browse-reference-hover: #1D2E66;
  --browse-reference-text: #4C4D57;
  --browse-reference-muted: #737681;
  --browse-reference-line: #d9dee2;
  --browse-reference-orange: #FF5C00;
}

.l3-page,
#searchResultsRoot {
  color: var(--browse-reference-text) !important;
  background: #fff !important;
}
.l3-page a,
#searchResultsRoot a { color: var(--browse-reference-navy); }
.l3-page a:hover,
#searchResultsRoot a:hover { color: var(--browse-reference-hover); }

/* Category leaf: retain the functional table/list view while presenting its
   default grid as five actual, bordered product cards. */
.l3-page { padding: 16px 24px 60px !important; }
.l3-shell,
.l3-shell.no-related {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 22px !important;
}
.l3-sidebar {
  width: auto !important;
  border: 1px solid var(--browse-reference-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.l3-side-block { border-color: var(--browse-reference-line) !important; }
.l3-side-title,
.l3-page .l3-h1,
.l3-products-heading h2 { color: var(--browse-reference-text) !important; }
.l3-side-title.has-chevron::after { color: var(--browse-reference-navy) !important; }
.l3-side-link,
.l3-facet-option { color: var(--browse-reference-text) !important; }
.l3-side-link { color: var(--browse-reference-navy) !important; }
.l3-facet-option input { accent-color: var(--browse-reference-navy) !important; }
.l3-page .l3-h1 {
  margin: 20px 0 5px !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: -.025em !important;
}
.l3-page .l3-count,
.l3-page .l3-desc { color: var(--browse-reference-muted) !important; }
.l3-page .l3-desc { margin-bottom: 18px; }

.l3-related-inline { margin: 0 0 24px !important; }
.l3-related-inline h2,
.l3-strip-heading {
  color: var(--browse-reference-text) !important;
  font-size: 13px !important;
}
.l3-related-inline-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  border-color: var(--browse-reference-line) !important;
}
.l3-related-inline-card {
  min-height: 150px !important;
  padding: 10px 8px !important;
  color: var(--browse-reference-navy) !important;
  border-color: var(--browse-reference-line) !important;
  background: #fff !important;
}
.l3-related-inline-card:hover {
  background: #fafbfc !important;
  box-shadow: inset 0 -3px 0 var(--browse-reference-navy) !important;
}
.l3-related-inline-img { width: 100%; height: 112px; }
.l3-related-inline-card > span:last-child { color: var(--browse-reference-navy) !important; }

.l3-filter-bar {
  border-top: 1px solid var(--browse-reference-line);
  border-bottom: 1px solid var(--browse-reference-line);
  padding: 8px 0 !important;
  margin-bottom: 12px !important;
}
.l3-result-count { color: var(--browse-reference-text) !important; }
.l3-filter-bar .sort-select {
  min-height: 36px;
  border-color: var(--browse-reference-line) !important;
  border-radius: 0 !important;
}
.l3-filter-bar .vt-btn { color: var(--browse-reference-muted) !important; }
.l3-filter-bar .vt-btn.active { color: var(--browse-reference-navy) !important; }
.l3-products-heading {
  margin: 0 0 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--browse-reference-line);
}
.l3-products-heading h2 { margin: 0; font-size: 16px; font-weight: 700; }
.l3-prod-section { border: 0 !important; overflow: visible !important; }
.l3-section-head { background: #fff !important; }
.l3-section-head h2 { color: var(--browse-reference-text) !important; }
#l3ListView.leaf-grid-mode {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#l3ListView.leaf-grid-mode .l3-prod-section { display: contents !important; }
#l3ListView.leaf-grid-mode .l3-section-head { display: none !important; }
#l3ListView.leaf-grid-mode table.prod-table { display: contents; }
#l3ListView.leaf-grid-mode table.prod-table thead { display: none; }
#l3ListView.leaf-grid-mode table.prod-table tbody { display: contents; }
#l3ListView.leaf-grid-mode table.prod-table tbody tr.l3-row {
  display: grid;
  min-width: 0;
  align-content: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "photo compare"
    "title title"
    "attribute attribute"
    "pack pack"
    "model model"
    "availability availability"
    "price price"
    "purchase purchase";
  padding: 10px 10px 13px;
  border: 1px solid var(--browse-reference-line) !important;
  background: #fff !important;
}
#l3ListView.leaf-grid-mode table.prod-table tbody tr.l3-row:hover {
  border-color: #b8bfd0 !important;
  background: #fff !important;
}
#l3ListView.leaf-grid-mode table.prod-table tbody tr.l3-row.l3-hidden { display: none !important; }
#l3ListView.leaf-grid-mode table.prod-table td {
  display: block;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow-wrap: anywhere;
}
#l3ListView.leaf-grid-mode td.l3-chk { grid-area: compare; z-index: 1; display: flex; justify-content: flex-end; padding: 0 0 4px; }
#l3ListView.leaf-grid-mode td.l3-chk input { width: 15px; height: 15px; margin: 0; }
#l3ListView.leaf-grid-mode td.l3-img { grid-area: photo; grid-column: 1 / -1; width: 100%; margin: 0 0 8px; }
#l3ListView.leaf-grid-mode td.l3-img a,
#l3ListView.leaf-grid-mode td.l3-img .pimg {
  display: flex; width: 100%; height: 138px; align-items: center;
  justify-content: center; background: #fff; overflow: hidden;
}
#l3ListView.leaf-grid-mode td.l3-img .pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
#l3ListView.leaf-grid-mode td.l3-name {
  grid-area: title; margin-bottom: 7px; color: var(--browse-reference-text) !important;
  font-size: 12px; font-weight: 700; line-height: 1.4;
}
#l3ListView.leaf-grid-mode td.l3-name a { color: var(--browse-reference-text) !important; }
#l3ListView.leaf-grid-mode .l3-brand-sm { color: var(--browse-reference-muted); font-size: 10px; }
#l3ListView.leaf-grid-mode .l3-brand-sm,
#l3ListView.leaf-grid-mode .cp-no-price { display: block !important; }
#l3ListView.leaf-grid-mode td.l3-attr { grid-area: attribute; }
#l3ListView.leaf-grid-mode td.l3-pack { grid-area: pack; }
#l3ListView.leaf-grid-mode td.l3-model { grid-area: model; color: var(--browse-reference-muted); font-size: 10px; }
#l3ListView.leaf-grid-mode td.l3-avail { grid-area: availability; }
#l3ListView.leaf-grid-mode td.l3-price {
  grid-area: price; margin-top: 6px; color: var(--browse-reference-text) !important;
  font-size: 14px; font-weight: 700;
}
#l3ListView.leaf-grid-mode td.l3-add { grid-area: purchase; margin-top: 8px; }
#l3ListView.leaf-grid-mode td.l3-attr::before,
#l3ListView.leaf-grid-mode td.l3-pack::before,
#l3ListView.leaf-grid-mode td.l3-model::before,
#l3ListView.leaf-grid-mode td.l3-avail::before,
#l3ListView.leaf-grid-mode td.l3-price::before {
  content: attr(data-label) ": "; color: var(--browse-reference-muted);
  font-size: 10px; font-weight: 600;
}
#l3ListView.leaf-grid-mode td.l3-chk::before,
#l3ListView.leaf-grid-mode td.l3-img::before,
#l3ListView.leaf-grid-mode td.l3-name::before,
#l3ListView.leaf-grid-mode td.l3-add::before { display: none; }
#l3ListView.leaf-grid-mode .l3-add-btn {
  width: 100%; min-height: 36px; border-radius: 0 !important;
  background: var(--browse-reference-navy) !important; color: #fff !important;
}
#l3ListView.leaf-grid-mode .l3-add-btn:hover { background: var(--browse-reference-hover) !important; }
#l3ListView.leaf-grid-mode .show-all-row { grid-column: 1 / -1; order: 999999; }
#l3ListView.leaf-grid-mode .show-all-btn { border-color: var(--browse-reference-navy) !important; color: var(--browse-reference-navy) !important; }

/* Search shares the category frame and control/card geometry. */
#searchResultsRoot {
  width: 100%;
  max-width: none;
  padding: 0 0 54px !important;
}
#searchResultsRoot > .srp-crumb {
   max-width: none !important;
  margin: 0 auto !important;
  padding: 16px 24px 0 !important;
  color: var(--browse-reference-muted) !important;
}
#searchResultsRoot > .srp-crumb a { color: var(--browse-reference-navy) !important; }
.srp-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: start;
  gap: 22px !important;
  max-width: none;
  margin: 0 auto !important;
  padding: 18px 24px 54px !important;
}
#searchResultsRoot .srp-sidebar {
  display: block;
  width: auto !important;
  max-height: none;
  position: static;
  overflow: visible;
  border: 1px solid var(--browse-reference-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
#searchResultsRoot .srp-filter-bar {
  display: block;
  min-height: 0;
  padding: 14px 13px;
  border: 0;
  background: #fff;
}
#searchResultsRoot .srp-filter-label {
  display: block;
  margin: 0 0 10px;
  color: var(--browse-reference-text);
  font-size: 12px;
  font-weight: 800;
}
#searchResultsRoot .srp-filter-pills { display: block; }
#searchResultsRoot .srp-filter-pills .filter-group {
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--browse-reference-line) !important;
}
#searchResultsRoot .srp-filter-pills .filter-head {
  width: 100%;
  min-height: 22px;
  justify-content: space-between;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: #fff !important;
  color: var(--browse-reference-text) !important;
  font-size: 12px !important;
  text-align: left;
}
#searchResultsRoot .srp-filter-pills .filter-head:hover,
#searchResultsRoot .srp-filter-pills .filter-group.is-open .filter-head {
  background: #fff !important;
}
#searchResultsRoot .srp-filter-pills .filter-head svg { stroke: var(--browse-reference-navy) !important; }
#searchResultsRoot .srp-filter-pills .filter-body {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  max-height: 190px;
  margin-top: 9px !important;
  padding: 0;
  border: 0;
  overflow: auto;
  box-shadow: none;
}
#searchResultsRoot .srp-filter-pills .filter-body.hidden { display: none; }
#searchResultsRoot .srp-filter-pills .filter-group.is-open .filter-body.hidden { display:block; }
#searchResultsRoot .srp-filter-pills .filter-group:not(.is-open) .filter-body { display:none; }
#searchResultsRoot .srp-filter-pills .filter-option {
  display: flex;
  min-height: 25px;
  margin: 0;
  padding: 3px 0;
  color: var(--browse-reference-text);
  font-size: 11.5px;
}
#searchResultsRoot .srp-filter-pills .filter-option input { accent-color: var(--browse-reference-navy); }
#searchResultsRoot .srp-filter-pills .filter-search {
  width: 100%;
  min-height: 34px;
  margin: 0 0 7px;
  padding: 6px 8px;
  border: 1px solid var(--browse-reference-line);
  border-radius: 0;
  font-size: 12px;
}
#searchResultsRoot .srp-filter-count {
  display: block;
  margin: 5px 0 0;
  color: var(--browse-reference-muted);
  font-size: 10px;
}
#searchResultsRoot .srp-main { min-width: 0; padding: 0 !important; }
#searchResultsRoot .srp-title-band {
  width: auto;
  margin: 0;
  padding: 20px 0 12px;
  background: #fff;
}
#searchResultsRoot .srp-title-band .srp-heading { max-width: none; margin: 0 !important; padding: 0 !important; }
#searchResultsRoot .srp-title-band .srp-heading h1 {
  color: var(--browse-reference-text) !important;
  font-size: 36px !important;
  font-weight: 700;
  letter-spacing: -.025em;
}
#searchResultsRoot .srp-title-band .srp-count {
  display: block !important;
  margin: 5px 0 0 !important;
  color: var(--browse-reference-muted) !important;
  font-size: 11.5px !important;
}
#searchResultsRoot .srp-discovery { display: block !important; margin: 0 0 22px; }
#searchResultsRoot .srp-brand-tiles,
#searchResultsRoot .srp-cat-tiles { margin: 0 0 18px !important; }
#searchResultsRoot .srp-brand-tiles-hd,
#searchResultsRoot .srp-cat-tiles-hd {
  margin: 0 0 9px !important;
  color: var(--browse-reference-text) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#searchResultsRoot .srp-cat-grid,
#searchResultsRoot .srp-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--browse-reference-line);
  border-left: 1px solid var(--browse-reference-line);
}
#searchResultsRoot .srp-cat-tile,
#searchResultsRoot .srp-brand-tile {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 132px !important;
  padding: 9px 7px !important;
  border: 0 !important;
  border-right: 1px solid var(--browse-reference-line) !important;
  border-bottom: 1px solid var(--browse-reference-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}
#searchResultsRoot .srp-cat-tile { flex-direction: column; gap: 7px; }
#searchResultsRoot .srp-cat-tile:hover,
#searchResultsRoot .srp-brand-tile:hover {
  background: #fafbfc !important;
  box-shadow: inset 0 -3px 0 var(--browse-reference-navy) !important;
}
#searchResultsRoot .srp-cat-tile-img,
#searchResultsRoot .srp-cat-tile-fallback { width: 76px; height: 86px; }
#searchResultsRoot .srp-cat-tile-img img { width: 100%; height: 100%; object-fit: contain; }
#searchResultsRoot .srp-cat-tile-name,
#searchResultsRoot .srp-brand-tile-name { color: var(--browse-reference-navy) !important; font-size: 11px !important; }
#searchResultsRoot .srp-brand-tile-logo { height: 76px; }
#searchResultsRoot .srp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 8px 0 !important;
  border-top: 1px solid var(--browse-reference-line) !important;
  border-bottom: 1px solid var(--browse-reference-line) !important;
}
#searchResultsRoot .srp-toolbar-count { margin-right: auto; color: var(--browse-reference-text); }
#searchResultsRoot .srp-view-toggle { display: flex !important; }
#searchResultsRoot .srp-vt { color: var(--browse-reference-muted) !important; }
#searchResultsRoot .srp-vt.active { color: var(--browse-reference-navy) !important; background: #f5f6f8; border-color: var(--browse-reference-line); }
#searchResultsRoot .srp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
#searchResultsRoot .srp-card {
  min-width: 0;
  padding: 10px !important;
  border: 1px solid var(--browse-reference-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--browse-reference-text) !important;
  box-shadow: none !important;
}
#searchResultsRoot .srp-card:hover {
  background: #fff !important;
  border-color: #b8bfd0 !important;
  box-shadow: 0 3px 12px rgb(35 48 75 / 8%) !important;
  transform: none !important;
}
#searchResultsRoot .srp-img { height: 138px !important; }
#searchResultsRoot .srp-name,
#searchResultsRoot .srp-model,
#searchResultsRoot .srp-price { color: var(--browse-reference-text) !important; }
#searchResultsRoot .srp-name { font-size: 12px !important; }
#searchResultsRoot .srp-model { color: var(--browse-reference-muted) !important; }
#searchResultsRoot .srp-cart-row .srp-add-btn,
#searchResultsRoot .srp-list-add,
#searchResultsRoot .srp-pagination button.active {
  background: var(--browse-reference-navy) !important;
  border-color: var(--browse-reference-navy) !important;
  border-radius: 0 !important;
}
#searchResultsRoot .srp-cart-row .srp-add-btn:hover,
#searchResultsRoot .srp-list-add:hover { background: var(--browse-reference-hover) !important; }
#searchResultsRoot .srp-list-card {
  border: 1px solid var(--browse-reference-line) !important;
  border-radius: 0 !important;
}
#searchResultsRoot .srp-active-filters:not([hidden]) { order: 5; width: 100%; }
#searchResultsRoot .srp-filter-chip { border-color: var(--browse-reference-line); border-radius: 0; background: #f8f8f9; color: var(--browse-reference-text); }
#searchResultsRoot .srp-clear-filters { color: var(--browse-reference-navy); }

@media (max-width: 1100px) {
  #l3ListView.leaf-grid-mode,
  #searchResultsRoot .srp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .l3-related-inline-list,
  #searchResultsRoot .srp-cat-grid,
  #searchResultsRoot .srp-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .l3-page { padding: 14px 16px 42px !important; }
  .l3-shell,
  .l3-shell.no-related { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .l3-sidebar { display: none !important; grid-column: 1; grid-row: 2; margin: 0 0 14px; }
  .l3-sidebar.mobile-open { display: block !important; }
  .l3-mobile-filter-toggle { display: block !important; grid-column: 1; grid-row: 1; }
  .l3-center { grid-column: 1; grid-row: 3; }
  #l3ListView.leaf-grid-mode,
  #searchResultsRoot .srp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .l3-related-inline-list,
  #searchResultsRoot .srp-cat-grid,
  #searchResultsRoot .srp-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #searchResultsRoot > .srp-crumb { padding: 13px 16px 0 !important; }
  .srp-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 16px 38px !important; }
  #searchResultsRoot .srp-mobile-filter-toggle { display: block !important; margin: 10px 0 0; }
  #searchResultsRoot .srp-sidebar { display: none; grid-column: 1; grid-row: 2; margin: 0 0 16px; }
  #searchResultsRoot .srp-sidebar.mobile-open { display: block; }
  #searchResultsRoot .srp-main { grid-column: 1; grid-row: 3; }
  #searchResultsRoot .srp-title-band { padding: 16px 0 12px; }
  #searchResultsRoot .srp-title-band .srp-heading h1 { font-size: 24px !important; }
  #searchResultsRoot .srp-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #searchResultsRoot .srp-toolbar-count { grid-column: 1; }
  #searchResultsRoot .srp-view-toggle { grid-column: 2; }
  #searchResultsRoot .srp-sort-wrap { grid-column: 1 / -1; justify-content: space-between; }
  #searchResultsRoot .srp-active-filters:not([hidden]) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  #l3ListView.leaf-grid-mode,
  #searchResultsRoot .srp-grid { gap: 9px !important; }
  #l3ListView.leaf-grid-mode td.l3-img a,
  #l3ListView.leaf-grid-mode td.l3-img .pimg { height: 118px; }
  #searchResultsRoot .srp-card { padding: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .l3-related-inline-card,
  #searchResultsRoot .srp-card { transition: none !important; }
}
@media (max-width:768px) {
  body.storefront-clean .l3-page h1.l3-h1,
  #searchResultsRoot .srp-title-band .srp-heading h1 { font-size:22px !important; }
}