/* ============================================================
   E · Catalog/List page extras
   依赖 _tokens.css · _e-fashion.css
   只为 B 原型(catalog / search / favorites)新增的类
   ============================================================ */

/* ───────── Sub-header / search context bar ───────── */
.e-subheader { background: #fff; border-bottom: 1px solid var(--color-border); }
.e-subheader__inner { max-width: 1280px; margin: 0 auto; padding: 16px var(--space-container-x); display: flex; align-items: center; gap: 16px; }
.e-subsearch { flex: 1; max-width: 560px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 14px; padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 10px; transition: border-color var(--duration-fast) var(--ease-out); }
.e-subsearch:focus-within { border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.e-subsearch input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 14px; background: transparent; min-width: 0; }
.e-subsearch input::placeholder { color: var(--color-text-muted); }
.e-subsearch__btn { background: var(--color-cta); color: #fff; border: 0; padding: 8px 16px; border-radius: 10px; font-weight: 800; font-size: 13px; cursor: pointer; }
.e-subsearch__btn:hover { background: var(--color-cta-hover); }

.e-platform-tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-surface); border-radius: 12px; flex-shrink: 0; }
.e-platform-tabs button { background: transparent; border: 0; padding: 6px 12px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.e-platform-tabs button.is-active { background: #fff; color: var(--color-text); box-shadow: var(--shadow-soft); }
.e-platform-tabs button:hover:not(.is-active) { color: var(--color-text); }

/* ───────── Breadcrumb ───────── */
.e-bread { max-width: 1280px; margin: 0 auto; padding: 14px var(--space-container-x) 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; }
.e-bread a { color: var(--color-text-muted); }
.e-bread a:hover { color: var(--color-primary-fill); }
.e-bread__sep { opacity: 0.4; }
.e-bread__current { color: var(--color-text); font-weight: 600; }

/* ───────── Catalog header (title + sort + count) ───────── */
.e-cat-head { max-width: 1280px; margin: 0 auto; padding: 16px var(--space-container-x) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.e-cat-head h1 { font-family: var(--font-display); font-size: 38px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.e-cat-head h1 .accent { color: var(--color-primary-fill); }
.e-cat-head__meta { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.e-cat-head__meta strong { color: var(--color-text); font-weight: 700; }

.e-sort-bar { display: flex; align-items: center; gap: 10px; }
.e-sort-bar__label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.e-select { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 32px 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%235E726B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.e-select:hover { border-color: var(--color-primary); }
.e-view-toggle { display: flex; gap: 2px; padding: 2px; background: var(--color-surface); border-radius: 10px; }
.e-view-toggle button { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: var(--color-text-muted); }
.e-view-toggle button.is-active { background: #fff; color: var(--color-text); box-shadow: var(--shadow-soft); }

/* ───────── Active filter chips row ───────── */
.e-active-filters { max-width: 1280px; margin: 0 auto; padding: 12px var(--space-container-x) 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.e-active-filters__label { font-size: 12px; color: var(--color-text-muted); font-weight: 700; }
.e-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px 6px 12px; background: var(--color-primary-soft); color: var(--color-primary-fill); border: 1px solid rgba(11,168,136,.3); font-size: 12px; font-weight: 600; border-radius: 999px; }
.e-filter-chip__x { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-fill); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.e-filter-chip__x:hover { background: var(--color-primary-fill-hover); }
.e-clear-all { background: transparent; border: 0; color: var(--color-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 8px; text-decoration: underline; text-underline-offset: 2px; }
.e-clear-all:hover { color: var(--color-danger); }

/* ───────── Layout ───────── */
.e-cat-layout { max-width: 1280px; margin: 0 auto; padding: 8px var(--space-container-x) 64px; display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .e-cat-layout { grid-template-columns: 1fr; } .e-filters { display: none; } }

/* ───────── Filters sidebar ───────── */
.e-filters { position: sticky; top: 72px; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 6px 0; }
.e-filters__group { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.e-filters__group:last-child { border-bottom: 0; }
.e-filters__h { font-family: var(--font-display); font-size: 13px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.005em; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.e-filters__h__count { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted); font-weight: 600; }

/* price range slider mock */
.e-price-range { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.e-price-range input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 12px; }
.e-price-range input:focus { outline: 0; border-color: var(--color-primary); }
.e-price-range__sep { color: var(--color-text-muted); font-size: 12px; }
.e-price-slider { height: 4px; background: var(--color-surface-muted); border-radius: 2px; position: relative; margin: 14px 6px 8px; }
.e-price-slider__fill { position: absolute; left: 18%; right: 32%; top: 0; bottom: 0; background: var(--color-primary); border-radius: 2px; }
.e-price-slider__h { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--color-primary-fill); cursor: grab; }
.e-price-slider__h--l { left: 18%; }
.e-price-slider__h--r { left: 68%; }
.e-price-hist { display: flex; align-items: flex-end; gap: 2px; height: 32px; margin-bottom: 4px; padding: 0 4px; }
.e-price-hist span { flex: 1; background: var(--color-primary-soft); border-radius: 1px 1px 0 0; min-width: 0; }

/* checkbox/option list */
.e-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--color-text); }
.e-check input { position: absolute; opacity: 0; pointer-events: none; }
.e-check__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--color-border-strong); background: #fff; display: grid; place-items: center; flex-shrink: 0; transition: all var(--duration-fast) var(--ease-out); }
.e-check input:checked + .e-check__box { background: var(--color-primary-fill); border-color: var(--color-primary-fill); }
.e-check input:checked + .e-check__box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.e-check__label { flex: 1; min-width: 0; }
.e-check__count { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted); }
.e-check:hover .e-check__box { border-color: var(--color-primary-fill); }

/* size chips */
.e-size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.e-size-chip { padding: 8px 0; text-align: center; background: #fff; border: 1.5px solid var(--color-border); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--color-text); }
.e-size-chip:hover { border-color: var(--color-primary); }
.e-size-chip.is-active { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.e-size-chip:disabled { background: var(--color-surface-muted); color: var(--color-text-disabled); border-color: var(--color-border); cursor: not-allowed; text-decoration: line-through; }

/* rating stars filter */
.e-rating-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 12px; color: var(--color-text-muted); }
.e-rating-row__stars { color: var(--color-sticker-yellow); font-size: 14px; letter-spacing: 1px; }
.e-rating-row__from { color: var(--color-text); font-weight: 600; }
.e-rating-row__count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; }

/* ───────── Results area ───────── */
.e-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1180px) { .e-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .e-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* re-styled e-product for catalog (slightly more meta) */
.e-product--cat .e-product__title { -webkit-line-clamp: 2; min-height: calc(13px * 1.4 * 2); }
.e-product--cat .e-product__shop { font-size: 11px; color: var(--color-text-muted); padding: 0 6px; margin-top: -4px; display: flex; align-items: center; gap: 4px; }
.e-product--cat .e-product__shop strong { color: var(--color-text); font-weight: 600; }

/* inline promo card slipped into grid */
.e-inline-promo { background: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-hover) 100%); color: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 280px; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out); }
.e-inline-promo:hover { transform: translateY(-2px); }
.e-inline-promo h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; margin: 0 0 8px; letter-spacing: -0.01em; }
.e-inline-promo p { font-size: 13px; opacity: 0.9; line-height: 1.5; margin: 0 0 14px; }
.e-inline-promo__cta { background: rgba(255,255,255,.95); color: var(--color-cta); padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 12px; align-self: flex-start; }
.e-inline-promo__deco { position: absolute; right: -18px; bottom: -24px; font-size: 140px; line-height: 1; opacity: 0.55; pointer-events: none; user-select: none; }

/* pagination */
.e-pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 40px; }
.e-pager button { min-width: 40px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--color-text); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.e-pager button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary-fill); }
.e-pager button.is-active { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.e-pager button:disabled { color: var(--color-text-disabled); cursor: not-allowed; background: var(--color-surface); }
.e-pager__dots { padding: 0 4px; color: var(--color-text-muted); }
.e-pager__summary { font-size: 12px; color: var(--color-text-muted); margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--color-border); }

/* sticky filter mobile button (not used in desktop demo but defined) */
.e-filter-fab { display: none; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 20; background: var(--color-text); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 800; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.18); border: 0; gap: 8px; align-items: center; }
@media (max-width: 900px) { .e-filter-fab { display: inline-flex; } }