/* Kitten Shop — filter sidebar beside the product grid.
   Prod splits its 1400px row as 338 / 50 / 1013 and drops to 234 / 50 / 701 on
   tablet; the same proportions here scale with our container. */

/* Prod runs the shop on a wider row than its other pages (1400 vs 1240) — the
   grid needs it: four cards plus the sidebar do not fit the default container
   without the price and buttons colliding. */
.shop .container { max-width: var(--container-width-wide); }

.shop { padding: 60px 0 100px; }

/* Category description — its own section below the grid rather than a block
   inside .shop, so it reads as page copy about the breed, not part of the
   listing itself. Only .shop's own bottom padding separates them. */
.shop-intro {
    padding: 0 0 60px;
}

/* ── Popular categories ──────────────────────────────────────────────────── */
/* Heads the listing column (archive-product.php), leaving the filter sidebar
   beside it starting at the top of the page. Which categories appear comes
   from Shop options; the copy and cut-out photo are term meta on each
   category (see pages/shop/favorites.php). Spacing below comes from
   .shop__main's own column gap. */
.shop-favorites { margin: 0; }

.shop-favorites__title {
    margin:      0 0 24px;
    font-size:   28px;
    line-height: 36px;
    font-weight: 600;
    color:       var(--color-text);
}

.shop-favorites__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* The crown hangs over each card's top edge, so the rows need more air
       between them than the columns do. */
    gap:                   30px 16px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.favorite-card {
    position:        relative;
    display:         flex;
    align-items:     flex-end;
    gap:             8px;
    height:          100%;
    min-height:      112px;
    padding:         22px 12px 14px;
    border:          1px solid var(--color-pink-100);
    border-radius:   var(--radius);
    background:      var(--color-pink-50);
    text-decoration: none;
    transition:      transform var(--transition), border-color var(--transition),
                     box-shadow var(--transition), background var(--transition);
}
.favorite-card:hover {
    transform:    translateY(-3px);
    border-color: var(--color-primary);
    background:   #ffffff;
    box-shadow:   var(--shadow-block);
}

/* The category being browsed keeps its card in the row rather than losing it
   — marked instead, so the set never shifts under the visitor. Declared after
   the :hover rule above, at equal specificity, so the mint holds while the
   pointer is over it too. */
.favorite-card.is-current {
    border-color: var(--color-primary);
    background:   var(--color-primary);
    box-shadow:   inset 0 0 0 1px var(--color-primary);
}
/* Dark rather than pink/muted — the pink name would blend straight into the
   card's own pink background, and the muted description is too pale on it. */
.favorite-card.is-current .favorite-card__name,
.favorite-card.is-current .favorite-card__text { color: var(--color-text); }

/* Half above the card, centred — the reason for the wider row gap above */
.favorite-card__crown {
    position:  absolute;
    top:       -13px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    transition: transform var(--transition);
}
.favorite-card:hover .favorite-card__crown { transform: translateX(-50%) translateY(-2px); }

.favorite-card__body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.favorite-card__name {
    font-size:   15px;
    line-height: 20px;
    font-weight: 700;
    color:       var(--color-text);
    transition:  color var(--transition);
}
.favorite-card:hover .favorite-card__name { color: var(--color-primary); }
/* Same specificity as .is-current's own dark-text rule above, so on the
   current card the two fought by source order alone — hovering it flipped
   the name back to pink, invisible on its own pink background. One extra
   class here settles it in the dark rule's favor. */
.favorite-card.is-current:hover .favorite-card__name { color: var(--color-text); }

.favorite-card__text {
    font-size:   12px;
    line-height: 16px;
    color:       var(--color-muted);
}

/* Cut-out photo, sitting on the card's bottom edge. Scoped through the
   section so the fixed height outranks WooCommerce's own
   `.woocommerce img { height: auto }`, which would otherwise let a portrait
   photo stretch the card. */
.shop-favorites .favorite-card__image {
    flex-shrink:     0;
    width:           84px;
    height:          84px;
    margin-bottom:   -14px;
    object-fit:      contain;
    object-position: bottom;
    transition:      transform var(--transition);
}
.favorite-card:hover .favorite-card__image { transform: scale(1.06); }

.shop__layout {
    display:               grid;
    grid-template-columns: minmax(0, 280fr) minmax(0, 1071fr);
    gap:                   50px;
    align-items:           start;
}

.shop__main {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    min-width:      0;
}

/* 16px between columns puts each card at prod's 241px inside the same 1013px
   main column; rows get more air because the cards vary in height */
.shop__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   24px 16px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.shop__empty {
    margin:      0;
    font-size:   18px;
    line-height: 26px;
}

.shop__pagination { margin-top: 8px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.shop-filters {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    min-width:      0;
}

/* Desktop only (overridden by the off-canvas position:fixed below 1024px) —
   without it the sidebar ends with its own (usually shorter) content and
   leaves a blank column beside the grid for the rest of the scroll. Follows
   the same fixed-header offset the page itself scrolls to
   (--topbar-height/--header-height/--header-offset, see css/main.css). */
@media (min-width: 1025px) {
    .shop-filters {
        position:   sticky;
        top:        calc(var(--topbar-height) + var(--header-height) + var(--header-offset) + 20px);
        max-height: calc(100vh - var(--topbar-height) - var(--header-height) - var(--header-offset) - 40px);
        overflow-y: auto;

        /* A slim scrollbar for this one panel specifically — the default OS
           scrollbar next to a 280px-wide column reads as bulky. */
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }
    .shop-filters::-webkit-scrollbar { width: 4px; }
    .shop-filters::-webkit-scrollbar-track { background: transparent; }
    .shop-filters::-webkit-scrollbar-thumb {
        background:    var(--color-border);
        border-radius: 4px;
    }
    .shop-filters::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }
}

/* The heading and the close button belong to the off-canvas panel only */
.shop-filters__head { display: none; }

.shop-filters__form {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.filter-block {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding:        20px;
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-box);
}

/* Sort already frames its own select (below) — an outer frame here would just
   double it up, so this block opts back out. */
.filter-block.filter-sort {
    padding: 0;
    border:  none;
}

.filter-block__title {
    margin:      0;
    font-size:   18px;
    line-height: 27px;
    font-weight: 600;
    color:       var(--color-text);
}

/* ── Breeds ──────────────────────────────────────────────────────────────── */
.filter-cats {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
/* Children only appear under the branch being viewed, so the indent is enough
   to place them without a second bullet style */
.filter-cats--child {
    margin-top:  6px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}

.filter-cats__link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    font-size:       14px;
    line-height:     22px;
    text-decoration: none;
    color:           var(--color-text);
    transition:      color var(--transition);
}
.filter-cats__link:hover { color: var(--color-primary); }
.filter-cats__link.is-current {
    font-weight: 700;
    color:       var(--color-primary);
}

.filter-cats__thumb {
    flex-shrink:   0;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    object-fit:    cover;
    background:    var(--color-bg-alt);
}
.filter-cats__thumb--empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-muted);
}
.filter-cats__name { min-width: 0; }

