/* ==========================================================================
   Canin — shop + categories skin. Live on products.php and categories.php.

   Scoped under .sx, the wrapper on both pages, so nothing here can reach any
   other page. style.css is untouched: it carries 25 separate .products-page
   blocks, 81 .category-card-large blocks and 44 .categories-grid blocks spread
   across the file, so editing it in place is the riskiest option available.

   The product card is NOT here. It used to be redeclared in this file so the
   shop and the homepage would read as one system; both copies have since been
   replaced by the single definition in product-card.css, which products.php
   loads straight after this file.

   Mobile-first: base rules are the phone layout, wider screens add to them.
   ========================================================================== */

.sx {
    --sx-radius: 18px;
    --sx-radius-sm: 13px;
    --sx-ink: #0b2545;
    --sx-line: #e3edfb;
    --sx-ok: #047857;
    --sx-ok-bg: #ecfdf5;
    --sx-warn: #b45309;
    --sx-warn-bg: #fff8ec;
    --sx-off: #94a3b8;
    --sx-off-bg: #f1f5f9;
    display: block;
    background: var(--bg);
    padding-bottom: 30px;
}

.sx .container { width: 100%; padding-inline: 14px; }

/* preview ribbon */
.sx-demo-flag {
    padding: 9px 14px;
    background: #fff8e1;
    border-bottom: 1px solid #f0d999;
    color: #7a5a10;
    font-size: 12px;
    text-align: center;
}
.sx-demo-flag a { color: #0757c7; font-weight: 700; text-decoration: none; }

/* --------------------------------------------------------------- page head */
.sx-head { padding: 14px 0 4px; }

.sx-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--muted);
}
.sx-crumbs a { color: var(--muted); text-decoration: none; font-weight: 500; }
.sx-crumbs a:hover { color: var(--primary); }
.sx-crumbs .sx-sep { opacity: .45; font-size: 11px; }
.sx-crumbs .sx-current { color: var(--sx-ink); font-weight: 700; }

.sx-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 5px;
}
.sx-title-row h1 {
    margin: 0;
    font-size: clamp(18px, 5vw, 23px);
    font-weight: 900;
    line-height: 1.55;
    color: var(--sx-ink);
    letter-spacing: -.3px;
}
.sx-count {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--primary-strong);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.sx-lead {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 46em;
}

/* Shown when requiring every search word found nothing and the search had to be
   widened to any one of them. Deliberately a soft notice, not an error: results
   are on the page, they are just looser than what was asked for. */
.sx-loose {
    margin: 0 0 14px;
    padding: 9px 13px;
    font-size: 12.5px;
    line-height: 1.9;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    max-width: 46em;
}

/* ----------------------------------------------------------- active filters */
.sx-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.sx-chips-k { font-size: 11px; color: var(--muted); font-weight: 600; }
.sx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--sx-line);
    color: #23507f;
    font-size: 11px;
    font-weight: 700;
}
.sx-chip b { font-weight: 800; color: var(--sx-ink); }
.sx-chip-clear {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

/* -------------------------------------------------------------- toolbar row */
/* One control per job: the filter button opens the drawer, the select sorts.
   The old page carried two sort controls (sidebar + toolbar) that could
   disagree; this keeps a single source of truth. */
.sx-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 9px 0;
    margin-bottom: 12px;
    background: var(--bg);
}

/* the result count already sits in the page header badge on phones, so the
   toolbar keeps just the two controls and stays one row high */
.sx-toolbar-note { display: none; }

.sx-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--primary);
    border-radius: 12px;
    background: #fff;
    color: var(--primary-strong);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.sx-filter-btn svg { width: 15px; height: 15px; }
.sx-filter-btn .sx-fcount {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.sx-sort {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.sx-sort select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 30px;
    border: 1px solid var(--sx-line);
    border-radius: 12px;
    background: #fff;
    color: var(--sx-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}
.sx-sort::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    width: 0; height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid var(--muted);
    pointer-events: none;
}

/* ------------------------------------------------------------ filter drawer */
/* On phones the filters are a bottom sheet instead of a column pushed above the
   results: the old layout made the user scroll past every filter to reach the
   first product. */
.sx-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(6, 25, 55, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    backdrop-filter: blur(2px);
}
.sx-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.sx-drawer {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2210;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(6, 25, 55, .24);
    transform: translateY(102%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.sx-drawer.is-open { transform: translateY(0); }

.sx-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--sx-line);
}
.sx-drawer-head h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 900;
    color: var(--sx-ink);
}
.sx-drawer-grip {
    position: absolute;
    top: 7px;
    inset-inline: 0;
    margin-inline: auto;
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: #d7e2f2;
}
.sx-drawer-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--sx-ink);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.sx-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 4px;
    -webkit-overflow-scrolling: touch;
}

.sx-drawer-foot {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sx-line);
    background: #fff;
}

.sx-field { margin-bottom: 14px; }
.sx-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--sx-ink);
}
.sx-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--sx-line);
    border-radius: 11px;
    background: #fff;
    color: var(--sx-ink);
    font: inherit;
    font-size: 12.5px;
}
.sx-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
}
select.sx-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
.sx-price-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.sx-price-row span { color: var(--muted); font-size: 11px; }

