/**
 * Landing page styling: hero, category tiles, product sections, brand strip.
 * Loaded only on the front page (see functions.php).
 */

:root {
	--sfs-plum: #641958;
	--sfs-plum-dark: #4a1241;
	--sfs-ink: #171717;
	--sfs-muted: #6b6b6b;
	--sfs-line: #e6e6e6;
	--sfs-bg-soft: #faf7f9;
}

/* The front page manages its own spacing. */
.home .site-main .post-box.page-box,
.home .site-main article.page-box {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.home .entry-content > * {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ hero */

.sfs-hero {
	position: relative;
	margin: 0 0 56px;
	padding: 72px 40px;
	border-radius: 14px;
	background:
		radial-gradient(120% 140% at 85% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
		linear-gradient(120deg, var(--sfs-plum-dark) 0%, var(--sfs-plum) 60%, #7d2170 100%);
	color: #fff;
	overflow: hidden;
}

.sfs-hero__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.sfs-hero h1,
.sfs-hero h2 {
	margin: 0 0 16px;
	max-width: 16ch;
	color: #fff;
	font-size: clamp(30px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.5px;
}

.sfs-hero p {
	margin: 0 0 28px;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
}

.sfs-btn,
.entry-content a.sfs-btn {
	display: inline-block;
	padding: 15px 34px;
	border-radius: 8px;
	background: #fff;
	color: var(--sfs-plum);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sfs-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	color: var(--sfs-plum-dark);
}

.sfs-btn--ghost,
.entry-content a.sfs-btn--ghost {
	margin-left: 10px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	color: #fff;
}

.sfs-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* -------------------------------------------------------------- sections */

.sfs-section {
	margin: 0 0 56px;
}

.sfs-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sfs-line);
}

.entry-content .sfs-section__head h2 {
	margin: 0;
	color: var(--sfs-ink);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.2px;
}

.sfs-section__link,
.entry-content a.sfs-section__link {
	flex: none;
	color: var(--sfs-plum);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sfs-section__link:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------- tiles */

.icc-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.icc-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sfs-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.icc-tile:hover {
	border-color: var(--sfs-plum);
	box-shadow: 0 12px 28px rgba(100, 25, 88, 0.12);
	transform: translateY(-2px);
}

.icc-tile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	background: var(--sfs-bg-soft);
}

.icc-tile__media img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.icc-tile__body {
	padding: 16px 18px 18px;
}

.icc-tile__name {
	display: block;
	color: var(--sfs-ink);
	font-size: 16px;
	font-weight: 700;
}

.icc-tile__count {
	display: block;
	margin-top: 3px;
	color: var(--sfs-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------- brands */

.icc-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.icc-brand {
	padding: 9px 18px;
	border: 1px solid var(--sfs-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sfs-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icc-brand:hover {
	border-color: var(--sfs-plum);
	background: var(--sfs-plum);
	color: #fff;
}

/* ------------------------------------------------------------- usp strip */

.icc-usp-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 0 48px;
	padding: 22px 24px;
	border: 1px solid var(--sfs-line);
	border-radius: 12px;
	background: var(--sfs-bg-soft);
}

.icc-usp {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sfs-muted);
	font-size: 13px;
	line-height: 1.45;
}

.icc-usp svg {
	flex: none;
	color: var(--sfs-plum);
}

.icc-usp strong {
	display: block;
	color: var(--sfs-ink);
	font-size: 14px;
}

/* Product grids from the [products] shortcode sit tighter on a landing page. */
.home .woocommerce ul.products {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.icc-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 782px) {
	.sfs-hero {
		margin-bottom: 40px;
		padding: 48px 24px;
		border-radius: 10px;
	}

	.sfs-hero h1,
	.sfs-hero h2 {
		max-width: none;
	}

	.sfs-btn,
	.entry-content a.sfs-btn {
		display: block;
		text-align: center;
	}

	.sfs-btn--ghost,
	.entry-content a.sfs-btn--ghost {
		margin: 10px 0 0;
	}

	.sfs-section {
		margin-bottom: 40px;
	}

	.icc-usp-bar {
		grid-template-columns: 1fr;
	}

	.icc-tile__media {
		height: 150px;
	}
}

@media (max-width: 560px) {
	.icc-tiles {
		grid-template-columns: 1fr;
	}
}

/* Two products per row on phones. The theme sets flex-basis:100%, which
   leaves one product per screen and makes every listing a very long scroll. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product {
		/* The theme sets flex-basis:100% here, which wins over width in a
		   flex row — so the flex shorthand has to be overridden too. */
		flex: 0 0 48% !important;
		width: 48% !important;
		max-width: 48% !important;
		margin: 0 4% 24px 0 !important;
		clear: none !important;
	}

	.woocommerce ul.products li.product:nth-child(2n) {
		margin-right: 0 !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h2 {
		font-size: 13px;
		line-height: 1.35;
	}

	.woocommerce ul.products li.product .price {
		font-size: 14px;
	}

	.woocommerce ul.products li.product .button {
		width: 100%;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12px;
	}
}

/* ===================================================================
   Trust strip, spacing and product cards
   =================================================================== */

/* --- strip under the header --- */
.icc-trust-strip {
	margin: 0 0 28px;
	border-bottom: 1px solid var(--sfs-line);
	background: var(--sfs-bg-soft);
}

.icc-trust-strip__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 24px;
}

.icc-trust-point {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.icc-trust-point svg {
	flex: none;
	color: var(--sfs-plum);
}

.icc-trust-point strong {
	display: block;
	color: var(--sfs-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.icc-trust-point em {
	display: block;
	color: var(--sfs-muted);
	font-size: 12px;
	font-style: normal;
	line-height: 1.3;
}

/* --- page rhythm --- */
.woocommerce .site-main,
.site-content .container {
	padding-top: 4px;
}

.woocommerce-products-header,
.shop-topbar {
	margin-bottom: 20px;
}

.site-content .sidebar-widget,
.site-content .widget {
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--sfs-line);
}

.site-content .widget:last-child {
	border-bottom: 0;
}

.site-content .widget-title {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* --- product cards --- */
.woocommerce ul.products li.product {
	margin-bottom: 32px !important;
	padding: 0 12px !important;
}

.woocommerce ul.products li.product #product,
.woocommerce ul.products li.product > div:first-child {
	height: 100%;
	padding: 14px 14px 18px;
	border: 1px solid var(--sfs-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.woocommerce ul.products li.product:hover > div:first-child {
	border-color: rgba(100, 25, 88, 0.45);
	box-shadow: 0 14px 30px rgba(23, 23, 23, 0.10);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .product-loop-thumbnail {
	margin-bottom: 14px;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.woocommerce ul.products li.product img {
	display: block;
	margin: 0 auto;
	mix-blend-mode: multiply;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-bottom: 12px;
	color: var(--sfs-ink);
	font-size: 17px;
	font-weight: 700;
}

.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	border-radius: 8px;
	text-align: center;
}

/* --- pre-footer --- */
.icc-prefooter {
	margin-top: 56px;
	padding: 48px 0 40px;
	border-top: 1px solid var(--sfs-line);
	background: var(--sfs-bg-soft);
}

.icc-prefooter__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}

.icc-prefooter h3 {
	margin: 0 0 14px;
	color: var(--sfs-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.icc-prefooter p,
.icc-prefooter li {
	color: var(--sfs-muted);
	font-size: 14px;
	line-height: 1.6;
}

.icc-prefooter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.icc-prefooter li {
	margin-bottom: 8px;
}

.icc-prefooter a {
	color: var(--sfs-plum);
	text-decoration: none;
}

.icc-prefooter a:hover {
	text-decoration: underline;
}

.icc-prefooter__meta {
	margin-top: 14px;
	font-size: 13px;
}

.icc-paymethods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.icc-paymethods span {
	padding: 7px 12px;
	border: 1px solid var(--sfs-line);
	border-radius: 6px;
	background: #fff;
	color: var(--sfs-ink);
	font-size: 12px;
	font-weight: 600;
}

@media (max-width: 1024px) {
	.icc-trust-strip__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.icc-prefooter__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.icc-trust-strip {
		margin-bottom: 20px;
	}

	.icc-trust-strip__inner {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 12px 16px;
	}

	.icc-trust-point em {
		display: none;
	}

	.woocommerce ul.products li.product {
		padding: 0 !important;
		margin-bottom: 20px !important;
	}

	.woocommerce ul.products li.product > div:first-child {
		padding: 10px 10px 14px;
	}

	.icc-prefooter {
		margin-top: 36px;
		padding: 32px 0 24px;
	}

	.icc-prefooter__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* ===================================================================
   Catalog listing: chips, toolbar, richer cards
   =================================================================== */

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

.icc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--sfs-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sfs-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.icc-chip span {
	color: var(--sfs-muted);
	font-size: 12px;
	font-weight: 500;
}

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

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

.icc-chip.is-current span {
	color: rgba(255, 255, 255, 0.75);
}

/* --- toolbar: count on the left, sorting on the right --- */
.woocommerce .shop-topbar,
.woocommerce-page .shop-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 26px;
	padding: 12px 16px;
	border: 1px solid var(--sfs-line);
	border-radius: 10px;
	background: #fff;
}

.icc-result-count {
	order: -1;
	margin: 0 !important;
	color: var(--sfs-muted);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce .woocommerce-ordering {
	margin: 0 !important;
}

.woocommerce .woocommerce-ordering select {
	padding: 9px 34px 9px 14px;
	border: 1px solid var(--sfs-line);
	border-radius: 8px;
	background-color: #fff;
	font-size: 13px;
	font-weight: 600;
}

/* --- card content --- */
.icc-card-brand {
	display: block;
	margin-bottom: 4px;
	color: var(--sfs-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.icc-card-variants {
	display: block;
	margin: -6px 0 12px;
	color: var(--sfs-muted);
	font-size: 12px;
	font-weight: 500;
}

/* Keep the image area a consistent square so rows align. */
.woocommerce ul.products li.product .product-loop-thumbnail {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.woocommerce ul.products li.product .product-loop-thumbnail img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

@media (max-width: 767px) {
	.icc-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -16px 18px;
		padding: 0 16px 4px;
		scrollbar-width: none;
	}

	.icc-chips::-webkit-scrollbar {
		display: none;
	}

	.woocommerce .shop-topbar,
	.woocommerce-page .shop-topbar {
		padding: 10px 12px;
	}

	.icc-result-count {
		font-size: 13px;
	}

	.icc-card-brand {
		font-size: 10px;
	}
}

/* ===================================================================
   Product card fixes
   The theme absolutely positions the add-to-cart button, anchored to the
   list item rather than the card, so it broke out of the card and covered
   the title and price. Anchor it to the card and leave room for it.
   =================================================================== */

.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product > div:first-child,
.woocommerce ul.products li.product #product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 62px;   /* room for the pinned button */
	overflow: visible;
	text-align: left;
}

.woocommerce ul.products li.product .button {
	position: absolute !important;
	right: 14px !important;
	bottom: 14px !important;
	left: 14px !important;
	width: auto !important;
	padding: 11px 10px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

/* Left-aligned card text, like every large sports retailer. */
.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-brand,
.woocommerce ul.products li.product .icc-card-variants {
	text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	min-height: 0;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.woocommerce ul.products li.product .price {
	margin-bottom: 4px;
	font-size: 18px;
}

.woocommerce ul.products li.product .icc-card-variants {
	margin: 0 0 4px;
}

/* Softer image plate so products read as a set, and nothing is cropped. */
.woocommerce ul.products li.product .product-loop-thumbnail {
	margin: -14px -14px 14px;
	padding: 14px;
	border-radius: 12px 12px 0 0;
	background: #f6f6f7;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product > div:first-child,
	.woocommerce ul.products li.product #product {
		padding-bottom: 56px;
	}

	.woocommerce ul.products li.product .product-loop-thumbnail {
		margin: -10px -10px 10px;
		padding: 10px;
	}

	.woocommerce ul.products li.product .button {
		right: 10px !important;
		bottom: 10px !important;
		left: 10px !important;
		padding: 10px 6px !important;
		font-size: 12px !important;
	}
}