/* ============================================================
   BruSite homepage redesign — marketplace look (black/gold)
   Loaded ONLY on the homepage (see main.php $homeRedesign).
   Every selector is namespaced `bsh-` so nothing collides with
   style.css / Bootstrap. Light + dark via CSS tokens on :root,
   flipped under [data-bs-theme="dark"].
   ============================================================ */

/* ── Tokens: light (default) ── */
:root {
    --bsh-page:        #f5f3ee;
    --bsh-surface:     #ffffff;
    --bsh-surface-2:   #fbf7ee;
    --bsh-surface-3:   #efe9dc;
    --bsh-ink:         #0d0a06;
    --bsh-ink-2:       #171310;
    --bsh-gold:        #d4a017;
    --bsh-gold-2:      #a97b06;
    --bsh-gold-bright: #e6b84b;
    --bsh-gold-soft:   #fbf0d3;
    --bsh-gold-soft-2: #f0dfae;
    --bsh-band-gold-a: #f9efd0;
    --bsh-band-gold-b: #fdfbf4;
    --bsh-hot:         #e0562c;
    --bsh-wish:        #e0484e;
    --bsh-text:        #1c180f;
    --bsh-text-2:      #5f594a;
    --bsh-text-3:      #918a78;
    --bsh-border:      #e7e1d4;
    --bsh-border-2:    #d8cfba;
    --bsh-shadow:      0 1px 2px rgba(28,20,6,.05), 0 8px 22px rgba(28,20,6,.08);
    --bsh-shadow-lg:   0 16px 40px rgba(28,20,6,.16);
    --bsh-gold-grad:   linear-gradient(135deg,#ecc15a 0%,#d4a017 55%,#b8860b 100%);
    --bsh-hero-grad:   radial-gradient(1100px 540px at 90% -10%, rgba(212,160,23,.38), transparent 60%),
                       radial-gradient(900px 520px at -8% 118%, rgba(212,160,23,.15), transparent 55%),
                       linear-gradient(158deg,#171208 0%,#0d0a06 55%,#1c1303 100%);
}

/* ── Tokens: dark ── */
[data-bs-theme="dark"] {
    --bsh-page:        #171410;
    --bsh-surface:     #211d15;
    --bsh-surface-2:   #282217;
    --bsh-surface-3:   #342c1e;
    --bsh-gold:        #d8ac42;
    --bsh-gold-2:      #ecc256;
    --bsh-gold-bright: #f0c85f;
    --bsh-gold-soft:   #2c2514;
    --bsh-gold-soft-2: #3b3120;
    --bsh-band-gold-a: #2e2715;
    --bsh-band-gold-b: #201c11;
    --bsh-hot:         #f0784c;
    --bsh-wish:        #f2555c;
    --bsh-text:        #f1ecdf;
    --bsh-text-2:      #c7c0ac;
    --bsh-text-3:      #8f8877;
    --bsh-border:      #342e22;
    --bsh-border-2:    #433b2b;
    --bsh-shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
    --bsh-shadow-lg:   0 16px 40px rgba(0,0,0,.5);
}

/* ── Page shell ── */
.bsh-home {
    background: var(--bsh-page);
    color: var(--bsh-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.bsh-home a { text-decoration: none; }
.bsh-home img { max-width: none; }

/* ============================================================
   HERO (desktop container)
   ============================================================ */
.bsh-hero {
    position: relative;
    overflow: hidden;
    background: var(--bsh-hero-grad);
    color: #f4edd9;
}
.bsh-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.bsh-hero-glow-a { top: -160px; right: -60px; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(212,160,23,.35), transparent 65%); }
.bsh-hero-glow-b { bottom: -200px; left: 30%; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(212,160,23,.12), transparent 65%); }

.bsh-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 2.5rem;
    align-items: center;
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
}
.bsh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f0d690;
    background: rgba(212,160,23,.14);
    border: 1px solid rgba(212,160,23,.45);
    border-radius: 999px;
    padding: .42rem .95rem;
    margin-bottom: 1.15rem;
}
.bsh-hero-title {
    margin: 0 0 .9rem;
    font-size: clamp(2.2rem, 3.4vw, 3.3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fbf6e9;
}
.bsh-hero-title em {
    font-style: normal;
    background: linear-gradient(120deg,#f2cf76 0%,#d4a017 55%,#e8bf57 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bsh-hero-sub {
    max-width: 34em;
    margin: 0 0 1.4rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cfc7b0;
}
.bsh-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.35rem; }

.bsh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.bsh-btn-gold {
    background: var(--bsh-gold-grad);
    border: 1px solid rgba(255,255,255,.22);
    color: #221703 !important;
    box-shadow: 0 10px 24px rgba(212,160,23,.38);
}
.bsh-btn-gold:hover { transform: translateY(-2px); color: #221703 !important;
    box-shadow: 0 14px 30px rgba(212,160,23,.5); }
.bsh-btn-ghost {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff !important;
}
.bsh-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff !important; transform: translateY(-2px); }

.bsh-hero-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
}
.bsh-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    color: #d9d2bd;
}
.bsh-hero-trust li i { color: #e0b84b; }

/* Hero visual — polaroid collage + floating cards */
.bsh-hero-visual { position: relative; min-height: 470px; }
.bsh-collage { position: absolute; inset: 0; }
.bsh-tile {
    position: absolute;
    width: 29%;
    aspect-ratio: 1;
    padding: 6px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.35);
    transition: transform .3s ease;
}
.bsh-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
    display: block;
    background: #efe9dc;
}
.bsh-tile:hover { z-index: 6; }

.bsh-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.94);
    color: #221c10;
    border-radius: 14px;
    padding: .6rem .95rem;
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
    font-size: .8rem;
    line-height: 1.2;
    animation: bsh-floaty 6s ease-in-out infinite;
    z-index: 5;
}
.bsh-float-1 { top: 6%; right: -3%; }
.bsh-float-2 { bottom: 4%; left: -3%; animation-delay: -3s; }
.bsh-float b { display: block; }
.bsh-float-ic {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#ecc15a,#b8860b);
    color: #fff;
    font-size: .9rem;
    flex: 0 0 auto;
}
@keyframes bsh-floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ============================================================
   MARKET GRID
   ============================================================ */
.bsh-market-wrap { padding: 1.4rem 0 2.8rem; }
.bsh-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.6rem;
    align-items: start;
}
.bsh-main-col { min-width: 0; }

/* Sections */
.bsh-sec { margin-bottom: 2.2rem; }
.bsh-sec:last-child { margin-bottom: 0; }
.bsh-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.bsh-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bsh-gold-2);
    margin-bottom: .25rem;
}
.bsh-kicker-hot { color: var(--bsh-hot); }
.bsh-kicker-light { color: #e6bc54; }
.bsh-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bsh-text);
}
.bsh-viewall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 600;
    color: var(--bsh-text-2);
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.bsh-viewall i { font-size: .72rem; transition: transform .15s ease; }
.bsh-viewall:hover { color: var(--bsh-gold-2); border-color: var(--bsh-gold-2); }
.bsh-viewall:hover i { transform: translateX(3px); }
.bsh-viewall-gold { color: var(--bsh-gold-2); }

/* Category chips */
.bsh-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .95rem;
}
.bsh-cat-chip {
    display: flex;
    align-items: center;
    gap: .82rem;
    padding: .88rem 1rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 14px;
    color: var(--bsh-text);
    box-shadow: var(--bsh-shadow);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bsh-cat-chip:hover {
    color: var(--bsh-text);
    border-color: var(--bsh-gold);
    transform: translateY(-2px);
    box-shadow: var(--bsh-shadow-lg);
}
.bsh-cat-ic {
    width: 64px; height: 64px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: 1.18rem;
    color: var(--bsh-gold-2);
    background: var(--bsh-gold-soft);
    border-radius: 9px;
    overflow: hidden;
}
.bsh-cat-ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: .1rem;
}
.bsh-cat-chip.has-image .bsh-cat-ic {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.bsh-cat-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Horizontal scroller */
.bsh-scroller { position: relative; }
.bsh-hscroll {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
}
.bsh-hscroll::-webkit-scrollbar { display: none; }
.bsh-h-item {
    flex: 0 0 auto;
    width: 236px;
    scroll-snap-align: start;
    display: flex;
}
.bsh-h-item .bsh-card { width: 100%; }

.bsh-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--bsh-border-2);
    background: var(--bsh-surface);
    color: var(--bsh-text);
    font-size: .8rem;
    box-shadow: var(--bsh-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, background .15s ease, transform .15s ease;
}
.bsh-arrow:hover { background: var(--bsh-gold); color: #221703; }
.bsh-scroller.has-overflow .bsh-arrow { opacity: 1; pointer-events: auto; }
.bsh-scroller.has-overflow .bsh-arrow:hover { transform: translateY(-50%) scale(1.08); }
.bsh-arrow-prev { left: -10px; }
.bsh-arrow-next { right: -10px; }

/* BruSite Select band */
.bsh-select-sec { margin-top: 2.4rem; }
.bsh-select-band {
    background: linear-gradient(170deg, var(--bsh-band-gold-a), var(--bsh-band-gold-b));
    border: 1px solid var(--bsh-border-2);
    border-radius: 20px;
    padding: 1.3rem 1.4rem 1rem;
}
.bsh-select-band .bsh-title { color: var(--bsh-text); }

/* Product card (shared desktop/mobile) */
.bsh-card {
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--bsh-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bsh-h-item .bsh-card,
.bsh-m-2col .bsh-card { height: 100%; }
@media (hover: hover) {
    .bsh-card:hover { transform: translateY(-4px); box-shadow: var(--bsh-shadow-lg); border-color: var(--bsh-border-2); }
}
.bsh-card-media { position: relative; }
.bsh-card-media-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 0;
}
.bsh-card-media-link:focus-visible,
.bsh-wishlist-btn:focus-visible,
.bsh-cat-chip:focus-visible,
.bsh-viewall:focus-visible,
.bsh-seller-card:focus-visible {
    outline: 2px solid var(--bsh-gold);
    outline-offset: 2px;
}
.bsh-card-imgwrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--bsh-surface-2);
    overflow: hidden;
}
.bsh-card-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    color: var(--bsh-text-3);
}
.bsh-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .15rem;
    /* No hover zoom: scaling a contained image can re-crop its edges,
       which made photos look cut at the top/bottom. Keep the full product visible. */
    transform: none;
}
@media (hover: hover) { .bsh-card:hover .bsh-card-img { transform: none; } }

