/*
 * SW Safety Catalog: front-end styles.
 * Brand: red #BA0114, green #567651, cream #F4EED8.
 * Contrast: white on red 6.8:1, white on green 5.1:1, red on white 6.8:1,
 * green on white 5.1:1, ink on cream about 14:1.
 */

:root {
	--ssc-red: #BA0114;
	--ssc-green: #567651;
	--ssc-cream: #F4EED8;
	--ssc-ink: #2b2b2b;
	--ssc-line: #b9b49c;
}

/* Catalog bar ---------------------------------------------------------- */

.ssc-catalog-bar {
	display: grid;
	max-width: 100%;
	gap: 14px;
	margin: 0 0 24px;
	padding: 14px;
	background: var(--ssc-cream);
	color: var(--ssc-ink);
	border-radius: 12px;
	box-sizing: border-box;
}

.ssc-catalog-bar__top {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.ssc-search {
	flex: 1 1 320px;
	margin: 0;
	min-width: 0;
	max-width: 100%;
}

.ssc-search__field {
	display: flex;
	gap: 8px;
	max-width: 100%;
}

body .ssc-search__input.ssc-search__input {
	flex: 1 1 auto;
	display: block;
	width: auto;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 16px; /* prevents iOS zoom on focus */
	line-height: 1.4;
	color: var(--ssc-ink);
	background: #fff;
	border: 2px solid var(--ssc-green);
	border-radius: 8px;
	box-shadow: none;
	box-sizing: border-box;
}

/*
 * Buttons: the theme gives every <button> a pill shape, red background and asymmetric padding
 * (5px 5px 5px 20px) that pushes the label off-centre. The look below matches the theme; only the
 * padding and alignment differ. "body" plus a doubled class out-ranks the theme's kit selector.
 */
body .ssc-button.ssc-button,
body .ssc-request-button.ssc-request-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-indent: 0;
	text-transform: none;
	text-decoration: none;
	color: #fff;
	background: var(--ssc-red);
	border: 2px solid var(--ssc-red);
	border-radius: 50px;
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
}

body .ssc-button.ssc-button:hover,
body .ssc-button.ssc-button:focus,
body .ssc-button.ssc-button:active,
body .ssc-request-button.ssc-request-button:hover,
body .ssc-request-button.ssc-request-button:focus,
body .ssc-request-button.ssc-request-button:active {
	color: #fff;
	background: var(--ssc-green);
	border-color: var(--ssc-green);
	box-shadow: none;
}

body .ssc-button--secondary.ssc-button--secondary {
	color: var(--ssc-green);
	background: #fff;
	border-color: var(--ssc-green);
}

body .ssc-button--secondary.ssc-button--secondary:hover,
body .ssc-button--secondary.ssc-button--secondary:focus,
body .ssc-button--secondary.ssc-button--secondary:active {
	color: #fff;
	background: var(--ssc-green);
	border-color: var(--ssc-green);
}

body .ssc-search__button.ssc-search__button {
	flex: 0 0 auto;
}

/* In the request list: filled green. */
body .ssc-request-button.ssc-request-button.is-in-list {
	color: #fff;
	background: var(--ssc-green);
	border-color: var(--ssc-green);
}

body .ssc-request-button.ssc-request-button.is-in-list:hover,
body .ssc-request-button.ssc-request-button.is-in-list:focus,
body .ssc-request-button.ssc-request-button.is-in-list:active {
	color: #fff;
	background: #46613f;
	border-color: #46613f;
}

body .ssc-request-button.ssc-request-button:disabled {
	opacity: .6;
	cursor: wait;
}

/* Category chips and request list link ------------------------------------ */

.ssc-categories {
	min-width: 0;
}

body .ssc-categories__list.ssc-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ssc-categories__list.ssc-categories__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ssc-category.ssc-category,
body .ssc-request-link.ssc-request-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ssc-red);
	background: #fff;
	border: 2px solid var(--ssc-red);
	border-radius: 50px;
	box-sizing: border-box;
	text-decoration: none;
}

body .ssc-category.ssc-category:hover,
body .ssc-category.ssc-category:focus,
body .ssc-category.ssc-category.is-active,
body .ssc-request-link.ssc-request-link:hover,
body .ssc-request-link.ssc-request-link:focus {
	color: #fff;
	background: var(--ssc-red);
	border-color: var(--ssc-red);
	text-decoration: none;
}

.ssc-count {
	display: inline-block;
	min-width: 1.6em;
	padding: 1px 7px;
	font-size: .85rem;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	background: var(--ssc-red);
	border-radius: 999px;
}

body .ssc-request-link.ssc-request-link:hover .ssc-count,
body .ssc-request-link.ssc-request-link:focus .ssc-count {
	color: var(--ssc-red);
	background: #fff;
}

.ssc-request-button:focus-visible,
.ssc-category:focus-visible,
.ssc-request-link:focus-visible,
.ssc-button:focus-visible,
.ssc-search__input:focus-visible,
.ssc-link-button:focus-visible,
.ssc-qty:focus-visible,
.ssc-field input:focus-visible,
.ssc-field textarea:focus-visible {
	outline: 3px solid var(--ssc-ink);
	outline-offset: 2px;
}

