/* MISSION 71 (home-catalog) -- the home page as catalog: compact hero with a central search, category rail, filter row,
   the "חדש" / "פופולרי" / "מומלצים" strips and the unified rich card lines (badges, availability, rating, likes).
   Everything is scoped to .pb-m71-* classes; mobile first, logical properties (RTL), no fixed width wider than 320px. */

/* ---- hero: shorter, search first ---- */
.pb-m71-hero { padding-block: var(--space-5) var(--space-4); }
.pb-m71-hero .pb-hero-title { margin-bottom: var(--space-2); }
.pb-m71-hero .pb-hero-sub { margin-bottom: var(--space-4); }
.pb-m71-search { display: flex; gap: 8px; align-items: stretch; margin: 0 0 var(--space-4); max-width: 640px; }
.pb-m71-search .pb-search { flex: 1 1 auto; min-width: 0; }
.pb-m71-search .pb-search input { width: 100%; min-width: 0; }
.pb-m71-search .pb-btn { flex: 0 0 auto; }
@media (max-width: 767px) {
    .pb-m71-hero { padding-block: var(--space-4) var(--space-3); }
    .pb-m71-hero .pb-hero-title { font-size: 1.75rem; }
    .pb-m71-hero .pb-hero-actions .pb-btn { flex: 1 1 100%; }
}

/* ---- catalog head: filter row (posts to the existing /Catalog parameters) ---- */
.pb-m71-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 var(--space-4); }
.pb-m71-filters fieldset { border: 0; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.pb-m71-filters legend, .pb-m71-filters .pb-m71-filter-label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; padding: 0; float: inline-start; margin-inline-end: 6px; }
.pb-m71-filters label { font-size: 0.86rem; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pb-m71-filters select { width: auto; min-width: 0; max-width: 220px; flex: 0 1 auto; min-height: var(--pb-touch-target, 48px); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 8px; font: inherit; background: var(--surface); color: var(--text-primary); }
@media (max-width: 480px) { .pb-m71-filters select { max-width: 100%; } }
.pb-m71-filters .pb-btn { min-height: var(--pb-h-button-md); } /* the filter apply is an OUTLINE (secondary) action: 44 */
.pb-m71-count { font-size: 0.82rem; color: var(--text-tertiary); margin: -4px 0 var(--space-3); }

/* ---- sections: a horizontal strip on phones, a grid row on wider screens ---- */
.pb-m71-strip { margin-bottom: var(--space-5); }
.pb-m71-strip-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 2px 6px;
    scrollbar-width: thin;
}
.pb-m71-strip-row > * { min-width: 0; max-width: 100%; scroll-snap-align: start; }
@media (min-width: 768px) {
    /* one row on every width: the strip scrolls sideways (snap) instead of wrapping into a second row above the fold */
    .pb-m71-strip-row { grid-auto-columns: 210px; gap: var(--space-4); }
}

/* ---- the closed-catalog note (launch gate) ---- */
.pb-m71-closed { background: var(--pb-surface-subtle); border-radius: var(--radius-md); padding: 16px; margin: 0 0 var(--space-5); }

/* ---- unified card lines ---- */
.pb-m71-badges { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); display: inline-flex; gap: 4px; z-index: 2; max-width: calc(100% - 60px); flex-wrap: wrap; }
.pb-m71-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
    background: var(--surface); color: var(--text-primary); box-shadow: none; border: 1px solid var(--pb-color-border);
}
.pb-m71-badge-new { background: var(--accent); color: var(--btn-contrast-text); }
.pb-m71-badge-popular { background: var(--pb-brand-soft); color: var(--pb-action-text); }
.pb-m71-availability { font-size: 0.8rem; margin-top: 3px; color: var(--text-secondary); }
.pb-m71-availability[data-availability="in-stock"] { color: var(--pb-success); }
.pb-m71-availability[data-availability="out-of-stock"] { color: var(--pb-danger); font-weight: 700; }
.pb-m71-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; margin-top: 3px; color: var(--text-secondary); }
.pb-m71-star { display: inline-flex; color: var(--pb-action-text); font-size: 0.9rem; line-height: 1; }
.pb-m71-social { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 3px; }
.pb-feed-card[data-unavailable="1"] .pb-feed-card-media img { filter: grayscale(.6); opacity: .85; }
.pb-feed-card-media img { display: block; }

/* ---- reduced motion / focus ---- */
.pb-m71-strip-row { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .pb-m71-strip-row { scroll-behavior: auto; } }
.pb-feed-card a:focus-visible, .pb-m71-search input:focus-visible, .pb-m71-filters select:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }