/*!
 * Brodware Product Explorer - bento grid
 *
 * All styles are scoped under .bpe-explorer to prevent leakage.
 */

.bpe-explorer {
    /* Gap between cards: 20px on mobile (<=600px), 40px on desktop (>=1024px),
       fluid in between. */
    --bpe-gap: clamp(20px, calc(20px + (100vw - 600px) * 0.04717), 40px);
    --bpe-radius: 0;
    --bpe-card-bg: #ffffff;
    --bpe-card-border: none;
    --bpe-meta-color: #1c1c1c;
    --bpe-meta-muted: #6b6b6b;
    --bpe-canvas-bg: #ebebeb;
    --bpe-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bpe-duration: 0.28s;
    --bpe-duration-fast: 0.18s;

    /* One grid row = half a "tall" card. A "tall" spans 2 rows, so it is
       472px on mobile (<=600px) and 683px on desktop (>=1024px), fluid in
       between; every other card height follows this rhythm organically. */
    --bpe-row-unit: clamp(236px, calc(236px + (100vw - 600px) * 0.2488), 341.5px);

    box-sizing: border-box;
    width: 100%;
    background: var(--bpe-canvas-bg);
    font-family: Fellix, sans-serif;
    font-weight: 400;
    color: var(--bpe-meta-color);
}

.bpe-explorer--editor-placeholder {
    min-height: 240px;
    padding: 2rem;
    border: 1px dashed #bbb;
    background: #f7f7f7;
    color: #444;
}

.bpe-explorer *,
.bpe-explorer *::before,
.bpe-explorer *::after {
    box-sizing: inherit;
}

.bpe-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ---------- Toolbar: filter tabs + search ---------- */

.bpe-toolbar {
    margin-bottom: var(--bpe-gap);
    background: transparent;
    color: #010202;
}

.bpe-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 52px;
    padding: 4px 0;
}

.bpe-filters {
    flex: 1 1 auto;
    min-width: 0;
}

.bpe-filters__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px 40px;
}

.bpe-filters__tab-label {
    font-size: 18px;
    line-height: 1.2;
}

.bpe-filters__count {
    position: relative;
    top: -0.72em;
    margin-left: -2px;
    margin-right: 4px;
    min-width: 2ch;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #555;
    font-variant-numeric: tabular-nums;
}

.bpe-filters__count:empty {
    display: none;
}

.bpe-filters__tab {
    display: inline-flex;
    align-items: end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #010202;
    font-family: Fellix, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity var(--bpe-duration-fast) var(--bpe-ease);
}

.bpe-filters__tab:hover,
.bpe-filters__tab:focus-visible {
    color: #010202;
    outline: none;
    opacity: 0.55;
}

.bpe-filters__tab.-open,
.bpe-filters__tab.-open:hover {
    opacity: 1;
}

.bpe-filters__tab:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 4px;
}

.bpe-filters__icon {
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
    display: inline-block;
    transition: opacity var(--bpe-duration-fast) var(--bpe-ease);
}

.bpe-filters__drawer {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 50px;
    opacity: 1;
    transition: grid-template-rows var(--bpe-duration) var(--bpe-ease),
        margin-top var(--bpe-duration) var(--bpe-ease),
        opacity var(--bpe-duration-fast) ease;
}

.bpe-filters__drawer-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 0 20px;
}

.bpe-filters__drawer[hidden] {
    display: grid !important;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
}

.bpe-filters__panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--bpe-duration-fast) ease,
        transform var(--bpe-duration) var(--bpe-ease);
}

.bpe-filters__panel[hidden] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.bpe-filters__panel .facetwp-facet {
    margin-bottom: 0;
}

/* Wrap by row so long lists (Product Type ~94) stay in the viewport
   instead of growing sideways. auto-fill packs as many ~240px columns
   as the width allows; overflow scrolls inside a capped height. */
.bpe-filters__panel .facetwp-facet.facetwp-type-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    grid-auto-flow: row;
    column-gap: 40px;
    row-gap: 10px;
    justify-content: stretch;
    max-height: min(360px, 50vh);
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0;
    padding-right: 4px;
    scrollbar-width: thin;
}

.bpe-filters__panel .facetwp-checkbox {
    display: flex;
    align-items: baseline;
    gap: 10px;
    position: relative;
    margin: 0;
    padding: 2px 0;
    padding-left: 0 !important;
    background: none !important;
    background-image: none !important;
    font-family: Fellix, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #010202;
    cursor: pointer;
    user-select: none;
    transition: opacity var(--bpe-duration-fast) ease;
}

