/* store-monotone.css — flatten every UI accent color to a single ink palette
   so the site reads as one calm surface. IMAGES and content SVGs are left
   alone (product art, blueprints, icons keep their colors). */

:root {
  --mono-ink:   #1a1a1a;
  --mono-mid:   #575757;
  --mono-mut:   #8a8a8a;
  --mono-line:  #d5d9dd;
  --mono-line2: #e2e6ec;
  --mono-plate: #ffffff;
  --mono-bg:    #f4f6f8;
  --mono-hover: #333333;
}

/* ─── Links & default text ──────────────────────────────────────────── */
a,
.product-item-link,
.action.primary,
.action.tocart {
  color: var(--mono-ink) !important;
}
a:hover, a:focus,
.product-item-link:hover {
  color: var(--mono-hover) !important;
}

/* Buttons (Magento Luma "action primary") — dark ink plates */
.action.primary,
.action.tocart {
  background: var(--mono-ink) !important;
  border-color: var(--mono-ink) !important;
  color: #ffffff !important;
}
.action.primary:hover,
.action.tocart:hover {
  background: var(--mono-hover) !important;
  border-color: var(--mono-hover) !important;
}

/* Prices — subtle, all one color */
.price, .price-container .price, .old-price, .special-price,
[class*="price-final_price"] .price {
  color: var(--mono-ink) !important;
}
.old-price .price {
  color: var(--mono-mut) !important;
  text-decoration: line-through;
}

/* ─── Half-off sale banner (was blue) ───────────────────────────────── */
.crione-sale-ribbon {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.25) !important;
}
.crione-sale-ribbon b { color: #ffffff !important; }

/* ─── My header finder chips ────────────────────────────────────────── */
#cri-finder-links a {
  color: var(--mono-ink) !important;
  border-color: var(--mono-line) !important;
  background: var(--mono-plate) !important;
}
#cri-finder-links a:hover {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
  border-color: var(--mono-ink) !important;
}

/* ─── IC Finder + Medicine Finder facet chips ───────────────────────── */
.chip {
  color: var(--mono-ink) !important;
  border-color: var(--mono-line) !important;
  background: var(--mono-plate) !important;
}
.chip:hover { border-color: var(--mono-ink) !important; }
.chip.on {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
  border-color: var(--mono-ink) !important;
}
.chip.on .chip-n, .chip-n { color: inherit !important; opacity: .7; }
/* Nuke FLOPS-tier tinted chips (cls-yotta, cls-zetta, cls-exa, cls-peta) */
.chip[class*="cls-"] { color: var(--mono-ink) !important; }
.chip.on[class*="cls-"] { color: #fff !important; }

/* Finder "card" (list result) hover accent */
a.card,
.crione-rand-block a.card {
  border-color: var(--mono-line) !important;
}
a.card:hover,
.crione-rand-block a.card:hover {
  border-color: var(--mono-ink) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.10) !important;
}

/* Random-catalog strip prices/labels */
.crione-rand-block .price,
.crione-rand-block .name,
.crione-rand-block h3 { color: var(--mono-ink) !important; }
.crione-rand-block .reroll {
  color: var(--mono-ink) !important;
  border-color: var(--mono-line) !important;
}
.crione-rand-block .reroll:hover {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
}

/* Explore-the-catalog tag cloud beside review form */
.crione-review-tagcloud a {
  color: var(--mono-ink) !important;
}
.crione-review-tagcloud a:hover {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
}
.crione-review-tagcloud .t1,
.crione-review-tagcloud .t2,
.crione-review-tagcloud .t3,
.crione-review-tagcloud .t4,
.crione-review-tagcloud .t5,
.crione-review-tagcloud .t6 {
  color: var(--mono-ink) !important;
  font-weight: 400;
}
.crione-review-tagcloud .t5,
.crione-review-tagcloud .t6 { font-weight: 700; }
.crione-review-tagcloud h3 { color: var(--mono-ink) !important; }

/* Related-products description hydration cards */
.block.related .crione-related-desc { color: var(--mono-mid) !important; }
.block.related li.product-item { border-color: var(--mono-line) !important; }

/* Category flagship cards on the homepage (kept for context if reused) */
.bp-card, .bp-hero a { color: var(--mono-ink) !important; }

/* Shopping-tab curated cards in /search/ */
.shop-card { border-color: var(--mono-line) !important; }
.shop-card:hover { border-color: var(--mono-ink) !important; }
.shop-name, .shop-price { color: var(--mono-ink) !important; }
.shop-pager a { color: var(--mono-ink) !important; border-color: var(--mono-line) !important; }
.shop-pager a:hover, .shop-pager span {
  background: var(--mono-ink) !important;
  color: #ffffff !important;
  border-color: var(--mono-ink) !important;
}

/* Sort dropdowns get grey borders */
select { border-color: var(--mono-line) !important; }

/* Search page facet chips (existing tabs / filters) */
.filter-tab, .tab-btn { color: var(--mono-ink) !important; }
.filter-tab.active, .tab-btn.active {
  background: var(--mono-ink) !important;
  color: #fff !important;
  border-color: var(--mono-ink) !important;
}

/* Highlighted matches in search results — subtle background instead of blue */
mark { background: #fff3a1 !important; color: var(--mono-ink) !important; }

/* Homepage essay title accent (was blue "half") — go monotone */
#halfoff-essay h2 span { color: var(--mono-ink) !important; }

/* Beach-ball links & tag cloud on homepage */
.cri-tagcloud-section a { color: var(--mono-ink) !important; }
.cri-tagcloud-section a:hover { background: var(--mono-ink) !important; color: #fff !important; }

/* Kill the blue focus outline in favor of ink */
:focus-visible { outline: 2px solid var(--mono-ink) !important; outline-offset: 2px; }

/* Preserve images and content SVGs — do NOT recolor <img>, product galleries,
   or the 50¢ homepage SVG seal (which is content, not chrome). */
img, svg.content, .gallery-placeholder, .product-image-photo { filter: none !important; }