/**
 * FoodX shop archive.
 *
 * Scoped under .fx-shop. Product card styling lives in foodx-products.css and
 * is shared with the front-page grid; only the page shell, the filter rail and
 * the grid density are defined here.
 */

.fx-shop{
	--fx-forest:#163d2b;
	--fx-forest-deep:#0f2c1f;
	--fx-green:#2f7a4f;
	--fx-green-soft:#e8f2ea;
	--fx-ink:#1a2b22;
	--fx-muted:#7a8078;
	--fx-line:#ebe8e1;
	--fx-radius:16px;

	/* Site container convention, shared with .fx-products-in, .fx-split-in,
	 * .fx-why-in, .fx-ft-in and the rest: 1360px cap with a 20px gutter. */
	max-width:1360px;
	width:calc(100% - 40px);
	margin:0 auto;
	padding:24px 0 96px;
	color:var(--fx-ink);
	box-sizing:border-box;
}

.fx-shop *{box-sizing:border-box;}

/* --- breadcrumb --------------------------------------------------------- */

.fx-shop .fx-crumbs{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px;
	font-size:.85rem;color:var(--fx-muted);margin-bottom:18px;
}
.fx-shop .fx-crumbs a{color:var(--fx-muted);text-decoration:none;}
.fx-shop .fx-crumbs a:hover{color:var(--fx-green);text-decoration:underline;}
.fx-shop .fx-crumbs .is-current{color:var(--fx-ink);font-weight:700;}

/* --- page head ---------------------------------------------------------- */

.fx-shop-head{margin-bottom:26px;}
.fx-shop-title{
	font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
	font-size:clamp(2rem,4vw,2.65rem);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--fx-forest);
	margin:0 0 8px;
}
.fx-shop-lede{color:var(--fx-muted);font-size:.98rem;margin:0;max-width:62ch;}

/* --- layout ------------------------------------------------------------- */

.fx-shop-body{display:grid;grid-template-columns:274px 1fr;gap:28px;align-items:start;}

@media (max-width:1000px){
	.fx-shop-body{grid-template-columns:1fr;}
}

/* --- filter rail -------------------------------------------------------- */

.fx-filters{
	border:1px solid var(--fx-line);
	border-radius:var(--fx-radius);
	background:#fff;
	padding:22px 20px 24px;
	position:sticky;
	top:24px;
}

@media (max-width:1000px){
	.fx-filters{position:static;}
}

.fx-filters-head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--fx-line);
}
.fx-filters-head h2{font-size:1.1rem;font-weight:800;margin:0;}
.fx-reset{
	appearance:none;border:0;background:none;cursor:pointer;
	font:inherit;font-size:.85rem;font-weight:700;color:var(--fx-green);padding:0;
}
.fx-reset:hover{text-decoration:underline;}

.fx-facet{padding:18px 0;border-bottom:1px solid var(--fx-line);}
.fx-facet:last-child{border-bottom:0;padding-bottom:0;}
.fx-facet-title{
	font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
	color:var(--fx-ink);margin:0 0 12px;
}
.fx-facet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}

/* --- checkboxes --------------------------------------------------------- */

.fx-check{
	display:flex;align-items:center;gap:10px;cursor:pointer;
	padding:7px 6px;margin:0 -6px;border-radius:9px;font-size:.9rem;
	transition:background .15s ease;
}
.fx-check:hover{background:#f7f6f2;}
.fx-check input{position:absolute;opacity:0;width:0;height:0;}
.fx-check-box{
	flex:0 0 auto;width:17px;height:17px;border-radius:5px;
	border:1.5px solid #d6d3ca;background:#fff;position:relative;
	transition:border-color .15s ease,background .15s ease;
}
.fx-check input:checked + .fx-check-box{background:var(--fx-green);border-color:var(--fx-green);}
.fx-check input:checked + .fx-check-box::after{
	content:"";position:absolute;left:5px;top:1.5px;
	width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.fx-check input:focus-visible + .fx-check-box{box-shadow:0 0 0 3px rgba(47,122,79,.22);}
.fx-check-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;}
.fx-check-label{flex:1 1 auto;}
.fx-check-count{color:var(--fx-muted);font-size:.82rem;font-variant-numeric:tabular-nums;}

/* --- price slider ------------------------------------------------------- */

.fx-price{display:flex;flex-direction:column;gap:8px;}
.fx-price-out{
	align-self:flex-end;font-weight:800;font-size:.95rem;
	font-variant-numeric:tabular-nums;color:var(--fx-ink);
}
.fx-price-ends{
	display:flex;justify-content:space-between;
	font-size:.78rem;color:var(--fx-muted);font-variant-numeric:tabular-nums;
}
#fx-price-range{
	-webkit-appearance:none;appearance:none;
	width:100%;height:4px;border-radius:999px;background:#e6e3db;outline:none;margin:2px 0;
}
#fx-price-range::-webkit-slider-thumb{
	-webkit-appearance:none;appearance:none;
	width:17px;height:17px;border-radius:50%;
	background:var(--fx-green);border:2.5px solid #fff;cursor:pointer;
	box-shadow:0 1px 4px rgba(0,0,0,.22);
}
#fx-price-range::-moz-range-thumb{
	width:17px;height:17px;border-radius:50%;
	background:var(--fx-green);border:2.5px solid #fff;cursor:pointer;
	box-shadow:0 1px 4px rgba(0,0,0,.22);
}
#fx-price-range:focus-visible{box-shadow:0 0 0 3px rgba(47,122,79,.2);}

