/*
 * Car-Parts.co.za store — modern, consistent styling on top of Astra + WooCommerce.
 * Brand: red #d40a16, ink #111827, navy #243673 (logo). Font: Lato (theme).
 */

:root {
	--cp-red: #d40a16;
	--cp-red-dark: #ae0711;
	--cp-ink: #111827;
	--cp-text: #374151;
	--cp-muted: #6b7280;
	--cp-line: #e5e7eb;
	--cp-soft: #f6f7f9;
	--cp-navy: #243673;
	--cp-radius: 14px;
	--cp-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 24px rgba(17, 24, 39, .06);
	--cp-shadow-lg: 0 4px 10px rgba(17, 24, 39, .06), 0 18px 40px rgba(17, 24, 39, .12);
}

body {
	color: var(--cp-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-products-header__title {
	color: var(--cp-ink);
	letter-spacing: -.01em;
}
h1, .entry-title { font-weight: 800; }
h2, h3 { font-weight: 700; }
a { text-underline-offset: 3px; }
::selection { background: rgba(212, 10, 22, .15); }
:focus-visible { outline: 3px solid rgba(212, 10, 22, .35); outline-offset: 2px; }

/* ---------- Header ---------- */
#masthead .main-header-bar {
	border-bottom: 1px solid var(--cp-line) !important;
	box-shadow: 0 1px 0 rgba(17, 24, 39, .02);
}
#masthead .main-header-menu > .menu-item > .menu-link {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--cp-ink);
	transition: color .15s ease;
}
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link {
	color: var(--cp-red);
}
#masthead .ast-site-header-cart .count,
#masthead .ast-cart-menu-wrap .count {
	background: var(--cp-red);
	border-color: var(--cp-red);
	color: #fff;
}
.ast-site-header-cart .ast-woo-header-cart-info-wrap { font-weight: 700; color: var(--cp-ink); }

/* Vehicle bar (under the header) */
.cp-vehicle-bar {
	background: #fff !important;
	border-bottom: 1px solid var(--cp-line) !important;
}
.cp-vehicle-bar-button,
a.cp-vehicle-bar-button {
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 9px 18px !important;
	box-shadow: 0 6px 14px rgba(212, 10, 22, .2);
	transition: background .15s ease, transform .15s ease;
}
.cp-vehicle-bar-button:hover { transform: translateY(-1px); }
/* "Remove vehicle" is a button (it acts, not navigates) but looks like the bar's links */
.cp-vehicle-bar button.cp-remove-vehicle {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	min-height: 0;
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	color: #555 !important;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.cp-vehicle-bar button.cp-remove-vehicle:hover,
.cp-vehicle-bar button.cp-remove-vehicle:focus-visible { color: var(--cp-red) !important; text-decoration: underline; }
.cp-vehicle-bar button.cp-remove-vehicle:disabled { cursor: progress; opacity: .7; }

/* ---------- Buttons (theme, WooCommerce, forms) ---------- */
.ast-button,
.button,
button.button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button:not(.is-link),
.sureforms-button, .srfm-button {
	border-radius: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button,
.wc-block-components-button.contained,
.widget_price_filter .price_slider_amount .button {
	background-color: var(--cp-red) !important;
	border-color: var(--cp-red) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(212, 10, 22, .22);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.widget_price_filter .price_slider_amount .button:hover {
	background-color: var(--cp-red-dark) !important;
	border-color: var(--cp-red-dark) !important;
	transform: translateY(-1px);
}
.woocommerce .single_add_to_cart_button {
	padding: 14px 32px !important;
	font-size: 15px !important;
}

/* ---------- Form fields ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], input[type="url"], select, textarea,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 1px solid #d1d5db !important;
	border-radius: 10px !important;
	background-color: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--cp-red) !important;
	box-shadow: 0 0 0 4px rgba(212, 10, 22, .12) !important;
	outline: none !important;
}

/* ---------- Product grids (store, categories, related, home) ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 14px !important;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--cp-shadow-lg);
	border-color: #d7dbe0;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product a img {
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	margin-bottom: 12px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.woocommerce ul.products li.product .price {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--cp-ink) !important;
}
.woocommerce ul.products li.product .price del { color: var(--cp-muted) !important; font-weight: 400; font-size: 14px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--cp-red) !important; }
.woocommerce ul.products li.product .ast-woo-product-category,
.cp-store-card-brand { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cp-muted); }
.woocommerce ul.products li.product .button,
.cp-store-view-part {
	margin-top: auto !important;
	width: 100%;
	text-align: center;
	background: #fff !important;
	color: var(--cp-red) !important;
	border: 1.5px solid var(--cp-red) !important;
}
.woocommerce ul.products li.product .button:hover,
.cp-store-view-part:hover {
	background: var(--cp-red) !important;
	color: #fff !important;
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	line-height: 1.4;
	border-radius: 999px;
	background: var(--cp-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border: 0;
}

/* Store toolbar */
.woocommerce .woocommerce-result-count { color: var(--cp-muted); }
.woocommerce .woocommerce-ordering select { min-height: 42px; padding: 8px 36px 8px 12px; }

/* Shop sidebar widgets */
.woocommerce-page #secondary .widget,
.woocommerce #secondary .widget {
	padding: 20px;
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
}
#secondary .widget-title, #secondary .widget .wp-block-heading {
	font-size: 16px !important;
	font-weight: 800;
	color: var(--cp-ink);
	margin-bottom: 14px;
}
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--cp-red) !important; }
#secondary .product-categories li,
#secondary .woocommerce-widget-layered-nav-list li { padding: 6px 0; border-bottom: 1px solid #f1f2f4; }
#secondary .product-categories li:last-child { border-bottom: 0; }
#secondary .product-categories a { color: var(--cp-text); font-weight: 600; }
#secondary .product-categories a:hover { color: var(--cp-red); }

