/**
 * Storefront design system.
 *
 * Implements the agreed catalogue design on the theme's existing markup:
 * Plus Jakarta Sans for text, Space Grotesk for display, a single blue accent
 * on a slate-neutral base, and cards that read as one set.
 *
 * Loaded after refresh.css, so it wins on anything the two both touch.
 */

:root {
	/* Accent */
	--sfs-brand: #0066ff;
	--sfs-brand-hover: #0052cc;
	--sfs-brand-light: #eff6ff;
	--sfs-brand-dark: #003fa4;

	/* Slate scale */
	--sfs-950: #0b0f19;
	--sfs-900: #0f172a;
	--sfs-800: #1e293b;
	--sfs-700: #334155;
	--sfs-600: #475569;
	--sfs-500: #64748b;
	--sfs-400: #94a3b8;
	--sfs-300: #cbd5e1;
	--sfs-200: #e2e8f0;
	--sfs-100: #f1f5f9;
	--sfs-50: #f8fafc;

	/* Map the older variables onto the new palette so one change moves both */
	--sfs-blue: var(--sfs-brand);
	--sfs-blue-dark: var(--sfs-brand-hover);
	--sfs-ink: var(--sfs-900);
	--sfs-body: var(--sfs-600);
	--sfs-muted: var(--sfs-500);
	--sfs-line: var(--sfs-200);
	--sfs-line-soft: var(--sfs-100);
	--sfs-bg-soft: var(--sfs-50);

	--sfs-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sfs-display: "Space Grotesk", var(--sfs-font);
	--sfs-radius: 12px;
	--sfs-shadow: 0 1px 2px rgba(11, 15, 25, 0.04);
}

body,
body.woocommerce,
.site-content {
	background: var(--sfs-50);
	color: var(--sfs-700);
	font-family: var(--sfs-font);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.font-display {
	font-family: var(--sfs-display);
	color: var(--sfs-900);
	letter-spacing: -0.01em;
}

/* ===================================================================
   Utility bar — the dark strip above the header
   =================================================================== */

.hello-bar,
.hello-bar.alert,
.hello-bar.alert-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 7px 24px !important;
	background: var(--sfs-900) !important;
	color: var(--sfs-300) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-align: center;
}

.sfs-utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.sfs-utility__left,
.sfs-utility__right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sfs-utility__promo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--sfs-200);
}

.sfs-utility__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #00c2ff;
	animation: sfs-pulse 2.4s ease-in-out infinite;
}

@keyframes sfs-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.sfs-utility__sep {
	color: var(--sfs-700);
}

.sfs-utility a {
	color: var(--sfs-400) !important;
	text-decoration: none;
}

.sfs-utility a:hover {
	color: #fff !important;
}

.sfs-utility__currency {
	color: #fff;
	font-weight: 600;
}

@media (max-width: 860px) {
	.sfs-utility__muted {
		display: none;
	}
}

/* ===================================================================
   Header
   =================================================================== */

.site-header {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sfs-200);
}

.site-header .header-top {
	padding: 10px 0;
}

.site-header .navbar {
	display: flex;
	align-items: center;
	gap: 26px;
}

.logo-brand img {
	height: 38px;
	width: auto;
	object-fit: contain;
}

/* Search: quiet until focused */
.header-search-bar {
	flex: 1;
	max-width: 620px;
}

.icc-search__form {
	height: 42px;
	border-color: transparent;
	border-radius: 10px;
	background: var(--sfs-100);
}

.icc-search__form:focus-within {
	border-color: var(--sfs-brand);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.14);
}

.icc-search__input::placeholder {
	color: var(--sfs-400);
}

.icc-search__btn {
	height: 30px;
	padding: 0 14px !important;
	border-radius: 8px !important;
	background: var(--sfs-brand) !important;
	font-size: 12px !important;
}

/* Account, wishlist, cart */
.header-btns {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-btns a,
.header-btns .link-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sfs-600) !important;
	font-size: 14px;
	font-weight: 500;
}

.header-btns a:hover {
	color: var(--sfs-900) !important;
}

.header-btns svg {
	width: 22px;
	height: 22px;
}

.header-btns .btn-cart {
	position: relative;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--sfs-100);
	color: var(--sfs-900) !important;
	font-weight: 600;
}

.header-btns .btn-cart:hover {
	background: var(--sfs-200);
}

.header-btns .btn-cart svg {
	color: var(--sfs-brand);
}

.header-btns .cart-count {
	position: absolute;
	top: 2px;
	left: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--sfs-brand);
	color: #fff;
	font-family: var(--sfs-display);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* Category navigation */
.header-menu {
	border-top: 1px solid var(--sfs-100);
	background: #fff;
}

.header-menu .menu > li > a,
.main-navigation a {
	padding: 12px 0 !important;
	color: var(--sfs-600) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-transform: none !important;
}

.header-menu .menu > li {
	margin-right: 26px;
}

.header-menu .menu > li > a:hover,
.header-menu .menu > li.current-menu-item > a {
	color: var(--sfs-900) !important;
}

