/*
Theme Name:   SurronParts
Theme URI:    https://www.ebay.co.uk/str/surronparts
Description:  Child theme for Kadence. Yellow / black / grey styling for the SurronParts WooCommerce shop.
Template:     kadence
Version:      1.3.0
Text Domain:  surronparts
*/

/* ------------------------------------------------------------------
   Colours: swap --spp-yellow for the exact yellow from the logo.
   Fonts are served from this theme's fonts/ folder rather than from
   Google, which keeps visitor IPs away from Google (UK GDPR).
------------------------------------------------------------------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url("fonts/inter.woff2") format("woff2"); }

:root {
	--spp-yellow: #fdec05; /* sampled from the logo */
	--spp-yellow-dark: #d9ca00;
	--spp-black: #0e0e0e;
	--spp-charcoal: #1b1b1b;
	--spp-grey-800: #2a2a2a;
	--spp-grey-500: #6b6b6b;
	--spp-grey-200: #e4e4e4;
	--spp-grey-100: #f4f4f4;
	--spp-white: #ffffff;
	--spp-radius: 6px;
	--spp-heading: "Barlow Condensed", "Arial Narrow", sans-serif;

	/* Feed our fonts and palette into Kadence's own settings */
	--global-body-font-family: "Inter", system-ui, sans-serif;
	--global-heading-font-family: var(--spp-heading);

	--global-palette1: var(--spp-yellow);
	--global-palette2: var(--spp-yellow-dark);
	--global-palette3: var(--spp-black);
	--global-palette4: var(--spp-charcoal);
	--global-palette5: var(--spp-grey-500);
	--global-palette6: var(--spp-grey-500);
	--global-palette7: var(--spp-grey-200);
	--global-palette8: var(--spp-grey-100);
	--global-palette9: var(--spp-white);

	/* Kadence buttons default to white text; on our yellow that's unreadable */
	--global-palette-btn-bg: var(--spp-yellow);
	--global-palette-btn-bg-hover: var(--spp-black);
	--global-palette-btn: var(--spp-black);
	--global-palette-btn-hover: var(--spp-yellow);
}

body {
	background: var(--spp-white);
	color: var(--spp-charcoal);
	font-family: "Inter", system-ui, sans-serif;
}

h1, h2, h3, h4,
.product_title {
	font-family: var(--spp-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--spp-black);
}

/* Part names are long, so keep them in normal case in product grids */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}

a { color: var(--spp-black); text-decoration-color: var(--spp-yellow); text-underline-offset: 3px; }
a:hover { color: var(--spp-grey-500); }

/* ---------------- Header & footer ---------------- */
.site-header-wrap,
.site-header-row-container-inner { background: var(--spp-black); }
.site-header .header-navigation a,
.site-header .site-title,
.site-header .header-cart-button,
.site-header .header-account-button { color: var(--spp-white); }
.site-header .header-navigation a:hover,
.site-header .current-menu-item > a { color: var(--spp-yellow); }
.header-cart-total { background: var(--spp-yellow); color: var(--spp-black); }

.site-footer, .site-footer-row-container-inner { background: var(--spp-charcoal); color: var(--spp-grey-200); }
.site-footer a { color: var(--spp-grey-200); }
.site-footer a:hover { color: var(--spp-yellow); }
.site-footer h2, .site-footer .widget-title { color: var(--spp-yellow); font-size: 1.1rem; }