/* ── Price ───────────────────────────────────────────────────────────────── */
.filter-price {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

/* Two range inputs stacked over one track: the inputs themselves are invisible
   apart from their thumbs, so both stay draggable across the whole width */
.filter-price__slider {
    position: relative;
    height:   20px;
}
.filter-price__track,
.filter-price__fill {
    position:      absolute;
    top:           50%;
    height:        4px;
    margin-top:    -2px;
    border-radius: 2px;
}
.filter-price__track {
    left:       0;
    right:      0;
    background: var(--color-border);
}
.filter-price__fill { background: var(--color-primary); }

.filter-price__thumb {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     20px;
    margin:     0;
    padding:    0;
    background: none;
    appearance: none;
    /* The track area must not swallow clicks meant for the other input */
    pointer-events: none;
}
.filter-price__thumb::-webkit-slider-thumb {
    width:          18px;
    height:         18px;
    border:         2px solid #ffffff;
    border-radius:  50%;
    background:     var(--color-primary);
    box-shadow:     0 0 3px rgba(0, 0, 0, 0.25);
    cursor:         pointer;
    appearance:     none;
    pointer-events: auto;
}
.filter-price__thumb::-moz-range-thumb {
    width:          18px;
    height:         18px;
    border:         2px solid #ffffff;
    border-radius:  50%;
    background:     var(--color-primary);
    box-shadow:     0 0 3px rgba(0, 0, 0, 0.25);
    cursor:         pointer;
    pointer-events: auto;
}
.filter-price__thumb::-moz-range-track { background: none; }

.filter-price__inputs {
    display:     flex;
    align-items: center;
    gap:         8px;
}
.filter-price__field { flex: 1; min-width: 0; }
.filter-price__field input {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid #ebeced;
    border-radius: var(--radius-box);
    background:    #ffffff;
    font-family:   inherit;
    font-size:     14px;
    line-height:   20px;
    color:         var(--color-text);
}
.filter-price__field input:focus {
    outline:      none;
    border-color: var(--color-secondary);
}
.filter-price__dash { color: var(--color-muted); }

/* ── Attribute terms ─────────────────────────────────────────────────────── */
.filter-terms {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

/* Collapsed by default past the 3rd item (js/pages/shop.js toggles
   .is-expanded on the parent .filter-block) — a block with two dozen terms
   would otherwise run the whole sidebar off the screen. Expanding caps at
   ~10 rows tall and scrolls internally past that, rather than growing
   without limit. */
.filter-block:not(.is-expanded) .filter-terms--capped > .filter-terms__item:nth-child(n+4) {
    display: none;
}
.filter-block.is-expanded .filter-terms--capped {
    max-height:    320px;
    overflow-y:    auto;
    padding-right: 4px;
}

.filter-block__more {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    align-self:  flex-start;
    padding:     0;
    border:      none;
    background:  none;
    font-size:   13px;
    font-weight: 600;
    color:       var(--color-primary);
    cursor:      pointer;
    transition:  color var(--transition);
}
.filter-block__more:hover { color: var(--color-primary-dark); }
.filter-block__more .icon { transition: transform var(--transition); }
.filter-block.is-expanded .filter-block__more .icon { transform: rotate(180deg); }

.filter-block__more-text--less { display: none; }
.filter-block.is-expanded .filter-block__more-text--more { display: none; }
.filter-block.is-expanded .filter-block__more-text--less { display: inline; }

.filter-radio {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
}
.filter-radio input {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
}
.filter-radio__mark {
    flex:          none;
    width:         18px;
    height:        18px;
    border:        1px solid var(--color-border);
    border-radius: 50%;
    background:    #ffffff;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.filter-radio input:checked + .filter-radio__mark {
    border-color: var(--color-primary);
    /* An inset ring instead of a pseudo-element keeps the dot centred at any size */
    box-shadow:   inset 0 0 0 4px var(--color-primary);
}
.filter-radio input:focus-visible + .filter-radio__mark {
    outline:        2px solid var(--color-secondary);
    outline-offset: 2px;
}
.filter-radio__label {
    font-size:   14px;
    line-height: 22px;
}
.filter-radio:hover .filter-radio__label { color: var(--color-primary); }

/* Filters apply live (js/pages/shop.js) — this only shows inside the
   off-canvas panel (below), where its job is just closing the panel back
   onto the grid that already updated behind it. */
.shop-filters__done { display: none; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.shop-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             20px;
    flex-wrap:       wrap;
}

/* Pinned to the right regardless of how many other children the toolbar has
   (the active-filter chips, the search field) — the one element here that
   always belongs on that side. */
.shop-toolbar__filters { margin-left: auto; }

/* ── Active filter chips ─────────────────────────────────────────────────── */
.shop-active-filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}
/* Bigger than the base .chip (main.css) — those are tiny inline tags,
   these are an interactive control the customer needs to spot and tap. */
.shop-active-filters__remove {
    gap:         8px;
    padding:     8px 14px;
    font-size:   14px;
    font-weight: 600;
}
.shop-active-filters__remove .icon { color: var(--color-primary); transition: color var(--transition); }
.shop-active-filters__remove:hover .icon { color: var(--color-primary-dark); }

/* Sort sits at the top of the filter sidebar (pages/shop/filters.php), styled
   as its own framed control rather than the light 1px toolbar select it used
   to be — same hand-drawn arrow trick as the checkout address selects
   (reset.css strips the native one), just with a heavier border. */
.shop-sort__select {
    width:                100%;
    padding:              13px 40px 13px 16px;
    border:               2px solid var(--color-muted);
    border-radius:        var(--radius-box);
    background-color:     #ffffff;
    background-image:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%233b3d42' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:    no-repeat;
    background-position:  right 16px center;
    font-family:          inherit;
    font-size:            15px;
    font-weight:          600;
    line-height:          22px;
    color:                var(--color-text);
    cursor:               pointer;
}
.shop-sort__select:focus {
    outline:      none;
    border-color: var(--color-secondary);
}

/* position: relative anchors the live-results dropdown js/main.js appends
   inside this form (see .search-results in main.css) */
.shop-search {
    position:    relative;
    display:     flex;
    align-items: center;
    flex:        1;
    min-width:   0;
    padding:     0 12px;
    border:      1px solid #ebeced;
    border-radius: var(--radius-box);
    background:  var(--color-bg-alt);
}
.shop-search__input {
    flex:        1;
    min-width:   0;
    padding:     9px 0;
    border:      none;
    outline:     none;
    background:  transparent;
    font-family: inherit;
    font-size:   14px;
    color:       var(--color-text);
}
.shop-search__input::placeholder { color: var(--color-muted); }
.shop-search__submit {
    display:     inline-flex;
    align-items: center;
    padding:     0;
    border:      none;
    background:  none;
    color:       var(--color-secondary);
    cursor:      pointer;
}

/* Search and the filter button belong to the narrow layouts, where the sidebar
   is off-canvas — on desktop the sidebar itself carries them. The sort select
   stays visible at every width, so only these two are hidden here. Placed
   after their own rules above so this display:none wins the cascade. */
.shop-search,
.shop-toolbar__filters { display: none; }

/* The card itself lives in main.css — it is shared with the product page */
.shop__grid > .product-card { margin: 0; }


@media (max-width: 1024px) {
    .shop { padding: 40px 0 80px; }
    .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .shop-favorites__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-favorites__title { font-size: 24px; line-height: 32px; }

    /* Below the desktop width the sidebar becomes an off-canvas panel; the grid
       takes the full row and the toolbar grows the controls that open it */
    .shop__layout { grid-template-columns: minmax(0, 1fr); }

    .shop-filters {
        position:   fixed;
        top:        0;
        bottom:     0;
        left:       0;
        z-index:    var(--z-modal);
        width:      min(340px, 88vw);
        padding:    20px;
        overflow-y: auto;
        background: #ffffff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
        transform:  translateX(-100%);
        visibility: hidden;
        transition: transform var(--transition), visibility var(--transition);
    }
    .shop-filters.is-open {
        transform:  translateX(0);
        visibility: visible;
    }

    .shop-filters__head {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             16px;
    }
    .shop-filters__heading {
        margin:      0;
        font-size:   20px;
        line-height: 28px;
        font-weight: 700;
    }
    .shop-filters__close {
        display:     inline-flex;
        padding:     0;
        border:      none;
        background:  none;
        color:       var(--color-text);
        cursor:      pointer;
    }

    /* Sits at the bottom of the off-canvas panel, below the filter blocks —
       closes the panel back onto the grid, which already updated live as
       each filter was picked. */
    .shop-filters__done {
        display:     block;
        width:       100%;
        margin-top:  8px;
        text-align:  center;
    }

    .shop-filters__backdrop {
        position:   fixed;
        inset:      0;
        z-index:    calc(var(--z-modal) - 1);
        background: rgba(0, 0, 0, 0.4);
    }

    .shop-search {
        display:   flex;
        flex:      1;
        min-width: 220px;
    }
    .shop-toolbar__filters { display: inline-flex; }

}

@media (max-width: 767px) {
    .shop { padding: 32px 0 60px; }
    .shop__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   16px;
    }

    .shop-favorites__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .shop-favorites__title { font-size: 20px; line-height: 28px; margin-bottom: 18px; }
    /* Two columns on a phone leave each card ~160px wide — the photo gives up
       more of it than the name and the line under it can spare. */
    .favorite-card { padding: 20px 10px 12px; min-height: 96px; gap: 6px; }
    .favorite-card__name { font-size: 14px; line-height: 19px; }
    .favorite-card__text { font-size: 11px; line-height: 15px; }
    .shop-favorites .favorite-card__image { width: 56px; height: 56px; margin-bottom: -12px; }

    /* Search takes its own full-width row; the Filter button (which opens the
       off-canvas sidebar sort now lives in) follows under it. */
    .shop-toolbar {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }
    .shop-toolbar__filters { margin-left: 0; }

}