.bsh-card-tags {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
    pointer-events: none;
}
.bsh-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .5rem;
    border-radius: 7px;
    line-height: 1;
}
.bsh-badge-discount { background: #e0484e; color: #fff; }
.bsh-badge-cat { background: rgba(13,10,6,.72); color: #f2ecd9; backdrop-filter: blur(2px); }
.bsh-badge-digital { background: linear-gradient(135deg,#7b5cff,#4a2fd6); color: #fff; }
.bsh-badge-cod { background: #0c7a4b; color: #fff; }

.bsh-wishlist-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 4;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: none;
    border-radius: 50%;
    font-size: .86rem;
    background: rgba(255,255,255,.92);
    color: var(--bsh-text-2);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform .15s ease, color .15s ease, background .15s ease;
}
.bsh-wishlist-btn:hover { transform: scale(1.12); color: var(--bsh-wish); }
.bsh-wishlist-btn.is-wished { color: var(--bsh-wish); background: #fff; }
.bsh-wishlist-btn.busy { pointer-events: none; opacity: .6; }
.bsh-wishlist-ghost { display: grid; }
.bsh-wishlist-ghost:hover { color: var(--bsh-wish); }

/* Product-card engagement actions — Like ♡ (with count) and Share ↗.
   Grouped at the TOP-RIGHT of the product image; they never crop or push the
   image. Sits above the full-card link overlay and swallows its own clicks so
   clicking a heart/share never navigates to the product page. */
.bsh-card-actions {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.bsh-act {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bsh-border-2);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--bsh-text-2);
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
    cursor: pointer;
    font-size: .98rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, color .15s ease, box-shadow .15s ease;
}
.bsh-act i { pointer-events: none; }
.bsh-act:hover { transform: translateY(-1px) scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.bsh-act-like.is-liked,
.bsh-act-like.is-liked i { color: var(--bsh-wish); }
.bsh-act-like .fa-heart { font-weight: 400; }
.bsh-act-like.is-liked .fa-heart { font-weight: 900; }
.bsh-act-share:hover { color: #0b6d9e; }
.bsh-act.busy { opacity: .55; pointer-events: none; }
.bsh-act:focus-visible { outline: 2px solid var(--bsh-gold); outline-offset: 2px; }
.bsh-act-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #e0484e;
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    pointer-events: none;
}
.bsh-act-count:empty { display: none; }

/* Marketplace (Bootstrap) product-card engagement — the shared
   product-card.php overlay. Slightly tighter than the showcase cards so the
   ♡/↗ sit neatly over the top-right of each card photo. */
.bsh-listing-actions { gap: .3rem; }
.bsh-listing-actions .bsh-act { width: 34px; height: 34px; font-size: .86rem; }
.bsh-listing-actions .bsh-act-count { min-width: 16px; padding: 1px 4px; font-size: .52rem; top: -5px; right: -5px; }
.bsh-listing-badges {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}
.bsh-listing-badges .badge { font-size: .68rem; font-weight: 700; }

/* Share fallback menu (no native Web Share API) */
.bsh-share-menu {
    position: fixed;
    z-index: 1080;
    min-width: 196px;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border-2);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.bsh-share-menu[hidden] { display: none; }
.bsh-share-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bsh-text);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.bsh-share-item i { width: 20px; text-align: center; color: var(--bsh-gold-2); }
.bsh-share-item:hover { background: var(--bsh-surface-3); color: var(--bsh-text); text-decoration: none; }

.bsh-card-body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .8rem .8rem;
    flex: 1;
}
.bsh-card-name {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bsh-text);
    min-height: 2.32em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bsh-card-name:hover { color: var(--bsh-gold-2); }
.bsh-card-shop {
    font-size: .76rem;
    color: var(--bsh-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsh-card-shop:hover { color: var(--bsh-gold-2); text-decoration: underline; }
.bsh-card-rating {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-height: 1.1em;
    margin-top: .1rem;
}
.bsh-stars { display: inline-flex; gap: 1px; line-height: 1; }
.bsh-stars i { font-size: .68rem; color: var(--bsh-gold); }
.bsh-stars .far { color: var(--bsh-text-3); }
.bsh-rating-num { font-size: .72rem; font-weight: 700; color: var(--bsh-text-2); }
.bsh-review-count { font-size: .68rem; color: var(--bsh-text-3); }
.bsh-no-rating { font-size: .7rem; color: var(--bsh-text-3); }
.bsh-card-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--bsh-text);
    margin-top: auto;
    letter-spacing: -.01em;
}
.bsh-price-compare {
    font-size: .76rem;
    font-weight: 500;
    color: var(--bsh-text-3);
    margin-left: .4rem;
}

/* Featured sellers (desktop) */
.bsh-seller-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.bsh-seller-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    padding: .85rem .95rem;
    box-shadow: var(--bsh-shadow);
    color: var(--bsh-text);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bsh-seller-card:hover { color: var(--bsh-text); border-color: var(--bsh-gold); transform: translateY(-2px); box-shadow: var(--bsh-shadow-lg); }
.bsh-seller-ava {
    position: relative;
    width: 52px; height: 52px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bsh-gold-soft);
    overflow: hidden;
    color: var(--bsh-gold-2);
    font-size: 1.15rem;
    border: 2px solid var(--bsh-surface-3);
}
.bsh-seller-ava-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.bsh-seller-info { min-width: 0; flex: 0 1 auto; display: flex; flex-direction: column; gap: .12rem; }
.bsh-seller-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--bsh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}
.bsh-seller-rate { font-size: .74rem; color: var(--bsh-text-2); display: inline-flex; align-items: center; gap: .28rem; }
.bsh-seller-rate i { color: var(--bsh-gold); font-size: .68rem; }
.bsh-seller-loc { font-size: .72rem; color: var(--bsh-text-3); }
.bsh-seller-loc i { font-size: .66rem; }
/* Earned badges hug the right edge of the text block and match its height,
   filling the empty space before View Shop instead of floating far right. */
.bsh-seller-badges { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.bsh-seller-badges img { height: 60px; width: auto; object-fit: contain; flex: none; }
.bsh-seller-badges img[title] { cursor: help; }
.bsh-seller-cta {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .76rem;
    font-weight: 700;
    color: var(--bsh-gold-2);
    white-space: nowrap;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.bsh-aside { min-width: 0; }
.bsh-side {
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 18px;
    padding: 1.1rem 1.15rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--bsh-shadow);
}
.bsh-aside > .bsh-side:last-child { margin-bottom: 0; }
.bsh-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}
.bsh-side-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--bsh-text);
}
.bsh-side-title i { color: var(--bsh-gold-2); font-size: .95rem; }
.bsh-side-more {
    font-size: .74rem;
    font-weight: 700;
    color: var(--bsh-gold-2);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.bsh-side-more i { font-size: .66rem; }
.bsh-side-more:hover { text-decoration: underline; }

/* Gaming Hub (always dark) */
.bsh-gaming {
    position: relative;
    background: radial-gradient(420px 260px at 100% 0%, rgba(212,160,23,.28), transparent 60%),
                linear-gradient(155deg,#1a150c 0%,#0d0a06 78%);
    border: 1px solid rgba(212,160,23,.35);
    color: #e9e2cd;
}
.bsh-gaming-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(rgba(212,160,23,.14) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(340px 220px at 100% 0%, #000, transparent 70%);
    mask-image: radial-gradient(340px 220px at 100% 0%, #000, transparent 70%);
}
.bsh-gaming > * { position: relative; }
.bsh-gaming .bsh-side-title { color: #f6e7bd; }
.bsh-gaming .bsh-side-title i { color: #e6bc54; }
.bsh-gaming-sub { margin: .3rem 0 .9rem; font-size: .8rem; color: #b9b09a; }
.bsh-gaming-links { display: grid; gap: .35rem; }
.bsh-game-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem .7rem;
    border-radius: 11px;
    font-size: .86rem;
    font-weight: 600;
    color: #e6dfc9;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .15s ease, transform .15s ease;
}
.bsh-game-link i { width: 1.1em; color: #e0b84b; font-size: .9rem; }
.bsh-game-link:hover { background: rgba(212,160,23,.18); color: #fff; transform: translateX(2px); }
.bsh-gaming-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    font-size: .84rem;
    font-weight: 700;
    color: #221703;
    background: var(--bsh-gold-grad);
    border-radius: 999px;
    padding: .55rem 1.05rem;
    box-shadow: 0 8px 18px rgba(212,160,23,.3);
}
.bsh-gaming-cta:hover { color: #221703; filter: brightness(1.06); }
.bsh-gaming-cta i { font-size: .72rem; }

/* Popular games rows */
.bsh-pop-list { display: grid; gap: .4rem; }
.bsh-game-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .5rem;
    border-radius: 12px;
    transition: background .15s ease;
}
.bsh-game-row:hover { background: var(--bsh-surface-2); }
.bsh-game-thumb {
    position: relative;
    width: 44px; height: 44px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--bsh-gold-soft);
    overflow: hidden;
    color: var(--bsh-gold-2);
}
.bsh-game-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.bsh-game-thumb-ic { font-size: 1.05rem; }
.bsh-game-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bsh-game-name {
    font-size: .86rem;
    font-weight: 700;
    color: var(--bsh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsh-game-price { font-size: .74rem; color: var(--bsh-text-3); }
.bsh-game-chev { font-size: .68rem; color: var(--bsh-text-3); }

/* Why Shop */
.bsh-why-list {
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}
.bsh-why-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .83rem;
    line-height: 1.35;
    color: var(--bsh-text-2);
}
.bsh-why-list li i {
    width: 30px; height: 30px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--bsh-gold-soft);
    color: var(--bsh-gold-2);
    font-size: .82rem;
}
.bsh-why-list li b { display: block; color: var(--bsh-text); font-size: .86rem; margin-bottom: .05rem; }

/* ============================================================
   ADVERTISE WITH BRUSITE (banner carousel card)
   ============================================================ */
.bsh-advertise {
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--bsh-shadow);
}
.bsh-advertise-side { margin-bottom: 1.1rem; }
.bsh-advertise-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .72rem 1rem;
    background: linear-gradient(135deg,#1b1508 0%,#0d0a06 70%,#241a05 100%);
    color: #f1e2ae;
}
.bsh-advertise-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 800;
}
.bsh-advertise-title i { color: #e6bc54; }
.bsh-advertise-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #221703;
    background: linear-gradient(135deg,#ecc15a,#c8920e);
    border-radius: 999px;
    padding: .28rem .6rem;
}
.bsh-advertise-pill i { font-size: .6rem; }

.bsh-ad-media { display: block; padding: .8rem .8rem 0; }
.bsh-ad-img { width: 100%; height: auto; display: block; border-radius: 12px; background: var(--bsh-surface-2); }

.bsh-ad-slide {
    position: relative;
    padding: 1.5rem 1.2rem 1.4rem;
    text-align: center;
    color: #3a2b08;
    overflow: hidden;
}
.bsh-ad-slide-ic {
    position: absolute;
    right: -6px;
    bottom: -12px;
    font-size: 4.4rem;
    opacity: .14;
    color: #a97b06;
}
.bsh-ad-slide-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(10,8,4,.78);
    color: #f0d690;
    border-radius: 999px;
    padding: .3rem .75rem;
    margin-bottom: .6rem;
}
.bsh-ad-slide-title { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 800; color: #241b05; }
.bsh-ad-slide-sub { margin: 0 auto .8rem; max-width: 34em; font-size: .84rem; line-height: 1.5; color: #5a4a1c; }
.bsh-ad-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(135deg,#c8920e,#a97b06);
    color: #fff !important;
    font-size: .84rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .55rem 1.2rem;
    box-shadow: 0 8px 16px rgba(160,120,8,.3);
}
.bsh-ad-slide-btn:hover { color: #fff !important; filter: brightness(1.06); }

.bsh-ad-controls {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    padding: .6rem .8rem .8rem;
}
.bsh-ad-ctrl {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--bsh-border-2);
    background: var(--bsh-surface);
    color: var(--bsh-text);
    border-radius: 50%;
    font-size: .68rem;
    transition: background .15s ease, color .15s ease;
}
.bsh-ad-ctrl:hover { background: var(--bsh-gold); color: #221703; }

.bsh-ad-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 1.6rem 1.3rem 1.7rem;
    background: linear-gradient(165deg, var(--bsh-gold-soft), var(--bsh-surface));
}
.bsh-ad-fallback-ic {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#ecc15a,#b8860b);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: .3rem;
}
.bsh-ad-fallback h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--bsh-text); }
.bsh-ad-fallback p { margin: 0 0 .5rem; max-width: 30em; font-size: .82rem; line-height: 1.5; color: var(--bsh-text-2); }
.bsh-ad-fallback-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--bsh-gold-grad);
    color: #221703 !important;
    font-weight: 700;
    font-size: .86rem;
    border-radius: 999px;
    padding: .6rem 1.25rem;
    box-shadow: 0 8px 18px rgba(212,160,23,.3);
}
.bsh-ad-fallback-btn:hover { color: #221703 !important; filter: brightness(1.06); }
.bsh-ad-fallback-btn i { font-size: .7rem; }

/* ============================================================
   MOBILE CONTAINER
   ============================================================ */
.bsh-m-hero {
    position: relative;
    overflow: hidden;
    margin: .65rem .8rem .95rem;
    padding: 1.35rem 1rem 1.05rem;
    border-radius: 24px;
    background: radial-gradient(340px 240px at 100% 0%, rgba(212,160,23,.34), transparent 65%),
                linear-gradient(160deg,#191309 0%,#0d0a06 60%,#1d1302 100%);
    color: #f4edd9;
    text-align: center;
}
.bsh-m-hero-glow {
    position: absolute;
    left: -70px; top: -70px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,.18), transparent 65%);
    pointer-events: none;
}
.bsh-m-hero > * { position: relative; }
.bsh-m-hero-top { display: flex; justify-content: center; margin-bottom: .8rem; }
.bsh-m-hero-top .bsh-hero-badge { margin-bottom: 0; }
.bsh-m-hero-title {
    margin: 0 0 .55rem;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fbf6e9;
}
.bsh-m-hero-title em {
    font-style: normal;
    background: linear-gradient(120deg,#f2cf76,#d4a017 60%,#e8bf57);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bsh-m-hero-sub {
    margin: 0 auto .95rem;
    max-width: 20em;
    font-size: .83rem;
    line-height: 1.55;
    color: #cfc7b0;
}
.bsh-m-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .95rem;
}
.bsh-m-hero-actions .bsh-btn { font-size: .82rem; padding: .62rem 1rem; min-width: 0; }

.bsh-m-body { padding: .2rem .9rem 1.6rem; }
.bsh-m-sec { margin-bottom: 1.7rem; }
.bsh-m-sec .bsh-title { font-size: 1.18rem; }
.bsh-m-sec .bsh-sec-head { margin-bottom: .8rem; }

/* Categories chips (mobile) */
.bsh-m-cats { padding-bottom: 10px; }
.bsh-m-cat {
    flex: 0 0 auto;
    width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .3rem .15rem;
    color: var(--bsh-text);
    scroll-snap-align: start;
}
.bsh-m-cat-ic {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.02rem;
    color: var(--bsh-gold-2);
    background: var(--bsh-gold-soft);
    border: 1px solid var(--bsh-border);
    transition: transform .15s ease, border-color .15s ease;
}
.bsh-m-cat.has-image .bsh-m-cat-ic {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.bsh-m-cat-ic img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 6px;
}
.bsh-m-cat:hover .bsh-m-cat-ic { transform: translateY(-2px); border-color: var(--bsh-gold); }
.bsh-m-cat-name {
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--bsh-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Quick access 3×2 */
.bsh-qa-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}
.bsh-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: .95rem .35rem .8rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    color: var(--bsh-text);
    box-shadow: var(--bsh-shadow);
    transition: transform .15s ease, border-color .15s ease;
}
.bsh-qa:active { transform: scale(.97); }
.bsh-qa-ic {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.15rem;
    color: var(--bsh-gold-2);
    background: var(--bsh-gold-soft);
}
.bsh-qa-txt { display: flex; flex-direction: column; gap: .05rem; }
.bsh-qa-txt b { font-size: .78rem; font-weight: 700; color: var(--bsh-text); line-height: 1.15; }
.bsh-qa-txt small { font-size: .62rem; color: var(--bsh-text-3); line-height: 1.2; }

/* Mobile product rows / grid */
.bsh-m-hrow { margin: 0 -0.5rem; padding-left: .5rem; padding-right: .5rem; }
.bsh-h-item-72 { width: 74%; max-width: 330px; }
.bsh-m-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.bsh-m-2col .bsh-card-name { font-size: .8rem; min-height: 2.1em; }
.bsh-m-2col .bsh-card-price { font-size: .9rem; }
.bsh-m-2col .bsh-card-shop { font-size: .7rem; }
.bsh-m-2col .bsh-card-body { padding: .6rem .65rem .7rem; }

/* BruSite Select mobile band */
.bsh-select-band-m { padding: 1.1rem 1.1rem .8rem; }

/* Gaming hub mobile */
.bsh-m-gaming {
    position: relative;
    overflow: hidden;
    background: radial-gradient(420px 260px at 100% 0%, rgba(212,160,23,.28), transparent 60%),
                linear-gradient(155deg,#1a150c 0%,#0d0a06 78%);
    border: 1px solid rgba(212,160,23,.35);
    border-radius: 20px;
    padding: 1.1rem 1.1rem 1.2rem;
    color: #e9e2cd;
}
.bsh-m-gaming .bsh-gaming-pattern { border-radius: 20px; }
.bsh-m-gaming > *:not(.bsh-gaming-pattern) { position: relative; }
.bsh-m-gaming-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .9rem;
}
.bsh-m-gaming-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #f6e7bd;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.bsh-m-gaming-title i { color: #e6bc54; }
.bsh-m-gaming-head .bsh-gaming-cta { margin-top: 0; padding: .5rem .95rem; font-size: .8rem; }
.bsh-m-gaming-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}
.bsh-m-game-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .95rem .5rem .85rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
}
.bsh-m-game-tile:active { transform: scale(.97); }
.bsh-m-game-tile:hover { background: rgba(212,160,23,.16); }
.bsh-m-game-ic { font-size: 1.3rem; color: #e0b84b; }
.bsh-m-game-label { font-size: .74rem; font-weight: 600; color: #e6dfc9; }

/* Popular games mobile */
.bsh-m-pop {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .55rem .4rem;
    text-align: center;
    scroll-snap-align: start;
}
.bsh-m-pop-thumb {
    position: relative;
    width: 84px; height: 84px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: var(--bsh-gold-soft);
    overflow: hidden;
    color: var(--bsh-gold-2);
    font-size: 1.6rem;
    box-shadow: var(--bsh-shadow);
}
.bsh-m-pop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bsh-m-pop-name { font-size: .76rem; font-weight: 700; color: var(--bsh-text); line-height: 1.2; }
.bsh-m-pop-price { font-size: .68rem; color: var(--bsh-text-3); }

/* Featured sellers mobile */
.bsh-m-sellers { padding-bottom: 10px; }
.bsh-m-seller {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    padding: .6rem;
    color: var(--bsh-text);
    box-shadow: var(--bsh-shadow);
}
.bsh-m-sellers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible;
    padding-bottom: 0;
}
.bsh-m-seller-ava { width: 36px; height: 36px; font-size: .86rem; }
.bsh-m-seller-meta { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.bsh-m-seller-meta .bsh-seller-name { font-size: .73rem; white-space: normal; line-height: 1.15; }
.bsh-m-seller-meta .bsh-seller-rate { font-size: .62rem; }
.bsh-m-sellers .bsh-seller-badges { margin-top: .08rem; gap: .2rem; }
.bsh-m-sellers .bsh-seller-badges img { height: 22px; }
.bsh-m-seller-meta .bsh-seller-sales,
.bsh-m-seller-meta .bsh-seller-loc { display: none; }
.bsh-m-seller .bsh-seller-cta {
    width: 100%;
    justify-content: center;
    font-size: .62rem;
    color: var(--bsh-gold-2);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-top: 1px solid var(--bsh-border);
    margin-top: .1rem;
    padding-top: .45rem;
}

/* Seller CTA */
.bsh-m-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 1.8rem 1.3rem 1.9rem;
    border-radius: 22px;
    background: radial-gradient(400px 260px at 50% -20%, rgba(212,160,23,.3), transparent 65%),
                linear-gradient(160deg,#191309,#0d0a06 70%);
    color: #f4edd9;
    overflow: hidden;
}
.bsh-m-cta-ic {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bsh-gold-grad);
    color: #221703;
    font-size: 1.5rem;
    box-shadow: 0 10px 24px rgba(212,160,23,.35);
    margin-bottom: .3rem;
}
.bsh-m-cta h3 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #fbf6e9; }
.bsh-m-cta p { margin: 0 0 .7rem; max-width: 30em; font-size: .86rem; line-height: 1.55; color: #cfc7b0; }

/* ============================================================
   BOTTOM NAV (phones only)
   ============================================================ */
.bsh-bottom-nav {
    display: none;
}
body.has-bottom-nav {
    /* padding applied only under 768 where the nav is visible */
}

@media (max-width: 767.98px) {
    .bsh-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: var(--bsh-surface);
        border-top: 1px solid var(--bsh-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -6px 20px rgba(0,0,0,.12);
    }
    .bsh-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .2rem;
        padding: .55rem 0 .5rem;
        font-size: .66rem;
        font-weight: 600;
        color: var(--bsh-text-3);
        transition: color .15s ease;
    }
    .bsh-nav-item i { font-size: 1.15rem; }
    .bsh-nav-item.active { color: var(--bsh-gold-2); }
    .bsh-nav-item.active::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--bsh-gold);
    }
    body.has-bottom-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Tablet 768–991: single-column market grid, hero centered, 2-across sidebar */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bsh-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 2.6rem 0 2.4rem; }
    .bsh-hero-copy { display: flex; flex-direction: column; align-items: center; }
    .bsh-hero-sub { margin-left: auto; margin-right: auto; }
    .bsh-hero-actions { justify-content: center; }
    .bsh-hero-trust { justify-content: center; }
    .bsh-hero-visual { display: none; }

    .bsh-market-grid { display: block; }
    .bsh-aside {
        margin-top: 1.2rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .bsh-aside .bsh-side,
    .bsh-advertise-side { margin-bottom: 0; }
    .bsh-cat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Laptop 992–1199 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bsh-market-grid { grid-template-columns: minmax(0, 1fr) 296px; gap: 1.3rem; }
    .bsh-hero-inner { gap: 1.8rem; padding-top: 2.6rem; padding-bottom: 2.6rem; }
    .bsh-hero-visual { min-height: 380px; }
    .bsh-hero-title { font-size: clamp(2rem, 3vw, 2.6rem); }
    .bsh-cat-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .bsh-seller-grid { grid-template-columns: 1fr; }
}

