/**
 * Visual refresh: sober neutral base, sports blue used only where it earns
 * attention (primary actions, the active filter, small icons).
 *
 * Loaded after the theme stylesheet, so it overrides the original purple
 * palette without editing the compiled theme CSS.
 */

:root {
	/* Accent */
	--sfs-blue: #0b5fd9;
	--sfs-blue-dark: #0847a8;
	--sfs-blue-soft: #eef4fe;

	/* Neutrals */
	--sfs-ink: #111418;
	--sfs-body: #3d444d;
	--sfs-muted: #6b7280;
	--sfs-line: #e5e7eb;
	--sfs-line-soft: #f1f2f4;
	--sfs-bg-soft: #fafafa;

	/* Keep old variable names working */
	--sfs-plum: var(--sfs-blue);
	--sfs-plum-dark: var(--sfs-blue-dark);
}

body {
	color: var(--sfs-body);
	background: #fff;
}

/* ------------------------------------------------------------------ header */

/* The announcement band was a solid purple block; a hairline rule is quieter. */
.hello-bar,
.hello-bar.alert,
.hello-bar.alert-primary {
	background: var(--sfs-ink) !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 12px;
	letter-spacing: 0.2px;
	padding: 8px 16px !important;
}

.hello-bar a {
	color: #fff !important;
	text-decoration: underline;
}

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--sfs-line);
}

.header-nav,
.main-navigation,
.site-header .nav-wrapper {
	background: #fff !important;
	border-top: 1px solid var(--sfs-line-soft);
}

.main-navigation a,
.header-nav a {
	color: var(--sfs-ink) !important;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.main-navigation a:hover,
.header-nav a:hover {
	color: var(--sfs-blue) !important;
}

/* ------------------------------------------------------------------- links */

a {
	color: var(--sfs-ink);
	text-decoration: none;
}

a:hover {
	color: var(--sfs-blue);
}

.entry-content a:not(.button):not(.sfs-btn) {
	color: var(--sfs-blue);
}

/* ----------------------------------------------------------------- buttons */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.wc-block-components-button {
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--sfs-blue) !important;
	color: #fff !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px;
	transition: background 0.15s ease;
}

.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover,
.wc-block-components-button:hover {
	background: var(--sfs-blue-dark) !important;
	color: #fff !important;
}

/* Secondary actions stay quiet. */
.woocommerce .button.alt.secondary,
.button--ghost {
	background: #fff !important;
	border: 1px solid var(--sfs-line) !important;
	color: var(--sfs-ink) !important;
}

/* --------------------------------------------------------------- catalogue */

.icc-chip {
	border-color: var(--sfs-line);
	color: var(--sfs-ink);
}

.icc-chip:hover {
	border-color: var(--sfs-blue);
	color: var(--sfs-blue);
}

.icc-chip.is-current {
	border-color: var(--sfs-ink);
	background: var(--sfs-ink);
	color: #fff;
}

.woocommerce ul.products li.product > div:first-child,
.woocommerce ul.products li.product #product {
	border-color: var(--sfs-line) !important;
	box-shadow: none !important;
}

.woocommerce ul.products li.product:hover > div:first-child {
	border-color: #d4d8dd !important;
	box-shadow: 0 6px 18px rgba(17, 20, 24, 0.07) !important;
	transform: none !important;
}

.woocommerce ul.products li.product .price {
	color: var(--sfs-ink);
	font-weight: 700;
}

.woocommerce ul.products li.product .product-loop-thumbnail {
	background: #f7f8f9;
}

