/*
** SustainLife Category Sections
**
** Everything up to the OPTIONAL block at the bottom is scoped under .slcs-*
** and cannot affect the theme, the product grid or the cards. The optional
** block at the bottom IS unscoped -- read the note there before keeping it.
**
** Colours are taken from the site's existing nav green (#45543f). No
** Foundation classes are used, so this survives the theme rebuild.
*/

.slcs-section {
	clear: both;
	margin: 2rem 0;
	max-width: 100%;
}

/*
** The gaps above and below the product grid are not built the same way, so
** giving both sections the same margin produces visibly unequal space.
**
** Above the grid, this margin is the only thing separating the copy from the
** first row of cards -- especially once the result count and sorting row is
** hidden, which used to contribute spacing of its own.
**
** Below the grid, the theme already adds space after the loop, so a smaller
** margin here lands in roughly the same place.
**
** Tune these two values by eye if the rhythm still looks off; they only
** affect this plugin's own sections.
*/
.slcs-section.slcs-before {
	margin: 0 0 3rem;
}

.slcs-section.slcs-after {
	margin-top: 1.5rem;
}

.slcs-boxed {
	padding: 1.5rem 1.6rem;
	border: 1px solid #d3d6cc;
	background: #fff;
}

.slcs-eyebrow {
	margin: 0 0 .55rem;
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6c7263;
}

.slcs-title {
	margin: 0 0 .55rem;
	font-size: 1.3rem;
	line-height: 1.25;
	color: #14170f;
}

/*
** A section below the grid is secondary to the page's own content, so its
** heading sits a step down from a section above the grid.
**
** This is a visual step only. The heading stays an h2 in the markup, because
** a below-grid section is a sibling of the page's other sections, not a
** subsection of them -- demoting it to h3 to make it smaller would break the
** document outline to solve a styling problem.
*/
.slcs-after .slcs-title {
	font-size: 1.12rem;
}

/*
** Section text fills the column it sits in.
**
** There is no max-width here on purpose. An earlier version capped the
** measure at 62ch, which left both plain and boxed sections stopping well
** short of the right edge and reading as half empty.
**
** A full-width line needs more size and leading than a narrow one to stay
** readable. If you ever put the width cap back, bring these two values back
** down with it -- they are a pair.
*/
.slcs-content {
	color: #4a4f42;
	font-size: 1rem;
	line-height: 1.7;
}

.slcs-content > *:first-child {
	margin-top: 0;
}

.slcs-content > *:last-child {
	margin-bottom: 0;
}

.slcs-content a {
	color: #45543f;
	text-decoration: underline;
}

.slcs-content img {
	max-width: 100%;
	height: auto;
}

.slcs-cta {
	margin: 1.2rem 0 0;
}

/*
** The section link is deliberately quieter than the theme's product buttons.
**
** It is an outbound link sitting under a grid of our own classes, so it
** should not compete with them. This is a bordered link, not a filled
** button, and it does not use the theme's button colour.
*/
.slcs-link {
	display: inline-block;
	padding: .6em .95em;
	border: 1px solid #c3c8b9;
	background: transparent;
	color: #45543f;
	font-weight: 600;
	font-size: .82rem;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

/*
** Outbound-link icon.
**
** Only on .slcs-link--external, which the plugin adds when the URL's host is
** not this site's. An internal button gets no icon, so the mark always means
** what it says.
**
** Drawn with a CSS mask over currentColor rather than a background image, so
** it picks up the link's colour and follows it on hover. The SVG is inline as
** a data URI -- no icon font, and nothing to load. Font Awesome would have
** been the obvious route, but the theme pulls FA 4.7 from MaxCDN, which no
** longer exists.
**
** Decorative only: the icon carries no meaning a screen reader needs, and the
** link text already names the destination.
*/
.slcs-link--external::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .5em;
	vertical-align: -.01em;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>') no-repeat center center;
	-webkit-mask-size: contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>') no-repeat center center;
	mask-size: contain;
}

.slcs-link:hover,
.slcs-link:focus {
	border-color: #45543f;
	color: #2c3627;
	text-decoration: none;
}

.slcs-link:focus-visible {
	outline: 2px solid #8a6320;
	outline-offset: 2px;
}

.slcs-footnote {
	margin: .9rem 0 0;
	font-size: .76rem;
	color: #878c7b;
}

@media screen and (max-width: 39.9375em) {
	.slcs-boxed {
		padding: 1.2rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slcs-link {
		transition: none;
	}
}


/*
** ---------------------------------------------------------------
** OPTIONAL: product card heights
** ---------------------------------------------------------------
**
** THIS BLOCK IS NOT SCOPED TO .slcs-* AND NOT SCOPED TO ONE CATEGORY.
**
** It styles ul.products, which means it applies to EVERY product loop on
** the site: the shop page, every other category, related products and
** upsells. Not just woodworking.
**
** What it does: makes each card a flex column and pushes the button to the
** bottom, so a two-line title like "Mark's Workbench (11-day)" no longer
** leaves that card taller than the three beside it.
**
** What it does NOT do: change any colour. "More Details" is styled site-wide
** by the theme and stays exactly as the theme paints it.
**
** Delete this whole block if you would rather the plugin never touch
** anything outside its own sections. Nothing above depends on it.
** ---------------------------------------------------------------
*/

.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .product-item-right {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product .product-item-right .button {
	margin-top: auto;
	align-self: flex-start;
}


/*
** Visually hidden, still read aloud.
**
** Used for the "(opens in a new tab)" note on external section buttons.
** display:none or visibility:hidden would remove it from screen readers too,
** which defeats the point.
*/
.slcs-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}