/* ===================================================================
   Catalogue header (hero)
   =================================================================== */

.sfs-catalog-hero {
	padding: 44px 0 30px;
	border-bottom: 1px solid var(--sfs-200);
	background: #fff;
}

.sfs-catalog-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.sfs-catalog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--sfs-brand);
	font-family: var(--sfs-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sfs-catalog-hero__eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--sfs-brand);
}

.sfs-catalog-hero h1 {
	margin: 0;
	font-family: var(--sfs-display);
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.sfs-catalog-hero h1 em {
	color: var(--sfs-brand);
	font-style: normal;
}

/* A category page is a list of products, not a landing page. The shop page
   keeps the full-height introduction; here the name is enough, so the block
   gives back the vertical space the products want. */
.sfs-catalog-hero--term {
	padding: 22px 0 18px;
}

.sfs-catalog-hero--term h1 {
	font-size: clamp(22px, 2.2vw, 30px);
}

.sfs-catalog-hero--term .sfs-catalog-hero__eyebrow {
	margin-bottom: 6px;
}

.sfs-catalog-hero--term p {
	margin-top: 8px;
	font-size: 14px;
}

.sfs-catalog-hero p {
	max-width: 62ch;
	margin: 12px 0 0;
	color: var(--sfs-500);
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.6;
}

.sfs-metrics {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	border: 1px solid var(--sfs-200);
	border-radius: var(--sfs-radius);
	background: var(--sfs-50);
}

.sfs-metrics__label {
	color: var(--sfs-400);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sfs-metrics__value {
	font-family: var(--sfs-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--sfs-900);
}

.sfs-metrics__value--accent {
	color: var(--sfs-brand);
}

.sfs-metrics__divider {
	width: 1px;
	height: 32px;
	background: var(--sfs-200);
}

/* ===================================================================
   Category pills
   =================================================================== */

.icc-chips {
	gap: 8px;
	margin: 22px 0 0;
}

.icc-chip {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--sfs-100);
	border-color: transparent;
	color: var(--sfs-700);
	font-size: 12px;
	font-weight: 500;
}

.icc-chip span {
	color: var(--sfs-400);
}

.icc-chip:hover {
	border-color: transparent;
	background: var(--sfs-200);
	color: var(--sfs-900);
}

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

/* ===================================================================
   Sidebar filters
   =================================================================== */

.site-content .widget-area,
.site-content #secondary {
	font-family: var(--sfs-font);
}

.site-content .sidebar-widget,
.site-content .widget {
	margin-bottom: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--sfs-100);
}

.site-content .widget-title {
	margin-bottom: 12px;
	color: var(--sfs-400);
	font-family: var(--sfs-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-content .widget ul li {
	margin-bottom: 9px;
}

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

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

.site-content .widget .count {
	color: var(--sfs-400);
	font-size: 12px;
}

/* ===================================================================
   Toolbar
   =================================================================== */

.woocommerce .shop-topbar,
.woocommerce-page .shop-topbar {
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--sfs-200);
	border-radius: 0;
	background: transparent;
}

.icc-result-count {
	color: var(--sfs-900) !important;
	font-family: var(--sfs-display);
	font-size: 15px !important;
	font-weight: 700 !important;
}

.woocommerce .woocommerce-ordering select {
	border-radius: 8px;
	border-color: var(--sfs-200);
	font-size: 12px;
	font-weight: 600;
}

/* ===================================================================
   Product cards
   =================================================================== */

.woocommerce ul.products li.product > div:first-child,
.woocommerce ul.products li.product #product {
	padding: 0 0 62px;
	border: 1px solid var(--sfs-200);
	border-radius: var(--sfs-radius);
	background: #fff;
	box-shadow: none;
	overflow: hidden;
}

.woocommerce ul.products li.product:hover > div:first-child {
	border-color: var(--sfs-300) !important;
	box-shadow: 0 8px 22px rgba(11, 15, 25, 0.08) !important;
}

.woocommerce ul.products li.product .product-loop-thumbnail {
	position: relative;
	margin: 0 0 0;
	padding: 18px;
	border-bottom: 1px solid var(--sfs-100);
	border-radius: 0;
	background: rgba(248, 250, 252, 0.7) !important;
	aspect-ratio: 1 / 1;
}

.woocommerce ul.products li.product .product-loop-thumbnail img {
	transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover .product-loop-thumbnail img {
	transform: scale(1.04);
}

/* Card text block */
.woocommerce ul.products li.product .icc-card-brand,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .icc-card-variants {
	padding-left: 16px;
	padding-right: 16px;
}

.woocommerce ul.products li.product .icc-card-brand {
	margin-top: 14px;
	color: var(--sfs-400);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--sfs-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sfs-900);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--sfs-brand);
}

.woocommerce ul.products li.product .icc-card-variants {
	color: var(--sfs-500);
	font-size: 12px;
}

.woocommerce ul.products li.product .price {
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--sfs-100);
	color: var(--sfs-brand) !important;
	font-family: var(--sfs-display);
	font-size: 18px !important;
	font-weight: 700 !important;
}

.woocommerce ul.products li.product .price del {
	margin-left: 6px;
	color: var(--sfs-400) !important;
	font-size: 12px !important;
}

.woocommerce ul.products li.product .button {
	right: 16px !important;
	bottom: 16px !important;
	left: 16px !important;
	border-radius: 8px !important;
	background: var(--sfs-900) !important;
	font-family: var(--sfs-font) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--sfs-brand) !important;
}

/* Discount badge, shown only when a product is actually on sale */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	margin: 0 !important;
	padding: 3px 8px !important;
	border-radius: 5px !important;
	background: rgba(0, 102, 255, 0.1) !important;
	color: var(--sfs-brand) !important;
	font-family: var(--sfs-display);
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ===================================================================
   Pagination
   =================================================================== */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers {
	min-width: 34px;
	padding: 7px 10px !important;
	border-radius: 8px !important;
	border-color: var(--sfs-200) !important;
	font-family: var(--sfs-display);
	font-size: 12px;
}

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

/* ===================================================================
   Trust strip and pre-footer
   =================================================================== */

.icc-trust-strip {
	border-color: var(--sfs-200);
	background: #fff;
}

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

.icc-trust-point strong {
	font-family: var(--sfs-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--sfs-900);
}

.icc-trust-point em {
	color: var(--sfs-500);
}

.icc-prefooter {
	border-top: 1px solid var(--sfs-200);
	background: #fff;
}

