/* =============================================================================
 * zphcstore-v1 — SHOP GRID · CATEGORY ARCHIVES · SEARCH   (P3, tuju-shop)
 *
 * Every value below was read off the source, not invented:
 *   · source-cdp/merged.css          (Flatsome + the child theme's own rules)
 *   · source-cdp/section-map-shop.*  and section-map-cat-injectable.*
 *   · _shots/shop-*.png, _shots/cat-*.png
 *
 * Consumes assets/css/zphc-tokens.css — never forks a --zphc-* token, and never
 * re-declares .zphc-container or the shared product card.
 *
 * Breakpoints are the source's Flatsome ones: large >=850 · medium 550-849 · small <=549.
 * ========================================================================== */

/* =============================================================================
 * 1. Title band — above <main>
 *    `.shop-page-title.category-page-title.page-title` on the source:
 *    breadcrumb (+ the mobile Categories button) left, result count + sort right.
 *    Measured: .page-title-inner { min-height:60px; padding-top:20px }
 * ========================================================================== */
.zphc-shop-titlebar {
	background: var(--zphc-white);
}

.zphc-shop-titlebar__inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	min-height: 60px;
	padding-top: 20px;
}

.zphc-shop-titlebar__lead { flex: 1 1 auto; min-width: 0; }
.zphc-shop-titlebar__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* --- Breadcrumb (.breadcrumbs.uppercase + .is-small wrapper) --------------
 * The `nav.` qualifier is load-bearing: WooCommerce ships
 * `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb`,
 * and because :where() contributes ZERO specificity that is a (0,2,0) rule which beat a
 * single-class override and repainted the crumb .92em / #767676. (0,2,1) wins honestly
 * instead of leaning on stylesheet order.
 * -------------------------------------------------------------------------- */
.zphc-shop-titlebar nav.zphc-breadcrumb {
	font-size: .8em;              /* .is-small */
	color: #222;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.05;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}

.zphc-shop-titlebar nav.zphc-breadcrumb a {
	color: rgba(102, 102, 102, .7);
	font-weight: 400;
	text-decoration: none;
}

.zphc-shop-titlebar nav.zphc-breadcrumb a:hover { color: var(--zphc-primary); }

.zphc-shop-titlebar nav.zphc-breadcrumb .divider {
	font-weight: 300;
	margin: 0 .3em;
	opacity: .35;
}

/* --- Result count + sort --------------------------------------------------
 * ⚠ style.css line 57 lists `.shop-page-title` among the heading selectors, and the
 * band carries that class for source parity — so EVERYTHING inside it inherited
 * Montserrat 700. The breadcrumb wants that (the source's .breadcrumbs really is
 * font-weight:700); the result count does not. Measured over CDP, not eyeballed.
 * -------------------------------------------------------------------------- */
.zphc-shop-titlebar .woocommerce-result-count {
	display: inline-block;
	margin: 0 1em 0 auto;
	font-family: var(--zphc-font-body);
	font-weight: 400;
	font-size: .9em;
	color: var(--zphc-ink);
}

.zphc-ordering { margin: 5px 0; }

.zphc-ordering select {
	display: inline-block;
	max-width: 100%;
	font-family: var(--zphc-font-body);
	font-size: .9em;
	line-height: 1.4;
	padding: 7px 28px 7px 10px;
	color: var(--zphc-ink);
	background-color: var(--zphc-white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23383838' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	border: 1px solid #ddd;
	border-radius: var(--zphc-r-sm);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* --- The mobile "Categories" drawer button (source: .filter-button) ------- */
.zphc-shop-filterrow { display: none; }

.zphc-filter-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: .5em;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--zphc-ink-strong);
	font-family: var(--zphc-font-body);
	font-size: .8em;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.zphc-filter-button svg { width: 16px; height: 16px; fill: currentColor; opacity: .6; }
.zphc-filter-button:hover { color: var(--zphc-primary); }

/* =============================================================================
 * 2. The two-column shell
 *    `.row.category-page-row` { padding-top:30px } · rail col large-3 (25%),
 *    content col large-9 (75%), Flatsome column gutters 15px.
 * ========================================================================== */
/*
 * Measured: the source's `.row.category-page-row` is 1120px WIDE, not 1120 minus
 * container padding. The 15px gutters sit on the columns, so the rail measures a flat
 * 280 (25% of 1120) and the content column 840. Wrapping this row in .zphc-container
 * gave 1090 / 273 — close enough to eyeball as correct, which is exactly why it is
 * measured over CDP instead (measure_shop.py).
 */
.zphc-shop-row {
	display: grid;
	grid-template-columns: 25% minmax(0, 75%);
	max-width: var(--zphc-container);
	width: 100%;
	margin: 0 auto;
	padding-top: 30px;
	box-sizing: border-box;
}

.zphc-shop-rail  { padding: 0 15px 30px; min-width: 0; }
.zphc-shop-main  { padding: 0 15px 30px; min-width: 0; }

.zphc-shop-container { min-width: 0; }

/* =============================================================================
 * 3. The curated rail
 * ========================================================================== */
.zphc-shop-rail__head { display: none; }

.zphc-widget { margin-bottom: 1.5em; }

.zphc-widget__title {
	display: block;
	font-family: var(--zphc-font-body);
	font-size: 1em;
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--zphc-ink-strong);
}

/* Flatsome's .is-divider, measured */
.zphc-shop-rail .is-divider {
	display: block;
	width: 100%;
	max-width: 30px;
	height: 3px;
	margin: .66em 0 1em;
	background-color: rgba(0, 0, 0, .1);
}

.zphc-widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zphc-widget__list > li {
	list-style: none;
	margin: 0;
	text-align: left;
	display: flex;
	align-items: center;
}

.zphc-widget__list > li + li { border-top: 1px solid #ececec; }

/*
 * Three classes deep on purpose. WooCommerce's
 * `.woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item a`
 * is (0,3,1) and it squashed the Filter-by links to `padding:1px 0` while the nav-menu
 * links below kept 6px — two visually different list styles in one rail. Measured.
 */
.zphc-shop-sidebar .zphc-widget .zphc-widget__list > li > a {
	display: inline-block;
	flex: 1;
	padding: 6px 0;
	font-size: .95em;
	line-height: 1.4;
	color: var(--zphc-link);
	text-decoration: none;
}

.zphc-shop-sidebar .zphc-widget .zphc-widget__list > li > a:hover { color: var(--zphc-link-hover); }

.zphc-shop-sidebar .zphc-widget .zphc-widget__list > li.current-menu-item > a {
	color: #000;
	font-weight: 700;
}

/* Woo's own list resets, neutralised so both widget kinds share one look. */
.zphc-shop-sidebar .woocommerce-widget-layered-nav-list,
.zphc-shop-sidebar .woocommerce-widget-layered-nav-list__item {
	padding: 0;
	margin: 0;
	border-right: 0;
	border-left: 0;
}

/* Layered-nav counts + the "chosen" toggle pill Flatsome draws */
.zphc-widget__list .count {
	flex: 0 0 auto;
	font-size: .8em;
	opacity: .45;
	padding-left: 6px;
}

.zphc-widget__list li.chosen > a::before {
	content: "\00d7";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	line-height: 16px;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 99px;
	background-color: #f1f1f1;
	color: currentColor;
	opacity: .6;
	position: relative;
	top: -1px;
}

.zphc-widget--banner { margin-top: 1.5em; }

.zphc-widget--banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--zphc-r);
}