.bpe-filters__panel .facetwp-checkbox:hover {
    opacity: 0.65;
}

.bpe-filters__panel .facetwp-checkbox.checked,
.bpe-filters__panel .facetwp-checkbox.checked:hover {
    opacity: 1;
}

.bpe-filters__panel .facetwp-checkbox:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 3px;
}

.bpe-filters__panel .facetwp-checkbox::before {
    content: "";
    position: relative;
    top: 2px;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #010202;
    background: #ffffff;
    box-sizing: border-box;
    transition: background-color var(--bpe-duration-fast) ease;
}

.bpe-filters__panel .facetwp-checkbox.checked::before {
    background-color: #010202;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.bpe-filters__panel .facetwp-counter,
.bpe-filters__panel .facetwp-expand {
    display: none;
}

.bpe-filters__panel .facetwp-checkbox.is-filtered-out {
    display: none !important;
}

.bpe-filters__find {
    margin: 0 0 16px;
}

.bpe-filters__find-input {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid #010202;
    background: transparent;
    color: #010202;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.2;
}

.bpe-filters__find-input:focus,
.bpe-filters__find-input:focus-visible {
    outline: none;
    border: 0;
    border-bottom: 1px solid #010202;
    box-shadow: none;
}

.bpe-filters__find-input::-webkit-search-cancel-button,
.bpe-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0 0 0 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23010202' stroke-width='1.6' stroke-linecap='round' d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    cursor: pointer;
}

.bpe-filters__find-empty {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--bpe-meta-muted);
}

.bpe-filters__find-empty[hidden] {
    display: none;
}

.bpe-filters__clear {
    display: block;
    margin: 20px 0 0 auto;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: #010202;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    transition: color var(--bpe-duration-fast) ease, opacity var(--bpe-duration-fast) ease;
}

.bpe-filters__clear:hover,
.bpe-filters__clear:focus-visible {
    color: rgba(1, 2, 2, 0.6);
}

.bpe-filters__clear:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 4px;
}

/* Search: label + icon on the tab row; input expands in place. */
.bpe-search {
    --bpe-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bpe-duration: 0.32s;
    --bpe-duration-fast: 0.22s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    margin: 0;
    min-width: 0;
}

.bpe-search__label {
    flex: 0 1 auto;
    max-width: 8em;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 18px;
    line-height: 1.2;
    color: #010202;
    cursor: pointer;
    opacity: 1;
    transform: translateX(0);
    transition:
        max-width var(--bpe-duration) var(--bpe-ease),
        opacity var(--bpe-duration-fast) var(--bpe-ease),
        margin var(--bpe-duration) var(--bpe-ease);
}

.bpe-search__label:hover {
    opacity: 0.55;
}

.bpe-search__input {
    width: 0;
    min-width: 0;
    flex: 0 1 auto;
    opacity: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    color: #010202;
    pointer-events: none;
    transition:
        width var(--bpe-duration) var(--bpe-ease),
        opacity var(--bpe-duration-fast) var(--bpe-ease),
        padding var(--bpe-duration) var(--bpe-ease),
        border-color var(--bpe-duration-fast) ease;
}

.bpe-search.-open .bpe-search__input {
    width: min(280px, 42vw);
    opacity: 1;
    padding: 6px;
    border-bottom-color: #010202;
    pointer-events: auto;
}

.bpe-search.-open .bpe-search__label {
    max-width: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.bpe-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #010202;
    cursor: pointer;
    transition: opacity var(--bpe-duration-fast) ease;
}

.bpe-search__icon:hover {
    opacity: 0.55;
}

.bpe-search__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.bpe-search__icon:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 4px;
}

/*
 * Header search matches theme `.m-header__trigger-search` visually
 * and on events: 36px circle → 200/280px grey pill, magnifying glass
 * on the left, dark arrow submit on the right. The input is taken out
 * of flow so Elementor's fixed icon-cluster widths (and production
 * header kits) never have to be edited.
 */
.bpe-search--header {
    --bpe-header-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
    --bpe-search-w: 36px;
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    gap: 0;
    overflow: visible;
    z-index: 5;
    flex: 0 0 auto;
}

.bpe-search--header.-open {
    --bpe-search-w: 200px;
}

