/* ==========================================================================
   Nile Market Place — public catalogue (listing + product detail)
   Loaded AFTER theme.css and site.css.

   Everything shared with the rest of the public site now lives in site.css:
   the product card (.cat-card is an alias of .shop-card there), the product
   grid, the card radius/border/shadow language, the heading scale, the type
   floor and the 44px touch targets. This file only carries what is unique to
   the catalogue, and it uses the same --site-* / --ms-* tokens so the two
   files cannot drift apart again.

   Nothing here is a shop: there is no cart UI, the only call to action is
   "Join with a Coupon".
   ========================================================================== */

/* ------------------------------------------------------------- toolbar */

/* surface (bg / border / radius / shadow) comes from site.css */
.cat-toolbar {
    padding: .85rem;
    margin-bottom: 1.1rem;
}
@media (min-width: 768px) { .cat-toolbar { padding: 1rem; margin-bottom: 1.25rem; } }

.cat-search { position: relative; }
.cat-search > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ms-muted);
    pointer-events: none;
    font-size: 1rem;
}
.cat-search input[type="search"] {
    width: 100%;
    border: 1px solid var(--ms-border);
    background: var(--site-well);
    border-radius: var(--site-pill);
    padding: .7rem 1rem .7rem 2.6rem;
    font-size: var(--site-text);
    color: var(--ms-text);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cat-search input[type="search"]:focus {
    background: #fff;
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 3px var(--site-tint-8);
}
.cat-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.cat-sort {
    border: 1px solid var(--ms-border);
    border-radius: var(--site-pill);
    padding: .7rem 2.2rem .7rem 1rem;
    font-size: var(--site-text);
    font-weight: 600;
    color: var(--ms-text);
    background: var(--site-well) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235B6478'%3E%3Cpath d='M8 11.2 3.6 6.8l.9-.9L8 9.4l3.5-3.5.9.9z'/%3E%3C/svg%3E") no-repeat right .85rem center/14px 14px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    /* iOS zooms the page in when a focused control is under 16px; keeping the
       select at the 14px floor plus this guard avoids the jump-and-zoom that
       leaves the page scrolled sideways. */
    max-width: 100%;
}
/* The caret is baked into a data: URI, so it cannot read a token. Its dark
   counterpart is stated here rather than left as a dark glyph on a dark
   well — same shape, --ms-muted's dark value (#A6B0C2, 6.5:1 on the well). */
:root[data-theme="dark"] body.site .cat-sort {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A6B0C2'%3E%3Cpath d='M8 11.2 3.6 6.8l.9-.9L8 9.4l3.5-3.5.9.9z'/%3E%3C/svg%3E");
}
.cat-sort:focus { border-color: var(--ms-primary); box-shadow: 0 0 0 3px var(--site-tint-8); }

/* --------------------------------------------------------------- chips */

.cat-chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .15rem .1rem .45rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cat-chips::-webkit-scrollbar { height: 4px; }
.cat-chips::-webkit-scrollbar-thumb { background: var(--site-tint-12); border-radius: 4px; }

.cat-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    font-size: var(--site-text-sm);
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: var(--site-pill);
    border: 1px solid var(--ms-border);
    background: #fff;
    color: var(--ms-text);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) {
    .cat-chip:hover { border-color: var(--ms-primary); color: var(--site-ink); }
}
.cat-chip.is-active {
    background: var(--ms-primary);
    border-color: var(--ms-primary);
    color: #fff;
}
.cat-chip.is-active i { color: var(--site-warm-light); }

.cat-count { color: var(--ms-muted); }
.cat-count b { color: var(--ms-text); }

/* --------------------------------------------------------------- empty */

.cat-empty {
    padding: 2.4rem 1.25rem;
    text-align: center;
    color: var(--ms-muted);
}
@media (min-width: 768px) { .cat-empty { padding: 3rem 1.5rem; } }
.cat-empty i { font-size: 2.4rem; color: var(--site-warm-ink); display: block; margin-bottom: .75rem; }
.cat-empty h2 { color: var(--ms-text); font-weight: 800; font-size: var(--site-h3); margin-bottom: .5rem; }

/* ---------------------------------------------------------- pagination */

