/*
Theme Name:   Aonaisi Child
Theme URI:    https://www.aonaisi.com/
Description:  Child theme for Aonaisi Auto Parts (aonaisi.com). Phase 4 redesign package: global design system, product card fixes, custom footer and floating WhatsApp button (markup in functions.php). Switching back to the parent Astra theme fully rolls this back; no site data is touched.
Author:       Aonaisi Auto Parts
Template:     astra
Version:      1.0.6
Text Domain:  aonaisi-child
*/

/* -------------------------------------------------------------------------
 * Design tokens
 * Clean industrial B2B: white base, deep blue-grey structure, one red
 * accent drawn from the Aonaisi logo.
 * ---------------------------------------------------------------------- */
:root {
	--an-dark: #1f2a37;
	--an-dark-2: #111827;
	--an-accent: #b91c1c;
	--an-accent-dark: #991b1b;
	--an-wa: #25d366;
	--an-wa-dark: #1da851;
	--an-ink: #1f2937;
	--an-muted: #6b7280;
	--an-line: #e5e7eb;
	--an-soft: #f8fafc;
}

/* -------------------------------------------------------------------------
 * Hide the old Astra builder footer (replaced by .aonaisi-footer from
 * functions.php). This removes, among other leftovers, the dead
 * "* Please Enter Keywords" text block and the duplicated link columns.
 * ---------------------------------------------------------------------- */
.site-footer {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Product cards (Essential Addons Post Grid on /products/ and category
 * pages): unified frame, 4:3 images, titles clamped to two lines so long
 * OE titles no longer overflow.
 * ---------------------------------------------------------------------- */
.eael-post-grid .eael-grid-post {
	display: flex;
}
.eael-post-grid .eael-grid-post-holder {
	background: #ffffff;
	border: 1px solid var(--an-line);
	border-radius: 12px;
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.eael-post-grid .eael-grid-post-holder:hover {
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
	transform: translateY(-3px);
}
.eael-post-grid .eael-entry-thumbnail img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.eael-post-grid .eael-entry-title,
.eael-post-grid .eael-entry-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
	color: var(--an-dark);
}
.eael-post-grid .eael-entry-wrapper {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}
.an-cat-chip {
	align-self: flex-start;
	background: var(--an-bg-soft);
	color: var(--an-dark-2);
	border: 1px solid var(--an-line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
}
.an-card-wa {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--an-wa);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 14px;
	padding: 9px 14px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background 0.2s ease;
}
.an-card-wa:hover {
	background: var(--an-wa-dark);
}

/* -------------------------------------------------------------------------
 * Buttons: one radius and weight across Elementor and Astra buttons.
 * ---------------------------------------------------------------------- */
.elementor-button {
	border-radius: 8px;
	font-weight: 600;
}
.ast-button {
	border-radius: 8px;
}

/* Breadcrumbs */
.ast-breadcrumbs,
.ast-breadcrumbs a {
	font-size: 14px;
	color: var(--an-muted);
}

/* Content tables (product Size / cross-reference blocks): quiet borders. */
.elementor-widget-container table {
	border-collapse: collapse;
}
.elementor-widget-container table th,
.elementor-widget-container table td {
	border-color: var(--an-line);
	padding: 8px 12px;
}

/* -------------------------------------------------------------------------
 * Custom footer (markup printed by functions.php)
 * ---------------------------------------------------------------------- */
.aonaisi-footer {
	background: var(--an-dark-2);
	color: #cbd5e1;
	margin-top: 0;
}
.aonaisi-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
}
.aonaisi-footer-logo {
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
}
.aonaisi-footer-desc {
	margin: 0 0 12px;
	line-height: 1.6;
}
.aonaisi-footer-since {
	color: #ffffff;
	font-weight: 600;
	margin: 0;
}
.aonaisi-footer-heading {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.aonaisi-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.aonaisi-footer-list li {
	margin-bottom: 9px;
}
.aonaisi-footer a {
	color: #cbd5e1;
	text-decoration: none;
}
.aonaisi-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}
.aonaisi-footer-qr {
	display: flex;
	gap: 16px;
	margin-top: 18px;
}
.aonaisi-footer-qr figure {
	margin: 0;
	text-align: center;
}
.aonaisi-footer-qr img {
	background: #ffffff;
	padding: 6px;
	border-radius: 8px;
	width: 96px;
	height: 96px;
}
.aonaisi-footer-qr figcaption {
	font-size: 12px;
	margin-top: 6px;
	color: #94a3b8;
}
.aonaisi-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 18px 24px;
	text-align: center;
}
.aonaisi-footer-bottom p {
	margin: 0;
	font-size: 14px;
	color: #94a3b8;
}
@media (max-width: 921px) {
	.aonaisi-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 544px) {
	.aonaisi-footer-inner {
		grid-template-columns: 1fr;
		padding: 40px 20px 28px;
	}
}