@media (min-width: 1024px) {
    .bpe-search--header.-open {
        --bpe-search-w: 280px;
    }
}

.bpe-search.bpe-search--header .bpe-search__input,
.bpe-search.bpe-search--header.-open .bpe-search__input {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    transform: none;
    flex: none;
    z-index: 1;
    width: var(--bpe-search-w);
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0;
    opacity: 1;
    border: 0;
    border-bottom: 0;
    border-radius: 100px;
    background: rgba(242, 242, 242, 0);
    color: #010202;
    font-size: 15px;
    line-height: 36px;
    text-indent: -99999px;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    transition: width 0.3s var(--bpe-header-ease),
        padding 0.3s var(--bpe-header-ease),
        background-color 0.3s var(--bpe-header-ease),
        text-indent 0.3s var(--bpe-header-ease);
}

.bpe-search.bpe-search--header.-open .bpe-search__input {
    padding: 0 10px 0 40px;
    text-indent: 0;
    background: #f2f2f2;
    cursor: text;
}

.bpe-search--header .bpe-search__glyph {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: calc(36px - var(--bpe-search-w) + 10px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    line-height: 0;
    color: inherit;
    transition: left 0.3s var(--bpe-header-ease);
}

.bpe-search--header .bpe-search__glyph svg {
    display: block;
    width: 17px;
    height: 18px;
}

.bpe-search--header .bpe-search__submit {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: #151515;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.3s var(--bpe-header-ease);
}

.bpe-search--header.-open .bpe-search__submit {
    opacity: 1;
    pointer-events: auto;
}

.bpe-search--header .bpe-search__submit svg {
    display: block;
    width: 15px;
    height: 10px;
    fill: #fff;
}

.bpe-search--header .bpe-search__submit:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 3px;
}

.e-con:has(> .elementor-widget-icon .bpe-search--header),
.bpe-header-icons {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible;
}

.bpe-header-cluster {
    width: auto !important;
    max-width: none !important;
    align-items: center !important;
    overflow: visible;
}

.bpe-header-icon,
.elementor-widget-icon:has(.bpe-search--header) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    max-width: none !important;
    overflow: visible;
}

.bpe-header-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: inherit;
    line-height: 0;
    text-decoration: none;
}

.bpe-header-icon-link svg {
    display: block;
    width: 17px;
    height: 17px;
}

.bpe-header-icon-link:hover,
.bpe-header-icon-link:focus-visible {
    opacity: 0.55;
}

.bpe-header-icon-link:focus-visible {
    outline: 1px solid #010202;
    outline-offset: 4px;
}

/* ---------- Active filter chip strip ---------- */

.bpe-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -4px 0 var(--bpe-gap);
    padding: 8px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    animation: bpe-fade-in var(--bpe-duration) var(--bpe-ease);
}

.bpe-active[hidden] {
    display: none;
}

.bpe-active__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bpe-meta-muted);
    margin-right: 4px;
}

.bpe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.bpe-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: #f3f3f3;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    color: var(--bpe-meta-color);
    cursor: pointer;
    animation: bpe-chip-in var(--bpe-duration-fast) var(--bpe-ease);
    transition: background-color var(--bpe-duration-fast) ease, border-color var(--bpe-duration-fast) ease;
}

.bpe-chip:hover,
.bpe-chip:focus-visible {
    background: #e8e8e8;
    border-color: #cfcfcf;
    outline: none;
}

.bpe-chip__group {
    color: var(--bpe-meta-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bpe-chip__value {
    color: var(--bpe-meta-color);
    font-weight: 600;
}

.bpe-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1;
    color: var(--bpe-meta-color);
}

.bpe-chip:hover .bpe-chip__x,
.bpe-chip:focus-visible .bpe-chip__x {
    background: rgba(0, 0, 0, 0.16);
}

.bpe-filters__clear-all {
    margin-left: auto;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bpe-meta-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bpe-filters__clear-all:hover,
.bpe-filters__clear-all:focus-visible {
    background: var(--bpe-meta-color);
    border-color: var(--bpe-meta-color);
    color: #ffffff;
    outline: none;
}

/* Screen-reader-only utility for chip aria text. */
.bpe-explorer .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Bento grid ---------- */

.bpe-grid {
    display: grid;
    gap: var(--bpe-gap);
    grid-template-columns: repeat(var(--bpe-cols, 3), minmax(0, 1fr));
    grid-auto-rows: var(--bpe-row-unit);
    grid-auto-flow: dense;
    transition: opacity var(--bpe-duration-fast) ease;
}

.bpe-explorer.-is-refreshing .bpe-grid {
    opacity: 0.45;
}

.bpe-grid:has(> .bpe-empty) {
    grid-auto-rows: auto;
}

.bpe-grid > .bpe-empty {
    grid-column: 1 / -1;
}

/* Default desktop column count, overridden by modifier classes below. */
.bpe-explorer { --bpe-cols: 3; }
.bpe-explorer.-cols-desktop-2 { --bpe-cols: 2; }
.bpe-explorer.-cols-desktop-3 { --bpe-cols: 3; }
.bpe-explorer.-cols-desktop-4 { --bpe-cols: 4; }

/* ---------- Cards ---------- */

.bpe-card {
    position: relative;
    background: var(--bpe-card-bg);
    border: none;
    border-radius: 0;
    overflow: hidden;
    grid-column: span 1;
    grid-row: span 1;
}

.bpe-card__link {
    display: block;
    position: relative;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Image fills the whole card box (the grandparent .bpe-card__link); the meta
   sits on top of it as a bottom-left overlay. */
.bpe-card__image-wrap {
    position: absolute;
    inset: 0;
    background: #ffffff;
    min-height: 0;
}

.bpe-card__image {
    position: absolute;
    inset: 0;
    display: block;
}

/* Beat Elementor's `.elementor img { height: auto; max-width: 100%; }` so
   product images fill the card box (contain on white) and heroes cover. */
.bpe-explorer .bpe-card__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: var(--bpe-bbox-x, 50%) var(--bpe-bbox-y, 50%);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bpe-explorer .bpe-hero__img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Meta is an overlay anchored to the bottom-left of the card. */
.bpe-card__meta {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 24px;
    z-index: 2;
    margin: 0;
    padding: 0;
    color: var(--bpe-meta-color);
}

/* Only the title is shown inside the card meta overlay. */
.bpe-card__series,
.bpe-card__sku {
    display: none;
}

.bpe-card__title {
    margin: 0;
    width: 33%;
    color: #000;
    font-family: Fellix, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}

/* ---------- Card size variants ---------- */

/* "wide" spans the width of 2 "regular" cards (same height as regular).
   "tall" is the same width as regular with double the height. "hero" is
   2x2. The "compact" variant was removed in 0.4.0. */
.bpe-card.-size-regular { grid-column: span 1; grid-row: span 1; }
.bpe-card.-size-tall    { grid-column: span 1; grid-row: span 2; }
.bpe-card.-size-wide    { grid-column: span 2; grid-row: span 1; }
.bpe-card.-size-hero    { grid-column: span 2; grid-row: span 2; }

/* Hero alignment hints inform decorative placement of content inside the
   tile; the bento itself remains driven by grid-auto-flow: dense.
   Collections heroes span two bento rows (-size-hero, 2 cols x 2 rows). */
.bpe-card.-hero {
    background: #111111;
    color: #ffffff;
    border: none;
    /* Two bento rows tall so the absolute cover image has a real box. */
    min-height: calc(var(--bpe-row-unit) * 2 + var(--bpe-gap));
}

.bpe-card.-hero .bpe-card__link {
    display: block;
    position: relative;
    height: 100%;
    min-height: inherit;
    color: inherit;
    overflow: hidden;
}

.bpe-hero__image-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111111;
}

.bpe-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.bpe-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
}

.bpe-card.-hero-right .bpe-hero__scrim {
    background: linear-gradient(
        225deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.bpe-card.-hero-left .bpe-hero__scrim {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* Full-width, zero-padding container; the eyebrow's own margins control the
   distance from the tile edges. */
.bpe-hero__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    color: #ffffff;
    align-items: flex-start;
    max-width: none;
}

/* Collection hero tiles show only the eyebrow, rendered as a pill in the
   bottom-right of the tile (38px from the bottom/right edges on desktop).
   align-self keeps it right regardless of the meta's alignment. */
.bpe-hero__eyebrow {
    align-self: flex-end;
    margin: 0 38px 38px 0;
    padding: 10px 24px;
    border-radius: 50px;
    background: #000;
    color: #ffffff;
    font-family: Fellix, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    opacity: 1;
}

/* Desktop bento: alternate hero placement. Left tiles anchor to the first
   column; right tiles anchor to the last column. */
@media (min-width: 1025px) {
    .bpe-card.-hero.-hero-left {
        grid-column: 1 / span 2;
    }

    .bpe-card.-hero.-hero-right {
        grid-column: -3 / -1;
    }
}

@media (max-width: 600px) {
    .bpe-card.-hero.-size-hero {
        grid-column: 1 / -1;
    }

    .bpe-hero__eyebrow {
        margin: 0 20px 20px 0;
    }
}

/* ---------- Responsive: tablet ---------- */

@media (max-width: 1024px) {
    .bpe-explorer.-cols-tablet-1 { --bpe-cols: 1; }
    .bpe-explorer.-cols-tablet-2 { --bpe-cols: 2; }
    .bpe-explorer.-cols-tablet-3 { --bpe-cols: 3; }
    .bpe-explorer.-cols-tablet-4 { --bpe-cols: 4; }

    /* If we drop below 2 columns, force wide/hero to a single column. */
    .bpe-explorer.-cols-tablet-1 .bpe-card.-size-wide,
    .bpe-explorer.-cols-tablet-1 .bpe-card.-size-hero {
        grid-column: span 1;
    }
}

/* ---------- Responsive: mobile ---------- */

@media (max-width: 600px) {
    .bpe-explorer.-cols-mobile-1 { --bpe-cols: 1; }
    .bpe-explorer.-cols-mobile-2 { --bpe-cols: 2; }

    /* Hero tiles always span all mobile columns. */
    .bpe-explorer.-cols-mobile-1 .bpe-card.-size-hero,
    .bpe-explorer.-cols-mobile-2 .bpe-card.-size-hero {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    /* On mobile, hero meta returns to a single left-aligned column for
       readability regardless of alternating alignment on larger screens. */
    .bpe-card.-hero-right .bpe-hero__meta,
    .bpe-card.-hero-left .bpe-hero__meta {
        margin-left: 0;
        align-items: flex-start;
        text-align: left;
        max-width: 100%;
    }

    /* Wide cards: in 1-col mobile, collapse to single column. In 2-col mobile,
       still take 2 columns (which is the full row) so the product stays legible. */
    .bpe-explorer.-cols-mobile-1 .bpe-card.-size-wide {
        grid-column: span 1;
    }
    .bpe-explorer.-cols-mobile-2 .bpe-card.-size-wide {
        grid-column: 1 / -1;
    }

    /* Tall cards remain double-height to preserve the bento rhythm on mobile.
       Row height is driven by the fluid --bpe-row-unit clamp (472px tall at
       <=600px), so no per-breakpoint override is needed here. */
    .bpe-card.-size-tall {
        grid-row: span 2;
    }

    /* Active filter bar: stack label / chips / clear-all so the
       horizontal flex doesn't squeeze on narrow viewports. */
    .bpe-active {
        align-items: flex-start;
    }

    .bpe-toolbar__row {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .bpe-filters__tabs {
        gap: 16px 24px;
    }

    .bpe-filters__panel .facetwp-facet.facetwp-type-checkboxes {
        grid-template-columns: 1fr;
        max-height: min(280px, 45vh);
    }

    .bpe-search.-open .bpe-search__input {
        width: min(220px, 70vw);
    }

    .bpe-filters__clear-all {
        margin-left: 0;
    }
}

/* ---------- Load more ---------- */

.bpe-loadmore {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--bpe-gap) * 1.5);
}

.bpe-loadmore:empty {
    display: none;
}

/* FacetWP pager renders its own button markup; skin it to match the brand. */
.bpe-loadmore .facetwp-load-more,
.bpe-loadmore button {
    padding: 13px 34px;
    background: var(--bpe-meta-color);
    color: #ffffff;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.bpe-loadmore .facetwp-load-more:hover,
.bpe-loadmore button:hover {
    opacity: 0.85;
}

/* ---------- Empty state ---------- */

.bpe-empty {
    padding: 36px 16px;
    margin: 0;
    background: #fafafa;
    border: 1px dashed #d4d4d4;
    border-radius: var(--bpe-radius);
    text-align: center;
    color: var(--bpe-meta-muted);
}

@keyframes bpe-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bpe-chip-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.bpe-filters__panel .facetwp-overlay {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bpe-explorer,
    .bpe-explorer *,
    .bpe-explorer *::before,
    .bpe-explorer *::after {
        animation: none !important;
        transition: none !important;
    }

    .bpe-explorer.-is-refreshing .bpe-grid {
        opacity: 1;
    }
}