.sx-btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(22, 119, 255, .26);
}
.sx-btn-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--sx-line);
    border-radius: 13px;
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

/* the desktop sidebar does not exist on phones */
.sx-sidebar { display: none; }

/* --------------------------------------------------------------- results */
.sx-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sx-empty {
    padding: 40px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
}
.sx-empty svg { width: 46px; height: 46px; color: #c6d6ec; margin-bottom: 10px; }
.sx-empty h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--sx-ink); }
.sx-empty p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.9; }

/* The product card used to be declared here. It now lives once, in
   assets/css/product-card.css, which products.php loads right after this file.
   categories.php also loads this skin but renders no product cards, so it does
   not need it. See that file's header for why the duplication was removed. */

/* ------------------------------------------------------------- pagination */
.sx-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}
.sx-pager a,
.sx-pager span {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    background: #fff;
    color: var(--sx-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.sx-pager a:hover { border-color: var(--primary); color: var(--primary); }
.sx-pager .is-current {
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    border-color: transparent;
    color: #fff;
}
.sx-pager .is-gap { border: 0; background: none; color: var(--muted); min-width: 20px; }

/* ====================================================== categories page */
.sx-cats { display: grid; gap: 12px; }

.sx-cat {
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius);
    overflow: hidden;
}

.sx-cat-main {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px;
    text-decoration: none;
}

.sx-cat-img {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--sx-radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.sx-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.sx-cat-img svg { width: 26px; height: 26px; color: var(--primary); }

.sx-cat-body { min-width: 0; }
.sx-cat-body h2 {
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--sx-ink);
    line-height: 1.6;
}
.sx-cat-desc {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.75;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sx-cat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.sx-cat-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--primary-strong);
    font-size: 10.5px;
    font-weight: 800;
}
/* an empty category is shown but visibly marked, so a tap never lands on a
   blank shop page unannounced */
.sx-cat-count.is-zero { background: var(--sx-off-bg); color: var(--sx-off); }
.sx-cat-go { font-size: 10.5px; font-weight: 700; color: var(--primary); }

/* subcategory strip on the shop page, shown above the products once a category
   with children is opened */
.sx-subnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-sm);
}
.sx-subnav-k {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.sx-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 11px 11px;
}
.sx-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f7fafe;
    border: 1px solid var(--sx-line);
    color: #23507f;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.sx-sub:hover { border-color: var(--primary); color: var(--primary); }
.sx-sub i {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--muted);
}

/* ============================================================ tablet up */
@media (min-width: 640px) {
    .sx .container { padding-inline: 20px; }
    .sx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .sx-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================== desktop */
@media (min-width: 901px) {
    .sx .container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
    .sx { padding-bottom: 46px; }

    .sx-head { padding: 24px 0 6px; }
    .sx-crumbs { font-size: 13px; margin-bottom: 12px; }
    .sx-title-row h1 { font-size: 27px; }
    .sx-count { font-size: 12.5px; padding: 4px 12px; }
    .sx-lead { font-size: 14px; margin-bottom: 18px; }
    .sx-chips-k, .sx-chip, .sx-chip-clear { font-size: 12.5px; }

    /* two columns: filters live in a sticky rail, results fill the rest */
    .sx-layout {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
        align-items: start;
        gap: 22px;
    }

    .sx-sidebar {
        display: block;
        position: sticky;
        top: 18px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--sx-line);
        border-radius: var(--sx-radius);
    }
    .sx-sidebar h3 {
        margin: 0 0 14px;
        font-size: 14px;
        font-weight: 900;
        color: var(--sx-ink);
    }
    .sx-sidebar .sx-field { margin-bottom: 15px; }

    /* the drawer, its trigger and its sheet chrome are a phone pattern only */
    .sx-filter-btn,
    .sx-drawer-backdrop,
    .sx-drawer-grip,
    .sx-drawer-close,
    .sx-drawer-head { display: none; }

    .sx-toolbar {
        position: static;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0;
        margin-bottom: 16px;
    }
    .sx-toolbar-note { display: block; font-size: 13px; color: var(--muted); }
    .sx-sort { min-width: 190px; }

    .sx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

    /* the card's own desktop sizing now comes from product-card.css */

    /* Desktop category card stays the same compact side-by-side shape as the
       phone one — the previous full-bleed 16:10 image made each card almost as
       tall as a product card for what is only a navigation link. Four per row
       instead of three keeps the page tight. */
    .sx-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .sx-cat-main { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .sx-cat-img { border-radius: var(--sx-radius-sm); }
    .sx-cat-body h2 { font-size: 14px; }
    .sx-cat-desc { font-size: 11.5px; -webkit-line-clamp: 2; }
    .sx-cat-count { font-size: 11px; }
    .sx-cat-go { font-size: 11px; }
    .sx-subs { padding: 10px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    /* .hm-card is handled by product-card.css's own reduced-motion block */
    .sx *, .sx-drawer, .sx-drawer-backdrop { transition: none !important; }
}