/* Large ≥1200 */
@media (min-width: 1200px) {
    .bsh-hero-inner { gap: 3rem; }
    .bsh-cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Wide ≥1400 */
@media (min-width: 1400px) {
    .bsh-home .container.bsh-market-wrap,
    .bsh-home .container.bsh-hero-inner {
        max-width: 1400px;
    }
    .bsh-market-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .bsh-cat-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
    .bsh-seller-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Extra-wide ≥1600 */
@media (min-width: 1600px) {
    .bsh-home .container.bsh-hero-inner { max-width: 1500px; }
    .bsh-hero-title { font-size: clamp(2.6rem, 3.2vw, 3.6rem); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bsh-float { animation: none; }
    .bsh-card, .bsh-btn, .bsh-cat-chip, .bsh-seller-card, .bsh-qa, .bsh-m-game-tile { transition: none; }
    .bru-video-modal, .bru-video-container { transition: none; }
}

/* ============================================================
   Reference marketplace layout
   Dense white storefront, image-led hero, compact desktop rail,
   and the same information hierarchy on tablets and phones.
   ============================================================ */
:root {
    --bsh-page: #ffffff;
    --bsh-surface: #ffffff;
    --bsh-surface-2: #f7f8fa;
    --bsh-surface-3: #edf0f4;
    --bsh-text: #111827;
    --bsh-text-2: #4b5563;
    --bsh-text-3: #7b8492;
    --bsh-border: #e5e7eb;
    --bsh-border-2: #d5dae2;
    --bsh-shadow: 0 1px 2px rgba(17,24,39,.03), 0 5px 18px rgba(17,24,39,.05);
    --bsh-shadow-lg: 0 10px 26px rgba(17,24,39,.10);
    --bsh-gold: #efa900;
    --bsh-gold-2: #d58e00;
    --bsh-gold-bright: #ffbd18;
    --bsh-gold-soft: #fff7df;
}

[data-bs-theme="dark"] {
    --bsh-page: #111318;
    --bsh-surface: #191c22;
    --bsh-surface-2: #22262e;
    --bsh-surface-3: #2b303a;
    --bsh-text: #f7f8fb;
    --bsh-text-2: #c5cbd5;
    --bsh-text-3: #8b95a4;
    --bsh-border: #303641;
    --bsh-border-2: #414957;
    --bsh-gold: #f1b323;
    --bsh-gold-2: #ffc43b;
    --bsh-gold-soft: #342b16;
}

.bsh-home {
    background: var(--bsh-page);
    color: var(--bsh-text);
}
.bsh-market-wrap {
    max-width: 1500px;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}
.bsh-market-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
}
.bsh-main-col { min-width: 0; }

/* Reference hero */
.bsh-hero {
    min-height: 335px;
    position: relative;
    border-radius: 10px;
    background: #0b0d0e;
    isolation: isolate;
}
.bsh-hero-image,
.bsh-hero-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.bsh-hero-image {
    background: url('/public/images/home/marketplace-hero.jpg') center/cover no-repeat;
    z-index: 0;
}
.bsh-hero-overlay {
    background: linear-gradient(90deg, rgba(4,7,8,.94) 0%, rgba(4,7,8,.72) 32%, rgba(4,7,8,.08) 70%, rgba(4,7,8,.08) 100%);
    z-index: 1;
}
.bsh-hero-content {
    position: relative;
    z-index: 2;
    padding: 2.45rem 2.5rem 1.2rem;
    max-width: 56%;
}
.bsh-hero-title {
    font-size: clamp(1.9rem, 2.55vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: 0;
    margin-bottom: .85rem;
}
.bsh-hero-title em {
    background: none;
    color: #ffb300;
}
.bsh-hero-line { display: inline-block; white-space: nowrap; }
.bsh-hero-sub {
    font-size: .98rem;
    line-height: 1.55;
    color: rgba(255,255,255,.86);
    margin-bottom: 1.2rem;
}
.bsh-hero-actions { gap: .7rem; margin-bottom: 1.15rem; }
.bsh-btn {
    border-radius: 7px;
    padding: .72rem 1.2rem;
    font-size: .9rem;
}
.bsh-btn-gold {
    background: #ffb000;
    border-color: #ffb000;
    box-shadow: 0 7px 18px rgba(255,176,0,.24);
}
.bsh-btn-ghost { background: rgba(10,12,13,.35); border-color: rgba(255,176,0,.75); }
.bsh-hero-trust {
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem;
}
.bsh-hero-trust li {
    flex: 1 1 0;
    min-width: 0;
    gap: .45rem;
    padding: .62rem .7rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(0,0,0,.24);
    font-size: .68rem;
}
.bsh-hero-trust li > i {
    flex: 0 0 auto;
    font-size: .9rem;
}
.bsh-hero-trust li span { display: flex; flex-direction: column; min-width: 0; }
.bsh-hero-trust li b { font-size: .66rem; color: #fff; white-space: nowrap; }
.bsh-hero-trust li small { color: rgba(255,255,255,.68); white-space: nowrap; font-size: .58rem; }
.bsh-hero-dots {
    position: absolute;
    left: 50%;
    bottom: .8rem;
    display: flex;
    gap: .35rem;
    z-index: 3;
}
.bsh-hero-dots b, .bsh-hero-dots i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
}
.bsh-hero-dots b { width: 20px; border-radius: 10px; background: #ffad00; }

/* Category rail */
.bsh-main-col > .bsh-sec {
    margin-bottom: 1rem;
}
.bsh-main-col > .bsh-sec:nth-of-type(2) {
    padding: .8rem .95rem .7rem;
    border: 1px solid var(--bsh-border);
    border-radius: 10px;
    background: var(--bsh-surface);
}
.bsh-sec-head { margin-bottom: .7rem; }
.bsh-title { font-size: 1.05rem; letter-spacing: 0; }
.bsh-kicker { display: none; }
.bsh-cat-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: .45rem;
}
.bsh-cat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .3rem;
    padding: .28rem .18rem .32rem;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    text-align: center;
}
.bsh-cat-chip:hover { transform: none; box-shadow: none; background: var(--bsh-surface-2); }
.bsh-cat-ic {
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bsh-surface-2);
}
.bsh-cat-ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
}
.bsh-cat-name {
    width: 100%;
    font-size: .61rem;
    line-height: 1.15;
}

