/**
 * YouBeauty — shop and product-category archive.
 *
 * Only what is true of the archive and nowhere else: the toolbar above the grid, and the rule the
 * grid hangs under. The tile itself is in `woocommerce.css`, because WooCommerce renders the same
 * `ul.products > li.product` for the archive, the related row and the upsells row, and describing
 * it three times is how the three drift apart.
 *
 * Not to be confused with the older `shop.css`, which targets a Divi Loop + Post Filter layout
 * (`.yb-shop-grid`, `.et_pb_post_filter*`). That layout is not what the shop page currently
 * renders, so the two files do not overlap.
 *
 * Selectors are anchored on `#left-area`. Divi's own WooCommerce rules reach three classes and two
 * elements deep, and `woocommerce` is a class on `<body>`, not on anything inside the content
 * column — a selector written as `#left-area .woocommerce ul.products` matches nothing at all.
 */

/* -------------------------------------------------------------------- toolbar */

/*
 * Result count left, sort control right, on one line above the grid. Floats rather than flex
 * because the two are siblings of the grid inside `#left-area` with no wrapper of their own, and
 * making `#left-area` a flex container would take the grid, the pagination and the breadcrumb
 * with it.
 */
#left-area .woocommerce-result-count,
#left-area p.woocommerce-result-count {
	float: left;
	margin: 0 0 var( --csl-space-8 );
	padding: 0 !important; /* Divi: `p.woocommerce-result-count { padding-bottom:40px }`. */
	color: var( --csl-ink-soft ) !important; /* Divi: `color:#999` on the same rule. */
	font-size: var( --csl-text-sm );
	font-weight: var( --csl-weight-regular );
	line-height: 2.2;
}

#left-area .woocommerce-ordering {
	float: right;
	margin: 0 0 var( --csl-space-8 );
}

/* ------------------------------------------------------------------ the grid */

/*
 * The archive grid clears the floated toolbar and stands off it on whitespace alone — no rule
 * between the two. Everything else about it — tracks, gap, tile — comes from the shared tile
 * section.
 *
 * The space above it belongs to the toolbar, not to the grid, for two reasons stacked on top of
 * each other:
 *
 *   - Divi's inline CSS carries `#left-area ul.products { padding: 0 !important }`. That is the
 *     same specificity as anything this file can write, so a `padding-top` here loses at every
 *     source order and silently computes to zero.
 *   - A `margin-top` does not work either. The grid clears two floated controls, and clearance is
 *     introduced *above* the top margin edge — the browser absorbs the margin into the clearance
 *     and the element still lands flush under the floats.
 *
 * So the gap is `margin-bottom` on the two floated controls, which raises the point the clear
 * lands at. No `!important` anywhere.
 */
#left-area ul.products {
	clear: both;
}

@media ( max-width: 479px ) {
	/* The toolbar stops being a row when neither control has space for the other beside it. */
	#left-area .woocommerce-result-count,
	#left-area p.woocommerce-result-count,
	#left-area .woocommerce-ordering {
		float: none;
		line-height: var( --csl-leading-snug );
	}

	/* Stacked: the count's own bottom margin becomes the gap between the two controls. */
	#left-area .woocommerce-result-count,
	#left-area p.woocommerce-result-count {
		margin-bottom: var( --csl-space-3 );
	}

	#left-area .woocommerce-ordering {
		margin-bottom: var( --csl-space-5 );
	}

	#left-area .woocommerce-ordering select {
		width: 100%;
	}


}