/* Product catalogue.
   The layout is the theme's own (.projects-grid / .projects-box / .ot-features-box
   / .project_filters), exactly as Gallery and Portfolio use it — this file only
   fills the gaps the theme has no rule for: normalising the mixed ERP imagery
   and the few catalogue-specific bits of copy. */

/* ---- Grid sizing ---------------------------------------------------------
   The theme floats .project-item and sizes it via .projects-grid.pf_4_cols,
   which assumes .project-item is a DIRECT child of the grid (its masonry
   layout). The catalogue and /portfolio use that same structure, so the only
   thing missing is gutters — Isotope normally supplies them. */
.projects-grid.pf_4_cols .project-item { padding: 0 15px 30px; }

/* The catalogue's own grid (marked .bsg-catalog-grid in products/_grid.blade)
   swaps the theme's plain float layout for real CSS grid. Floats break here
   in a way masonry libraries exist to solve: product names vary in length,
   so some tiles' captions wrap to two lines and are taller than their row
   neighbours — with floats, the next row can't start until it clears the
   TALLEST float still pending, leaving a blank gap under every shorter tile
   in that row. (.project-filter-wrapper and .projects-grid are siblings in
   the markup here, not ancestor/descendant, so the theme's own Isotope init
   — which does `.find('.projects-grid')` from inside .project-filter-wrapper
   — never actually attaches to these grids; they were always plain floats.)
   Grid has no such failure mode: every row's height is just its tallest
   cell, regardless of how any one caption wraps. Scoped to
   .bsg-catalog-grid only, so /portfolio and /gallery keep the theme's
   original float masonry untouched. */
.bsg-catalog-grid.pf_4_cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.bsg-catalog-grid.pf_4_cols .project-item {
    float: none;
    width: auto;
}
.bsg-catalog-grid .grid-sizer { display: none; }

@media (max-width: 1199px) {
    .bsg-catalog-grid.pf_4_cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
    .bsg-catalog-grid.pf_4_cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bsg-catalog-grid.pf_4_cols { grid-template-columns: 1fr; }
}

/* Cabinets-only: more, smaller tiles per row than the default 4-column
   catalogue grid — Quartz/Porcelain keep the default sizing above. */
.bsg-catalog-grid--compact.pf_4_cols { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1199px) {
    .bsg-catalog-grid--compact.pf_4_cols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .bsg-catalog-grid--compact.pf_4_cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .bsg-catalog-grid--compact.pf_4_cols { grid-template-columns: repeat(2, 1fr); }
}

/* /portfolio still wraps items in Bootstrap columns, where the float would
   otherwise shrink-wrap to the image's intrinsic width. */
.projects-grid.row .project-item {
    float: none;
    width: 100%;
    margin-bottom: 30px;
}

/* ---- Imagery -------------------------------------------------------------
   Slab room-sets are square/landscape and crop fine; cabinet doors are tall
   cut-outs (~0.61) that get sliced in half by the theme's default cover crop,
   so those are shown whole on the product photography's own light ground. */
.projects-grid .projects-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.projects-grid .projects-thumbnail img.fit-whole {
    /* Cabinet doors are real product photos, already cropped tight to the door
       (~0.51-0.64 wide:tall) — letterboxing them into a 1:1 square with
       object-fit:contain left uneven amounts of empty ground on either side,
       and pale finishes (white/gray gloss) all but disappeared into it,
       making some tiles read as "bigger" or "smaller" than others. Matching
       the tile's own ratio to the photography and cropping to fill it keeps
       every door rendered at the same visual scale. */
    aspect-ratio: 3 / 5;
    object-fit: cover;
    background-color: #f4f2ef;
}

.ot-features-box .features-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---- Products landing: family cards -------------------------------------- */
.bsg-family-row { margin-top: 40px; }

.bsg-family-row .ot-features-box { margin-bottom: 40px; }

