/* ============================================================
   MintRV Products — Frontend CSS
   ============================================================ */

/* ── Reset / Base ──────────────────────────────────────────── */
.mintprod *,
.mintprod *::before,
.mintprod *::after { box-sizing: border-box; }

.mintprod a { text-decoration: none; color: inherit; }
.mintprod img { max-width: 100%; height: auto; display: block; }

/* ── Page wrapper ───────────────────────────────────────────── */
.mintprod { font-family: system-ui, -apple-system, sans-serif; color: #1a1a1a; line-height: 1.5; }

/* ── Hero / Category header ─────────────────────────────────── */
.mp-hero { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 2.5rem 0 2rem; }
.mp-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.mp-eyebrow { font-size: 11px; font-weight: 600; color: #888; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.mp-hero h1 { font-size: 28px; font-weight: 600; line-height: 1.25; margin-bottom: .625rem; }
.mp-hero-sub { font-size: 15px; color: #555; max-width: 540px; line-height: 1.7; margin-bottom: 1.75rem; }

/* Search bar */
.mp-search { display: flex; max-width: 500px; border: 1.5px solid #d0d0d0; border-radius: 8px; overflow: hidden; background: #fff; }
.mp-search input { flex: 1; height: 46px; border: none; padding: 0 16px; font-size: 14px; background: transparent; outline: none; }
.mp-search button { height: 46px; padding: 0 22px; border: none; border-left: 1px solid #e8e8e8; background: #f5f5f5; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-search button:hover { background: #ececec; }

/* ── Trust bar ──────────────────────────────────────────────── */
.mp-trustbar { background: #fff; border-bottom: 1px solid #e8e8e8; }
.mp-trustbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(3,1fr); }
.mp-trust-item { padding: 1rem 1.5rem 1rem 0; display: flex; align-items: center; gap: 12px; border-right: 1px solid #f0f0f0; }
.mp-trust-item:last-child { border-right: none; }
.mp-trust-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mp-trust-text strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.mp-trust-text span { font-size: 12px; color: #777; }

/* ── Page body ──────────────────────────────────────────────── */
.mp-body { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.mp-page-bg { background: #f7f7f5; }

/* ── Section headers ────────────────────────────────────────── */
.mp-section-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; }
.mp-section-hd h2 { font-size: 16px; font-weight: 600; }
.mp-section-hd a { font-size: 13px; color: #666; }

/* ── Category grid (landing) ────────────────────────────────── */
.mp-cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 2.5rem; }
.mp-cat-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem .875rem 1rem; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mp-cat-card:hover { border-color: #aaa; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.mp-cat-icon { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mp-cat-name { font-size: 12px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.mp-cat-count { font-size: 11px; color: #888; }

/* ── Featured tabs ──────────────────────────────────────────── */
.mp-feat-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
.mp-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-cat-tab { font-size: 12px; padding: 5px 12px; border: 1px solid #ddd; border-radius: 20px; color: #666; cursor: pointer; background: #fff; white-space: nowrap; }
.mp-cat-tab.active, .mp-cat-tab:hover { background: #f0f0f0; border-color: #bbb; color: #1a1a1a; font-weight: 600; }

/* ── Product grid ───────────────────────────────────────────── */
.mp-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.mp-prod-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.mp-pc { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; }
.mp-pc:hover { border-color: #bbb; box-shadow: 0 2px 10px rgba(0,0,0,.07); }

.mp-pc-img { position: relative; background: #f5f5f5; overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.mp-pc-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mp-pc-img-placeholder { font-size: 11px; color: #aaa; }

.mp-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; z-index: 1; }
.mp-badge-best   { background: #dbeafe; color: #1e40af; }
.mp-badge-value  { background: #dcfce7; color: #166534; }
.mp-badge-editor { background: #fef3c7; color: #92400e; }

.mp-save-tag { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; background: #fee2e2; color: #991b1b; z-index: 1; }

.mp-pc-body { padding: .875rem; flex: 1; display: flex; flex-direction: column; }
.mp-pc-brand { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.mp-pc-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: .625rem; flex: 1; }
.mp-pc-price { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.mp-pc-price-was { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 6px; font-weight: 400; }
.mp-pc-meta { display: flex; align-items: center; gap: 6px; margin-bottom: .625rem; flex-wrap: wrap; }
.mp-prime { font-size: 10px; color: #1e40af; background: #dbeafe; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.mp-pc-merch { border-top: 1px solid #f0f0f0; padding-top: .5rem; display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-top: auto; }
.mp-pc-cta { display: block; margin-top: .625rem; text-align: center; font-size: 12px; font-weight: 600; padding: 7px; border: 1px solid #ddd; border-radius: 8px; color: #444; transition: background .15s; }
.mp-pc-cta:hover { background: #f5f5f5; }

/* ── Category page layout ───────────────────────────────────── */
.mp-cat-hero-row { display: grid; grid-template-columns: 1fr 220px; gap: 2rem; align-items: start; }
.mp-cat-desc { font-size: 14px; color: #555; line-height: 1.65; max-width: 500px; margin-bottom: 1rem; }
.mp-cat-meta { display: flex; gap: 1.5rem; font-size: 12px; color: #777; flex-wrap: wrap; }
.mp-cat-meta strong { color: #1a1a1a; font-weight: 600; }
.mp-cat-banner { height: 120px; background: #f5f5f5; border-radius: 10px; border: 1px solid #e8e8e8; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mp-cat-banner img { width: 100%; height: 100%; object-fit: cover; }
.mp-cat-banner-placeholder { font-size: 12px; color: #aaa; }

/* Toolbar */
.mp-toolbar { background: #fff; border-bottom: 1px solid #e8e8e8; }
.mp-toolbar-inner { max-width: 1100px; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mp-breadcrumb { font-size: 12px; color: #888; margin-bottom: 1rem; }
.mp-breadcrumb a { color: #888; }
.mp-breadcrumb a:hover { color: #1a1a1a; }
.mp-result-count { font-size: 12px; color: #777; }
.mp-sort-sel { font-size: 12px; border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; background: #fff; color: #1a1a1a; cursor: pointer; }

/* Active filter tags */
.mp-active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: .875rem; }
.mp-filter-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 10px; background: #dbeafe; color: #1e40af; border-radius: 20px; cursor: pointer; font-weight: 600; }
.mp-filter-tag:after { content: "×"; font-size: 14px; opacity: .7; margin-left: 2px; }

/* ── Sidebar ────────────────────────────────────────────────── */
.mp-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
.mp-sidebar { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; position: sticky; top: 1.5rem; }
.mp-sb-section { padding: .875rem 1rem; border-bottom: 1px solid #f0f0f0; }
.mp-sb-section:last-child { border-bottom: none; }
.mp-sb-hd { font-size: 12px; font-weight: 700; margin-bottom: .625rem; color: #1a1a1a; text-transform: uppercase; letter-spacing: .05em; }
.mp-sb-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.mp-sb-item input[type=checkbox], .mp-sb-item input[type=radio] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: #2563eb; }
.mp-sb-label { font-size: 13px; color: #444; flex: 1; }
.mp-sb-count { font-size: 11px; color: #aaa; }
.mp-sb-item.checked .mp-sb-label { color: #1a1a1a; font-weight: 600; }
.mp-price-inputs { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.mp-price-inputs input { width: 80px; height: 32px; border: 1px solid #ddd; border-radius: 6px; padding: 0 8px; font-size: 12px; background: #fafafa; }
.mp-price-inputs span { font-size: 12px; color: #aaa; }
.mp-sb-apply { display: block; width: 100%; margin-top: 10px; padding: 7px; font-size: 12px; font-weight: 600; text-align: center; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.mp-sb-apply:hover { background: #1d4ed8; }
.mp-sb-clear { display: block; text-align: center; font-size: 12px; color: #888; padding: .625rem; cursor: pointer; border-top: 1px solid #f0f0f0; }
.mp-sb-clear:hover { color: #1a1a1a; }

/* ── Product detail page ────────────────────────────────────── */
.mp-prod-layout { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.mp-prod-hero { display: grid; grid-template-columns: 340px 1fr; gap: 2rem; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.mp-prod-img-main { aspect-ratio: 1; background: #f5f5f5; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mp-prod-img-main img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.mp-prod-thumbs { display: flex; gap: 6px; }
.mp-prod-thumb { width: 56px; height: 56px; border: 1px solid #e8e8e8; border-radius: 6px; overflow: hidden; cursor: pointer; }
.mp-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mp-prod-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-bottom: .875rem; }
.mp-prod-h1 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: .625rem; }
.mp-prod-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; margin-bottom: .875rem; flex-wrap: wrap; }
.mp-prod-meta .sep { color: #ddd; }
.mp-prod-desc { font-size: 14px; color: #555; line-height: 1.65; margin-bottom: 1rem; }

/* Compatibility box */
.mp-compat { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: .875rem 1rem; margin-bottom: 1rem; }
.mp-compat-hd { font-size: 12px; font-weight: 700; margin-bottom: .5rem; color: #166534; }
.mp-compat-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; margin-bottom: 3px; }
.mp-compat-check { width: 18px; height: 18px; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #166534; flex-shrink: 0; font-weight: 700; }
.mp-compat-cta { font-size: 12px; color: #777; margin-top: 6px; }
.mp-compat-cta a { color: #2563eb; }

/* Card layout (WTB, specs, features) */
.mp-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.mp-card-hd { font-size: 14px; font-weight: 700; padding-bottom: .75rem; border-bottom: 1px solid #f0f0f0; margin-bottom: 1rem; }

/* Where to buy */
.mp-wtb-row { display: grid; grid-template-columns: 150px 1fr auto auto auto; gap: 12px; align-items: center; padding: .625rem 0; border-bottom: 1px solid #f5f5f5; }
.mp-wtb-row:last-child { border-bottom: none; }
.mp-wtb-merchant { font-size: 13px; font-weight: 700; }
.mp-wtb-best { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #dcfce7; color: #166534; margin-left: 6px; font-weight: 700; }
.mp-wtb-url { font-size: 12px; color: #888; }
.mp-wtb-price { font-size: 16px; font-weight: 700; }
.mp-wtb-save { font-size: 11px; color: #991b1b; }
.mp-buy-btn { font-size: 12px; font-weight: 700; padding: 7px 16px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; white-space: nowrap; background: #fff; transition: background .15s; }
.mp-buy-btn:hover { background: #f5f5f5; }
.mp-buy-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.mp-buy-btn-primary:hover { background: #1d4ed8; }

/* Price history chart */
.mp-history-windows { display: flex; gap: 4px; }
.mp-win-btn { font-size: 11px; padding: 4px 10px; border: 1px solid #e0e0e0; border-radius: 20px; cursor: pointer; background: #fff; color: #666; }
.mp-win-btn.active { background: #f0f0f0; border-color: #bbb; color: #1a1a1a; font-weight: 700; }
.mp-history-stats { display: flex; gap: 2rem; margin: .875rem 0; flex-wrap: wrap; }
.mp-hstat { font-size: 12px; color: #777; }
.mp-hstat strong { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; margin-top: 2px; }
.mp-hstat strong.low { color: #166534; }
.mp-hstat strong.high { color: #991b1b; }
.mp-chart-wrap { position: relative; height: 100px; }
.mp-chart-labels { display: flex; justify-content: space-between; font-size: 10px; color: #aaa; margin-top: 4px; }
.mp-history-insight { margin-top: .875rem; padding: .625rem .875rem; background: #f0f4ff; border-radius: 6px; font-size: 13px; color: #555; border-left: 3px solid #2563eb; }

/* Specs grid */
.mp-specs-grid { display: grid; grid-template-columns: 1fr 1fr; }
.mp-spec-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; gap: 1rem; }
.mp-spec-row:nth-child(odd) { padding-right: 2rem; }
.mp-spec-key { color: #777; }
.mp-spec-val { font-weight: 600; text-align: right; }

/* Features list */
.mp-feat-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 2rem; }
.mp-feat-list li { font-size: 13px; color: #555; padding: .3rem 0 .3rem 16px; border-bottom: 1px solid #f5f5f5; position: relative; }
.mp-feat-list li::before { content: "•"; position: absolute; left: 4px; color: #2563eb; font-weight: 700; }

/* Cross-sell */
.mp-xsell-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mp-xc { border: 1px solid #e8e8e8; border-radius: 10px; padding: .875rem; cursor: pointer; transition: border-color .15s; }
.mp-xc:hover { border-color: #bbb; }
.mp-xc-img { aspect-ratio: 1; background: #f5f5f5; border-radius: 6px; margin-bottom: .625rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mp-xc-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mp-xc-brand { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.mp-xc-title { font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.mp-xc-price { font-size: 14px; font-weight: 700; }

/* ── Garage banner ──────────────────────────────────────────── */
.mp-garage-strip { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; gap: 1.5rem; }
.mp-garage-text strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.mp-garage-text span { font-size: 13px; color: #666; }
.mp-garage-btn { font-size: 13px; font-weight: 700; padding: 9px 20px; border: 1.5px solid #1a1a1a; border-radius: 8px; cursor: pointer; white-space: nowrap; background: #fff; transition: background .15s; }
.mp-garage-btn:hover { background: #f5f5f5; }

/* ── Pagination ─────────────────────────────────────────────── */
.mp-pager { display: flex; gap: 4px; justify-content: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #f0f0f0; }
.mp-pg { min-width: 36px; height: 36px; padding: 0 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid #e8e8e8; border-radius: 8px; cursor: pointer; background: #fff; color: #444; transition: background .15s; }
.mp-pg:hover { background: #f5f5f5; }
.mp-pg.active { background: #f0f0f0; border-color: #bbb; font-weight: 700; color: #1a1a1a; }
.mp-pg.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mp-prod-hero { grid-template-columns: 1fr; }
    .mp-layout { grid-template-columns: 1fr; }
    .mp-cat-hero-row { grid-template-columns: 1fr; }
    .mp-cat-banner { display: none; }
    .mp-wtb-row { grid-template-columns: 1fr auto auto; gap: 8px; }
    .mp-wtb-url { display: none; }
    .mp-specs-grid { grid-template-columns: 1fr; }
    .mp-feat-list { grid-template-columns: 1fr; }
    .mp-xsell-grid { grid-template-columns: repeat(2,1fr); }
    .mp-prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mp-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .mp-hero h1 { font-size: 22px; }
    .mp-prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mp-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mp-trustbar-inner { grid-template-columns: 1fr; }
    .mp-xsell-grid { grid-template-columns: 1fr; }
    .mp-garage-strip { flex-direction: column; text-align: center; }
    .mp-history-stats { gap: 1rem; }
    .mp-sidebar { display: none; }
    .mp-mobile-filter-btn { display: flex !important; }
}

/* Mobile filter button (hidden on desktop) */
.mp-mobile-filter-btn { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 16px; border: 1.5px solid #1a1a1a; border-radius: 8px; cursor: pointer; background: #fff; margin-bottom: 1rem; }

/* Mobile filter drawer */
.mp-filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }
.mp-filter-overlay.open { display: block; }
.mp-filter-drawer { position: fixed; inset: 0; background: #fff; z-index: 1000; overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease; }
.mp-filter-drawer.open { transform: translateX(0); }
.mp-filter-drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #e8e8e8; font-weight: 700; font-size: 16px; position: sticky; top: 0; background: #fff; z-index: 1; }
.mp-filter-drawer-close { font-size: 24px; cursor: pointer; line-height: 1; color: #666; }
.mp-filter-drawer-body { padding: 0 1.5rem 5rem; }
.mp-filter-drawer-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; background: #fff; border-top: 1px solid #e8e8e8; display: flex; gap: 10px; }
.mp-filter-drawer-footer .mp-btn-apply { flex: 1; padding: 12px; font-size: 14px; font-weight: 700; background: #2563eb; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.mp-filter-drawer-footer .mp-btn-reset { padding: 12px 20px; font-size: 14px; font-weight: 600; background: #fff; color: #1a1a1a; border: 1.5px solid #ddd; border-radius: 8px; cursor: pointer; }

/* ============================================================
   v1.2.0 additions — Search view + wider layouts
   ============================================================ */

/* ── Wide body (search + category pages) ───────────────────── */
.mp-body-wide { max-width: 1280px; }

/* ── Wider sidebar layout for wider body ────────────────────── */
.mp-layout-wide { grid-template-columns: 240px 1fr; }

/* ── Category keyword search bar ────────────────────────────── */
.mp-cat-searchbar-wrap { background: #fff; border-bottom: 1px solid #e8e8e8; padding: .875rem 0; }
.mp-cat-search { max-width: 560px; }

/* ── Search page search bar ─────────────────────────────────── */
.mp-search-bar { display: flex; border: 1.5px solid #d0d0d0; border-radius: 8px; overflow: hidden; background: #fff; max-width: 100%; }
.mp-search-bar input[type=text] { flex: 1; height: 46px; border: none; padding: 0 16px; font-size: 14px; background: transparent; outline: none; }
.mp-search-bar select { height: 46px; border: none; border-left: 1px solid #e8e8e8; padding: 0 12px; font-size: 13px; background: #f5f5f5; cursor: pointer; outline: none; min-width: 160px; }
.mp-search-bar button { height: 46px; padding: 0 22px; border: none; border-left: 1px solid #e8e8e8; background: #21b9a7; color: #04342C; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-search-bar button:hover { background: #1da898; }

/* ── Results bar (count + sort) ─────────────────────────────── */
.mp-results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #f0f0f0; }

/* ── Category header injection (Amazon browse-node style) ───── */
.mp-cat-inject { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.mp-cat-inject-minimal { padding: .875rem 1.25rem; }
.mp-cat-inject-title { font-size: 20px; font-weight: 600; margin-bottom: .5rem; color: #1a1a1a; }
.mp-cat-inject-desc { font-size: 13px; color: #555; line-height: 1.65; max-width: 680px; margin-bottom: .625rem; }
.mp-cat-inject-link { font-size: 12px; color: #21b9a7; font-weight: 600; }
.mp-cat-inject-link:hover { text-decoration: underline; }

/* ── Search product grid (4 cols) ───────────────────────────── */
.mp-prod-grid-search { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ── Responsive updates for wider layouts ───────────────────── */
@media (max-width: 1100px) {
    .mp-prod-grid-search { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .mp-layout-wide { grid-template-columns: 220px 1fr; }
}

@media (max-width: 900px) {
    .mp-layout-wide { grid-template-columns: 1fr; }
    .mp-prod-grid-search { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mp-search-bar select { display: none; }
    .mp-cat-searchbar-wrap { display: none; }
}

@media (max-width: 600px) {
    .mp-prod-grid-search { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mp-search-bar { flex-wrap: wrap; }
    .mp-results-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Hero background image with gradient (v1.2.0) ───────────────────────── */
/* Image right-aligned, gradient fades white→transparent at 48–72%          */
/* so text always sits on clean white regardless of image content            */
.mp-hero-bg {
    background-color: #fff;
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 260px;
}
.mp-hero-bg .mp-hero-inner {
    /* Keep text content within left 55% so it never overlaps the image */
    max-width: 580px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    /* On mobile, collapse to solid white — image would be too small */
    .mp-hero-bg {
        background-image: none !important;
        min-height: auto;
    }
    .mp-hero-bg .mp-hero-inner {
        max-width: 100%;
    }
}