/* Three compact product columns like the reference desktop view */
.bsh-product-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.bsh-product-columns .bsh-sec {
    min-width: 0;
    margin: 0;
    padding: .8rem .55rem .65rem;
    border: 1px solid var(--bsh-border);
    border-radius: 10px;
    background: var(--bsh-surface);
}
.bsh-product-columns .bsh-sec-head {
    align-items: center;
    margin: 0 .2rem .65rem;
}
.bsh-product-columns .bsh-title { font-size: .95rem; }
.bsh-product-columns .bsh-viewall { font-size: .62rem; }
.bsh-product-columns .bsh-hscroll {
    gap: .45rem;
    padding: 2px 2px 8px;
}
.bsh-product-columns .bsh-h-item {
    width: calc(50% - .25rem);
}
.bsh-product-columns .bsh-card {
    border-radius: 8px;
    box-shadow: none;
}
.bsh-product-columns .bsh-card-body { padding: .45rem .45rem .55rem; gap: .18rem; }
.bsh-product-columns .bsh-card-name { font-size: .66rem; line-height: 1.2; min-height: 2.4em; }
.bsh-product-columns .bsh-card-shop { font-size: .58rem; }
.bsh-product-columns .bsh-card-rating { min-height: .9em; }
.bsh-product-columns .bsh-stars i { font-size: .52rem; }
.bsh-product-columns .bsh-rating-num { font-size: .56rem; }
.bsh-product-columns .bsh-card-price { font-size: .7rem; }
.bsh-product-columns .bsh-price-compare { font-size: .55rem; margin-left: .1rem; }
.bsh-product-columns .bsh-wishlist-btn { width: 23px; height: 23px; top: .3rem; right: .3rem; font-size: .62rem; }
.bsh-product-columns .bsh-badge { font-size: .48rem; padding: .2rem .3rem; }
.bsh-product-columns .bsh-quick-cart button { width: 23px; height: 23px; font-size: .62rem; }
.bsh-product-columns .bsh-card-actions { right: .32rem; gap: .32rem; }
.bsh-product-columns .bsh-act { width: 30px; height: 30px; font-size: .82rem; }
.bsh-product-columns .bsh-act-count { min-width: 15px; padding: 1px 4px; font-size: .5rem; top: -5px; right: -5px; }