/* Sale prices are the one place red earns its keep. */
.woocommerce ul.products li.product .price del {
	color: var(--sfs-muted);
	font-weight: 400;
	font-size: 0.8em;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------- sidebar */

.site-content .widget-title {
	color: var(--sfs-ink);
	font-size: 12px;
	letter-spacing: 0.8px;
}

.site-content .widget ul li a {
	color: var(--sfs-body);
	font-size: 14px;
}

.site-content .widget ul li a:hover {
	color: var(--sfs-blue);
}

/* Price slider */
.ui-slider .ui-slider-range,
.ui-slider-range.ui-corner-all,
.woocommerce .ui-slider .ui-slider-range {
	background: var(--sfs-blue) !important;
}

.ui-slider .ui-slider-handle,
.ui-slider-handle.ui-corner-all {
	border: 2px solid var(--sfs-blue) !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(17, 20, 24, 0.2) !important;
}

.ui-slider {
	background: var(--sfs-line) !important;
}

/* ------------------------------------------------------------ trust strip */

.icc-trust-strip {
	border-bottom: 1px solid var(--sfs-line);
	background: #fff;
}

.icc-trust-strip__inner {
	padding-top: 12px;
	padding-bottom: 12px;
}

.icc-trust-point svg {
	color: var(--sfs-blue);
}

.icc-trust-point strong {
	font-size: 12.5px;
	font-weight: 600;
}

.icc-trust-point em {
	font-size: 11.5px;
}

/* ------------------------------------------------------------- pre-footer */

.icc-prefooter {
	border-top: 1px solid var(--sfs-line);
	background: var(--sfs-bg-soft);
}

.icc-prefooter a {
	color: var(--sfs-blue);
}

.icc-paymethods span {
	border-color: var(--sfs-line);
	color: var(--sfs-body);
}

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

.woocommerce .shop-topbar,
.woocommerce-page .shop-topbar {
	border-color: var(--sfs-line);
}

.woocommerce .woocommerce-ordering select {
	border-color: var(--sfs-line);
	color: var(--sfs-ink);
}

/* ------------------------------------------------------- cart & checkout */

.icc-trust-badge svg,
.icc-usp svg {
	color: var(--sfs-blue);
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	color: var(--sfs-ink);
}

/* Badges on product images: neutral, except a real discount. */
.product-labels .onsale,
.woocommerce span.onsale {
	border-radius: 6px !important;
	background: var(--sfs-ink) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.4px;
	padding: 5px 10px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.2 !important;
}

/* ----------------------------------------------------------------- footer */

.site-footer {
	border-top: 1px solid var(--sfs-line);
	background: #fff;
}

.site-info {
	color: var(--sfs-muted);
	font-size: 13px;
}

/* --------------------------------------------------------------- headings */

h1, h2, h3, h4 {
	color: var(--sfs-ink);
	letter-spacing: -0.2px;
}

.page-header .entry-title,
.woocommerce-products-header__title {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
}

/* ------------------------------------------------------------- pagination */

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers {
	min-width: 38px;
	padding: 9px 12px !important;
	border: 1px solid var(--sfs-line) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--sfs-ink) !important;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.page-numbers:hover {
	border-color: var(--sfs-blue) !important;
	color: var(--sfs-blue) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers.current,
span.page-numbers.current {
	border-color: var(--sfs-ink) !important;
	background: var(--sfs-ink) !important;
	color: #fff !important;
}

/* Small inline buttons the theme colours directly. */
a.btn-sm,
.btn-sm {
	border-radius: 8px !important;
	background: var(--sfs-blue) !important;
	color: #fff !important;
}

a.btn-sm:hover,
.btn-sm:hover {
	background: var(--sfs-blue-dark) !important;
}

/* -------------------------------------------------------------- search box */

.icc-search {
	position: relative;
	width: 100%;
	max-width: 520px;
}

.icc-search__form {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 6px 0 12px;
	border: 1px solid var(--sfs-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.icc-search__form:focus-within {
	border-color: var(--sfs-blue);
	box-shadow: 0 0 0 3px rgba(11, 95, 217, 0.12);
}

.icc-search__icon {
	flex: none;
	color: var(--sfs-muted);
}

.icc-search__input,
.icc-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 40px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sfs-ink);
	font-size: 14px;
}

.icc-search__input:focus {
	outline: none;
}

.icc-search__input::placeholder {
	color: #9aa1ab;
}

.icc-search__btn {
	flex: none;
	height: 32px;
	padding: 0 16px !important;
	border-radius: 7px !important;
	font-size: 13px !important;
}

/* --- suggestions --- */

.icc-search__results {
	position: absolute;
	z-index: 120;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 420px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--sfs-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(17, 20, 24, 0.12);
}

.icc-search__results[hidden] {
	display: none;
}

.icc-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	color: var(--sfs-ink) !important;
	text-decoration: none;
}

.icc-search__item:hover,
.icc-search__item.is-active {
	background: #f5f7fa;
}

.icc-search__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: #f7f8f9;
	object-fit: contain;
}