/* ---------------- Buttons ---------------- */
.button, button, input[type="submit"],
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button {
	background: var(--spp-yellow);
	color: var(--spp-black);
	border: 0;
	border-radius: var(--spp-radius);
	font-family: var(--spp-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: var(--spp-black);
	color: var(--spp-yellow);
}
.is-style-outline .wp-block-button__link { background: transparent; color: var(--spp-white); box-shadow: inset 0 0 0 2px var(--spp-yellow); }

/* ---------------- Homepage sections ---------------- */
/* Banner: full-width photo (a Cover block) with the menu laid over it */
.spp-hero {
	background: var(--spp-black);
	color: var(--spp-white);
	text-align: center;
	padding-top: 140px !important;  /* room for the see-through header */
	padding-bottom: 80px !important;
}
.spp-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.7) 100%) !important; opacity: 1 !important; }
.spp-hero .wp-block-cover__inner-container { max-width: 900px; }
.spp-hero h1 {
	color: var(--spp-white);
	font-size: clamp(2rem, 5vw, 3.8rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.02;
	margin: 18px 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.spp-hero h1 mark { display: inline-block; margin-top: 6px; background: none; color: var(--spp-yellow); font-size: 0.72em; line-height: 1.1; }
.spp-hero p { font-size: 1.1rem; color: var(--spp-grey-200); }

/* Page title strip on every other page (Kadence "entry hero"): same streaked black as the homepage banner */
.entry-hero .entry-hero-container-inner {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)), url("images/heading-bg.jpg") center / cover, var(--spp-black) !important;
	border-bottom: 6px solid var(--spp-yellow);
}
.entry-hero .hero-section-overlay { background: transparent !important; }
.entry-hero .entry-header { min-height: 220px; }
.entry-hero h1,
.entry-hero .page-title,
.entry-hero .archive-title {
	color: var(--spp-white) !important;
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-style: italic;
	font-weight: 700;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.entry-hero .archive-description,
.entry-hero .kadence-breadcrumbs,
.entry-hero .kadence-breadcrumbs a { color: var(--spp-grey-200) !important; }

/* Yellow strip of bike links under the banner */
.spp-bike-strip { background: var(--spp-yellow); padding: 22px 16px; margin-top: 0 !important; }
.spp-bike-strip p { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; margin: 0; }
.spp-bike-strip a {
	color: var(--spp-black);
	font-family: var(--spp-heading);
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}
.spp-bike-strip a:hover { color: var(--spp-grey-800); text-decoration: underline; text-decoration-thickness: 3px; }

/* See-through header on the homepage (Kadence "transparent header", switched on for that page only) */
.transparent-header .site-header-wrap,
.transparent-header .site-header-row-container-inner { background: transparent !important; }
.transparent-header .site-header .header-navigation a { color: var(--spp-white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.spp-hero { margin-bottom: 0 !important; }
@media (max-width: 767px) {
	.spp-hero { padding-top: 180px !important; min-height: 560px !important; }
	.spp-bike-strip p { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; text-align: center; }
}

.spp-trust-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--spp-grey-200);
	border: 1px solid var(--spp-grey-200);
	margin: 0;
}
.spp-trust-bar__item { background: var(--spp-grey-100); padding: 18px 16px; text-align: center; }
.spp-trust-bar__value { display: block; font-family: var(--spp-heading); font-size: 1.6rem; font-weight: 700; color: var(--spp-black); }
.spp-trust-bar__label { font-size: 0.85rem; color: var(--spp-grey-500); }

.spp-reseller-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--spp-yellow); color: var(--spp-black);
	font-family: var(--spp-heading); font-weight: 700; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px; font-size: 0.95rem;
}
.spp-reseller-badge::before { content: "✓"; font-weight: 900; }

/* Full-width bands keep their content in line with the header */
.spp-hero,
.spp-section-grey,
.spp-section-dark {
	padding-left: max(var(--global-content-edge-padding, 1.5rem), calc((100% - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 1.5rem))) !important;
	padding-right: max(var(--global-content-edge-padding, 1.5rem), calc((100% - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 1.5rem))) !important;
}

.spp-section-dark { background: var(--spp-charcoal); color: var(--spp-grey-200); }
.spp-section-dark h2 { color: var(--spp-white); }
.spp-section-grey { background: var(--spp-grey-100); }

