/* ============================================================================
BadgeSource — Builder catalog grid overrides
----------------------------------------------------------------------------
Loaded INSIDE the build.blackinton.com iframe via the tenant's UrlCSS
setting (PSCSettings.UrlCSS). Because it loads after the builder's own
/css/Pages/Catalog.css, these rules win the cascade. This file ONLY restyles
the catalog grid (Catalog.cshtml + CatalogBrowseModel tile markup); it does
not change any builder behaviour.
Goal: make the catalog grid resemble the native WooCommerce/Storefront
product grid — 3 columns, large centered badge images, a flat look (no white
card box / shadow), and the SKU title shown BELOW the image.
Tile markup it targets (from CatalogBrowseModel.RenderProductsAsync /
RenderCatalogs):
NOTE: prices and a "Select options" button (present on the native WooCommerce
grid) are NOT part of the catalog tile data, so they cannot be added via CSS.
This file matches the LAYOUT, SIZING, FLAT STYLE and TITLE-BELOW-IMAGE look.
========================================================================== */
/* ---- Grid container: center the row, comfortable gaps ------------------- */
.selector-categories.d-flex.flex-wrap {
justify-content: flex-start;
gap: 8px 0;
}
/* ---- Tile: flat (kill the white card box + shadow), centered ----
The builder sets a white background + big drop shadow + fixed 250px height
on .category.item-wrapper. Flatten it. We keep a FIXED tile height (rather
than auto) so the grid geometry is deterministic: the builder measures the
tile/observer box to size the iframe, and a fixed height guarantees that box
already includes the below-image title before any measurement runs, so the
title can't end up below the posted iframe height and clip. 200px image box
+ ~70px for title+dimensions+padding = 280px. */
.item-wrapper.category,
.category.item-wrapper {
background-color: transparent !important;
box-shadow: none !important;
height: 280px !important;
padding: 14px 12px !important;
overflow: visible !important;
box-sizing: border-box;
}
.item-wrapper.category:hover,
.category.item-wrapper:hover {
background-color: transparent !important;
}
/* ---- 3 columns at desktop widths -----------------------------------------
Override the builder's 18%–23% width media queries (they use !important, so
we must too). ~31% leaves room for the gaps → 3 across. */
@media (min-width: 720px) {
.category.item-wrapper {
width: 31% !important;
}
}
@media (min-width: 900px) {
.category.item-wrapper {
width: 31% !important;
}
}
@media (min-width: 1000px) {
.category.item-wrapper {
width: 31% !important;
}
}
/* 2 columns on small tablets, 1 on phones — keep it readable. */
@media (min-width: 420px) and (max-width: 719px) {
.category.item-wrapper {
width: 47% !important;
}
}
@media (max-width: 419px) {
.category.item-wrapper {
width: 100% !important;
}
}
/* ---- Make the anchor a vertical flex column so we can reorder children ----
Markup order is title → image → dimensions; flex `order` lets us show it as
image → title → dimensions (title BELOW the image, like the native grid). */
a.category-item,
a.product-item {
display: flex !important;
flex-direction: column;
align-items: center;
width: 100% !important;
text-decoration: none !important;
}
.category.item-wrapper .image-container { order: 1; }
.category.item-wrapper .title { order: 2; }
.category.item-wrapper .dimensions { order: 3; }
/* ---- Big centered badge image -------------------------------------------
FIXED height (not min-height): the builder measures .catalog-wrapper to size
the iframe, and with the title moved BELOW the image (flex order), a
min-height/auto image box means the tile is SHORT before images load and
TALLER after — so the builder posts the short pre-load height and the
now-lower titles get clipped under the footer. A FIXED image-box height makes
each tile the same height before and after the image loads, so the builder's
measurement is correct and nothing clips. The image scales to fit inside. */
.category.item-wrapper .image-container {
height: 200px !important;
min-height: 200px !important;
max-height: 200px !important;
width: 100% !important;
max-width: 100% !important;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0 10px 0 !important;
box-sizing: border-box;
}
.category.item-wrapper .image-container img {
max-height: 184px;
max-width: 100%;
width: auto !important;
height: auto;
margin: auto;
}
/* ---- Title (SKU / category name) below the image -------------------------
Native product links are a medium blue, not heavy uppercase. Soften the
builder's 800-weight uppercase heading toward that look while keeping the
brand navy. */
.category.item-wrapper .title {
text-transform: none !important;
font-weight: 600 !important;
font-size: 1.05rem !important;
line-height: 1.4 !important;
color: #2874A6 !important;
text-align: center;
padding: 4px 0 0 0 !important;
}
/* ---- Dimensions caption: quieter, below the title ------------------------ */
.category.item-wrapper .dimensions {
font-weight: 500 !important;
font-size: 0.9rem !important;
color: #5a6b78 !important;
text-align: center;
padding-top: 2px !important;
}
/* ---- Optional: tidy the catalog header / search to match the calmer look - */
.catalog-header .input-group {
max-width: 520px;
}
/* ============================================================================
Catalog search → match the Storefront "Search products…" field
----------------------------------------------------------------------------
Builder markup (Catalog.cshtml):
Target (Storefront): a flat, light-grey, rounded field with a magnifier glyph
INSIDE on the left and NO separate blue button.
Search still fires: the input's `change` event (Enter / blur) triggers
Catalog_SearchKeyword, so hiding the button does not break search.
========================================================================== */
/* Hide the blue search button entirely. */
.catalog-header .input-group .keywords-btn {
display: none !important;
}
/* Let the field own the full width of the group (no button slot). */
.catalog-header .input-group {
flex-wrap: nowrap;
}
/* Flat grey rounded field with a left-inset magnifier icon. */
.catalog-header .input-group .selector-keywords.form-control {
width: 100% !important;
border: 1px solid #e2e2e2 !important;
border-radius: 6px !important;
background-color: #f7f7f7 !important;
box-shadow: none !important;
padding: 12px 14px 12px 42px !important; /* left room for the icon */
font-size: 1rem !important;
color: #5a6b78 !important;
/* Magnifier glyph, inline SVG so there's no external asset dependency. */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 16px 16px !important;
}
.catalog-header .input-group .selector-keywords.form-control::placeholder {
color: #8a8a8a !important;
opacity: 1;
}
.catalog-header .input-group .selector-keywords.form-control:focus {
border-color: #c9c9c9 !important;
background-color: #fff !important;
outline: none !important;
}
/* ── Storefront breadcrumb styling ───────────────────────────── */
.breadcrumb {
font-size: 0.875rem;
}
.breadcrumb-item a, .bc-nav {
color: #666;
}