.icc-prefooter h3 {
	font-family: var(--sfs-display);
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* ===================================================================
   Footer
   =================================================================== */

.site-footer {
	border-top: 0;
	background: var(--sfs-950);
	color: var(--sfs-400);
}

.site-footer a {
	color: var(--sfs-400) !important;
}

.site-footer a:hover {
	color: #fff !important;
}

.site-footer .widget-title,
.site-footer h5 {
	color: #fff;
	font-family: var(--sfs-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

@media (max-width: 1024px) {
	.sfs-catalog-hero {
		padding: 30px 0 24px;
	}

	.sfs-metrics {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.hello-bar {
		font-size: 11px;
	}

	.sfs-utility__right {
		gap: 10px;
	}

	.woocommerce ul.products li.product .icc-card-brand,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h2,
	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .icc-card-variants {
		padding-left: 12px;
		padding-right: 12px;
	}

	.woocommerce ul.products li.product .button {
		right: 12px !important;
		bottom: 12px !important;
		left: 12px !important;
	}
}

/* The theme colours the loop price through a deeper selector
   (.product-loop-item #product span.price) with !important, so match it. */
.woocommerce ul.products li.product .product-loop-item #product span.price,
.product-loop-item #product span.price,
.product-loop-item #product .price,
li.product .product-loop-item .price {
	color: var(--sfs-brand) !important;
	font-family: var(--sfs-display);
	font-size: 18px !important;
	font-weight: 700 !important;
}

.product-loop-item #product .price del,
li.product .product-loop-item .price del {
	color: var(--sfs-400) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* ===================================================================
   Navigation moves into the burger at every width
   =================================================================== */

/* The horizontal category row is back, at a smaller size. The burger
   returns to its original job: phones and tablets only. */
.site-header .header-row.header-menu {
	display: block !important;
	height: auto !important;
	padding: 0 !important;
	border-top: 1px solid var(--sfs-100) !important;
	border-bottom: 0 !important;
	background: #fff;
	overflow: visible !important;
}

.site-header .header-row.header-menu > .container {
	height: auto !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.site-header .horizontal-menu-wrap,
.site-header .main-navigation.horizontal-menu {
	display: block !important;
}

.site-header .horizontal-menu .menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .horizontal-menu .menu > li {
	margin: 0 !important;
}

.site-header .horizontal-menu .menu > li > a {
	display: block;
	padding: 9px 0 !important;
	border-bottom: 2px solid transparent;
	color: var(--sfs-600) !important;
	font-family: var(--sfs-font) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	white-space: nowrap;
}

.site-header .horizontal-menu .menu > li > a:hover,
.site-header .horizontal-menu .menu > li.current-menu-item > a {
	border-bottom-color: var(--sfs-900);
	color: var(--sfs-900) !important;
}

/* Submenus stay available on hover, compact to match. */
.site-header .horizontal-menu .menu .sub-menu a {
	font-size: 13px !important;
	padding: 8px 14px !important;
}

/* Burger: phones and tablets only, as the theme originally had it. */
.site-header .header-top .toggle-nav-menu {
	display: none !important;
	margin-left: 4px;
	cursor: pointer;
}

@media (max-width: 1200px) {
	.site-header .header-row.header-menu {
		display: none !important;
	}

	.site-header .header-top .toggle-nav-menu {
		display: block !important;
	}
}

/* Off-canvas panel, restyled to match the storefront. */
.mobile-menu-wrap {
	width: 320px;
	max-width: 86vw;
	padding-top: 12px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(11, 15, 25, 0.18);
}

.mobile-menu-wrap .menu > li > a {
	padding: 13px 22px !important;
	border-bottom: 1px solid var(--sfs-100);
	color: var(--sfs-900) !important;
	font-family: var(--sfs-display);
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0;
}

.mobile-menu-wrap .menu > li > a:hover {
	color: var(--sfs-brand) !important;
	background: var(--sfs-50);
}

.mobile-menu-wrap .sub-menu a {
	padding: 10px 22px 10px 34px !important;
	color: var(--sfs-600) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.mobile-menu-wrap .mob-item-expand svg {
	width: 14px;
	height: 14px;
	color: var(--sfs-400);
}

.mobile-menu-overlay {
	background: rgba(11, 15, 25, 0.45);
}

/* Burger bars, drawn from the theme's single div. */
.site-header .header-top .toggle-nav-menu .burg,
.site-header .header-top .toggle-nav-menu .burg::before,
.site-header .header-top .toggle-nav-menu .burg::after {
	background: var(--sfs-900);
	border-radius: 2px;
}

/* ===================================================================
   Off-canvas menu: own the geometry
   The theme's panel measured 0x0 once it became the only navigation, so
   position and size it here rather than relying on the old mobile rules.
   =================================================================== */

.mobile-menu-wrap {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: auto !important;
	z-index: 10000 !important;
	width: 340px !important;
	max-width: 88vw !important;
	height: 100vh !important;
	padding: 76px 0 24px !important;
	overflow-y: auto !important;
	background: #fff !important;
	box-shadow: -18px 0 50px rgba(11, 15, 25, 0.18);
	transform: translateX(100%);
	transition: transform 0.26s ease;
	visibility: visible !important;
}

.mobile-menu-wrap.open {
	transform: translateX(0);
}

.mobile-menu-wrap .menu,
.mobile-menu-wrap ul {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mobile-menu-wrap .menu > li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.mobile-menu-wrap .menu > li > a,
.mobile-menu-wrap .sub-menu a {
	display: block !important;
	width: auto !important;
}

.mobile-menu-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	display: none;
	background: rgba(11, 15, 25, 0.45);
}

body.menu-is-open .mobile-menu-overlay {
	display: block;
}

/* ===================================================================
   Header search alignment
   =================================================================== */

.header-search-bar {
	display: flex;
	align-items: center;
}

.icc-search {
	width: 100%;
}

.icc-search__form {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	height: 44px;
	padding: 0 6px 0 14px !important;
	margin: 0 !important;
}

.icc-search__icon {
	display: block;
	flex: 0 0 auto;
	margin: 0;
}

.icc-search__input,
.icc-search input[type="search"] {
	height: 42px !important;
	line-height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 14px;
}

.icc-search__btn {
	flex: 0 0 auto;
	height: 32px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}

/* The theme centres search input text, which left the placeholder floating
   in the middle of the bar, away from the icon. */
.icc-search__input,
.icc-search input[type="search"],
.header-search-bar input[type="search"] {
	text-align: left !important;
}

/* Product photography sits on white, not a grey plate. */
.woocommerce ul.products li.product .product-loop-thumbnail,
.woocommerce ul.products li.product .product-loop-thumbnail a,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__image {
	background: #fff !important;
}

/* ===================================================================
   Every product image occupies an identical square box
   Source photos vary — skis are tall, bindings are wide — so the image is
   scaled to fit a fixed box rather than sized by its own dimensions. That
   keeps titles, prices and buttons on the same line across a row.
   =================================================================== */

.woocommerce ul.products li.product .product-loop-thumbnail {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: auto !important;
	padding: 18px !important;
	overflow: hidden;
}

.woocommerce ul.products li.product .product-loop-thumbnail a,
.woocommerce ul.products li.product .product-loop-thumbnail .woocommerce-LoopProduct-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}

.woocommerce ul.products li.product .product-loop-thumbnail img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	object-fit: contain !important;
	object-position: center !important;
	mix-blend-mode: normal !important;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product .product-loop-thumbnail {
		padding: 12px !important;
	}
}

/* ===================================================================
   Single product price: the sale price was printing on top of the
   struck-through original instead of beside it.
   =================================================================== */

.product-top .product-summary .price,
.single-product .summary .price {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap;
	gap: 10px;
	position: static !important;
	visibility: visible !important;
}

.product-top .product-summary .price del,
.single-product .summary .price del {
	position: static !important;
	top: auto !important;
	left: auto !important;
	order: 2;
	color: var(--sfs-400) !important;
	font-size: 0.55em !important;
	font-weight: 500 !important;
	text-decoration: line-through;
	opacity: 1;
}

.product-top .product-summary .price ins,
.single-product .summary .price ins {
	position: static !important;
	top: auto !important;
	left: auto !important;
	order: 1;
	background: none !important;
	color: var(--sfs-brand) !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.product-top .product-summary .price .amount,
.single-product .summary .price .amount {
	position: static !important;
}

/* ===================================================================
   Navigation panel: header, categories, subcategories
   =================================================================== */

.mobile-menu-wrap {
	padding: 0 0 24px !important;
	display: flex !important;
	flex-direction: column;
}

.sfs-panel__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--sfs-200);
	background: #fff;
}

.sfs-panel__title {
	font-family: var(--sfs-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfs-900);
}

.sfs-panel__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 1px solid var(--sfs-200) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--sfs-600) !important;
	cursor: pointer;
}

.sfs-panel__close:hover {
	border-color: var(--sfs-300) !important;
	background: var(--sfs-50) !important;
	color: var(--sfs-900) !important;
}

/* --- category list --- */

.mobile-menu-wrap .main-navigation {
	flex: 1 1 auto;
	overflow-y: auto;
}

.mobile-menu-wrap .menu > li > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--sfs-100);
	color: var(--sfs-900) !important;
	font-family: var(--sfs-display);
	font-size: 14.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0;
}