.icc-search__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.icc-search__brand {
	color: var(--sfs-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.icc-search__title {
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icc-search__sub {
	color: var(--sfs-muted);
	font-size: 12px;
	font-weight: 600;
}

.icc-search__empty {
	padding: 16px 12px;
	color: var(--sfs-muted);
	font-size: 13px;
	text-align: center;
}

.icc-search__all {
	display: block;
	margin-top: 4px;
	padding: 11px;
	border-top: 1px solid var(--sfs-line-soft);
	color: var(--sfs-blue) !important;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 767px) {
	.icc-search {
		max-width: none;
	}

	.icc-search__form {
		height: 40px;
	}

	.icc-search__btn {
		padding: 0 12px !important;
		font-size: 12px !important;
	}

	.icc-search__results {
		max-height: 60vh;
	}
}

/* ------------------------------------------------------------- grid width */

/* Four products per row on desktop: bigger images, less crowding than the
   five the theme shipped. The theme's rules are !important, and its
   flex-basis wins over width in a flex row, so both are set here. */
@media (min-width: 1025px) {
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		flex: 0 0 25% !important;
		width: 25% !important;
		max-width: 25% !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		flex: 0 0 33.333% !important;
		width: 33.333% !important;
		max-width: 33.333% !important;
	}
}

/* Any leftover breadcrumb markup stays hidden. */
.woo-breadcrumb-wrap,
.woocommerce-breadcrumb {
	display: none !important;
}

/* --------------------------------------------------- image plate & titles */

/* Product photography is shot on white; a grey plate only made it look dingy. */
.woocommerce ul.products li.product .product-loop-thumbnail,
.icc-tile__media,
.icc-search__thumb {
	background: #fff !important;
}

.woocommerce ul.products li.product .product-loop-thumbnail {
	border-bottom: 1px solid var(--sfs-line-soft);
}

/* Show the whole product name. Cards in a row stretch to the tallest one, so
   a long title no longer gets cut off mid-word. */
.woocommerce ul.products li.product {
	display: flex !important;
}

.woocommerce ul.products li.product > div:first-child,
.woocommerce ul.products li.product #product {
	flex: 1 1 auto;
	height: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	display: block !important;
	-webkit-line-clamp: none !important;
	overflow: visible !important;
	min-height: 0 !important;
	text-overflow: clip !important;
	overflow-wrap: break-word;
}

/* The name should be what pulls the eye after the image. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h3 a {
	color: var(--sfs-ink);
}

/* Making the list item a flex container let the card ignore the item's
   padding and spill past the viewport on the last column. */
.woocommerce ul.products li.product {
	box-sizing: border-box !important;
	overflow: hidden;
}

.woocommerce ul.products li.product > div:first-child,
.woocommerce ul.products li.product #product {
	min-width: 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* ===================================================================
   Product page
   =================================================================== */

.single-product div.product {
	margin-top: 8px;
}

/* Gallery left, a slightly narrower buying column right. */
.single-product div.product .woocommerce-product-gallery {
	padding: 16px;
	border: 1px solid var(--sfs-line);
	border-radius: 12px;
	background: #fff;
}

.single-product div.product .summary {
	padding-left: 8px;
}

.icc-product-brand {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--sfs-muted) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.icc-product-brand:hover {
	color: var(--sfs-blue) !important;
}

.single-product .product_title {
	margin: 0 0 10px !important;
	font-size: clamp(22px, 2.4vw, 30px) !important;
	font-weight: 700;
	line-height: 1.22;
}

.single-product .product_meta {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sfs-line);
	color: var(--sfs-muted);
	font-size: 12px;
}

.single-product .summary .price {
	margin: 0 0 18px !important;
	color: var(--sfs-ink) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
}

.single-product .summary .price del {
	color: var(--sfs-muted);
	font-size: 0.7em;
	font-weight: 400;
}