/* Shared card footer */
.bsh-card-buy { display: flex; align-items: center; justify-content: space-between; gap: .35rem; margin-top: auto; }
.bsh-quick-cart { position: relative; z-index: 5; margin: 0; }
.bsh-quick-cart button {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: #efa900;
    color: #fff;
    cursor: pointer;
}
.bsh-quick-cart button:hover { background: #d99000; }

/* Right discovery rail */
.bsh-side {
    border-radius: 10px;
    padding: .9rem;
    margin-bottom: .8rem;
    box-shadow: none;
}
.bsh-side-title { font-size: .92rem; }
.bsh-side-more { font-size: .62rem; }
.bsh-gaming {
    min-height: 232px;
    background: linear-gradient(150deg,#101525 0%,#11152a 55%,#29156b 100%);
    border: 0;
}
.bsh-gaming .bsh-kicker { display: none; }
.bsh-gaming .bsh-side-title { color: #fff; }
.bsh-gaming-sub { display: none; }
.bsh-gaming-links { gap: 0; }
.bsh-game-link {
    padding: .6rem .2rem;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    background: transparent;
    font-size: .72rem;
}
.bsh-game-link:hover { transform: none; background: rgba(255,255,255,.06); }
.bsh-gaming-cta { display: flex; width: 100%; justify-content: center; margin-top: .7rem; border-radius: 6px; font-size: .68rem; }
.bsh-pop-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
}
.bsh-game-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .25rem .1rem;
    text-align: center;
}
.bsh-game-thumb { width: 100%; aspect-ratio: 1; height: auto; border-radius: 8px; }
.bsh-game-name { font-size: .6rem; white-space: normal; line-height: 1.15; }
.bsh-game-price { font-size: .56rem; }
.bsh-game-chev { display: none; }
.bsh-pop-games .bsh-side-title { font-size: .82rem; }
.bsh-advertise-top { padding: .65rem .8rem; }
.bsh-advertise-title { font-size: .76rem; }
.bsh-advertise-pill { font-size: .5rem; }
.bsh-why-list { gap: .55rem; }
.bsh-why-list li { font-size: .68rem; gap: .45rem; }
.bsh-why-list li i { width: 20px; height: 20px; font-size: .56rem; border-radius: 6px; }
.bsh-why-list li b { font-size: .7rem; }

/* Trust strip */
.bsh-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    padding: .75rem .85rem;
    border: 1px solid var(--bsh-border);
    border-radius: 9px;
    background: var(--bsh-surface);
}
.bsh-trust-strip > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 0;
}
.bsh-trust-strip > div > i { color: var(--bsh-text-2); font-size: 1.05rem; }
.bsh-trust-strip span { display: flex; flex-direction: column; min-width: 0; }
.bsh-trust-strip b { font-size: .68rem; color: var(--bsh-text); white-space: nowrap; }
.bsh-trust-strip small { font-size: .56rem; color: var(--bsh-text-3); white-space: nowrap; }
.bsh-trust-strip-mobile { margin-top: 0; }

/* Keep desktop utility icons visible while giving phones a focused header. */
.bsh-mobile-menu { display: none; }
@media (min-width: 992px) {
    body.home-page .navbar > .container,
    body.home-page .top-bar > .container,
    body.home-page .category-nav > .container { max-width: 1500px; }
    body.home-page .navbar-brand img { width: 140px !important; height: 35px !important; }
    body.home-page .navbar { padding: .72rem 0; }
    body.home-page .navbar .input-group { max-width: none; }
    body.home-page .navbar .input-group .form-control { height: 40px; }
    body.home-page .navbar .input-group .btn { height: 40px; min-width: 54px; }
    body.home-page .category-link { padding-top: .68rem !important; padding-bottom: .68rem !important; }
}

/* Mobile reference treatment */
@media (max-width: 767.98px) {
    body.home-page .top-bar { padding: .3rem .7rem; }
    body.home-page .top-bar .container > small:first-child { max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.home-page .top-bar .container > small:last-child > span { display: none !important; }
    body.home-page .navbar { padding: .78rem .7rem; }
    body.home-page .navbar > .container { gap: .7rem; }
    body.home-page .navbar-brand { margin-right: auto; }
    body.home-page .navbar-brand img { width: 118px !important; height: auto !important; }
    body.home-page .bsh-mobile-menu {
        display: none !important;
    }
    body.home-page .bsh-desktop-nav-item { display: none !important; }
    body.home-page .navbar .btn-outline-primary { border: 0; padding: .25rem; color: #111827; }
    body.home-page .navbar .btn-outline-primary .fa-shopping-cart { font-size: 1.1rem; }
    body.home-page .d-lg-none.bg-light { padding: .5rem .7rem !important; }
    body.home-page .category-nav .container { padding: 0 .45rem; }
    body.home-page .category-scroll-wrapper { padding: 0 20px; }
    .bsh-m-hero {
        min-height: 430px;
        margin: 0;
        border-radius: 0;
        padding: 1.15rem 1.2rem .9rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        background: #0b0d0e url('/public/images/home/marketplace-hero.jpg') 58% center/auto 100% no-repeat;
    }
    .bsh-m-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5,7,8,.9) 0%, rgba(5,7,8,.55) 28%, rgba(5,7,8,.08) 58%, rgba(5,7,8,.55) 100%);
        pointer-events: none;
    }
    .bsh-m-hero > * { z-index: 1; }
    .bsh-m-hero-title { max-width: 18ch; font-size: 1.5rem; line-height: 1.06; text-align: left; }
    .bsh-m-hero-sub { max-width: 23ch; margin-left: 0; font-size: .82rem; text-align: left; }
    .bsh-m-hero-actions { align-items: stretch; flex-direction: column; width: min(100%, 190px); }
    .bsh-m-hero-actions .bsh-btn { justify-content: center; width: 100%; }
    .bsh-m-hero-panels,
    .bsh-m-hero-trust { display: none !important; }
    .bsh-m-body { padding: .9rem .75rem 1rem; }
    .bsh-m-sec { margin-bottom: 1.25rem; }
    .bsh-m-sec .bsh-title { font-size: 1.05rem; }
    .bsh-m-cat { width: 72px; }
    .bsh-m-cat-ic { width: 48px; height: 48px; border-radius: 14px; }
    .bsh-m-cat-name { font-size: .58rem; }
    .bsh-m-2col { gap: .55rem; }
    .bsh-card { border-radius: 9px; }
    .bsh-card-body { padding: .55rem .55rem .6rem; }
    .bsh-card-name { font-size: .72rem; }
    .bsh-card-shop { font-size: .62rem; }
    .bsh-card-price { font-size: .78rem; }
    .bsh-quick-cart button { width: 27px; height: 27px; }
    .bsh-m-gaming {
        border-radius: 16px;
        background: radial-gradient(420px 260px at 100% 0%, rgba(212,160,23,.28), transparent 60%),
                    linear-gradient(155deg,#1a150c 0%,#0d0a06 78%);
    }
    .bsh-m-pop { width: 92px; }
    .bsh-m-pop-thumb { width: 76px; height: 76px; border-radius: 10px; }
    .bsh-m-sellers { gap: .45rem; }
    .bsh-m-seller { border-radius: 10px; padding: .5rem; }
    .bsh-trust-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .2rem;
        padding: .7rem .35rem;
    }
    .bsh-trust-strip > div { flex-direction: column; gap: .25rem; text-align: center; }
    .bsh-trust-strip > div > i { font-size: .95rem; }
    .bsh-trust-strip b { font-size: .55rem; white-space: normal; }
    .bsh-trust-strip small { display: none; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .bsh-market-wrap { padding-left: .8rem; padding-right: .8rem; }
    .bsh-market-grid { display: block; }
    .bsh-hero-content { max-width: 62%; padding-left: 1.6rem; padding-right: 1.6rem; }
    .bsh-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bsh-product-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bsh-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
    .bsh-aside .bsh-side { margin-bottom: 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .bsh-market-grid { grid-template-columns: minmax(0, 1fr) 275px; }
    .bsh-hero { min-height: 315px; }
    .bsh-hero-content { padding-left: 1.7rem; padding-right: 1.2rem; max-width: 59%; }
    .bsh-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bsh-product-columns .bsh-h-item { width: 100%; }
}

@media (min-width: 1400px) {
    .bsh-home .container.bsh-market-wrap {
        width: calc(100% - 32px);
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    body.home-page .navbar > .container,
    body.home-page .top-bar > .container,
    body.home-page .category-nav > .container {
        width: calc(100% - 32px);
        max-width: none;
    }
    .bsh-market-grid { grid-template-columns: minmax(0, 1fr) 336px; }
    .bsh-hero { min-height: 350px; }
    .bsh-hero-content { max-width: 54%; }
}

/* ============================================================
   Trust / seller-messaging round (2026-09-02)
   Section subtitles · seller status pills · sales chip ·
   How It Works page (.bsh-hiw)
   ============================================================ */

/* Section subtitle under a .bsh-title */
.bsh-sec-sub { margin: .2rem 0 0; font-size: .8rem; font-weight: 400; color: var(--bsh-text-2); }

/* Seller-card meta rows (rating / status / sales) */
.bsh-seller-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.bsh-seller-sales { display: inline-flex; align-items: center; gap: .26rem; font-size: .72rem; color: var(--bsh-text-3); }
.bsh-seller-sales i { font-size: .68rem; color: var(--bsh-hot); }
.bsh-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.35;
    padding: .2rem .5rem;
    border-radius: 999px;
}
.bsh-status i { font-size: .68rem; }
.bsh-status-verified { background: rgba(212,160,23,.16); border: 1px solid rgba(212,160,23,.45); color: var(--bsh-gold-2); }
.bsh-status-new { background: rgba(13,10,6,.06); border: 1px solid var(--bsh-border-2); color: var(--bsh-text-2); }
[data-bs-theme="dark"] .bsh-status-new { background: rgba(255,255,255,.06); }
.bsh-m-seller-meta .bsh-status { font-size: .6rem; padding: .17rem .42rem; }

/* Secondary button for light surfaces (bsh-btn-ghost is dark-only) */
.bsh-btn-outline {
    background: transparent;
    border: 1px solid var(--bsh-border-2);
    color: var(--bsh-text) !important;
}
.bsh-btn-outline:hover { border-color: var(--bsh-gold); color: var(--bsh-gold-2) !important; transform: translateY(-2px); }

/* ── How It Works page ── */
.bsh-hiw-hero {
    position: relative;
    background: var(--bsh-hero-grad);
    color: #f4edd9;
    padding: 3.2rem 0 3rem;
}
.bsh-hiw-hero .bsh-hero-badge { margin-bottom: 1.1rem; }
.bsh-hiw-title { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .7rem; text-wrap: balance; }
.bsh-hiw-title em { font-style: normal; color: var(--bsh-gold-bright); }
.bsh-hiw-sub { max-width: 680px; margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.65; color: rgba(244,237,217,.88); }
.bsh-hiw-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Keep the Bootstrap .container's horizontal gutter so .row's negative
   margins cancel instead of bleeding past the viewport on small screens. */
.bsh-hiw-body { padding-top: 2.6rem; }

.bsh-hiw-sec { margin-bottom: 2.8rem; }
.bsh-hiw-step {
    height: 100%;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    padding: 1.25rem 1.2rem;
    box-shadow: var(--bsh-shadow);
}
.bsh-hiw-step-n {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bsh-gold-grad);
    color: #221703;
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: .75rem;
}
.bsh-hiw-step h5 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 800; color: var(--bsh-text); }
.bsh-hiw-step h5 i { color: var(--bsh-gold-2); font-size: .92rem; margin-right: .4rem; }
.bsh-hiw-step p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--bsh-text-2); }
.bsh-hiw-ic {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bsh-gold-soft);
    color: var(--bsh-gold-2);
    font-size: 1.05rem;
    margin-bottom: .75rem;
}

.bsh-hiw-seller {
    border-radius: 22px;
    padding: 2.2rem 1.8rem;
    margin-bottom: 2.8rem;
    color: #f4edd9;
    background:
        radial-gradient(760px 380px at 108% -30%, rgba(212,160,23,.3), transparent 60%),
        linear-gradient(155deg, #1a1206 0%, #0d0a06 60%, #171002 100%);
}
.bsh-hiw-seller-title { margin: .4rem 0 .6rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: #f4edd9; }
.bsh-hiw-seller-sub { max-width: 520px; font-size: .98rem; line-height: 1.65; color: rgba(244,237,217,.85); margin-bottom: 1.4rem; }
.bsh-hiw-seller-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bsh-hiw-seller-list li {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .85rem 1rem;
}
.bsh-hiw-seller-list li > i {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(212,160,23,.22);
    color: #e6bc54;
    font-size: .9rem;
}
.bsh-hiw-seller-list li span { font-size: .84rem; line-height: 1.5; color: rgba(244,237,217,.8); }
.bsh-hiw-seller-list li b { display: block; color: #f4edd9; font-size: .9rem; }

.bsh-hiw-faq .accordion-item { border-radius: 12px; overflow: hidden; border-color: var(--bsh-border); background: var(--bsh-surface); }
.bsh-hiw-faq .accordion-button { font-weight: 700; color: var(--bsh-text); background: var(--bsh-surface); }
.bsh-hiw-faq .accordion-button:not(.collapsed) { background: var(--bsh-gold-soft); color: var(--bsh-text); box-shadow: none; }
.bsh-hiw-faq .accordion-button:not(.collapsed)::after { filter: none; }
.bsh-hiw-faq .accordion-body { color: var(--bsh-text-2); font-size: .92rem; background: var(--bsh-surface); }

.bsh-hiw-cta {
    text-align: center;
    border-radius: 22px;
    padding: 2.4rem 1.5rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(212,160,23,.4);
    background: linear-gradient(180deg, var(--bsh-band-gold-a), var(--bsh-band-gold-b));
}
.bsh-hiw-cta h3 { font-weight: 800; color: var(--bsh-text); margin-bottom: .4rem; }
.bsh-hiw-cta p { color: var(--bsh-text-2); margin-bottom: 1.3rem; }
.bsh-hiw-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }

/* ── Brief completion: shared responsive storefront details ── */
.bsh-heading-icon {
    color: var(--bsh-gold-2);
    font-size: .86em;
    margin-right: .25rem;
}
.bsh-category-scroller { min-width: 0; }
.bsh-category-scroller .bsh-cat-grid {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .1rem .1rem .55rem;
}
.bsh-category-scroller .bsh-cat-chip {
    width: 104px;
    flex: 0 0 104px;
}
.bsh-category-scroller .bsh-cat-ic {
    width: 62px;
    height: 62px;
}
.bsh-category-scroller .bsh-cat-name {
    font-size: .72rem;
}
.bsh-select-band {
    background: linear-gradient(135deg, #fff8df 0%, #fffdf7 70%);
}
/* ═══ Product Showcase — "Explore More Deals" (marketplace card grid) ═══
   Replaces the old 6-across image wall. Each cell renders the shared
   marketplace product card (image → name → shop → rating → price/cart),
   so no product photo is ever cropped and every tile is a real shop card. */
.bsh-showcase { margin-top: .6rem; }
.bsh-showcase-head { margin: 2.1rem .1rem 1rem; }
.bsh-showcase-head .bsh-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 1.16rem;
    margin: 0;
}
.bsh-showcase-head .bsh-title i { color: var(--bsh-gold-2); font-size: 1rem; }
.bsh-showcase-sub {
    margin: .25rem 0 0;
    font-size: .82rem;
    color: var(--bsh-text-3);
}
.bsh-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.bsh-showcase-cell {
    min-width: 0;
    display: flex;
}
.bsh-showcase-cell .bsh-card { width: 100%; height: 100%; }
.bsh-showcase-cell .bsh-card-media .bsh-card-imgwrap { background: var(--bsh-surface-2); }

/* Responsive showcase density (24 desktop tiles / 15 mobile) */
@media (min-width: 768px) {
    .bsh-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
}
@media (min-width: 992px) {
    .bsh-showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1200px) {
    .bsh-showcase-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    .bsh-showcase-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .bsh-showcase-head { margin: 1.15rem .1rem .8rem; }
    .bsh-showcase-grid { gap: .6rem; }
    /* Compact engagement buttons so they stay proportionate on small 2-col cells */
    .bsh-showcase .bsh-card-actions { right: .42rem; gap: .32rem; }
    .bsh-showcase .bsh-act { width: 32px; height: 32px; font-size: .86rem; }
    .bsh-showcase .bsh-act-count { min-width: 15px; padding: 1px 4px; font-size: .52rem; top: -5px; right: -5px; }
}

/* Category pages use app-like square tiles rather than folder cards. */
.brusite-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: .8rem;
}
.brusite-subcategory-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--bsh-text);
    text-align: center;
}
.brusite-subcategory-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid var(--bsh-border);
    border-radius: 12px;
    background: var(--bsh-surface-2);
    color: var(--bsh-gold-2);
    font-size: 1.55rem;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.brusite-subcategory-tile:hover { color: var(--bsh-gold-2); }
.brusite-subcategory-tile:hover .brusite-subcategory-icon {
    transform: translateY(-2px);
    border-color: var(--bsh-gold);
    background: var(--bsh-gold-soft);
}
.brusite-subcategory-name {
    max-width: 10em;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
}
.brusite-subcategory-count {
    font-size: .68rem;
    color: var(--bsh-text-3);
}

@media (max-width: 767.98px) {
    .bsh-m-hero-title,
    .bsh-m-hero-sub {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .bsh-m-hero-actions {
        width: 100%;
        align-items: center;
    }
    .bsh-m-hero-actions .bsh-btn {
        width: min(100%, 240px);
        min-width: 0;
    }
    .bsh-m-body { padding-left: .8rem; padding-right: .8rem; }
    .bsh-m-sec { margin-bottom: 1.05rem; }
    .bsh-m-cat {
        width: 84px;
        padding-left: .2rem;
        padding-right: .2rem;
    }
    .bsh-m-cat-ic {
        width: 62px;
        height: 62px;
        border-radius: 14px;
        font-size: 1.3rem;
    }
    .bsh-m-cat-name { font-size: .64rem; }
    .bsh-m-gaming { padding-left: 1.35rem; padding-right: 1.35rem; }
    .bsh-m-gaming .bsh-gaming-cta { color: #221703 !important; }
    .bsh-m-sellers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
    .bsh-m-seller { min-width: 0; min-height: 142px; }
    .bsh-m-2col .bsh-card-actions { right: .35rem; gap: .3rem; }
    .bsh-m-2col .bsh-act { width: 32px; height: 32px; font-size: .84rem; }
    .brusite-subcategory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .85rem .45rem;
    }
    .brusite-subcategory-icon {
        width: 58px;
        height: 58px;
        font-size: 1.2rem;
        border-radius: 10px;
    }
    .brusite-subcategory-name { font-size: .65rem; }
    .brusite-subcategory-count { font-size: .58rem; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .brusite-subcategory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Square category brand icons (Shop by Category tiles) */
.bsh-cat-ic.brand,
.bsh-m-cat-ic.brand {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.bsh-cat-ic.brand img.bsh-cat-ic-img,
.bsh-m-cat-ic.brand img.bsh-m-cat-ic-img {
    object-fit: cover;
    padding: 0;
}

/* ============================================================
   Shop by Category — full-bleed image tiles (brand icons)
   Image covers the entire chip; category name sits on a
   translucent white strip along the bottom. Rounded on every
   breakpoint (incl. mobile/tablet).
   ============================================================ */
.bsh-cat-chip.brand,
.bsh-m-cat.brand {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
    text-align: center;
}
.bsh-cat-chip.brand { border-radius: 16px; min-height: 96px; height: 96px; }
.bsh-cat-chip.brand .bsh-cat-ic,
.bsh-m-cat.brand .bsh-m-cat-ic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    margin: 0;
}
.bsh-cat-chip.brand .bsh-cat-ic img,
.bsh-m-cat.brand .bsh-m-cat-ic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    border-radius: 0;
}
.bsh-cat-chip.brand .bsh-cat-name,
.bsh-m-cat.brand .bsh-m-cat-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 3px 5px;
    background: rgba(255, 255, 255, .5);
    color: #111;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    -webkit-line-clamp: unset;
}
.bsh-cat-chip.brand:hover { transform: translateY(-2px); box-shadow: none; }

/* Mobile: keep near-square rounded tiles; image full-bleed, label overlay */
.bsh-m-cat.brand {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.bsh-m-cat.brand .bsh-m-cat-name {
    font-size: .62rem;
    padding: 3px 2px 4px;
}
.bsh-cat-chip.brand .bsh-cat-name {
    font-size: .66rem;
    padding: 4px 3px 5px;
}

/* ============================================================
   Category page — subcategory tiles that have a square brand PNG
   (public/assets/images/categories/{slug}.png) adopt the same
   full-bleed look as the home "Shop by Category" tiles: image
   covers the square tile, name on a translucent white strip along
   the bottom, item count as a small pill top-right. Subcategories
   without a PNG keep the themed Font Awesome tile above.
   ============================================================ */
.brusite-subcategory-grid.has-brand { gap: .9rem; }
.brusite-subcategory-tile.has-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: var(--bsh-surface-2);
    color: #111;
    text-align: center;
}
.brusite-subcategory-tile.has-image .brusite-subcategory-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    padding: 0;
}
.brusite-subcategory-tile.has-image .brusite-subcategory-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 5px 4px 6px;
    background: rgba(255, 255, 255, .55);
    color: #111;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
}
.brusite-subcategory-tile.has-image .brusite-subcategory-count {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(17, 17, 17, .55);
    color: #fff;
    font-size: .62rem;
    line-height: 1.4;
}
.brusite-subcategory-tile.has-image:hover {
    transform: translateY(-2px);
    color: #111;
    box-shadow: none;
}
@media (max-width: 767.98px) {
    .brusite-subcategory-tile.has-image { border-radius: 12px; }
    .brusite-subcategory-tile.has-image .brusite-subcategory-name {
        font-size: .62rem;
        padding: 3px 3px 4px;
    }
    .brusite-subcategory-tile.has-image .brusite-subcategory-count {
        top: 4px;
        right: 4px;
        padding: 1px 6px;
        font-size: .55rem;
    }
}