/* ---------- Single product ---------- */
.single-product div.product .product_title {
	font-size: clamp(24px, 2.6vw, 32px) !important;
	font-weight: 800;
	line-height: 1.2;
}
.single-product div.product p.price,
.single-product div.product span.price {
	font-size: 26px !important;
	font-weight: 800;
	color: var(--cp-ink) !important;
}
.single-product div.product p.price ins { color: var(--cp-red); text-decoration: none; }
.single-product div.product .woocommerce-product-gallery {
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	padding: 12px;
	background: #fff;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 8px;
	border: 1px solid var(--cp-line);
	opacity: .75;
	transition: opacity .15s ease;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--cp-red); }
.single-product .stock.in-stock { color: #15803d !important; font-weight: 700; }
.single-product .stock.out-of-stock { color: var(--cp-red) !important; font-weight: 700; }
.single-product div.product form.cart .quantity .qty { min-height: 48px; border-radius: 10px !important; }
.single-product .product_meta { font-size: 14px; color: var(--cp-muted); padding-top: 14px; border-top: 1px solid var(--cp-line); }
.single-product .product_meta a { color: var(--cp-ink); font-weight: 600; }

/* Tabs → clean underline tabs in a card */
.woocommerce div.product .woocommerce-tabs {
	padding: 8px 28px 28px;
	margin-top: 32px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
}
.woocommerce div.product .woocommerce-tabs ul.tabs { margin-bottom: 20px !important; border-bottom: 1px solid var(--cp-line) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 700 !important; color: var(--cp-muted) !important; padding: 14px 4px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cp-ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before { background: var(--cp-red) !important; }
.woocommerce div.product .woocommerce-tabs .panel { line-height: 1.75; }
.woocommerce table.shop_attributes th { color: var(--cp-ink); }
.woocommerce table.shop_attributes td, .woocommerce table.shop_attributes th { border-color: var(--cp-line) !important; padding: 10px 12px !important; }

/* Fitment box on product pages */
.cp-fitment-box { border-radius: var(--cp-radius) !important; }

.related.products > h2,
.upsells.products > h2 { font-size: 24px !important; margin: 36px 0 18px; }

/* Breadcrumbs */
.woocommerce-breadcrumb, .ast-breadcrumbs, .ast-breadcrumbs-wrapper { font-size: 13px; color: var(--cp-muted); }
.woocommerce-breadcrumb a { color: var(--cp-muted); }
.woocommerce-breadcrumb a:hover { color: var(--cp-red); }

/* ---------- Cart & checkout ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--cp-line) !important;
	border-radius: var(--cp-radius) !important;
	overflow: hidden;
	background: #fff;
}
.woocommerce table.shop_table th { background: var(--cp-soft); color: var(--cp-ink); }
.woocommerce .cart_totals, .woocommerce-checkout-review-order {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
	border-radius: 12px;
	border-top-width: 3px;
}
.woocommerce-message, .woocommerce-info { border-top-color: var(--cp-red) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--cp-red) !important; }

/* ---------- Page titles ---------- */
.ast-single-post .entry-header .entry-title,
.page .entry-header .entry-title {
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	margin-bottom: 8px;
}

/* ---------- Home: hero heading keeps its look after the extra H1 tags became <p> ---------- */
.entry-content .cp-hero-line {
	font-size: clamp(36px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0;
}

/* ---------- About page: wider, more readable cards (the section had 260px side padding) ---------- */
.page-id-59 .entry-content [data-spectra-id='spectra-mfxh7rtu-ot68sg'] {
	padding-left: max(16px, calc((100% - 1200px) / 2)) !important;
	padding-right: max(16px, calc((100% - 1200px) / 2)) !important;
}
.page-id-59 .entry-content [data-spectra-id='spectra-mfxh82jo-3v8bij'] {
	width: 100% !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 921px) {
	.page-id-59 .entry-content [data-spectra-id='spectra-mfxh82jo-3v8bij'] { grid-template-columns: minmax(0, 1fr) !important; }
}
.page-id-59 .entry-content [data-spectra-id='spectra-mfxh82jo-3v8bij'] p,
.page-id-59 .entry-content [data-spectra-id='spectra-mfxh82jo-3v8bij'] li {
	font-size: 15.5px;
	line-height: 1.7;
}

/* ---------- Footer ---------- */
.site-footer .site-primary-footer-wrap { padding-top: 48px !important; padding-bottom: 32px !important; }
.site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer .wp-block-heading {
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff !important;
	margin-bottom: 14px !important;
}
.site-footer a { transition: color .15s ease; }
.site-footer a:hover { color: #fff !important; }
.site-footer .site-below-footer-wrap { font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 921px) {
	.woocommerce div.product .woocommerce-tabs { padding: 4px 18px 20px; }
}
@media (max-width: 544px) {
	.woocommerce ul.products li.product { padding: 10px !important; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
	.woocommerce ul.products li.product .price { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Store page polish */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { margin-bottom: 22px !important; }
.woocommerce-products-header__title.page-title {
	font-size: clamp(28px, 3.4vw, 40px) !important;
	font-weight: 800 !important;
	line-height: 1.15;
	margin: 6px 0 4px;
}
#secondary .woocommerce-product-search,
#secondary .wp-block-search__inside-wrapper { display: flex; gap: 8px; }
#secondary .woocommerce-product-search .search-field,
#secondary .wp-block-search__input { flex: 1; min-width: 0; min-height: 42px; }
#secondary .woocommerce-product-search button,
#secondary .wp-block-search__button {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 42px;
	padding: 0 14px !important;
	border-radius: 10px !important;
	background: var(--cp-red) !important;
	color: #fff !important;
	border: 0 !important;
}

/* "Fits your vehicle" tag on product cards (vehicle-context.js shows it when the part is listed for the shopper's vehicle). */
.cp-fit-tag { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; background: #e8f5ed; color: #137a3a; font-size: 12px; font-weight: 700; line-height: 1.6; }
.cp-fit-tag::before { content: "✓"; font-weight: 800; }
.cp-fit-tag[hidden] { display: none; }

/* Floating "Chat on WhatsApp" button (whatsapp.php). Icon only on phones; it moves up above the product page's sticky buy bar. */
.cp-wa { position: fixed; z-index: 97; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 14px; border-radius: 999px; background: #25d366; color: #fff !important; font-size: 15px; font-weight: 800; line-height: 1; text-decoration: none !important; box-shadow: 0 2px 6px rgba(16, 20, 28, .12), 0 10px 28px rgba(16, 20, 28, .22); transition: transform .15s ease, box-shadow .15s ease, bottom .2s ease; }
.cp-wa:hover { transform: translateY(-2px); background: #1ebe5b; box-shadow: 0 2px 6px rgba(16, 20, 28, .14), 0 14px 32px rgba(16, 20, 28, .26); }
.cp-wa:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #128c7e; }
.cp-wa svg { flex: 0 0 auto; }
@media (max-width: 921px) {
	.cp-wa { width: 56px; height: 56px; padding: 0; justify-content: center; }
	.cp-wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	body:has(.cp-buybar[data-on]) .cp-wa { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .cp-wa { transition: none; } .cp-wa:hover { transform: none; } }
@media print { .cp-wa { display: none !important; } }