/* 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; }

/* ---- V46 R23 (AT4): the rail is a named, focusable region that scrolls inside its own track. The end edge fades while more
   cards follow (continuation cue, both directions through the logical mask), the scrollbar stays visible (thin), the focused
   region shows the shared ring and never hides the section title / "show all" (they sit outside the track). No page-level
   horizontal scroll: the track clips at 100% of its container (min-width 0 on the grid items above). ---- */
.pb-m71-strip-row[data-pb-rail] {
    max-width: 100%;
    scroll-padding-inline: 12px;
    -webkit-mask-image: linear-gradient(to left, transparent 0, currentColor 28px, currentColor calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, currentColor 28px, currentColor calc(100% - 28px), transparent 100%);
    padding-inline: 2px;
}
.pb-m71-strip-row[data-pb-rail]:focus-visible { outline: 2px solid var(--pb-color-focus); outline-offset: 2px; }
@media (hover: none) { .pb-m71-strip-row[data-pb-rail] { scrollbar-width: auto; } }

/* ---- 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; }