/* ---------------- WooCommerce ---------------- */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	border: 1px solid var(--spp-grey-200);
	border-radius: var(--spp-radius);
	padding: 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.woocommerce ul.products li.product:hover { border-color: var(--spp-yellow); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
.woocommerce div.product p.price { color: var(--spp-black); font-weight: 700; }

/* Product cards and category tiles share one look: black box, photo on a white panel, white text */
.woocommerce ul.products li.product,
.wc-block-grid__product { background: var(--spp-black) !important; border-color: var(--spp-black); }
/* Kadence gives the text box a white .content-bg, which would hide the white text */
.woocommerce ul.products li.product .product-details.content-bg { background: transparent !important; padding: 12px 4px 4px; }
.woocommerce ul.products li.product img { background: var(--spp-white); border-radius: 4px; aspect-ratio: 1; object-fit: contain; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.wc-block-grid__product-title { color: var(--spp-white) !important; }
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price { color: var(--spp-white) !important; font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--spp-grey-500) !important; }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--spp-yellow) !important; }
.woocommerce ul.products li.product .stock.out-of-stock { color: #ff8a80; }

/* Two per row on phones (Kadence "Two Columns" setting): smaller text and padding so names fit */
@media (max-width: 767px) {
	.woocommerce ul.products:not(.products-list-view) { column-gap: 10px !important; row-gap: 10px !important; }
	.woocommerce ul.products li.product { padding: 7px; }
	.woocommerce ul.products li.product .product-details.content-bg { padding: 8px 2px 2px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.82rem; }
	.woocommerce ul.products li.product .price { font-size: 0.9rem; }
	.woocommerce ul.products li.product-category h2 { font-size: 1rem; }
}

/* Category tiles (Shop by bike / Shop by part) */
.woocommerce ul.products li.product-category h2 { color: var(--spp-white); font-family: var(--spp-heading); font-size: 1.3rem; text-transform: uppercase; }
.woocommerce ul.products li.product-category h2 mark { background: var(--spp-yellow); color: var(--spp-black); border-radius: 999px; padding: 0 8px; }
.woocommerce ul.products li.product-category:hover h2 { color: var(--spp-yellow); }

.woocommerce span.onsale { background: var(--spp-yellow); color: var(--spp-black); }
.woocommerce .stock.out-of-stock { color: #b42318; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--spp-yellow); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--spp-black); }

.spp-product-notice {
	border-left: 4px solid var(--spp-yellow);
	background: var(--spp-grey-100);
	padding: 10px 14px;
	font-size: 0.9rem;
	margin: 16px 0;
}

/* Trade customers see a small badge in the header */
.spp-trade-flag {
	background: var(--spp-yellow); color: var(--spp-black);
	font-family: var(--spp-heading); font-weight: 700; font-size: 0.75rem;
	text-transform: uppercase; padding: 2px 8px; border-radius: 4px;
}

/* ---------------- Legal pages ---------------- */
.spp-legal { max-width: 760px; }
.spp-legal h2 { font-size: 1.4rem; margin-top: 2em; border-bottom: 2px solid var(--spp-yellow); padding-bottom: 4px; }
.spp-legal .spp-updated { color: var(--spp-grey-500); font-size: 0.9rem; }

/* ---------------- Logo ---------------- */
/* Kadence caps logos at 200px; the logo is very wide, so it needs more room to read */
.site-branding a.brand img.custom-logo { width: 320px; max-width: 100%; height: auto; }
@media (max-width: 767px) { .site-branding a.brand img.custom-logo { width: 220px; } }

/* ---------------- Homepage: Shop by part ---------------- */
.spp-shop-by-part h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 18px; }
.spp-shop-by-part p { max-width: 1000px; margin-left: auto; margin-right: auto; line-height: 2; }

/* ---------------- Homepage: trade + delivery cards on the black band ---------------- */
.spp-promo-cards { gap: 24px !important; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 0 var(--global-content-edge-padding, 1.5rem); box-sizing: border-box; }
.spp-promo-card {
	display: flex;
	flex-direction: column;
	background: var(--spp-grey-800);
	border-top: 4px solid var(--spp-yellow);
	border-radius: var(--spp-radius);
	padding: 32px !important;
}
.spp-promo-card h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 6px 0 14px !important; }
.spp-promo-card__kicker {
	margin: 0 !important;
	color: var(--spp-yellow);
	font-family: var(--spp-heading);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.spp-promo-card > * { margin-top: 0 !important; }
.spp-promo-card .wp-block-buttons { margin-top: auto; }
.spp-ticks { list-style: none; padding: 0; margin: 0 0 28px; }
.spp-ticks li { position: relative; padding-left: 30px; margin: 10px 0; }
.spp-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--spp-yellow); font-weight: 900; }

/* ---------------- Homepage: newsletter ---------------- */
.spp-newsletter .wpforms-container { max-width: 540px; margin: 0 auto !important; }
.spp-newsletter .wpforms-form { display: flex; gap: 10px; align-items: flex-start; }
.spp-newsletter .wpforms-field-container { flex: 1; }
.spp-newsletter .wpforms-field { padding: 0 !important; }
.spp-newsletter .wpforms-field input[type="email"] { max-width: none !important; width: 100%; height: 50px; border: 2px solid var(--spp-black); border-radius: var(--spp-radius); }
.spp-newsletter .wpforms-submit-container { padding: 0 !important; margin: 0 !important; }
.spp-newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit {
	height: 50px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--spp-radius);
	font-family: var(--spp-heading);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.spp-newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit:hover { background: var(--spp-black) !important; color: var(--spp-yellow) !important; }

/* ---------------- Product cards: nothing moves on hover, the text turns yellow ---------------- */
.woocommerce ul.products li.product .entry-content-wrap { transform: none !important; }
.woocommerce ul.products li.product:hover { border-color: var(--spp-yellow); }
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .price,
.woocommerce ul.products li.product:hover .price ins { color: var(--spp-yellow) !important; }

/* Every yellow bubble/button gets black text */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce span.onsale,
.header-cart-total,
.wc-block-components-button,
.page-numbers.current,
.wpforms-submit {
	background: var(--spp-yellow) !important;
	color: var(--spp-black) !important;
}
.woocommerce ul.products li.product .button:hover,
.wpforms-submit:hover { background: var(--spp-white) !important; color: var(--spp-black) !important; }

/* ---------------- Product cards: photo sits inside the white panel, button pinned to the bottom ---------------- */
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block; background: var(--spp-white); border-radius: 4px; }
.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	padding: 14px;
	box-sizing: border-box;
	object-fit: contain;
}
.woocommerce ul.products li.product:not(.product-category) { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .product-details { display: flex; flex-direction: column; flex: 1; }
.woocommerce ul.products li.product .product-action-wrap { margin-top: auto; padding-top: 12px; }
@media (max-width: 767px) { .woocommerce ul.products li.product img { padding: 8px; } }

/* Every card the same height: titles get a fixed 3-line slot (4 on phones), longer ones end in "…" */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	height: calc(1.35em * 3);
	line-height: 1.35 !important;
	padding: 0 !important;
	margin-bottom: 8px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a { display: inline; line-height: inherit; }
.woocommerce ul.products li.product-category h2 { min-height: calc(1.3em * 2); }
.woocommerce ul.products li.product .product-action-wrap .button { white-space: nowrap; }
@media (max-width: 767px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title { -webkit-line-clamp: 4; line-clamp: 4; height: calc(1.35em * 4); }
	.woocommerce ul.products li.product .product-action-wrap .button { font-size: 0.78rem; padding: 10px 4px; letter-spacing: 0; text-align: center; justify-content: center; }
	.woocommerce ul.products li.product .product-action-wrap .button .kadence-svg-iconset { display: none; }
}

/* ---------------- Header search bar + basket ---------------- */
.spp-search { display: flex; align-items: center; width: 100%; max-width: 300px; background: var(--spp-white); border-radius: 999px; overflow: hidden; }
.spp-search input[type="search"] {
	flex: 1; min-width: 0; height: 40px; padding: 0 16px;
	border: 0 !important; border-radius: 0; background: transparent; box-shadow: none;
	color: var(--spp-black); font-size: 0.95rem;
}
.spp-search input[type="search"]:focus { outline: none; }
.spp-search:focus-within { box-shadow: 0 0 0 3px var(--spp-yellow); }
.spp-search button {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 40px; padding: 0; border-radius: 0;
	background: var(--spp-yellow) !important; color: var(--spp-black) !important;
}
.spp-search button:hover { background: var(--spp-black) !important; color: var(--spp-yellow) !important; }
.site-header .site-header-main-section-right .spp-search { width: 240px; margin: 0 12px 0 8px; }
@media (max-width: 1280px) {
	.site-branding a.brand img.custom-logo { width: 240px; }
	.site-header .site-header-main-section-right .spp-search { width: 190px; }
}
.site-header .header-navigation .header-menu-container > ul > li > a { padding-left: 0.6em; padding-right: 0.6em; white-space: nowrap; }
.site-header .header-navigation .header-menu-container > ul > li.menu-item > a,
.site-header .header-navigation .header-menu-container .dropdown-nav-toggle { color: var(--spp-white); }
.site-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.site-header .header-navigation .header-menu-container > ul > li.current-menu-item > a { color: var(--spp-yellow); }
.site-header .header-cart-button,
.site-header .header-cart-button .kadence-svg-iconset { color: var(--spp-white) !important; }
.site-header .header-cart-button:hover { color: var(--spp-yellow) !important; }
.header-cart-wrap .header-cart-button .header-cart-total { color: var(--spp-black) !important; background: var(--spp-yellow) !important; }
/* Mobile: full-width search row under the logo */
.site-mobile-header-wrap .site-header-row-container-inner { background: var(--spp-black); }
.transparent-header .site-mobile-header-wrap .site-header-row-container-inner { background: transparent; }
.site-mobile-header-wrap .site-header-bottom-section-center,
.site-mobile-header-wrap .site-header-bottom-section-center .site-header-item { width: 100%; }
.site-mobile-header-wrap .spp-search { max-width: none; }
.site-header .mobile-toggle-open-container .menu-toggle-open,
.site-header .header-mobile-cart-wrap .header-cart-button { color: var(--spp-white) !important; }