.mobile-menu-wrap .menu > li > a:hover {
	background: var(--sfs-50);
	color: var(--sfs-brand) !important;
}

.icc-nav-count {
	flex: none;
	color: var(--sfs-400);
	font-family: var(--sfs-font);
	font-size: 12px;
	font-weight: 500;
}

/* --- subcategories --- */

.mobile-menu-wrap .sub-menu {
	display: none;
	padding: 4px 0 8px !important;
	background: var(--sfs-50);
	border-bottom: 1px solid var(--sfs-100);
}

.mobile-menu-wrap li.menu-item-has-children.active > .sub-menu {
	display: block;
}

.mobile-menu-wrap .sub-menu a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 20px 10px 32px !important;
	border: 0 !important;
	color: var(--sfs-600) !important;
	font-family: var(--sfs-font) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
}

.mobile-menu-wrap .sub-menu a:hover {
	color: var(--sfs-brand) !important;
	background: transparent;
}

/* --- expand chevron the theme injects --- */

.mobile-menu-wrap .mob-item-expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border-radius: 7px;
	color: var(--sfs-400);
	transition: transform 0.2s ease, background 0.15s ease;
}

.mobile-menu-wrap .mob-item-expand:hover {
	background: var(--sfs-100);
	color: var(--sfs-900);
}

.mobile-menu-wrap .mob-item-expand svg {
	width: 13px;
	height: 13px;
	transform: rotate(90deg);
}

.mobile-menu-wrap li.active > a .mob-item-expand svg {
	transform: rotate(-90deg);
}

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

.mobile-menu-wrap .mobile-menu-btns {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding: 16px 20px 0;
	border-top: 1px solid var(--sfs-200);
}

.mobile-menu-wrap .mobile-menu-btns a {
	flex: 1;
	padding: 11px 12px !important;
	border: 1px solid var(--sfs-200);
	border-radius: 9px;
	background: #fff;
	color: var(--sfs-900) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center;
}

.mobile-menu-wrap .mobile-menu-btns a:hover {
	border-color: var(--sfs-brand);
	color: var(--sfs-brand) !important;
}

/* ===================================================================
   Brand mark
   =================================================================== */

.navbar-brand.logo {
	display: inline-flex;
	align-items: center;
}

.sfs-logo {
	display: block;
	height: 44px;
	width: auto;
}

/* The theme's old raster logo is replaced by the inline mark. */
.logo-brand .navbar-brand.logo img {
	display: none !important;
}

@media (max-width: 767px) {
	.sfs-logo {
		height: 34px;
	}
}

/* ===================================================================
   Page gutter and header alignment
   =================================================================== */

/* The theme's container sits 15px from the window edge, which reads as no
   margin at all on a wide screen: the first product and the headline are
   almost touching the glass. The gutter now grows with the viewport, from
   16px on a phone to 48px on a desktop. */
.container {
	padding-left: clamp(16px, 3vw, 48px) !important;
	padding-right: clamp(16px, 3vw, 48px) !important;
}

/* Account and cart belong at the far right of the header, not wherever the
   search box happens to end. */
.site-header .header-top .header-btns {
	margin-left: auto;
}

/* The category row is centred under the logo and search. */
.site-header .horizontal-menu .menu {
	justify-content: center;
}

/* The off-canvas menu is parked just past the right edge, which leaves the
   whole document scrollable sideways by its width — a stray swipe reveals a
   band of empty page. `clip` stops that without making the body a scroll
   container, which `hidden` would, and which breaks the sticky filter column. */
html,
body {
	overflow-x: clip;
}

/* The off-canvas panel is a child of the category row, so hiding that row
   outright — as the compact-menu rules above do below 1200px — leaves the
   burger with nothing to open: the panel computes 340px wide and renders at
   zero. Collapse the row instead, and hide only the inline category list. */
@media (max-width: 1200px) {
	.site-header .header-row.header-menu {
		display: block !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: visible !important;
	}

	.site-header .header-row.header-menu > .container {
		padding: 0 !important;
	}

	.site-header .horizontal-menu-wrap {
		display: none !important;
	}
}

