/* ==========================================================================
   Shop / collection page (shop.html) — loaded after base.css
   Toolbar (count · sort · filter) · product grid · promo tile · load more · filter drawer
   ========================================================================== */

/* Toolbar (sticks under the header) */
.toolbar { position: sticky; top: 0; z-index: 50; background: rgb(14 13 11 / 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-dark); transition: top 0.5s var(--ease-out-expo); }
html:not(.nav-hidden) .toolbar { top: var(--nav-h); }
.toolbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 0.75rem; }
.toolbar__right { display: flex; align-items: center; gap: 0.75rem; }
.toolbar__sort .field { min-height: 2.6rem; padding-block: 0.5rem; font-size: 0.85rem; }
.filter-count { min-width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--ember); color: var(--soot); font-size: 0.65rem; }

/* Grid */
.shop { padding-block: 2.5rem 6rem; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 0.75rem; }
.shop-grid .card__title { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
.shop-grid .card__price { font-size: 0.95rem; }
.shop-grid .card__info { flex-direction: column; gap: 0.25rem; }
.shop-grid .card__price { padding-top: 0; }
.shop-grid .swatch { width: 1.3rem; height: 1.3rem; }
.shop-grid .card__count { display: none; }
.shop-grid__item.is-hidden, .shop-grid__item.is-paged { display: none; }
.shop-grid__promo { grid-column: 1 / -1; }
.promo-tile { position: relative; display: block; height: 100%; min-height: 22rem; overflow: hidden; border-radius: var(--radius); background: var(--iron); }
.promo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; filter: brightness(1.3); transition: transform 1.2s var(--ease-out-expo); }
.promo-tile:hover img { transform: scale(1.04); }
.promo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 13 11 / 0.85), transparent 70%); }
.promo-tile__text { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 1; display: grid; justify-items: start; gap: 0.75rem; }
.promo-tile__title { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.promo-tile .btn--outline { color: var(--bone); }
@media (min-width: 640px) { .shop-grid { gap: 3rem 1.25rem; } .shop-grid .card__count { display: block; } .shop-grid .card__info { flex-direction: row; } }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-grid__promo { grid-column: span 2; } }
@media (min-width: 1200px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Empty + load more */
.shop-empty { display: grid; justify-items: center; gap: 1rem; padding: 5rem 0; text-align: center; }
.shop-empty .display { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.shop-more { display: grid; justify-items: center; gap: 1rem; margin-top: 4rem; }
.shop-more__bar { width: 12rem; height: 2px; background: var(--line-dark); }
.shop-more__bar span { display: block; height: 100%; background: var(--ember); transform-origin: left; transition: transform 0.6s var(--ease-out-expo); }

/* Filter drawer (re-uses .drawer from base.css) */
.filter__body { display: grid; align-content: start; gap: 2rem; padding-block: 1.5rem; }
.filter__group { display: grid; gap: 1rem; }
.filter__group legend { margin-bottom: 1rem; color: var(--steel); }
.filter__colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0.75rem; }
.filter-color { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; color: var(--ash); }
.filter-color .swatch { width: 1.5rem; height: 1.5rem; color: var(--bone); }
.filter__range-scale { display: flex; justify-content: space-between; }
.range { width: 100%; accent-color: var(--ember); }
.filter__foot { grid-template-columns: 1fr 2fr; }