/* =============================================================================
 * 4. Grid + term description
 *    Source: `products row row-small large-columns-3 medium-columns-3 small-columns-2`
 *    .zphc-grid already implements the column maths; only the counts change here.
 * ========================================================================== */
.zphc-shop-grid {
	--zphc-cols: 3;
	--zphc-cols-md: 3;
	--zphc-cols-sm: 2;
}

.zphc-term-description {
	font-family: var(--zphc-font-body);
	font-size: 15px;
	line-height: 1.75;
	color: #333;
	margin-bottom: 1.5em;
}

.zphc-term-description h1 {
	font-family: var(--zphc-font-head);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 14px;
	color: #111;
}

.zphc-term-description p { margin: 0 0 16px; }
.zphc-term-description a { color: var(--zphc-link); }

.zphc-shop-empty {
	margin: 24px 0;
	padding: 14px 16px;
	border: 1px solid var(--zphc-border-strong);
	border-radius: var(--zphc-r);
	background: var(--zphc-tint);
	font-size: 15px;
}

/* =============================================================================
 * 5. Pagination
 *    Flatsome .nav-pagination pills, measured verbatim from merged.css.
 * ========================================================================== */
.zphc-pagination { margin: 10px 0 30px; }

.zphc-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zphc-pagination li { list-style: none; margin: 0; }

.zphc-pagination .page-number {
	display: block;
	min-width: 2.25em;
	height: 2.25em;
	padding: 0 7px;
	border: 2px solid;
	border-radius: 99px;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 2em;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	color: var(--zphc-ink);
	transition: all .3s var(--zphc-ease);
}

.zphc-pagination a.page-number { color: var(--zphc-primary); }

.zphc-pagination .page-number.current,
.zphc-pagination a.page-number:hover {
	background-color: var(--zphc-primary);
	border-color: var(--zphc-primary);
	color: var(--zphc-white);
}

.zphc-pagination .page-number.dots {
	border-color: transparent;
	pointer-events: none;
}

