/* ============================================================================
   gryphon-replica — shop.css : archive layout, toolbar and facet rail.
   Measured against the source's re-shot archive capture (RECON-DESIGN.md §6).

   NOTE the product CARD is not here — it is in layout.css, sitewide, because it
   also renders on the PDP related row and in cart cross-sells, and /cart/ never
   loads this file. Putting it here repaints the card as Woo's default on exactly
   the pages where that matters most.
   ========================================================================= */

.gr-archive { padding: 24px 0 64px; }

/* ---- head ---- */
.gr-archive-head { text-align: center; }
.gr-archive-title {
	font-family: Vollkorn, serif;        /* same stack as the source, deliberately not loaded */
	font-weight: 500;
	font-size: 38px;
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0 0 10px;
}
/* breadcrumb styles moved to layout.css — see the note there. */
.gr-archive-desc {
	max-width: 760px;
	margin: 12px auto 0;
	font-size: 15px;
	line-height: 1.6;
}
.gr-archive-rule {
	border: 0;
	border-top: 1px solid #e3e0da;
	margin: 20px 0 16px;
}

/* ---- toolbar: View as at the LEFT, sort at the RIGHT ---- */
.gr-archive-toolbar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 22px;
}
.gr-viewas { display: flex; align-items: center; gap: 8px; }
.gr-viewas-label {
	font-size: 13px;
	color: var(--color-body);
	text-transform: none;
}
.gr-viewas-btn {
	border: 1px solid #ddd;
	background: #fff;
	width: 30px; height: 30px;
	padding: 0;
	cursor: pointer;
	color: var(--color-heading);
	display: inline-flex; align-items: center; justify-content: center;
}
.gr-viewas-btn.is-active { border-color: var(--color-heading); background: var(--color-bg-alternative); }
.gr-ico-grid, .gr-ico-list { display: block; width: 14px; height: 14px; position: relative; }
.gr-ico-grid {
	background:
		linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
		linear-gradient(currentColor 0 0) 8px 0 / 6px 6px no-repeat,
		linear-gradient(currentColor 0 0) 0 8px / 6px 6px no-repeat,
		linear-gradient(currentColor 0 0) 8px 8px / 6px 6px no-repeat;
}
.gr-ico-list {
	background:
		linear-gradient(currentColor 0 0) 0 1px / 14px 2px no-repeat,
		linear-gradient(currentColor 0 0) 0 6px / 14px 2px no-repeat,
		linear-gradient(currentColor 0 0) 0 11px / 14px 2px no-repeat;
}

.gr-result-count {
	margin: 0 auto 0 0;
	font-size: 14px;
	color: var(--color-body);
}

/* custom dropdown — the source's sort is NOT a <select>; checked, not assumed */
.gr-sort { position: relative; margin-left: auto; }
.gr-sort-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid #ddd;
	background: #fff;
	padding: 7px 14px;
	font-family: var(--font-family);
	font-size: 14px;
	color: var(--color-heading);
	cursor: pointer;
}
.gr-sort-list {
	display: none;
	position: absolute; top: calc(100% + 4px); right: 0;
	z-index: 40;
	min-width: 210px;
	margin: 0; padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.gr-sort.is-open .gr-sort-list { display: block; }
.gr-sort-list a {
	display: block;
	padding: 7px 16px;
	font-size: 14px;
	color: var(--color-body);
}
.gr-sort-list a:hover { background: var(--color-bg-alternative); color: var(--color-heading); }
.gr-sort-list a.is-active { color: var(--color-primary); font-weight: 700; }

/* With JS off the dropdown is always open as a plain list of links, so sorting still works. */
.no-js .gr-sort-list { display: block; position: static; border: 0; box-shadow: none; }

/* ---- body: facet rail + grid ---- */
.gr-archive-body {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 36px;
	align-items: start;
}
.gr-archive-main { min-width: 0; }     /* without this the grid refuses to shrink and overflows */

/* ---- facets ---- */
.gr-facets { font-size: 14px; }
.gr-facet-clear { margin: 0 0 14px; }
.gr-facet-clear a { color: var(--color-primary); text-decoration: underline; }

.gr-facet { border-bottom: 1px solid #e3e0da; padding: 0 0 10px; margin: 0 0 12px; }
.gr-facet-title { margin: 0; }
.gr-facet-toggle {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%;
	padding: 10px 0;
	border: 0; background: none;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-heading);
	cursor: pointer;
	text-align: left;
}
.gr-facet-caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform .15s ease;
}
.gr-facet.is-open .gr-facet-caret { transform: rotate(180deg); }

.gr-facet-body { display: none; }
.gr-facet.is-open .gr-facet-body { display: block; }

.gr-facet-search {
	width: 100%;
	margin: 0 0 8px;
	padding: 6px 10px;
	border: 1px solid #ddd;
	font-family: var(--font-family);
	font-size: 13px;
}