.cat-pager { margin-top: 1.5rem; }
.cat-pager .pagination { justify-content: center; flex-wrap: wrap; gap: .3rem; margin: 0; }
.cat-pager .page-link {
    border-radius: 10px;
    border: 1px solid var(--ms-border);
    color: var(--ms-text);
    font-weight: 600;
    font-size: var(--site-text-sm);
    padding: .45rem .8rem;
}
.cat-pager .page-item.active .page-link {
    background: var(--ms-primary);
    border-color: var(--ms-primary);
    color: #fff;
}
.cat-pager .page-item.disabled .page-link { color: var(--ms-muted); background: var(--site-well); }

/* ================================================== product detail page */

.cat-crumbs {
    color: var(--ms-muted);
    padding: 1rem 0 .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.cat-crumbs a { color: var(--ms-muted); }
.cat-crumbs a:hover { color: var(--site-ink); }
.cat-crumbs i { font-size: .65rem; flex: 0 0 auto; }
.cat-crumbs span[aria-current] { color: var(--ms-text); font-weight: 600; }

/* surface comes from site.css */
.cat-panel { padding: .85rem; }
@media (min-width: 768px) { .cat-panel { padding: 1.15rem; } }

.cat-stage {
    background: var(--site-well);
    border-radius: var(--site-radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cat-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}
.cat-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    border: 2px solid var(--ms-border);
    background: var(--site-well);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: border-color .18s ease;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-thumb.is-active { border-color: var(--ms-primary); }

.cat-detail__title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.25;
    margin-bottom: .4rem;
    color: var(--ms-text);
}
@media (min-width: 768px) { .cat-detail__title { font-size: 1.55rem; } }

.cat-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--site-text-xs);
    font-weight: 700;
    padding: .3rem .7rem;
    border-radius: var(--site-pill);
    background: var(--site-tint-6);
    color: var(--site-ink);
}
.cat-tag--gold { background: rgba(233, 196, 106, .22); color: var(--site-gold-ink); }

.cat-priceblock {
    background: var(--site-well);
    border-radius: var(--site-radius-sm);
    padding: .85rem 1rem;
    margin: .9rem 0;
}
.cat-priceblock .now { font-size: 1.5rem; font-weight: 800; color: var(--site-ink); line-height: 1.1; }
@media (min-width: 768px) { .cat-priceblock .now { font-size: 1.7rem; } }
.cat-priceblock .was { font-size: var(--site-text); color: var(--ms-muted); text-decoration: line-through; }
.cat-priceblock .pct { font-size: var(--site-text-sm); font-weight: 800; color: #fff; background: var(--ms-pink); padding: .15rem .5rem; border-radius: 6px; }
.cat-priceblock small { display: block; color: var(--ms-muted); font-size: var(--site-text-sm); margin-top: .35rem; }

.cat-blurb { color: var(--ms-muted); font-size: var(--site-text); line-height: 1.7; margin-bottom: 0; }

.cat-specs { list-style: none; margin: 0; padding: 0; }
.cat-specs li {
    display: flex;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--ms-border);
    min-height: var(--site-tap);
    align-items: center;
}
.cat-specs li:last-child { border-bottom: 0; }
.cat-specs li span:first-child { color: var(--ms-muted); flex: 0 0 38%; max-width: 160px; }
.cat-specs li span:last-child { font-weight: 600; color: var(--ms-text); min-width: 0; }

.cat-join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-height: var(--site-tap);
    text-align: center;
    background: var(--ms-primary);
    color: #fff;
    font-weight: 800;
    font-size: var(--site-text);
    border: 0;
    border-radius: var(--site-radius-sm);
    padding: .8rem 1rem;
    box-shadow: 0 6px 16px var(--site-tint-28);
    transition: background .18s ease, transform .18s ease;
}
.cat-join:hover, .cat-join:focus { background: var(--ms-primary-700); color: #fff; }
@media (hover: hover) { .cat-join:hover { transform: translateY(-1px); } }
.cat-join i { color: var(--site-warm-light); }

.cat-note {
    color: var(--ms-muted);
    margin-top: .7rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* The product description (.cat-prose) is styled by the shared prose rules in
   site.css, together with the About page and the CMS page template — wide
   tables included. Nothing catalogue-specific is needed here. */