/* --- variation picker --- */

.single-product .variations {
	margin-bottom: 18px;
	border-collapse: separate;
	border-spacing: 0 10px;
}

.single-product .variations th.label,
.single-product .variations td.label {
	padding-bottom: 4px;
	color: var(--sfs-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.single-product .variations td.value {
	padding-bottom: 6px;
}

.single-product .reset_variations {
	font-size: 12px;
	color: var(--sfs-muted) !important;
}

/* --- buy row --- */

.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px !important;
}

.single-product form.cart .quantity input.qty {
	height: 48px;
	width: 74px;
	padding: 0 8px;
	border: 1px solid var(--sfs-line);
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
}

.single-product .single_add_to_cart_button {
	flex: 1 1 260px;
	max-width: 340px;
	height: 48px;
	font-size: 15px !important;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

/* --- reassurance list --- */

.icc-product-assurances {
	margin: 0 0 20px !important;
	padding: 16px 18px !important;
	border: 1px solid var(--sfs-line);
	border-radius: 10px;
	background: var(--sfs-bg-soft);
	list-style: none !important;
}

.icc-product-assurances li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--sfs-body);
	font-size: 13px;
	line-height: 1.45;
}

.icc-product-assurances li:last-child {
	margin-bottom: 0;
}

.icc-product-assurances svg {
	flex: none;
	margin-top: 1px;
	color: var(--sfs-blue);
}

.icc-product-assurances strong {
	color: var(--sfs-ink);
	font-weight: 600;
}

/* --- tabs & related --- */

.woocommerce-tabs ul.tabs {
	margin-bottom: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--sfs-line) !important;
}

.woocommerce-tabs ul.tabs::before {
	display: none !important;
}

.woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 2px !important;
	margin-right: 24px;
	border-bottom: 2px solid transparent;
	color: var(--sfs-muted) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--sfs-ink);
	color: var(--sfs-ink) !important;
}

.woocommerce-tabs .panel {
	padding-top: 20px;
	color: var(--sfs-body);
	font-size: 14.5px;
	line-height: 1.65;
}

.related.products > h2,
.up-sells > h2 {
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sfs-line);
	font-size: 18px;
	font-weight: 700;
}

@media (max-width: 767px) {
	.single-product div.product .summary {
		padding-left: 0;
		margin-top: 18px;
	}

	.single-product .single_add_to_cart_button {
		flex: 1 1 100%;
		max-width: none;
	}

	.icc-product-assurances {
		padding: 14px !important;
	}
}

/* The theme scopes these under .product-top .product-summary, which outranks
   a plain .single-product selector — match that depth rather than pile on
   !important. */
.single-product .product-top .product-summary .product_title,
.product-top .product-summary .product_title {
	font-size: clamp(22px, 2.4vw, 30px) !important;
	font-weight: 700;
	line-height: 1.22;
	margin: 0 0 10px !important;
}

.single-product .product-top .product-summary p.price,
.product-top .product-summary p.price,
.product-top .product-summary .price {
	margin: 0 0 18px !important;
	color: var(--sfs-ink) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
}

.product-top .product-summary .price del {
	color: var(--sfs-muted) !important;
	font-size: 0.7em !important;
	font-weight: 400 !important;
}

.product-top .product-summary .price ins {
	text-decoration: none;
}

/* The theme hides the native quantity input with !important — a rule written
   for the side cart's own stepper, which was removed with that plugin. The
   result was no way to order two of anything. Show the real field and keep
   the orphaned stepper buttons hidden. */
.single-product .woocommerce .quantity .qty,
.woocommerce .single-product .quantity .qty,
.single-product .quantity input.input-text {
	display: inline-block !important;
	width: 76px !important;
	height: 48px !important;
	padding: 0 6px !important;
	border: 1px solid var(--sfs-line) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--sfs-ink);
	font-size: 15px;
	text-align: center;
}

.single-product .quantity .qty-btn,
.single-product .quantity .qty-display {
	display: none !important;
}

.single-product .quantity {
	flex: 0 0 auto !important;
	width: auto !important;
}