.gr-facet-list {
	list-style: none;
	margin: 0; padding: 0;
	max-height: 260px;
	overflow-y: auto;
}
.gr-facet-item.is-hidden { display: none; }
.gr-facet-link {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
	color: var(--color-body);
	line-height: 1.35;
}
.gr-facet-link:hover { color: var(--color-heading); }
.gr-facet-box {
	flex: 0 0 auto;
	width: 14px; height: 14px;
	margin-top: 2px;
	border: 1px solid #bbb;
	background: #fff;
}
.gr-facet-link.is-on .gr-facet-box {
	background: var(--color-primary);
	border-color: var(--color-primary);
}
.gr-facet-link.is-on { color: var(--color-heading); font-weight: 700; }
.gr-facet-name { flex: 1 1 auto; }
.gr-facet-count { flex: 0 0 auto; color: #999; }

/* ---- grid: 3-up desktop, 2-up mobile (source: grid-width-3 / grid-width-mb-2) ---- */
.gr-pgrid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* list view is a density switch, not a different card */
.gr-pgrid-3.is-list { grid-template-columns: 1fr; }
.gr-pgrid-3.is-list .gr-pcard { display: grid; grid-template-columns: 200px 1fr; gap: 20px; text-align: left; }
.gr-pgrid-3.is-list .gr-pcard-title,
.gr-pgrid-3.is-list .gr-pcard-price { text-align: left; }

.gr-archive-empty { padding: 40px 0; color: var(--color-body); }

/* ---- pagination: numbered, as at source ---- */
.gr-pagination {
	display: flex; justify-content: center; gap: 6px;
	margin: 40px 0 0;
}
.gr-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 8px;
	border: 1px solid #ddd;
	font-size: 14px;
	color: var(--color-body);
}
.gr-pagination .page-numbers:hover { border-color: var(--color-heading); color: var(--color-heading); }
.gr-pagination .page-numbers.current {
	background: var(--color-bg-nav);
	border-color: var(--color-bg-nav);
	color: #fff;
}
.gr-pagination .page-numbers.dots { border-color: transparent; }

/* ============================================================================
   RESPONSIVE — full selectors repeated; media queries add no specificity.
   A base rule of `.gr-archive-body` (0,1,0) would otherwise be beaten by nothing
   and the two-column rail would survive down to 390.
   ========================================================================= */
@media (max-width: 991px) {
	.gr-archive .gr-archive-body { grid-template-columns: 1fr; gap: 22px; }
	.gr-archive .gr-facets {
		border: 1px solid #e3e0da;
		padding: 12px 14px;
	}
	.gr-archive .gr-pgrid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
	.gr-archive .gr-archive-title { font-size: 30px; }
}

@media (max-width: 767px) {
	.gr-archive .gr-pgrid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.gr-archive .gr-archive-toolbar { flex-wrap: wrap; gap: 10px; }
	.gr-archive .gr-result-count { order: 3; width: 100%; margin: 0; }
	.gr-archive .gr-sort { margin-left: auto; }
	.gr-archive .gr-archive-title { font-size: 26px; }
	.gr-archive .gr-pgrid-3.is-list .gr-pcard { grid-template-columns: 110px 1fr; gap: 14px; }
}

/* ---- price facet ---- */
.gr-price-form { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.gr-price-form input[type="number"] {
	width: 100%; min-width: 0;
	padding: 6px 8px;
	border: 1px solid #ddd;
	font-family: var(--font-family);
	font-size: 13px;
}
.gr-price-dash { color: #999; }
.gr-price-go {
	flex: 0 0 auto;
	border: 0;
	padding: 7px 12px;
	background: var(--color-bg-nav);
	color: #fff;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.gr-price-go:hover { background: var(--color-bg-nav-darken-10); }

/* =========================================================================
   MOBILE FACETS — hidden behind a FILTER toggle, as the source hides them.
   Measured: .boost-pfs-filter-tree is 269x4337 at 1440 and 0x0 at 390.
   Pure CSS (:checked), so the filters stay reachable with JavaScript off.
   ========================================================================= */
.gr-facets-cb { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.gr-facets-toggle { display: none; }

@media (min-width: 768px) {
	/* Desktop: the toggle does not exist and the sidebar is always open, whatever the checkbox
	   happens to be. Written as an explicit display so a stale :checked cannot leak upward. */
	.gr-archive .gr-facets { display: block; }
}

@media (max-width: 767px) {
	.gr-archive .gr-facets-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		padding: 11px 14px;
		border: 1px solid #e3e0da;
		background: #fff;
		font-family: var(--font-family);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .06em;
		color: var(--color-heading);
		cursor: pointer;
	}
	.gr-archive .gr-facets { display: none; }
	.gr-archive .gr-facets-cb:checked ~ .gr-facets { display: block; margin-top: 10px; }
	.gr-archive .gr-facets-cb:checked ~ .gr-facets-toggle .gr-caret { transform: rotate(180deg); }
}