/* --- rating buttons ----------------------------------------------------- */

.fx-rates{display:flex;flex-direction:column;gap:8px;}
.fx-rate{
	display:flex;align-items:center;gap:9px;cursor:pointer;
	appearance:none;font:inherit;font-size:.88rem;text-align:left;
	border:1px solid var(--fx-line);border-radius:10px;background:#fff;
	padding:9px 13px;color:var(--fx-ink);
	transition:border-color .15s ease,background .15s ease;
}
.fx-rate:hover{border-color:#d6d3ca;background:#faf9f6;}
.fx-rate.is-active{border-color:var(--fx-green);background:var(--fx-green-soft);font-weight:700;}
.fx-rate .fx-stars{display:inline-flex;gap:1px;font-size:.82rem;line-height:1;}

/* --- results ------------------------------------------------------------ */

.fx-shop-count{color:var(--fx-muted);font-size:.88rem;margin:0 0 16px;}
.fx-shop-count strong{color:var(--fx-ink);}

.fx-shop .fx-shop-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:20px;
}

@media (max-width:1180px){
	.fx-shop .fx-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
	.fx-shop .fx-shop-grid{grid-template-columns:1fr;}
}

/* The navbar stylesheet's global .fx-panel lesson applies to hidden cards too:
 * be explicit rather than trusting the UA [hidden] rule to survive. */
.fx-shop .fx-shop-card[hidden]{display:none;}
.fx-shop .fx-shop-grid[hidden]{display:none;}

/* --- empty state -------------------------------------------------------- */

.fx-shop-empty{
	text-align:center;padding:56px 24px;
	border:1px dashed var(--fx-line);border-radius:var(--fx-radius);background:#fdfcfa;
}
.fx-shop-empty[hidden]{display:none;}
.fx-shop-empty-title{font-size:1.05rem;font-weight:800;margin:0 0 6px;}
.fx-shop-empty-sub{color:var(--fx-muted);font-size:.9rem;margin:0 0 18px;}
.fx-shop-empty-btn{
	appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.88rem;
	color:#fff;background:var(--fx-forest);border-radius:999px;padding:11px 26px;
	transition:background .18s ease;
}
.fx-shop-empty-btn:hover{background:var(--fx-forest-deep);}

/* --- mobile filter toggle ----------------------------------------------- */

/* Desktop keeps the rail always open, so the toggle is hidden and the body
 * is never collapsed. Everything below 1000px gets the accordion. */
.fx-filters-toggle{display:none;}

@media (max-width:1000px){
	.fx-filters{padding:16px 16px 18px;}
	.fx-filters-head{padding-bottom:14px;margin-bottom:14px;}

	.fx-filters-toggle{
		display:flex;align-items:center;gap:10px;width:100%;
		appearance:none;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;
		color:var(--fx-ink);background:#faf9f6;
		border:1px solid var(--fx-line);border-radius:11px;
		padding:12px 14px;text-align:left;
	}
	.fx-filters-toggle:hover{border-color:#d6d3ca;}
	.fx-filters-toggle-label{flex:1 1 auto;}
	.fx-filters-toggle-count{
		flex:0 0 auto;min-width:21px;height:21px;padding:0 6px;
		display:inline-flex;align-items:center;justify-content:center;
		font-size:.75rem;font-weight:800;color:#fff;
		background:var(--fx-green);border-radius:999px;
	}
	.fx-filters-toggle-count[hidden]{display:none;}
	.fx-filters-chev{flex:0 0 auto;transition:transform .2s ease;}
	.fx-filters-toggle[aria-expanded="true"] .fx-filters-chev{transform:rotate(180deg);}

	/* Collapsed by default so the products are the first thing on screen. */
	.fx-filters-body{display:none;padding-top:4px;}
	.fx-filters-body.is-open{display:block;}

	/* Two columns of checkboxes reads better than one tall stack on a phone. */
	.fx-facet-list{
		display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
		gap:2px 14px;
	}
	.fx-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
}

@media (max-width:620px){
	.fx-shop{width:calc(100% - 28px);padding:18px 0 72px;}
	.fx-shop .fx-shop-grid{grid-template-columns:1fr;}
	.fx-facet-list{grid-template-columns:1fr;}
	.fx-rates{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
	.fx-filters-chev{transition:none;}
}

@media (prefers-reduced-motion:reduce){
	.fx-check,.fx-rate,.fx-reset,.fx-shop-empty-btn{transition:none;}
}