/* ==========================================================================
   PLS shop: archive head, toolbar, chips, grid columns, pager, filter drawer,
   search results. Cards live in card.css. Tokens from base.css only.
   ========================================================================== */

/* Head -------------------------------------------------------------------- */
.shop-head { padding: var(--s-8) var(--gutter) var(--s-6); text-align: center; }
.shop-head__title { font-size: var(--fs-xl); letter-spacing: .1em; }
.shop-head__count { margin-top: var(--s-2); }
.shop-head__desc { margin: var(--s-4) auto 0; text-align: center; }
@media (min-width: 990px) {
	.shop-head { padding-block: var(--s-12) var(--s-8); }
}

/* Toolbar ----------------------------------------------------------------- */
.shop-toolbar { border-block: 1px solid var(--c-line); }
/* Phones/tablets: Filter & Sort stay one tap away, pinned under the sticky header (like SIR). */
@media (max-width: 989px) {
	.shop-toolbar {
		position: sticky; top: calc(var(--header-h) + 1px); z-index: calc(var(--z-header) - 1);
		background: var(--c-bg);
	}
	body.admin-bar .shop-toolbar { top: calc(var(--header-h) + 1px + 46px); }
}
@media (max-width: 600px) {
	body.admin-bar .shop-toolbar { top: calc(var(--header-h) + 1px); }
}
.shop-toolbar__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	min-height: 48px; padding-inline: var(--gutter);
}
.shop-crumbs { display: none; min-width: 0; }
.shop-crumbs ol { display: flex; align-items: center; gap: var(--s-2); }
.shop-crumbs li { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.shop-crumbs li + li::before { content: "/"; color: var(--c-muted); }
.shop-crumbs a { color: var(--c-muted); }
.shop-crumbs a:hover { color: var(--c-ink); }
@media (min-width: 750px) { .shop-crumbs { display: block; } }

.shop-tools { display: flex; align-items: center; gap: var(--s-1); width: 100%; }
@media (min-width: 750px) { .shop-tools { width: auto; } }

.shop-tools__btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: var(--s-3);
	cursor: pointer; list-style: none; color: var(--c-ink); text-decoration: none;
}
.shop-tools__btn::-webkit-details-marker { display: none; }
.shop-tools__btn:hover { text-decoration: none; opacity: .7; }
.shop-tools__n { color: var(--c-muted); }

/* Grid toggle: 1/2 on phones, 3/4 from tablet up. */
.grid-toggle { display: flex; align-items: center; }
.grid-toggle--m { margin-right: auto; margin-left: calc(-1 * var(--s-3)); }
.grid-toggle--d { display: none; }
@media (min-width: 750px) {
	.grid-toggle--m { display: none; }
	.grid-toggle--d { display: flex; margin-right: var(--s-3); }
}
.grid-toggle__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; }
.grid-toggle__bars { display: flex; gap: 2px; }
.grid-toggle__bars i { display: block; width: 5px; height: 14px; background: currentColor; opacity: .28; transition: opacity var(--dur); }
.grid-toggle__btn[aria-pressed="true"] .grid-toggle__bars i { opacity: 1; }
.grid-toggle__btn:hover .grid-toggle__bars i { opacity: .6; }
.grid-toggle__btn[aria-pressed="true"]:hover .grid-toggle__bars i { opacity: 1; }

/* Sort dropdown (details/summary: works without JS). */
.sort { position: relative; }
.sort[open] > summary .icon { transform: rotate(180deg); }
.sort__menu {
	position: absolute; right: 0; top: 100%; z-index: 20; min-width: 220px;
	padding-block: var(--s-2); background: var(--c-bg); border: 1px solid var(--c-line);
}
.sort__opt { display: flex; align-items: center; min-height: 44px; padding-inline: var(--s-4); color: var(--c-muted); }
.sort__opt:hover { color: var(--c-ink); text-decoration: none; background: var(--c-cream); }
.sort__opt.is-current { color: var(--c-ink); }

/* Active filter chips ------------------------------------------------------ */
.shop-chips { padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--c-line); }
.shop-chips__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip {
	display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding-inline: var(--s-3);
	border: 1px solid var(--c-line); text-decoration: none;
}
.chip:hover { border-color: var(--c-ink); text-decoration: none; }
.chip-clear { display: inline-flex; align-items: center; min-height: 36px; margin-left: var(--s-2); }
@media (max-width: 749px) { .chip, .chip-clear { min-height: 44px; } }