.ssc-availability {
	display: inline-block;
	margin: 8px 0 16px;
	padding: 6px 14px;
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	border-radius: 999px;
}

.ssc-availability.is-available {
	background: var(--ssc-green);
}

.ssc-availability.is-out-of-stock {
	background: var(--ssc-red);
}

/* Request page ---------------------------------------------------------- */

.ssc-request {
	position: relative;
	max-width: 880px;
}

.ssc-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	color: var(--ssc-ink);
	background: #fff;
	border-left: 6px solid var(--ssc-line);
	border-radius: 8px;
}

.ssc-notice p {
	margin: 0;
}

.ssc-notice--success {
	background: #eef3ec;
	border-color: var(--ssc-green);
}

.ssc-notice--error {
	background: #fbeeee;
	border-color: var(--ssc-red);
}

.ssc-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ssc-table {
	width: 100%;
	margin-bottom: 16px;
	border-collapse: collapse;
}

.ssc-table th,
.ssc-table td {
	padding: 12px 8px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #d9d4bd;
}

.ssc-table img {
	display: inline-block;
	width: 64px;
	height: auto;
	margin-right: 12px;
	vertical-align: middle;
	border-radius: 6px;
}

.ssc-sku {
	display: block;
	font-size: .85rem;
	color: #555;
}

.ssc-qty {
	width: 84px;
	min-height: 44px;
	padding: 6px 8px;
	font-size: 16px;
	border: 2px solid var(--ssc-green);
	border-radius: 6px;
	box-sizing: border-box;
}

body .ssc-link-button.ssc-link-button {
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 0 6px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	color: var(--ssc-red);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: underline;
	cursor: pointer;
}

body .ssc-link-button.ssc-link-button:hover,
body .ssc-link-button.ssc-link-button:focus,
body .ssc-link-button.ssc-link-button:active {
	color: #8f000f;
	background: none;
}

.ssc-request__form {
	position: relative;
	display: grid;
	gap: 16px;
	margin-top: 24px;
}

.ssc-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.ssc-field input,
.ssc-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px;
	color: var(--ssc-ink);
	background: #fff;
	border: 2px solid var(--ssc-line);
	border-radius: 8px;
	box-sizing: border-box;
}

.ssc-field textarea {
	min-height: 120px;
	resize: vertical;
}

.ssc-field input[aria-invalid="true"] {
	border-color: var(--ssc-red);
}

.ssc-field-error {
	margin: 6px 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ssc-red);
}

/* Honeypot: off-screen for people, present in the HTML for bots. */
.ssc-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ssc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 599px) {
	.ssc-catalog-bar {
		padding: 12px;
	}

	.ssc-search__field {
		flex-direction: column;
	}

	body .ssc-search__input.ssc-search__input,
	body .ssc-search__button.ssc-search__button {
		flex: 0 0 auto;
		width: 100%;
	}

	/* One swipeable row of category buttons on phones. */
	body .ssc-categories__list.ssc-categories__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}

	body .ssc-category.ssc-category {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.ssc-table img {
		width: 48px;
	}
}

@media (min-width: 900px) {
	.ssc-catalog-bar {
		padding: 20px 24px;
	}
}

body.woocommerce ul.products li.product .ssc-request-button.ssc-request-button {
	width: 100%;
	margin-top: 8px;
}

/* Notices, inline messages, continue link ------------------------------- */

.ssc-notice--empty {
	margin: 0 0 24px;
}

.ssc-notice--empty p + p {
	margin-top: 6px;
}

.ssc-inline-msg {
	flex: 1 0 100%;
	margin: 8px 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ssc-green);
}

.ssc-inline-msg a {
	color: inherit;
	text-decoration: underline;
}

.ssc-inline-msg--error {
	color: var(--ssc-red);
}

.ssc-continue {
	margin: 0 0 16px;
	font-weight: 600;
}

/* Product page ---------------------------------------------------------- */

.ssc-product-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	padding: 6px 14px;
	color: var(--ssc-ink);
	background: var(--ssc-cream);
	border-radius: 10px;
	box-sizing: border-box;
}

.ssc-back-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--ssc-green);
	text-decoration: none;
}

.ssc-back-link:hover {
	text-decoration: underline;
}

.ssc-back-link:focus-visible {
	outline: 3px solid var(--ssc-ink);
	outline-offset: 2px;
}

/*
 * Theme layout on product pages (Firegard). The theme gives .page-header 70-120px of padding and
 * its h1 a 34-80px size with !important, so these rules out-rank it (body + class) and use
 * !important for the font size. The WooCommerce gallery and summary are floats, and the
 * "Related products" section has no clear, so it slides up beside them.
 */
body.ssc-single-product .page-header {
	padding: 24px 0;
}

body.ssc-single-product .page-header .page-header-box h1 {
	margin-bottom: 4px;
	font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
	line-height: 1.2;
}

body.ssc-single-product .page-header .post-single-meta ul {
	font-size: 14px;
}

body.ssc-single-product div.product::after {
	content: "";
	display: table;
	clear: both;
}

body.ssc-single-product section.related.products,
body.ssc-single-product section.upsells.products {
	clear: both;
	width: 100%;
	margin-top: 40px;
}