/* ============================================================
   MARKETPLACE HERO — ADMIN CAROUSEL MODE (Admin → Carousel)
   Only active when hero slides exist (`.…-car` modifier on the hero).
   Non-carousel hero keeps the original static image/markup untouched,
   so sizing & layout are byte-identical until an admin adds a slide.
   ============================================================ */

/* ── Desktop / tablet hero (.bsh-hero-car) ─────────────────────── */
.bsh-hero-car .bsh-hero-slides {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
}
.bsh-hero-car .bsh-hero-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.bsh-hero-car .bsh-hero-slide.is-on { opacity: 1; }

/* Stack per-slide text panels in the same grid cell → the hero box
   height stays content-driven (same as the static hero). */
.bsh-hero-car .bsh-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 100%);
}
.bsh-hero-car .bsh-hero-text {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .85s ease, visibility 0s linear .85s;
}
.bsh-hero-car .bsh-hero-text.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .85s ease, visibility 0s linear 0s;
}

/* Carousel dots reuse the exact static-dot visual language (8px circle,
   20px gold pill active) but as <button>s so they are operable. */
.bsh-hero-car .bsh-hero-dots button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.bsh-hero-car .bsh-hero-dots button.is-on {
    width: 20px;
    border-radius: 10px;
    background: #ffad00;
}
.bsh-hero-car .bsh-hero-dots button:focus-visible {
    outline: 2px solid #ffad00;
    outline-offset: 2px;
}

/* ── Phone hero (.bsh-m-hero-car) ─────────────────────────────── */
.bsh-m-hero-car {
    /* The phone-media CSS paints marketplace-hero.jpg directly on the
       section; in carousel mode the slide layers own the picture. */
    background-image: none;
    background-color: #0b0d0e;
}
.bsh-m-hero-car .bsh-m-hero-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    border-radius: inherit;
}
.bsh-m-hero-car .bsh-m-hero-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: 58% center;
    background-size: auto 100%;
    opacity: 0;
    transition: opacity 1s ease;
}
.bsh-m-hero-car .bsh-m-hero-slide.is-on { opacity: 1; }

.bsh-m-hero-car .bsh-m-hero-texts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 100%);
    width: 100%;
}
.bsh-m-hero-car .bsh-m-hero-text {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .85s ease, visibility 0s linear .85s;
}
.bsh-m-hero-car .bsh-m-hero-text.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .85s ease, visibility 0s linear 0s;
}

.bsh-m-hero-car .bsh-m-hero-dots {
    position: absolute;
    left: 50%;
    bottom: .55rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .32rem;
    align-items: center;
}
.bsh-m-hero-car .bsh-m-hero-dots button {
    display: block;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.bsh-m-hero-car .bsh-m-hero-dots button.is-on {
    width: 16px;
    border-radius: 9px;
    background: #ffad00;
}
.bsh-m-hero-car .bsh-m-hero-dots button:focus-visible {
    outline: 2px solid #ffad00;
    outline-offset: 2px;
}

/* ============================================================
   GOOGLE ADSENSE — pinned slot at the top of the
   "Advertise with BruSite" block (above the rotating banners).
   The <ins> is injected into whichever host is visible — desktop
   sidebar card or mobile full-width section — so only one unit
   ever exists on the page. Collapses away when no ad fills.
   ============================================================ */
.bsh-ad-zone {
    padding: .6rem .6rem .2rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 16px;
    box-shadow: var(--bsh-shadow);
    text-align: center;
}
.bsh-ad-eyebrow {
    display: block;
    margin: 0 0 .45rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bsh-text-3);
}
.bsh-ad-slot {
    display: block;
}
.bsh-ad-slot .adsbygoogle {
    display: block;
    width: 100%;
    margin: 0 auto;
}
.bsh-ad-zone.bsh-ad-empty { display: none !important; }

/* Pinned host: invisible until the partial's visibility script marks it live
   (only the container that is currently shown gets an ad unit). */
.bsh-ad-pin {
    display: none;
    margin: .7rem .7rem .3rem;
}
.bsh-ad-pin.is-live { display: block; }

/* ============================================================
   Intro-video modal (hero "Watch Video" CTA)
   Trigger is a <button> in the hero; markup is rendered at body
   level by main.php when a slide carries the #watch-video
   sentinel. Behaviour lives in home-redesign.js.
   ============================================================ */
.bru-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.bru-video-modal.is-active {
    opacity: 1;
    visibility: visible;
}
.bru-video-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 26, 23, .85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Column flow so the countdown is a real strip under the video. Pinning it
   absolutely inside the video box (as the naive overlay does) puts it straight
   over YouTube's own control bar. max-width is capped by the viewport height as
   well as 860px, so a 16:9 frame can never be taller than the screen on a
   landscape phone. */
.bru-video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(860px, calc((100vh - 2rem) * 16 / 9));
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
    transform: scale(.95);
    transition: transform .25s ease;
}
.bru-video-modal.is-active .bru-video-container {
    transform: scale(1);
}
.bru-video-frame-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.bru-video-frame-wrapper iframe,
.bru-video-frame-wrapper div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bru-video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, transform .15s;
}
.bru-video-close:hover {
    background: rgba(220, 38, 38, .85);
    transform: scale(1.05);
}
.bru-video-countdown {
    background: rgba(4, 120, 87, .95);
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    padding: 10px 16px;
    text-align: center;
    white-space: nowrap;
}
/* A <button> does not inherit font-family from its ancestor and takes
   cursor:default from the UA stylesheet, so the hero trigger needs both to sit
   identically beside the <a> buttons it replaces. Every other .bsh-btn
   property applies unchanged -- no .bsh-btn rule is element-qualified. */
button.bsh-btn {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* ============================================================
   ABOUT BRUSITE — homepage editorial band
   ------------------------------------------------------------
   Rendered once, from Views/home/index.php, deliberately outside the two
   viewport containers (see the note in partials/bsh-intro.php). Colours come
   from the bsh- tokens ONLY, so the band follows the dark theme like the rest
   of the page — the same rule bsh-advertise.php documents for its own block.
   ============================================================ */
.bsh-intro {
    background: var(--bsh-surface-2);
    border-top: 1px solid var(--bsh-border);
    padding: 3rem 0;
}
/* One column until 992px, then the copy/rail split. min-width:0 on the
   children stops a long word from forcing the grid wider than the screen. */
.bsh-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}
.bsh-intro-copy,
.bsh-intro-cards { min-width: 0; }

.bsh-intro-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bsh-gold-2);
    margin-bottom: .6rem;
}
.bsh-intro-title {
    /* clamp() so the type grows with the viewport instead of jumping at 992px. */
    font-size: clamp(1.45rem, 1.05rem + 2vw, 1.95rem);
    font-weight: 800;
    line-height: 1.22;
    color: var(--bsh-text);
    margin: 0 0 1rem;
    text-wrap: balance;
    overflow-wrap: break-word;
}
/* Running text wants a narrower measure than the page container gives it. */
.bsh-intro-body { max-width: 62ch; }
.bsh-intro-body p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--bsh-text-2);
    margin-bottom: 1rem;
}
.bsh-intro-body p:last-child { margin-bottom: 0; }
.bsh-intro-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem .75rem;
    margin-top: 1.6rem;
}
/* Colour comes from .bsh-btn-gold / .bsh-btn-outline — no link-colour rule
   here, or it would fight their !important. Only the focus ring is ours. */
.bsh-intro-links a:focus-visible {
    outline: 2px solid var(--bsh-gold);
    outline-offset: 2px;
    border-radius: 7px;
}
.bsh-intro-links .bsh-btn i { font-size: .72rem; }

/* The three trust highlights — icon tile ported from .bsh-qa-ic. */
.bsh-intro-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
.bsh-intro-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: var(--bsh-surface);
    border: 1px solid var(--bsh-border);
    border-radius: 14px;
    box-shadow: var(--bsh-shadow);
}
.bsh-intro-card-ic {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
    color: var(--bsh-gold-2);
    background: var(--bsh-gold-soft);
}
.bsh-intro-card-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
}
.bsh-intro-card-txt b {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bsh-text);
    margin-bottom: .15rem;
}
.bsh-intro-card-txt span {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--bsh-text-2);
}

@media (min-width: 992px) {
    .bsh-intro { padding: 4rem 0; }
    .bsh-intro-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 3rem;
        align-items: center;
    }
    .bsh-intro-body p { font-size: 1rem; }
    .bsh-intro-card-txt b { font-size: .95rem; }
    .bsh-intro-card-txt span { font-size: .85rem; }
}

/* ============================================================
   PRODUCT PAGE — "Buying with Confidence" block
   ------------------------------------------------------------
   Markup lives in Views/partials/product-trust.php. Tokens only: an inline
   light panel here would stay light on a #111318 dark page.
   ============================================================ */
.product-trust-info {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--bsh-surface-2);
    border: 1px solid var(--bsh-border);
    border-radius: 10px;
}
.product-trust-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bsh-text);
    margin: 0 0 .85rem;
}
.product-trust-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--bsh-text-2);
}
.product-trust-list li { margin-bottom: .5rem; }
.product-trust-list li:last-child { margin-bottom: 0; }
.product-trust-list strong { color: var(--bsh-text); font-weight: 600; }