.bsg-family-row .features-box-count {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.bsg-family-row .features-box-desc {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6d6d6d;
}

/* ---- Category page ------------------------------------------------------- */
.bsg-catalog-intro {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
    font-size: 15px;
    line-height: 1.75;
    color: #6d6d6d;
}

/* Product-family navigation. Mirrors the theme's .project_filters bar so it
   reads as part of the same design, but sits on its own dark strip under the
   page header and uses real page links. */
.bsg-cat-nav-wrap {
    background: #1a1a1a;
    padding: 22px 0;
}

.bsg-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsg-cat-nav a {
    display: inline-block;
    padding: 4px 0;
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9f9e9e;
    border-bottom: 2px solid transparent;
    transition: color .25s, border-color .25s;
}

.bsg-cat-nav a:hover { color: #fff; }

.bsg-cat-nav a.selected {
    color: #fff;
    border-bottom-color: #29a5e3;
}

/* Style-line filter bar (cabinet lines). Visually modeled on the theme's own
   .project_filters control, but deliberately NOT wrapped in the theme's own
   .project-filter-wrapper class: that class's JS (scripts.js `updateFilter`)
   assumes .project-item tiles are DESCENDANTS of the wrapper (the classic
   Isotope layout) and, finding none here — this grid is a sibling, built
   server-side, see products/_grid.blade.php's own comment — overwrites
   every .filter-count badge to "0" and swallows the link clicks entirely
   (its handler `return false`s unconditionally). A different wrapper class
   keeps the exact same look while never triggering that code. */
.bsg-style-filter-wrapper .project_filters { margin-bottom: 44px; }
.bsg-style-filter-wrapper .project_filters a.selected { color: #29a5e3; }

.bsg-style-filter-wrapper .project_filters .filter-count {
    /* Override the theme's own .filter-count rule (style.css ~6100), which
       absolute-positions this as a fixed-width 20px corner badge — a "cart
       count" pattern that breaks the moment a count reaches 2 digits: "75"
       wraps into two stacked lines inside that 20px box. Selector here has
       one more class than the theme's (.project_filters li a .filter-count),
       so these properties win on specificity; every one below is a property
       the theme rule sets and must be neutralized. Kept the theme's own
       intent of only showing a count for the active/hovered line — showing
       all 14 at once (one per style) reads as visual noise. */
    position: static;
    width: auto;
    white-space: nowrap;
    text-align: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #29a5e3;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
}

/* Visible only for the selected line (so the current view's count still
   reads at a glance) or on hover (a quick preview before clicking) —
   otherwise hidden, per the theme's own opacity/visibility toggle above. */
.bsg-style-filter-wrapper .project_filters a.selected .filter-count,
.bsg-style-filter-wrapper .project_filters a:hover .filter-count {
    opacity: 1;
    visibility: visible;
}

/* ---- Product detail ------------------------------------------------------ */
.bsg-detail-media {
    background: #f4f2ef;
    margin-bottom: 30px;
}

.bsg-detail-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.bsg-detail-media img.fit-whole {
    object-fit: contain;
    padding: 26px;
}

.bsg-detail-price {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #29a5e3;
}

.bsg-detail-note {
    margin: 0 0 22px;
    font-size: 13px;
    color: #9a9a9a;
}

.bsg-detail-specs {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.bsg-detail-specs li {
    padding: 11px 0;
    border-bottom: 1px solid #ececec;
    font-size: 15px;
}

.bsg-detail-specs li strong {
    display: inline-block;
    min-width: 140px;
    color: #111;
}

.bsg-detail-features { margin-top: 60px; }

.bsg-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 46px;
}

@media (max-width: 767px) { .bsg-feature-list { columns: 1; } }

.bsg-feature-list li {
    position: relative;
    padding: 9px 0 9px 24px;
    font-size: 15px;
    line-height: 1.65;
    break-inside: avoid;
}

.bsg-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 1px;
    background: #29a5e3;
}

/* Live Inventory reuses the same catalogue grid under per-category headings. */
.bsg-live-inventory { margin: 0 0 40px; }
.bsg-live-inventory .bsg-inv-cat-title { margin: 46px 0 22px; font-size: 26px; }
.bsg-live-inventory .bsg-inv-cat-title:first-child { margin-top: 0; }
.bsg-live-inventory .bsg-inv-count { color: #9a9a9a; font-weight: 400; font-size: 17px; }

/* In-page style-line filtering: hidden tiles are removed from the float flow. */
.projects-grid .project-item.is-filtered-out { display: none !important; }

/* ---- Cabinet product detail: sizes, SKUs & construction specs -----------
   Modeled after the "spec book" page format cabinet catalogs commonly use
   (jump-pills -> named cabinet groups -> a diagram + a grid of SKU cards),
   restyled into this site's own look: the accent blue used elsewhere
   (#29a5e3), Titillium Web for labels, and the same soft-bordered card
   language as .bsg-catalog-intro. Every SKU/dimension shown is placeholder
   data (see ProductController::dummyCabinetSpecSheet) until the ERP has a
   real per-style-line size list. */
.bsg-spec-sheet { padding: 70px 0 20px; border-top: 1px solid #ececec; margin-top: 20px; }

.bsg-spec-build { max-width: 760px; margin: 0 auto 18px; border: 1px solid #ececec; border-radius: 4px; padding: 0 20px; }
.bsg-spec-build .acc-toggle { display: flex; align-items: center; gap: 10px; }
.bsg-spec-toggle-count { font-size: 13px; color: #9a9a9a; font-weight: 400; }
.bsg-spec-toggle-icon { margin-left: auto; width: 16px; height: 16px; position: relative; flex: none; }
.bsg-spec-toggle-icon:before,
.bsg-spec-toggle-icon:after { content: ''; position: absolute; top: 50%; left: 50%; background: #1a1a1a; transform: translate(-50%, -50%); }
.bsg-spec-toggle-icon:before { width: 12px; height: 1.5px; }
.bsg-spec-toggle-icon:after { width: 1.5px; height: 12px; transition: transform .2s; }
.bsg-spec-build .acc-item.current .bsg-spec-toggle-icon:after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.bsg-spec-build-list { margin: 0; padding: 0 0 8px; list-style: none; }
.bsg-spec-build-list li { position: relative; padding: 7px 0 7px 20px; font-size: 14px; line-height: 1.6; color: #4a4a4a; }
.bsg-spec-build-list li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: #29a5e3; }

.bsg-spec-order-note {
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 14px 18px;
    background: #f4f2ef;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: #6d6d6d;
    text-align: center;
}

.bsg-spec-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
}
.bsg-spec-pills a {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-family: 'Titillium Web', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    transition: border-color .2s, color .2s, background .2s;
}
.bsg-spec-pills a:hover { border-color: #29a5e3; color: #29a5e3; }

/* Progressive-enhancement fallback: if the pill's JS click handler doesn't run (JS error, JS
   disabled), a plain browser anchor-jump still lands below the site's fixed header instead of
   flush against the top edge, hidden underneath it. */
.bsg-spec-category { margin-bottom: 56px; scroll-margin-top: 120px; }
.bsg-spec-category-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid #1a1a1a;
}
.bsg-spec-category-title span { font-weight: 400; font-size: 15px; color: #9a9a9a; margin-left: 8px; }

.bsg-spec-group {
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 26px 26px 22px;
    margin-bottom: 24px;
}
.bsg-spec-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.bsg-spec-group-head h5 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; }
.bsg-spec-height { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #29a5e3; white-space: nowrap; }

.bsg-spec-group-body { display: flex; gap: 30px; flex-wrap: wrap; }
.bsg-spec-diagram { flex: none; width: 320px; height: 360px; color: #c7c7c7; position: relative; }
.bsg-spec-diagram svg { width: 100%; height: 100%; }
.bsg-spec-diagram-photo { border: 1px solid #ececec; border-radius: 6px; overflow: hidden; background: #fafafa; cursor: zoom-in; }
.bsg-spec-diagram-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; }

/* Small zoom-hint affordance in the corner of a real (clickable) diagram
   photo — purely visual, the click handler covers the whole image. */
.bsg-spec-diagram-photo .bsg-spec-zoom-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    pointer-events: none;
}
.bsg-spec-diagram-photo .bsg-spec-zoom-hint svg { width: 14px; height: 14px; }

/* Full-screen preview lightbox for a clicked diagram photo. */
.bsg-spec-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}
.bsg-spec-lightbox[hidden] { display: none; }
.bsg-spec-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.bsg-spec-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .95);
    color: #1a1a1a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bsg-spec-lightbox-close:hover { background: #fff; }

@media (max-width: 767px) {
    .bsg-spec-diagram { width: 260px; height: 300px; }
}

.bsg-spec-items { flex: 1 1 380px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 22px; }
.bsg-spec-item { min-width: 0; }
.bsg-spec-sku { margin: 0 0 8px; font-family: 'Titillium Web', sans-serif; font-size: 14px; font-weight: 700; color: #29a5e3; }
.bsg-spec-dim { margin: 0 0 3px; font-size: 13px; color: #4a4a4a; }
.bsg-spec-dim span { display: inline-block; min-width: 50px; color: #9a9a9a; }
.bsg-spec-item-note { margin: 6px 0 0; font-size: 12px; font-style: italic; color: #9a9a9a; }

.bsg-spec-group-notes { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px dashed #ececec; list-style: none; }
.bsg-spec-group-notes li { position: relative; padding: 0 0 6px 16px; font-size: 12.5px; color: #6d6d6d; }
.bsg-spec-group-notes li::before { content: '—'; position: absolute; left: 0; color: #c7c7c7; }

@media (max-width: 575px) {
    .bsg-spec-group-body { flex-direction: column; }
    .bsg-spec-diagram { width: 100%; height: 260px; }
}

/* Catalogue pagination, using the theme's own .page-pagination control. */
.bsg-catalog-pagination { margin: 20px 0 30px; text-align: center; }
.bsg-catalog-pagination .page-pagination { display: inline-block; }