/*
 * Stalco Child: shop styling for WooCommerce output that Divi modules have no settings for
 * (product grid, sorting, pagination, gallery, variations, quantity, tabs, related products).
 * Photos sit on a grey tile with multiply blending, so white studio backgrounds melt into one
 * consistent catalogue look, like the printed Stalco catalogue.
 */
:root {
	--stc-green: #006241;
	--stc-green-dark: #004d33;
	--stc-ink: #242424;
	--stc-muted: #5c5c5c;
	--stc-tile: #f2f2f0;
	--stc-line: #e2e2e2;
	--stc-amber: #d7a519;
	--stc-radius: 2px;
}

/* ---------- Product grid (shop, categories, brands, related) ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: var(--stc-ink);
	text-decoration: none;
}
.woocommerce ul.products li.product .et_shop_image,
.woocommerce ul.products li.product a > img:first-child {
	position: relative;
	display: block;
	margin: 0 0 14px !important;
	background: var(--stc-tile);
	border-bottom: 3px solid transparent;
	transition: border-color .2s ease;
}
.woocommerce ul.products li.product .et_shop_image img,
.woocommerce ul.products li.product a > img:first-child {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 12%;
	margin: 0 !important;
	box-sizing: border-box;
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}
.woocommerce ul.products li.product .et_overlay { display: none !important; }
.woocommerce ul.products li.product a:hover .et_shop_image,
.woocommerce ul.products li.product a:focus-visible .et_shop_image { border-bottom-color: var(--stc-green); }
.woocommerce ul.products li.product a:hover .et_shop_image img { transform: scale(1.04); }
.woocommerce ul.products li.product a:focus-visible { outline: 2px solid var(--stc-green); outline-offset: 4px; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--stc-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--stc-green) !important; }
.woocommerce ul.products li.product .price {
	margin: auto 0 0 !important;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
	font-size: 18px !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--stc-ink) !important;
}
.woocommerce ul.products li.product .price .amount { color: var(--stc-ink) !important; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount {
	margin-right: 6px !important;
	font-size: 14px;
	font-weight: 400;
	color: var(--stc-muted) !important;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price ins .amount { color: #b3261e !important; }
.woocommerce ul.products li.product .star-rating { margin: 0 0 8px !important; font-size: 12px; color: var(--stc-amber); }

/* Sale badge: safety-yellow tag, same on cards and the product gallery */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 12px !important;
	border-radius: 0 !important;
	background: var(--stc-amber) !important;
	color: var(--stc-ink) !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* Add-to-cart buttons in loops (if a module shows them) */
.woocommerce ul.products li.product .button {
	margin-top: 12px !important;
	padding: 10px 14px !important;
	border: 2px solid var(--stc-green) !important;
	border-radius: var(--stc-radius) !important;
	background: #fff !important;
	color: var(--stc-green) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center;
}
.woocommerce ul.products li.product .button:hover { background: var(--stc-green) !important; color: #fff !important; }
.woocommerce ul.products li.product .button::after { display: none !important; }

/* ---------- Toolbar: result count + sorting ---------- */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	float: left;
	margin: 0 0 28px !important;
	padding: 0 !important;
	line-height: 48px;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--stc-muted) !important;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	float: right;
	margin: 0 0 28px !important;
}
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce-page .woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	appearance: none;
	min-width: 260px;
	height: 48px;
	padding: 0 44px 0 16px !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: var(--stc-radius) !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23006241' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center !important;
	color: var(--stc-ink) !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px !important;
	font-weight: 400 !important;
	cursor: pointer;
}
.woocommerce .woocommerce-ordering select.orderby:hover { border-color: var(--stc-ink) !important; }
.woocommerce .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--stc-green);
	outline-offset: 1px;
	border-color: var(--stc-green) !important;
}
.woocommerce .woocommerce-ordering + ul.products,
.woocommerce .woocommerce-result-count + .woocommerce-ordering + ul.products { clear: both; }

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination {
	clear: both;
	margin: 56px 0 0;
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers::before,
.woocommerce nav.woocommerce-pagination ul.page-numbers::after { display: none; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px !important;
	box-sizing: border-box;
	border: 1px solid #c9c9c9;
	border-radius: var(--stc-radius);
	background: #fff;
	color: var(--stc-ink);
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	border-color: var(--stc-green);
	background: #fff;
	color: var(--stc-green);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible { outline: 2px solid var(--stc-green); outline-offset: 2px; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
	border-color: var(--stc-green);
	background: var(--stc-green);
	color: #fff;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
	min-width: 24px;
	padding: 0 !important;
	border-color: transparent;
	background: none;
	color: var(--stc-muted);
}

/* ---------- Single product ---------- */
/* Gallery: same grey tile as the cards, thumbnails in a row underneath */
.single-product .woocommerce-product-gallery { position: relative; }
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child,
.single-product .woocommerce-product-gallery:not(.flexslider-ready) .woocommerce-product-gallery__wrapper {
	background: var(--stc-tile);
}
.single-product .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
}
.single-product .woocommerce-product-gallery__trigger {
	top: 12px !important;
	right: 12px !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--stc-radius) !important;
	background: #fff !important;
	box-shadow: 0 0 0 1px var(--stc-line);
}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--stc-tile);
	border-bottom: 3px solid transparent;
	cursor: pointer;
}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 10%;
	box-sizing: border-box;
	mix-blend-mode: multiply;
	opacity: .7;
	transition: opacity .2s ease;
}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li:hover img { opacity: 1; }
.single-product .woocommerce-product-gallery ol.flex-control-thumbs li:has(img.flex-active) { border-bottom-color: var(--stc-green); }

/* Summary column */
.single-product .et_pb_wc_title h1 { padding-bottom: 12px; line-height: 1.25 !important; }
.single-product .et_pb_wc_price .price {
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px !important;
}
.single-product .et_pb_wc_price .price del { color: var(--stc-muted) !important; font-size: .6em; font-weight: 400; }
.single-product .et_pb_wc_price .price ins { text-decoration: none; }
.single-product .et_pb_wc_description { margin-bottom: 24px !important; }

.single-product p.stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px !important;
	font-size: 15px !important;
	font-weight: 600;
}
.single-product p.stock::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
}
.single-product p.stock.in-stock { color: #007d50 !important; }
.single-product p.stock.out-of-stock { color: #b3261e !important; }
.single-product p.stock.available-on-backorder { color: #8a6a0f !important; }

/* Variations: one labelled select per row */
.single-product form.cart table.variations {
	width: 100%;
	margin: 0 0 16px !important;
	border: 0 !important;
}
.single-product form.cart table.variations tr {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.single-product form.cart table.variations th,
.single-product form.cart table.variations td {
	display: block;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left;
	line-height: 1.4 !important;
}
.single-product form.cart table.variations th label {
	font-size: 15px;
	font-weight: 700;
	color: var(--stc-ink);
}
.single-product form.cart table.variations td select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 360px;
	height: 48px;
	margin: 0 !important;
	padding: 0 44px 0 14px !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: var(--stc-radius) !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23006241' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center !important;
	color: var(--stc-ink) !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px !important;
	font-weight: 400 !important;
}
.single-product form.cart table.variations td select:focus-visible {
	outline: 2px solid var(--stc-green);
	outline-offset: 1px;
	border-color: var(--stc-green) !important;
}
.single-product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	color: var(--stc-green);
	font-size: 14px;
	text-decoration: underline;
}
.single-product .single_variation_wrap .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	color: var(--stc-green);
}

/* Quantity + add to cart on one line */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
.single-product form.cart::before,
.single-product form.cart::after { display: none; }
.single-product form.cart .quantity {
	float: none !important;
	margin: 0 !important;
}
.single-product form.cart .quantity input.qty {
	width: 84px;
	height: 52px;
	padding: 0 8px !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: var(--stc-radius) !important;
	background: #fff !important;
	color: var(--stc-ink) !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 17px !important;
	font-weight: 700 !important;
	text-align: center;
}
.single-product form.cart .quantity input.qty:focus-visible { outline: 2px solid var(--stc-green); outline-offset: 1px; }
body #page-container .single-product form.cart .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	max-width: 360px;
	height: 52px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 2px solid var(--stc-green) !important;
	border-radius: var(--stc-radius) !important;
	background: var(--stc-green) !important;
	color: #fff !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}
body #page-container .single-product form.cart .single_add_to_cart_button:hover {
	padding: 0 24px !important;
	border-color: var(--stc-green-dark) !important;
	background: var(--stc-green-dark) !important;
}
body #page-container .single-product form.cart .single_add_to_cart_button::after { display: none !important; }
body #page-container .single-product form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid var(--stc-ink); outline-offset: 2px; }
.single-product form.cart .single_add_to_cart_button.disabled { opacity: .45 !important; }

/* Meta: SKU, category, brand as a small spec list */
.single-product .product_meta {
	display: grid;
	gap: 6px;
	margin-top: 28px;
	padding-top: 20px !important;
	border-top: 1px solid var(--stc-line) !important;
	font-size: 14px !important;
	color: var(--stc-muted) !important;
}
.single-product .product_meta > span { display: block; }
.single-product .product_meta > span::after { content: none !important; }
.single-product .product_meta .sku,
.single-product .product_meta a { color: var(--stc-ink) !important; font-weight: 600; }
.single-product .product_meta a:hover { color: var(--stc-green) !important; }