/* -------------------------------------------------------------------------
 * Floating side widget: the WhatsApp and WeChat QR codes sit directly on
 * the right edge; hovering enlarges a code to twice its size so visitors
 * can scan it. (Markup printed by functions.php; replaces the v1.0.0
 * round float.)
 * ---------------------------------------------------------------------- */
.an-side-widget {
	position: fixed;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.an-side-qr {
	position: relative;
	display: block;
	width: 78px;
	padding: 6px 6px 4px;
	background: #ffffff;
	border: 1px solid var(--an-line);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.16);
	text-align: center;
	text-decoration: none !important;
	transform-origin: right center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.an-side-qr img {
	width: 64px;
	height: 64px;
	display: block;
	margin: 0 auto;
}
.an-side-qr span {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 600;
	color: var(--an-dark);
	line-height: 1.2;
}
.an-side-qr:hover {
	transform: scale(2);
	z-index: 10000;
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.3);
}
@media (max-width: 480px) {
	.an-side-qr {
		width: 62px;
	}
	.an-side-qr img {
		width: 48px;
		height: 48px;
	}
}

/* -------------------------------------------------------------------------
 * Homepage hero + category grid (v1.0.3 rework).
 * The sections carry the classes an-hero / an-cat-grid (set in Elementor);
 * these rules override the old kit palette (light blue headings, lime
 * buttons) inside those sections only, and give the category boxes a
 * framed card look with real product photos.
 * ---------------------------------------------------------------------- */
.an-hero h1 {
	color: var(--an-dark);
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 12px;
}
.an-hero .elementor-widget-text-editor {
	color: var(--an-ink);
	font-size: 17px;
	line-height: 1.6;
}
.an-hero .an-btn-primary,
.an-hero .an-btn-dark {
	display: inline-block;
	width: auto;
	vertical-align: top;
	margin: 8px 12px 8px 0;
}
.an-btn-primary .elementor-button {
	background: var(--an-accent);
	color: #ffffff;
}
.an-btn-primary .elementor-button:hover {
	background: var(--an-accent-dark);
}
.an-btn-dark .elementor-button {
	background: var(--an-dark);
	color: #ffffff;
}
.an-btn-dark .elementor-button:hover {
	background: var(--an-dark-2);
}
.an-cat-grid .elementor-widget-heading .elementor-heading-title {
	color: var(--an-dark);
}
.an-cat-grid .elementor-icon-box-wrapper,
.an-cat-grid .elementor-image-box-wrapper {
	background: #ffffff;
	border: 1px solid var(--an-line);
	border-radius: 14px;
	padding: 20px 18px;
	height: 100%;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.an-cat-grid .elementor-icon-box-wrapper:hover,
.an-cat-grid .elementor-image-box-wrapper:hover {
	box-shadow: 0 10px 26px rgba(17, 24, 39, 0.1);
	transform: translateY(-3px);
}
.an-cat-grid .elementor-icon-box-icon {
	margin-bottom: 14px;
}
.an-cat-grid .elementor-icon-box-icon img,
.an-cat-grid .elementor-image-box-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.an-cat-grid .elementor-image-box-img {
	margin-bottom: 14px;
}
.an-cat-grid .elementor-icon {
	color: var(--an-dark);
}
.an-cat-grid .elementor-icon-box-title,
.an-cat-grid .elementor-icon-box-title a,
.an-cat-grid .elementor-image-box-title,
.an-cat-grid .elementor-image-box-title a {
	color: var(--an-dark);
}
.an-cat-grid .elementor-icon-box-description,
.an-cat-grid .elementor-image-box-description {
	color: var(--an-muted);
}

/* -------------------------------------------------------------------------
 * /products/ sidebar note (v1.0.5): the v1.0.3–1.0.4 attempt to narrow
 * the sidebar by overriding the Elementor grid container's template
 * columns (page-id-1987 .elementor-element-c902b23) narrowed the track
 * but left the sidebar content unpainted on /products/ itself, so the
 * override is removed for good — the sidebar keeps its original width,
 * which displays correctly. Do not re-add.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Pagination row for /products/ (v1.0.4): numbered page links under the
 * offset grids on /products/, /products/page-2/ and /products/page-3/.
 * ---------------------------------------------------------------------- */
.an-pager {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 26px 0 6px;
}
.an-pager a,
.an-pager span {
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--an-line);
	border-radius: 9px;
	background: #ffffff;
	color: var(--an-dark);
	font-weight: 600;
	text-decoration: none !important;
}
.an-pager a:hover {
	border-color: var(--an-dark);
}
.an-pager .an-pager-current {
	background: var(--an-dark);
	border-color: var(--an-dark);
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Application-step TODOs (finalised while applying the package, when the
 * exact page markup is in front of us):
 * - About page: certificate images get a fixed-ratio frame so they are
 *   no longer squashed (rule needs the About page's image container).
 * - Homepage hero H1 and category grid are page-content changes, applied
 *   in Elementor by Muse after this theme goes live.
 * ---------------------------------------------------------------------- */