.zphc-pag__icon {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

/* =============================================================================
 * 6. The long-form SEO block, BELOW the grid
 *    Lifted verbatim from the source's own `.text-cat` rules in merged.css —
 *    this is the typography the 10k-word category copy was written against.
 * ========================================================================== */
.zphc-shop-rule {
	border: 0;
	border-top: 1px solid var(--zphc-border-strong);
	margin: 30px 0 10px;
}

.text-cat {
	font-family: "Manrope", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #333;
}

.text-cat h1 {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	margin: 32px 0 14px;
	color: #111;
}

.text-cat h2 {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	margin: 32px 0 14px;
	color: #111;
}

.text-cat h3 {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 600;
	margin: 24px 0 10px;
	color: #111;
}

.text-cat p { margin: 0 0 16px; }
.text-cat strong { font-weight: 700; }
.text-cat a { color: var(--zphc-link); text-decoration: underline; text-underline-offset: 2px; }
.text-cat ul { padding-left: 22px; margin: 0 0 20px; }
.text-cat li { margin-bottom: 8px; }

.text-cat table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
}

.text-cat th,
.text-cat td {
	padding: 11px 13px;
	border: 1px solid #e1e1e1;
	text-align: left;
	vertical-align: top;
}

.text-cat th {
	font-family: "Montserrat", Arial, sans-serif;
	font-weight: 600;
	background: #f6f6f6;
	color: #111;
}

.text-cat details {
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: #fff;
}

.text-cat summary {
	font-family: "Montserrat", Arial, sans-serif;
	font-weight: 600;
	cursor: pointer;
}

.text-cat details p { margin: 12px 0 0; }

/* The wrapper the copy ships around every table; unstyled on the source, but it is
   what keeps a 5-column table from blowing the viewport out at 390. */
.text-cat .table-wrap { max-width: 100%; overflow-x: auto; }

@media (max-width: 768px) {
	.text-cat { font-size: 14px; line-height: 1.7; }
	.text-cat h1 { font-size: 22px; margin-top: 26px; }
	.text-cat h2 { font-size: 20px; margin-top: 26px; }
	.text-cat h3 { font-size: 16px; }

	.text-cat table {
		font-size: 13px;
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.text-cat th,
	.text-cat td { padding: 9px 10px; }
}

/* =============================================================================
 * 7. Plain (non-product) search fallback
 * ========================================================================== */
.zphc-shop--plain { padding: 30px 0 48px; }

.zphc-searchlist { margin: 0 0 24px; padding: 0; list-style: none; }

.zphc-searchlist__item {
	padding: 10px 0;
	border-bottom: 1px solid #ececec;
}

.zphc-searchlist__item a { color: var(--zphc-link); }

/* =============================================================================
 * 8. Below 850px — the rail becomes the off-canvas "Categories" drawer
 *    (source: `col large-3 hide-for-medium` + `.filter-button[data-open="#shop-sidebar"]`,
 *    with Flatsome's 300px left drawer). The markup is rendered ONCE and moved by CSS,
 *    never duplicated.
 * ========================================================================== */
@media (max-width: 849px) {
	.zphc-shop-row {
		display: block;
		padding-top: 20px;
	}

	.zphc-shop-main { padding: 0 15px 30px; }

	.zphc-shop-titlebar__inner {
		display: block;
		text-align: center;
		padding-top: 16px;
	}

	.zphc-shop-titlebar__tools {
		display: block;
		margin-top: 10px;
	}

	/* The source hides the result count below 850 (.hide-for-medium). */
	.zphc-shop-titlebar .woocommerce-result-count { display: none; }

	.zphc-ordering select { width: 100%; max-width: 320px; }

	.zphc-shop-filterrow { display: block; }

	.zphc-shop-rail {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		width: 300px;
		max-width: 86vw;
		height: 100%;
		padding: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--zphc-white);
		box-shadow: var(--zphc-sh-drawer);
		transform: translateX(-100%);
		transition: transform .25s var(--zphc-ease);
		visibility: hidden;
	}

	.zphc-shop-rail.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.zphc-shop-rail__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid rgba(0, 0, 0, .08);
	}

	.zphc-shop-rail__title {
		font-family: var(--zphc-font-body);
		font-size: .9em;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.zphc-shop-rail__close {
		border: 0;
		background: none;
		padding: 4px;
		cursor: pointer;
		color: var(--zphc-ink-strong);
		line-height: 0;
	}

	.zphc-shop-rail__close svg { width: 18px; height: 18px; fill: currentColor; }

	.zphc-shop-sidebar { padding: 18px; }
}

.zphc-shop-scrim {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--zphc-ease), visibility .25s var(--zphc-ease);
}

.zphc-shop-scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 850px) {
	/* The drawer never exists at desktop width, so neither does its scrim. */
	.zphc-shop-scrim { display: none; }
}

@media (max-width: 549px) {
	.zphc-shop-main { padding: 0 8px 30px; }
	.zphc-shop-titlebar__inner { padding-top: 12px; }
	.zphc-pagination .page-number { font-size: 1em; }
}