/**
 * Bristle Up Categories — Pills and Tiles on the storefront (1.35.0, WO-040 v2). Layout only: fonts and colours come
 * from the theme. The device is chosen here, at the plugin's 850 px breakpoint (frontend.css), never on the server.
 *
 * Every rule keys on the server's markup or on [hidden] — never on a class only the script adds (R-94.6) — so the rows
 * are whole and usable with JavaScript off. The page never scrolls sideways: each row scrolls inside itself.
 */

.bpt-row { box-sizing: border-box; max-width: 100%; }
.bpt-row *, .bpt-row *::before, .bpt-row *::after { box-sizing: border-box; }

/* Devices (T5): a row ticked off for a device is not shown on it. A row with neither tick is never printed. */
@media (max-width: 849px) { .bpt-row[data-phones="0"] { display: none !important; } }
@media (min-width: 850px) { .bpt-row[data-computers="0"] { display: none !important; } }

/* ------------------------------------------------------------------ pills */
.bpt-pills { width: 100%; padding: 8px 0; }
.bpt-pills-row {
	display: flex; gap: 8px; padding: 0 12px; max-width: 1250px; margin: 0 auto;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bpt-pills-row::-webkit-scrollbar { display: none; }
.bpt-pill {
	flex: 0 0 auto; white-space: nowrap; padding: 5px 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px;
	line-height: 1.4; text-decoration: none; color: inherit; font-size: .9em;
}
.bpt-pill:hover, .bpt-pill:focus-visible { border-color: currentColor; }
.bpt-pill[aria-current] { border-color: currentColor; font-weight: 700; box-shadow: inset 0 0 0 1px currentColor; }
@media (min-width: 850px) { .bpt-pills-row { flex-wrap: nowrap; } }

/* ------------------------------------------------------------------ tiles */
.bpt-tiles { position: relative; width: 100%; margin: 0 0 20px; }
.bpt-tiles-row {
	display: grid; grid-auto-flow: column; gap: 12px;
	grid-auto-columns: calc((100% - 4 * 12px) / 5);   /* computers: about five in view, the last cut at the edge */
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: thin; padding-bottom: 6px;
}
@media (max-width: 849px) { .bpt-tiles-row { grid-auto-columns: 30%; gap: 10px; } }   /* phones: about three, swipe */
.bpt-tile { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: inherit; text-align: center; }
.bpt-tile-pic { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: rgba(0,0,0,.04); }
.bpt-tile-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bpt-tile-pic img.is-whole { object-fit: contain; }   /* a non-square picture is shown whole, never stretched */
.bpt-tile-label { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bpt-tile-count { font-size: .85em; opacity: .75; }
.bpt-tile[aria-current] .bpt-tile-label { text-decoration: underline; text-underline-offset: 3px; }
.bpt-tile:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Arrows: printed hidden; the script shows them only when the row overflows, and never on phones. */
.bpt-arrow {
	position: absolute; top: calc(50% - 30px); z-index: 2; width: 36px; height: 36px; margin: 0; padding: 0;
	border-radius: 50%; border: 1px solid rgba(0,0,0,.2); background: #fff; color: inherit; font-size: 22px; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.bpt-prev { left: -6px; }
.bpt-next { right: -6px; }
.bpt-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bpt-arrow[hidden] { display: none; }
@media (max-width: 849px) { .bpt-arrow { display: none !important; } }

@media (prefers-reduced-motion: reduce) { .bpt-tiles-row { scroll-behavior: auto; } }