/* ===================================================================
   White page, and a filter panel you can actually use
   =================================================================== */

/* Every panel is white now. Separation comes from hairlines and spacing
   rather than from filling shapes with grey, which was making the page read
   as a stack of boxes rather than as a catalogue. */
body,
body.woocommerce,
.site-content,
.sfs-metrics,
.icc-chip,
.mobile-menu-wrap .sub-menu {
	background: #fff !important;
}

/* The product image sat on a grey tile, so a white product photo looked like
   a hole in the card. */
.woocommerce ul.products li.product .product-loop-thumbnail {
	background: #fff !important;
}

/* The search field and the cart button were grey pills. A hairline does the
   same job without the weight. */
.icc-search__form {
	border-color: var(--sfs-200);
	background: #fff;
}

.header-btns .btn-cart {
	background: transparent;
}

.header-btns .btn-cart:hover {
	background: rgba(0, 102, 255, 0.07);
}

/* Hovers are a faint brand wash instead of a grey one: it reads as a state
   rather than as a different surface. */
.mobile-menu-wrap .menu > li > a:hover,
.mobile-menu-wrap .mob-item-expand:hover,
.sfs-panel__close:hover,
.icc-search__item:hover,
.icc-search__item.is-active {
	background: rgba(0, 102, 255, 0.06) !important;
}

/* -------------------------------------------------------------------
   Filters
   ------------------------------------------------------------------- */

.site-content .sidebar-inner {
	padding-right: 8px;
}

.site-content .sidebar-widget,
.site-content .widget {
	padding: 16px 0;
	border-bottom: 1px solid var(--sfs-200);
}

/* The title doubles as the open/close control, so it gets the full width and
   a pointer, and the chevron sits at the far end instead of against the text. */
.site-content .widget-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
	padding: 4px 0;
	color: var(--sfs-900);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	cursor: pointer;
}

.site-content .widget-title .widget-toggle {
	flex: none;
	margin-left: auto;
}

.site-content .widget-title .widget-toggle svg {
	width: 8px;
	height: 8px;
	fill: var(--sfs-400);
	transition: transform 0.2s ease;
}

.site-content .widget ul {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

/* Name on the left, count on the right, the whole row clickable. */
.site-content .widget ul li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	border-radius: 8px;
	line-height: 1.35;
}

.site-content .widget ul li > a {
	flex: 1;
	min-width: 0;
	padding: 7px 8px;
	border-radius: 8px;
	color: var(--sfs-700);
	font-size: 13.5px;
}

.site-content .widget ul li > a:hover {
	background: rgba(0, 102, 255, 0.06);
	color: var(--sfs-brand);
}

.site-content .widget ul li.current-cat > a,
.site-content .widget ul li.chosen > a {
	background: rgba(0, 102, 255, 0.08);
	color: var(--sfs-brand);
	font-weight: 600;
}

/* A category row holds its own link AND, when it has children, the whole
   nested list. The flex row above treats that list as another item on the
   same line, which put "Alpine Ski" beside its own sub-categories and on top
   of them. Letting the row wrap, and giving the nested list the full width,
   drops the children underneath their parent where they belong. */
.site-content .widget ul li {
	flex-wrap: wrap;
}

.site-content .widget ul li > ul {
	flex: 0 0 100%;
	width: 100%;
	margin: 2px 0 8px;
	padding-left: 12px;
	border-left: 1px solid rgba(15, 23, 42, 0.09);
}

.site-content .widget ul li > ul > li > a {
	padding: 5px 8px;
	font-size: 13px;
}

.site-content .widget .count {
	flex: none;
	padding-right: 8px;
	color: var(--sfs-400);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

/* Colour and size run to hundreds of values. Left alone the sidebar was
   metres long and the filters below it were unreachable; each list now keeps
   its own scroll. */
.site-content .widget_layered_nav ul,
.site-content .widget_product_categories ul.children {
	max-height: 268px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--sfs-300) transparent;
}

.site-content .widget_layered_nav ul::-webkit-scrollbar {
	width: 6px;
}

.site-content .widget_layered_nav ul::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--sfs-300);
}

/* Categories are the primary navigation of the page, so they read a size up
   from the attribute filters. */
.site-content .widget_product_categories ul li > a {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--sfs-900);
}

.site-content .widget_product_categories ul.children li > a {
	padding-left: 18px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--sfs-600);
}

/* Price slider: brand fill, hairline rail, no grey block. */
.site-content .price_slider {
	height: 4px;
	border-radius: 999px;
	background: var(--sfs-200) !important;
}

.site-content .price_slider .ui-slider-range {
	background: var(--sfs-brand) !important;
}

.site-content .price_slider .ui-slider-handle {
	width: 15px;
	height: 15px;
	border: 2px solid var(--sfs-brand) !important;
	border-radius: 999px;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(11, 15, 25, 0.16);
}

.site-content .price_slider_amount .button {
	padding: 7px 16px !important;
	border-radius: 8px !important;
	background: var(--sfs-900) !important;
	font-size: 12px !important;
}

.site-content .price_slider_amount .price_label {
	color: var(--sfs-600);
	font-size: 13px;
}

/* The Filters button is the theme's phone-only control, so the styling stays
   inside the same breakpoint: outline rather than a grey slab, and no display
   value at other widths or it would appear on desktop beside the sidebar. */
@media (max-width: 576px) {
	.site-content .sidebar-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		padding: 9px 16px 9px 34px;
		border: 1px solid var(--sfs-200);
		border-radius: 10px;
		background: #fff;
		box-shadow: none;
		color: var(--sfs-900);
		font-size: 13.5px;
		font-weight: 600;
	}

	.site-content .sidebar-toggle.active {
		border-color: var(--sfs-brand);
		background: rgba(0, 102, 255, 0.06);
		color: var(--sfs-brand);
	}

	.site-content .sidebar-toggle span svg {
		fill: currentColor;
	}
}

/* The search box on long filter lists. */
.site-content .icc-filter-search {
	width: 100%;
	height: 34px;
	margin: 8px 0 6px;
	padding: 0 12px;
	border: 1px solid var(--sfs-200);
	border-radius: 8px;
	background: #fff;
	color: var(--sfs-900);
	font-family: var(--sfs-font);
	font-size: 13px;
}

.site-content .icc-filter-search:focus {
	border-color: var(--sfs-brand);
	box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
	outline: none;
}

.site-content .icc-filter-empty {
	margin: 6px 0 0;
	padding: 0 8px;
	color: var(--sfs-400);
	font-size: 12.5px;
}

/* The brand line is printed even when a product has no brand, so that every
   card's title starts on the same line. */
.woocommerce ul.products li.product .icc-card-brand--empty::after {
	content: "\00a0";
}

/* ===================================================================
   Phone
   =================================================================== */

@media (max-width: 600px) {
	/* The header row was over-full: logo, three icons and the burger with a
	   26px gap between each came to more than the width of the screen, and the
	   burger hung 19px off the right edge. */
	.site-header .navbar {
		gap: 8px;
	}

	.site-header .header-btns {
		gap: 12px;
	}

	.site-header .header-top .toggle-nav-menu {
		flex: none;
		margin-left: 0;
	}

	.header-btns .btn-cart {
		padding: 7px 8px;
	}

	/* 28px pagination links are hard to hit on a 167-page catalogue. */
	.woocommerce-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
	}

	.woocommerce-pagination ul.page-numbers {
		gap: 6px;
	}
}

/* Out of stock read as a warning sign in bright yellow, which is the loudest
   thing on an otherwise sober page. It is information, not an alarm. */
.product-label.out-of-stock,
.product-labels .out-of-stock {
	background: var(--sfs-900) !important;
	color: #fff !important;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

@media (max-width: 600px) {
	/* The gallery and the summary sat flush to the screen edge while the tabs
	   below them kept the page gutter, so the product page stepped in and out
	   as you scrolled. */
	.single-product .woocommerce-product-gallery,
	.single-product .summary,
	.single-product .entry-summary {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Add to cart is the one thing this page exists for; it was 215px wide in
	   the middle of the screen. */
	.single-product form.cart:not(.variations_form),
	.single-product .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.single-product form.cart .quantity {
		flex: none;
	}

	.single-product .single_add_to_cart_button {
		flex: 1 1 160px;
		min-width: 0;
		justify-content: center;
	}
}

/* ===================================================================
   Landing page
   =================================================================== */

.icc-home-hero {
	padding: 64px 0 56px;
	border-bottom: 1px solid var(--sfs-200);
}

.icc-home-hero__eyebrow {
	margin: 0 0 14px;
	color: var(--sfs-brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.icc-home-hero h1 {
	max-width: 15ch;
	margin: 0 0 16px;
	font-family: var(--sfs-display);
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.icc-home-hero__text {
	max-width: 58ch;
	margin: 0 0 28px;
	color: var(--sfs-600);
	font-size: 17px;
	line-height: 1.6;
}

.icc-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.icc-home-btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border: 1px solid var(--sfs-200);
	border-radius: 10px;
	color: var(--sfs-900);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.icc-home-btn--primary {
	border-color: var(--sfs-brand);
	background: var(--sfs-brand);
	color: #fff;
}

.icc-home-btn:hover { border-color: var(--sfs-900); }
.icc-home-btn--primary:hover { background: #0052cc; border-color: #0052cc; color: #fff; }

.icc-home-section { padding: 52px 0; }
.icc-home-section--tint { border-top: 1px solid var(--sfs-200); border-bottom: 1px solid var(--sfs-200); }

.icc-home-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.icc-home-section__head h2 {
	margin: 0;
	font-family: var(--sfs-display);
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.01em;
}

.icc-home-section__head p { margin: 6px 0 0; color: var(--sfs-600); font-size: 14px; }

.icc-home-link { color: var(--sfs-brand); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Shop by sport */
.icc-home-sports {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}

.icc-home-sport {
	display: block;
	padding: 16px;
	border: 1px solid var(--sfs-200);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.icc-home-sport:hover { border-color: var(--sfs-brand); transform: translateY(-2px); }
.icc-home-sport__media { display: block; height: 132px; margin-bottom: 12px; }
.icc-home-sport__media img { width: 100%; height: 132px; object-fit: contain; }
.icc-home-sport__name { display: block; font-size: 15px; font-weight: 600; }
.icc-home-sport__count { display: block; margin-top: 2px; color: var(--sfs-400); font-size: 12.5px; }

/* Product rows */
.icc-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.icc-home-card {
	display: block;
	padding: 14px;
	border: 1px solid var(--sfs-200);
	border-radius: 14px;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.icc-home-card:hover { border-color: var(--sfs-brand); }
.icc-home-card__media { display: block; height: 170px; margin-bottom: 12px; }
.icc-home-card__media img { width: 100%; height: 170px; object-fit: contain; }
.icc-home-card__title { display: block; font-size: 14px; line-height: 1.35; min-height: 2.7em; }
.icc-home-card__price { display: block; margin-top: 8px; color: var(--sfs-brand); font-weight: 700; }
.icc-home-card__price del { color: var(--sfs-400); font-weight: 400; }

/* Brands */
.icc-home-brands { display: flex; flex-wrap: wrap; gap: 10px; }

.icc-home-brand {
	padding: 11px 20px;
	border: 1px solid var(--sfs-200);
	border-radius: 999px;
	color: var(--sfs-900);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.icc-home-brand:hover { border-color: var(--sfs-brand); color: var(--sfs-brand); }

/* Why */
.icc-home-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
}

.icc-home-why__item strong { display: block; margin-bottom: 6px; font-size: 15px; }
.icc-home-why__item span { color: var(--sfs-600); font-size: 14px; line-height: 1.5; }

@media (max-width: 600px) {
	.icc-home-hero { padding: 40px 0 34px; }
	.icc-home-section { padding: 36px 0; }
	.icc-home-sports, .icc-home-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.icc-home-sport__media, .icc-home-sport__media img { height: 104px; }
	.icc-home-card__media, .icc-home-card__media img { height: 130px; }
}

/* The buttons sit inside the_content, where the theme colours every link.
   That rule is more specific than a single class, so the label on the blue
   button came out blue on blue — invisible. */
.entry-content .icc-home-btn,
.icc-home-btn { color: var(--sfs-900) !important; text-decoration: none !important; }

.entry-content .icc-home-btn--primary,
.icc-home-btn--primary { color: #fff !important; }

.entry-content .icc-home-link,
.icc-home-link { color: var(--sfs-brand) !important; text-decoration: none !important; }

.entry-content .icc-home-card,
.entry-content .icc-home-sport,
.entry-content .icc-home-brand { text-decoration: none !important; }

.entry-content .icc-home-card__title { color: var(--sfs-900); }
.entry-content .icc-home-card__price { color: var(--sfs-brand) !important; }
.entry-content .icc-home-sport__name { color: var(--sfs-900); }
.entry-content .icc-home-brand { color: var(--sfs-900) !important; }

/* A real category photograph fills the tile and carries the name on top of
   it. Only ever for --art: a borrowed product cut-out is a ski on white, and
   white type over white is nothing at all — those keep the plain layout
   above, which is why this styling hangs off the class rather than the tile.

   The gradient does the work. A photograph of a snowy slope is bright where
   the type sits, and without something behind it the name disappears into
   the snow on exactly the pictures we most want to use. */
.icc-home-sport--art {
	padding: 0;
	overflow: hidden;
	position: relative;
	border-color: transparent;
	min-height: 210px;
}
.icc-home-sport--art .icc-home-sport__media { height: 210px; margin-bottom: 0; }
.icc-home-sport--art .icc-home-sport__media img {
	height: 210px;
	width: 100%;
	object-fit: cover;
}
.icc-home-sport--art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(8, 12, 20, 0.78) 0%,
		rgba(8, 12, 20, 0.34) 38%,
		rgba(8, 12, 20, 0) 66%);
	pointer-events: none;
}
.icc-home-sport--art .icc-home-sport__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 1;
	padding: 0 16px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.icc-home-sport--art .icc-home-sport__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 1;
	padding: 0 16px;
	color: rgba(255, 255, 255, 0.82);
}
/* The content-area rule above paints tile names dark; over a photograph that
   is the one place it must not. */
.entry-content .icc-home-sport--art .icc-home-sport__name { color: #fff; }
.icc-home-sport--art:hover { transform: translateY(-2px); }

@media (max-width: 600px) {
	.icc-home-sport--art,
	.icc-home-sport--art .icc-home-sport__media,
	.icc-home-sport--art .icc-home-sport__media img { height: 150px; min-height: 150px; }
	.icc-home-sport--art .icc-home-sport__name { font-size: 14px; bottom: 26px; }
}