/* Tabs: underline style instead of boxed */
.single-product .et_pb_wc_tabs.et_pb_tabs {
	border: 0 !important;
	margin-top: 24px;
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none !important;
	border-bottom: 1px solid var(--stc-line);
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls::after { display: none; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li {
	float: none;
	list-style: none;
	margin: 0 0 -1px !important;
	border: 0 !important;
	background: none !important;
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li a {
	display: block;
	text-decoration: none;
	padding: 14px 0 !important;
	border-bottom: 3px solid transparent;
	color: var(--stc-muted) !important;
	font-size: 16px;
	font-weight: 700;
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li a:hover { color: var(--stc-ink) !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active { background: none !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a {
	border-bottom-color: var(--stc-green);
	color: var(--stc-ink) !important;
}
.single-product .et_pb_wc_tabs .et_pb_all_tabs { padding: 0; }
.single-product .et_pb_wc_tabs .et_pb_all_tabs .et_pb_tab {
	max-width: 820px;
	padding: 28px 0 0 !important;
	font-size: 16px;
	line-height: 1.7;
}
.single-product .et_pb_wc_tabs .et_pb_tab h2 { display: none; }
.single-product .et_pb_wc_tabs table.shop_attributes {
	width: 100%;
	max-width: 640px;
	border: 0 !important;
	border-collapse: collapse;
}
.single-product .et_pb_wc_tabs table.shop_attributes th,
.single-product .et_pb_wc_tabs table.shop_attributes td {
	padding: 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--stc-line) !important;
	background: none !important;
	font-style: normal;
	text-align: left;
}
.single-product .et_pb_wc_tabs table.shop_attributes th { width: 40%; font-weight: 600; color: var(--stc-ink); }

/* Related products: section title with a short green rule */
.woocommerce .related.products,
.woocommerce .upsells.products { margin-top: 24px; }
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	position: relative;
	margin: 0 0 32px !important;
	padding: 0 0 14px !important;
	border-bottom: 1px solid var(--stc-line);
	font-family: 'Noto Sans', sans-serif;
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--stc-ink) !important;
}
.woocommerce .related.products > h2::after,
.woocommerce .upsells.products > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 56px;
	height: 3px;
	background: var(--stc-green);
}

/* ---------- Divi accent fallbacks (Divi's default accent is blue #2ea3f2) ---------- */
body #page-container .single-product .et_pb_wc_title h1 { font-weight: 700 !important; }
body #page-container .et_pb_wc_price .price,
body #page-container .et_pb_wc_price .price .amount,
body #page-container .summary .price,
body #page-container .summary .price .amount {
	color: var(--stc-green) !important;
	font-weight: 700 !important;
}
body #page-container .et_pb_wc_price .price del,
body #page-container .et_pb_wc_price .price del .amount { color: var(--stc-muted) !important; font-weight: 400 !important; }
body #page-container .et_pb_wc_tabs .et_pb_tabs_controls li a,
body #page-container .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a { color: var(--stc-ink) !important; }
body #page-container .et_pb_wc_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active) a { color: var(--stc-muted) !important; }

/* Reviews */
.woocommerce .star-rating span::before,
.woocommerce p.stars a,
.woocommerce p.stars a::before { color: var(--stc-amber) !important; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--stc-line) !important; border-radius: var(--stc-radius) !important; }
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
	width: 100%;
	padding: 12px 14px !important;
	border: 1px solid #c9c9c9 !important;
	border-radius: var(--stc-radius) !important;
	background: #fff !important;
	color: var(--stc-ink) !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 15px !important;
}
.woocommerce #review_form #respond textarea:focus-visible,
.woocommerce #review_form #respond input:focus-visible { outline: 2px solid var(--stc-green); outline-offset: 1px; border-color: var(--stc-green) !important; }
body #page-container #review_form #respond .form-submit input#submit,
body #page-container #review_form #respond .form-submit .submit {
	height: 52px;
	padding: 0 32px !important;
	border: 2px solid var(--stc-green) !important;
	border-radius: var(--stc-radius) !important;
	background: var(--stc-green) !important;
	color: #fff !important;
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
}
body #page-container #review_form #respond .form-submit input#submit:hover {
	border-color: var(--stc-green-dark) !important;
	background: var(--stc-green-dark) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.woocommerce ul.products,
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
	.woocommerce ul.products li.product .price { font-size: 16px !important; }
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering { float: none; width: 100%; }
	.woocommerce .woocommerce-result-count { margin: 0 0 8px !important; line-height: 1.4; }
	.woocommerce .woocommerce-ordering select.orderby { width: 100%; min-width: 0; }
	.woocommerce nav.woocommerce-pagination { margin-top: 40px; }
	.single-product .woocommerce-product-gallery ol.flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.single-product form.cart .single_add_to_cart_button { max-width: none; }
	.single-product .et_pb_wc_tabs .et_pb_tabs_controls { gap: 0 20px; }
	.woocommerce .related.products > h2 { font-size: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .et_shop_image img,
	.woocommerce ul.products li.product .et_shop_image { transition: none; }
	.woocommerce ul.products li.product a:hover .et_shop_image img { transform: none; }
}