/* Grid ---------------------------------------------------------------------- */
.shop-notices .woocommerce-message, .shop-notices .woocommerce-info, .shop-notices .woocommerce-error { margin: var(--s-4) var(--gutter) 0; }
.shop-grid { padding: var(--grid-gap) var(--grid-gap) 0; }
.shop-grid[data-cols-m="1"] { --cols-m: 1; }
.shop-grid[data-cols-m="2"] { --cols-m: 2; }
.shop-grid[data-cols-d="3"] { --cols-d: 3; }
.shop-grid[data-cols-d="4"] { --cols-d: 4; }
.shop-grid--empty { padding-inline: var(--gutter); }
.shop-empty { display: grid; justify-items: center; gap: var(--s-3); padding-block: var(--s-24); text-align: center; }

/* Pager --------------------------------------------------------------------- */
.pager { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-12) var(--gutter) var(--s-16); text-align: center; }
.pager__bar { display: block; width: 160px; height: 1px; background: var(--c-line); }
.pager__bar i { display: block; height: 1px; background: var(--c-ink); }
.pager__links { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.pager__more { min-width: 220px; }
.pager__more[aria-busy="true"] { opacity: .5; pointer-events: none; }
.pager__prev { display: inline-flex; align-items: center; min-height: 44px; }

/* Filter drawer ------------------------------------------------------------- */
/* No-JS: the FILTER link targets #filter-drawer. With JS, app.js opens it and the hash stays untouched. */
.filter-drawer:target { transform: none; visibility: visible; }
.filter-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.filter-form .drawer__body { padding-block: var(--s-2); }
.filter-form__foot { display: grid; gap: var(--s-3); text-align: center; }
.filter-form__clear { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; }
.filter-group__n { color: var(--c-muted); }

.filter-list { display: grid; gap: 0; }
.filter-opt {
	position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 40px; margin: 0;
	font-size: var(--fs-m); letter-spacing: 0; text-transform: none; cursor: pointer;
}
@media (max-width: 749px) { .filter-opt { min-height: 44px; } }
.filter-opt__count { margin-left: auto; color: var(--c-muted); font-size: var(--fs-s); }
.filter-opt input:focus-visible { outline: 1px solid var(--c-ink); outline-offset: 2px; }

/* Sizes as boxes */
.filter-group--size .filter-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-group--size .filter-opt {
	justify-content: center; min-width: 56px; min-height: 44px; padding-inline: var(--s-3);
	border: 1px solid var(--c-line); gap: 0;
}
.filter-group--size .filter-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter-group--size .filter-opt__count { margin-left: 6px; font-size: var(--fs-xxs); }
.filter-group--size .filter-opt:has(input:checked) { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.filter-group--size .filter-opt:has(input:checked) .filter-opt__count { color: rgba(255, 255, 255, .7); }
.filter-group--size .filter-opt:has(input:focus-visible) { outline: 1px solid var(--c-ink); outline-offset: 2px; }

/* Colours as dots */
.filter-group--color .filter-opt input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.filter-opt__dot {
	flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
	background: var(--dot, var(--c-cream)); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .2);
}
.filter-opt__dot--none { background: transparent; box-shadow: inset 0 0 0 1px var(--c-muted); }
.filter-group--color .filter-opt input:checked + .filter-opt__dot { outline: 1px solid var(--c-ink); outline-offset: 2px; }
.filter-group--color .filter-opt input:focus-visible + .filter-opt__dot { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.filter-group--color .filter-opt input:checked ~ .filter-opt__name { text-decoration: underline; text-underline-offset: 3px; }

/* Search results (non-product) --------------------------------------------- */
.search-results { padding-bottom: var(--s-16); }
.search-results__list { max-width: var(--text-max); margin-inline: auto; border-top: 1px solid var(--c-line); }
.search-results__item a { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.search-results__item a:hover { text-decoration: none; background: var(--c-cream); }

/* Back to top (phones/tablets), SIR spec: 42px white square, 1px ink border, 0.3s fade. */
.to-top {
	position: fixed; z-index: 40; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: 0; cursor: pointer;
	opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
body.is-locked .to-top { opacity: 0; visibility: hidden; } /* not over open drawers */
@media (min-width: 990px) { .to-top { display: none; } }