/* AutoStar — Section 4 "Shop Auto Care Products".
   WooCommerce products carousel + category filter pills. */

.as-products { width: 100%; }

/* Editor-only placeholder (the live carousel can't render inside Elementor). */
.as-prod-editor-note {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	padding: 40px 24px;
	border: 2px dashed var( --e-global-color-border, #d9d9de );
	border-radius: 16px;
	background: #fafafb;
	color: var( --e-global-color-muted, #6b7280 );
	font-family: "Inter", sans-serif;
	font-size: 14px;
}
.as-prod-editor-note strong { color: var( --e-global-color-secondary, #17171a ); font-size: 16px; }

/* ---------------- Filter pills ---------------- */
.as-prod-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.as-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var( --e-global-color-secondary );
	border: 1px solid var( --e-global-color-border );
	border-radius: 30px;
	padding: 9px 18px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all .2s ease;
}
.as-pill span {
	font-size: 12px;
	opacity: .6;
	font-weight: 600;
	display: contents;
}
.as-pill:hover { border-color: var( --e-global-color-secondary );
	background: var( --e-global-color-secondary ); color: white; }
.as-pill.is-active {
	background: var( --e-global-color-primary );
	border-color: var( --e-global-color-primary );
	color: #fff;
}
.as-pill.is-active span { opacity: .85; }

/* ---------------- Cards ---------------- */
.as-prod {
	display: block;
	background: #fff;
	border: 1px solid var( --e-global-color-border );
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, transform .2s ease;
	height: 100%;
}
.as-prod:hover { box-shadow: 0 12px 30px rgba( 0, 0, 0, .10 ); transform: translateY( -3px ); }

.as-prod__media {
	position: relative;
	background: #F8F8F8;
	height: 275px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
}
.as-prod__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.as-prod__badge {
	position: absolute;
	top: 14px; left: 14px;
	background: var( --e-global-color-primary );
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	padding: 4px 10px;
	border-radius: 20px;
}

.as-prod__body { padding: 16px 16px 18px; }
.as-prod__meta {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	letter-spacing: .6px;
	color: var( --e-global-color-muted );
	text-transform: uppercase;
	margin-bottom: 8px;
}
.as-prod__title {
	font-family: "Archivo", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var( --e-global-color-secondary );
	margin: 0 0 10px;
	line-height: 1.3;
}
.as-prod__row { display: flex; align-items: center; justify-content: space-between; }
.as-prod__price { color: var( --e-global-color-primary ); font-weight: 700; font-size: 17px; }
.as-prod__price .woocommerce-Price-amount { color: var( --e-global-color-primary ); }
.as-prod__rating { font-family: "Inter", sans-serif; font-size: 13px; color: var( --e-global-color-muted ); white-space: nowrap; }
.as-prod__rating .as-star { color: var( --e-global-color-primary ); font-style: normal; }

/* ---------------- Carousel layout ---------------- */
/* Before Slick inits, show a clean 4-up row (no flash of stacked cards). */
.as-prod-carousel:not(.slick-initialized) { display: flex; gap: 24px; overflow: hidden; }
.as-prod-carousel:not(.slick-initialized) .as-prod { flex: 0 0 calc( 25% - 18px ); }

.as-prod-carousel .slick-list { margin: 0 -12px; }
/* Slick adds .slick-slide directly onto each .as-prod <a> card. Give the slides
   a gutter and let the flex track equalise their heights. Do NOT set height on
   the card's inner divs — that would blow up the media and clip the body. */
.as-prod-carousel .slick-slide { height: auto; padding: 0px; box-sizing: border-box; margin: 10px; }
.as-prod-carousel .slick-track { display: flex; align-items: stretch; }

/* Arrows */
.as-prod-carousel .slick-prev,
.as-prod-carousel .slick-next {
	position: absolute;
	top: 42%;
	width: 42px; height: 42px;
	border: 0;
	border-radius: 50%;
	background: var( --e-global-color-primary );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .12 );
	color: #fff;
	font-size: 0;
	cursor: pointer;
	z-index: 6;
}
.as-prod-carousel .slick-prev:hover,
.as-prod-carousel .slick-next:hover{
	background: var(--e-global-color-secondary);
}


.as-prod-carousel .slick-prev { left: -12px; }
.as-prod-carousel .slick-next { right: -12px; }
.as-prod-carousel .slick-prev::before { content: "\2039"; font-size: 30px; line-height: 1;
	left: -1px;
    top: -5px; position: relative; }
.as-prod-carousel .slick-next::before { content: "\203a"; font-size: 30px; line-height: 1;
	right: -1px;
    top: -5px; position: relative; }
.as-prod-carousel .slick-disabled { opacity: .35; cursor: default; }

@media (max-width: 767px) {
	.as-prod-carousel:not(.slick-initialized) .as-prod { flex: 0 0 80%; }
	.as-prod__media { height: 220px; }
}

/* ---------------------------------------------------------------------------
   SHOP ARCHIVE — reuse the homepage card in a responsive grid
   (overrides WooCommerce's default float layout).
--------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before { content: none; display: none; } /* kill Woo clearfix/counters */
.woocommerce ul.products li.product.as-prod-li {
	width: auto;
	margin: 0;
	float: none;
	padding: 0;
}
.woocommerce ul.products li.product.as-prod-li .as-prod { margin: 0; }

@media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat( 3, 1fr ); } }
@media (max-width: 768px)  { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat( 2, 1fr ); } }
@media (max-width: 480px)  { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } }