/* SI Catalog Hub - builds on si_webstore's catalog_assets (--sic-* vars) */

.sch { --sch-bar-h: 60px; }

/* ---------- hero ---------- */
.sch-hero {
    background: linear-gradient(120deg, #1c2430 0%, #2a3648 55%, #3b3040 100%);
    color: #fff; padding: 48px 0 40px; position: relative; overflow: hidden;
}
.sch-hero:after {
    content: ""; position: absolute; right: -140px; top: -140px; width: 460px; height: 460px;
    border-radius: 50%; background: radial-gradient(circle, rgba(245,130,32,.32), transparent 65%);
    pointer-events: none;
}
.sch-hero h1 { font-weight: 800; font-size: 2.3rem; letter-spacing: -.5px; margin: 0 0 8px; color: #fff; }
.sch-hero p { color: #c6cdd8; font-size: 1.05rem; max-width: 640px; margin: 0; }
.sch-search { position: relative; max-width: 720px; margin-top: 22px; z-index: 1; }
.sch-search input {
    width: 100%; border: 0; border-radius: 14px; padding: 17px 140px 17px 50px;
    font-size: 1.05rem; color: var(--sic-ink); box-shadow: 0 12px 34px rgba(0,0,0,.28);
    -webkit-appearance: none; appearance: none;
}
.sch-search input:focus { outline: 3px solid rgba(245,130,32,.55); outline-offset: 0; }
.sch-search-ico { position: absolute; left: 17px; top: 50%; width: 21px; height: 21px;
    transform: translateY(-50%); fill: #9aa5b5; pointer-events: none; }
.sch-search button {
    position: absolute; right: 7px; top: 7px; bottom: 7px; border: 0; border-radius: 10px;
    background: var(--sic-accent); color: #fff; font-weight: 700; padding: 0 26px; cursor: pointer;
}
.sch-search button:hover { background: var(--sic-accent-dark); }
.sch-stats { margin-top: 14px; color: #9aa5b5; font-size: .9rem; }
.sch-stats b { color: #fff; }

/* ---------- quick picks ---------- */
.sch-picks { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: center; }
.sch-picks::-webkit-scrollbar { display: none; }
.sch-picks + .sch-picks { padding-top: 8px; }
.sch-picks-lbl { flex: 0 0 auto; font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--sic-muted); width: 62px; }
.sch-chip {
    flex: 0 0 auto; background: #fff; border: 1px solid var(--sic-line); color: var(--sic-ink);
    padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
    text-decoration: none !important; white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.sch-chip:hover { border-color: var(--sic-accent); color: var(--sic-accent-dark); }
.sch-chip.active { background: var(--sic-ink); border-color: var(--sic-ink); color: #fff; }
.sch-chip-promo { border-style: dashed; }

/* ---------- sticky bar ---------- */
.sch-bar { position: sticky; top: 0; z-index: 20; background: rgba(246,247,249,.94);
    backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--sic-line); margin-top: 14px; }
.sch-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: var(--sch-bar-h); flex-wrap: wrap; }
.sch-tabs { display: flex; gap: 4px; }
.sch-tab { border: 0; background: transparent; padding: 9px 14px; border-radius: 9px;
    font-weight: 700; color: var(--sic-muted); cursor: pointer; font-size: .95rem; }
.sch-tab:hover { color: var(--sic-ink); background: #fff; }
.sch-tab.active { color: var(--sic-ink); background: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.1); }
.sch-n { font-weight: 600; color: var(--sic-muted); font-size: .8rem; margin-left: 2px; }
.sch-bar-right { display: flex; align-items: center; gap: 10px; }
.sch-summary { color: var(--sic-muted); font-size: .88rem; }
.sch-sort { border: 1px solid var(--sic-line); background: #fff; border-radius: 9px; padding: 8px 10px;
    font-weight: 600; color: var(--sic-ink); font-size: .9rem; }
.sch-filter-btn { display: none; border: 1px solid var(--sic-line); background: #fff; border-radius: 9px;
    padding: 8px 14px; font-weight: 700; color: var(--sic-ink); }

/* ---------- active filters ---------- */
.sch-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.sch-active[hidden] { display: none; }
.sch-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sic-ink);
    background: var(--sic-ink); color: #fff; border-radius: 999px; padding: 5px 8px 5px 12px;
    font-size: .85rem; font-weight: 600; cursor: pointer; }
.sch-pill:hover { background: var(--sic-accent-dark); border-color: var(--sic-accent-dark); }
.sch-pill-x { font-size: 1.05rem; line-height: 1; opacity: .8; }
.sch-pill-clear { border: 0; background: none; color: var(--sic-accent-dark); font-weight: 700;
    font-size: .85rem; cursor: pointer; padding: 4px 6px; }

/* ---------- layout ---------- */
.sch-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; padding: 22px 0 50px; }
.sch-side { align-self: start; position: sticky; top: calc(var(--sch-bar-h) + 14px);
    max-height: calc(100vh - var(--sch-bar-h) - 28px); overflow: auto; padding-right: 4px;
    scrollbar-width: thin; }
.sch-side-head { display: none; }
.sch-side-sec { background: #fff; border: 1px solid var(--sic-line); border-radius: 12px;
    padding: 14px 14px 8px; margin-bottom: 14px; }
.sch-side-sec[hidden] { display: none; }
.sch-side h6 { font-weight: 800; color: var(--sic-ink); font-size: .74rem; text-transform: uppercase;
    letter-spacing: .07em; margin-bottom: 8px; }
.sch-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px;
    cursor: pointer; font-size: .9rem; color: var(--sic-ink); margin: 0 0 2px; width: 100%; }
.sch-opt:hover { background: var(--sic-bg); }
.sch-opt input { accent-color: var(--sic-accent); width: 15px; height: 15px; flex: 0 0 auto; }
.sch-opt .lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-opt .cnt { color: var(--sic-muted); font-size: .78rem; }
.sch-opt.zero { opacity: .45; }
.sch-more { border: 0; background: none; color: var(--sic-accent-dark); font-weight: 700;
    font-size: .85rem; padding: 4px 6px 8px; cursor: pointer; }
.sch-clear { width: 100%; text-align: center; }

/* ---------- grid + cards ---------- */
.sch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.sch-card {
    background: #fff; border: 1px solid var(--sic-line); border-radius: 13px; overflow: hidden;
    text-decoration: none !important; display: flex; flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
    content-visibility: auto; contain-intrinsic-size: 320px;
}
.sch-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(16,24,40,.12); }
.sch-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    padding: 14px; background: #fff; }
.sch-img img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0;
    transition: opacity .25s ease, transform .25s ease; }
.sch-img img.in, .sch-img img:not([data-fade]) { opacity: 1; }
.sch-card:hover .sch-img img { transform: scale(1.045); }
.sch-body { padding: 11px 14px 14px; border-top: 1px solid var(--sic-line); display: flex;
    flex-direction: column; flex: 1 1 auto; }
.sch-meta { display: flex; align-items: center; gap: 7px; min-height: 18px; }
.sch-badge { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 999px; }
.sch-badge-apparel { background: #eef2f7; color: #3c4a5e; }
.sch-badge-promo { background: #fef1e4; color: var(--sic-accent-dark); }
.sch-brand { color: var(--sic-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-name { color: var(--sic-ink); font-weight: 600; font-size: .92rem; line-height: 1.32;
    margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.45em; }
.sch-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.sch-price { color: var(--sic-ink); font-weight: 800; }
.sch-price small { color: var(--sic-muted); font-weight: 500; }
.sch-colors { color: var(--sic-muted); font-size: .78rem; }

/* skeletons */
.sch-skel { pointer-events: none; }
.sch-skel .sch-img, .sch-skel .sch-line {
    background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);
    background-size: 400% 100%; animation: sch-shimmer 1.3s ease infinite;
}
.sch-skel .sch-img { margin: 12px; border-radius: 10px; padding: 0; }
.sch-skel .sch-line { height: 11px; border-radius: 6px; margin: 6px 0; }
.sch-skel .sch-line.short { width: 55%; }
@keyframes sch-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
    .sch-skel .sch-img, .sch-skel .sch-line { animation: none; }
    .sch-card, .sch-img img { transition: none; }
}

.sch-status { text-align: center; color: var(--sic-muted); padding: 22px 0 6px; font-size: .92rem; min-height: 20px; }
.sch-status .sic-btn, .sch-status .sic-btn-ghost { margin-top: 10px; }
.sch-empty { background: #fff; border: 1px dashed #cfd5df; border-radius: 13px; padding: 46px 20px;
    text-align: center; color: var(--sic-muted); grid-column: 1 / -1; }
.sch-empty h5 { color: var(--sic-ink); font-weight: 700; }
.sch-sentinel { height: 1px; }
.sch-cta { margin-top: 30px; }
.sch-section { grid-column: 1 / -1; font-weight: 800; color: var(--sic-ink); font-size: 1.05rem;
    margin: 8px 0 -4px; display: flex; align-items: baseline; gap: 10px; }
.sch-section a { font-size: .85rem; font-weight: 700; color: var(--sic-accent-dark); }

/* ---------- promo detail ---------- */
.sch-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sch-thumb { width: 64px; height: 64px; border: 1px solid var(--sic-line); background: #fff;
    border-radius: 9px; padding: 4px; cursor: pointer; }
.sch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sch-thumb.active, .sch-thumb:hover { border-color: var(--sic-accent); }
.sch-tiers { border-collapse: collapse; margin: 8px 0 6px; font-size: .9rem; }
.sch-tiers th, .sch-tiers td { border: 1px solid var(--sic-line); padding: 6px 12px; text-align: center; background: #fff; }
.sch-tiers th { background: var(--sic-bg); color: var(--sic-muted); font-weight: 700; text-align: left; }
.sch-specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9rem; margin: 6px 0 4px; }
.sch-specs dt { color: var(--sic-muted); font-weight: 700; }
.sch-specs dd { margin: 0; color: var(--sic-ink); }
.sch-gone { background: #fff4e5; border: 1px solid #f5c48b; color: #8a4b08; border-radius: 10px;
    padding: 10px 14px; margin: 8px 0; font-size: .9rem; }

/* ---------- mobile ---------- */
.sch-scrim { display: none; }
@media (max-width: 991px) {
    .sch-hero { padding: 34px 0 28px; }
    .sch-hero h1 { font-size: 1.7rem; }
    .sch-layout { grid-template-columns: 1fr; }
    .sch-filter-btn { display: inline-block; }
    .sch-summary { display: none; }
    .sch-side {
        position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); max-height: none;
        background: var(--sic-bg); z-index: 1050; padding: 14px; transform: translateX(-105%);
        transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0,0,0,.2);
    }
    .sch.sch-filters-open .sch-side { transform: none; }
    .sch-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .sch-side-close { border: 0; background: none; font-size: 1.6rem; line-height: 1; }
    .sch.sch-filters-open .sch-scrim { display: block; position: fixed; inset: 0;
        background: rgba(16,24,40,.45); z-index: 1040; }
    .sch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sch-search input { padding-right: 110px; }
    .sch-search button { padding: 0 16px; }
}
@media (max-width: 420px) {
    .sch-body { padding: 9px 10px 11px; }
    .sch-name { font-size: .86rem; }
}

/* ---------- front-page showcase: category tiles + popular strip ---------- */
.sch-has-show:not(.sch-browsing) .sch-picks-wrap { display: none; }
.sch-browsing .sch-show { display: none; }
.sch-show { padding-top: 26px; }
.sch-show-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; }
.sch-show-head h2, .sch-show-all h2 { font-size: 1.3rem; font-weight: 800; color: var(--sic-ink); margin: 0;
    letter-spacing: -.3px; }
.sch-show-all { margin-top: 22px; }

.sch-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sch-tile { position: relative; display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--sic-line); border-radius: 16px; overflow: hidden; text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sch-tile:hover, .sch-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(16,24,40,.12);
    border-color: var(--sic-accent); outline: none; }
.sch-tile-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 14px;
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f1f3f6 72%); }
.sch-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.sch-tile:hover .sch-tile-img img { transform: scale(1.06); }
.sch-tile-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px;
    border-top: 1px solid var(--sic-line); }
.sch-tile-txt b { color: var(--sic-ink); font-size: .92rem; line-height: 1.25; }
.sch-tile-txt small { color: var(--sic-muted); font-size: .76rem; }
.sch-tile-txt:after { content: ""; display: block; height: 3px; width: 26px; border-radius: 2px;
    background: var(--sic-accent); margin-top: 7px; transition: width .2s ease; }
.sch-tile:hover .sch-tile-txt:after { width: 56px; }
.sch-tile-promo .sch-tile-img { background: linear-gradient(140deg, #1c2430 0%, #2a3648 55%, #3b3040 100%); }
.sch-tile-promo .sch-tile-img img { background: #fff; border-radius: 12px; padding: 8px; }
.sch-tile-mono { font-size: 3.2rem; font-weight: 800; color: #fff; line-height: 1;
    text-shadow: 0 0 28px rgba(245,130,32,.7); }
.sch-tile-promo .sch-tile-txt small { color: var(--sic-accent-dark); font-weight: 700; }

.sch-pop { margin-top: 30px; }
.sch-pop-nav { display: flex; gap: 6px; }
.sch-pop-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sic-line); background: #fff;
    font-size: 1.45rem; line-height: 1; color: var(--sic-ink); cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 0 3px; }
.sch-pop-btn:hover { border-color: var(--sic-accent); color: var(--sic-accent-dark); }
.sch-pop-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 16px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sch-pop-track .sch-card { flex: 0 0 220px; scroll-snap-align: start; content-visibility: visible; }
.sch-pop-track:focus-visible { outline: 2px solid rgba(245,130,32,.55); outline-offset: 4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
    .sch-tile, .sch-tile-img img, .sch-tile-txt:after { transition: none; }
}
@media (max-width: 600px) {
    .sch-show { padding-top: 18px; }
    .sch-tiles { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none;
        grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; gap: 10px; }
    .sch-tile { scroll-snap-align: start; }
    .sch-pop-track .sch-card { flex-basis: 46%; }
    .sch-pop-nav { display: none; }
}

/* ---------- even picture boxes (19.0.1.3.1) ----------
   Tall model shots used to stretch their square box, so cards and tiles in
   the same row came out different heights. The picture now sits inside a
   fixed square and scales to fit it. */
.sch-img img { position: absolute; top: 14px; left: 14px; width: calc(100% - 28px); height: calc(100% - 28px);
    max-width: none; max-height: none; }
.sch-tile-img { position: relative; padding: 0; }
.sch-tile-img img { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px);
    max-width: none; max-height: none; }
.sch-tile-promo .sch-tile-img img { top: 18px; left: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.sch-tile-txt { flex: 1 1 auto; }