/* ==========================================================================
   AmozonPill Shop Redesign (v2 — full card takeover)
   The plugin now prints its own product-card markup (.asr-card-*), so this
   stylesheet targets ONLY our own classes. StoreVilla's loop markup no
   longer renders, so there's nothing to fight and heights stay uniform.
   ========================================================================== */

body.asr-redesigned-shop {
	--asr-cream:      #FBF9F4;
	--asr-paper:      #FFFFFF;
	--asr-tint:       #F6F1E6;
	--asr-ink:        #211E17;
	--asr-ink-soft:   #6B604E;
	--asr-ink-faint:  #A89E8A;
	--asr-green:      #1F4D3A;
	--asr-green-dark: #163829;
	--asr-ochre:      #B98A2E;
	--asr-brick:      #A3392E;
	--asr-hairline:   #E6E0D4;
	--asr-hairline-soft: #ECE6D9;
	--asr-font-display: 'Source Serif 4', Georgia, serif;
	--asr-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--asr-radius:    8px;
	--asr-radius-lg: 12px;

	background: var(--asr-cream);
	font-family: var(--asr-font-body);
	color: var(--asr-ink);
}

body.asr-redesigned-shop #primary,
body.asr-redesigned-shop .content-area,
body.asr-redesigned-shop .site-content,
body.asr-redesigned-shop #content { background: var(--asr-cream); }

/* ---------- Breadcrumb ---------- */
body.asr-redesigned-shop .woocommerce-breadcrumb {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: 12.5px; color: var(--asr-ink-faint);
	margin: 24px auto 0; padding: 0 20px; max-width: 1180px;
}
body.asr-redesigned-shop .woocommerce-breadcrumb a { color: var(--asr-ink-faint); text-decoration: none; }
body.asr-redesigned-shop .woocommerce-breadcrumb a:hover { color: var(--asr-green); }

/* ---------- Page title + description (WooCommerce native markup) ---------- */
body.asr-redesigned-shop .woocommerce-products-header {
	max-width: 1180px; margin: 0 auto; padding: 4px 20px 6px;
}
body.asr-redesigned-shop .woocommerce-products-header__title.page-title {
	font-family: var(--asr-font-display); font-weight: 500; color: var(--asr-ink);
	font-size: 2rem; line-height: 1.2; margin: 0 0 10px; text-transform: none;
}
body.asr-redesigned-shop .term-description {
	font-size: 14.5px; color: var(--asr-ink-soft); line-height: 1.7; max-width: 72ch; margin-bottom: 18px;
}
body.asr-redesigned-shop .term-description p { margin: 0 0 10px; }

/* ---------- Result count + sorting toolbar ---------- */
body.asr-redesigned-shop .woocommerce-result-count,
body.asr-redesigned-shop .woocommerce-ordering {
	font-family: var(--asr-font-body); font-size: 13.5px; color: var(--asr-ink-soft);
}
body.asr-redesigned-shop form.woocommerce-ordering { margin-bottom: 0; }
body.asr-redesigned-shop .woocommerce-ordering select {
	font-family: var(--asr-font-body); font-size: 13.5px; color: var(--asr-ink);
	border: 1px solid var(--asr-hairline); border-radius: var(--asr-radius);
	padding: 9px 34px 9px 14px; background: var(--asr-paper);
}
body.asr-redesigned-shop .woocommerce > .woocommerce-result-count,
body.asr-redesigned-shop .woocommerce > form.woocommerce-ordering,
body.asr-redesigned-shop ul.products,
body.asr-redesigned-shop nav.woocommerce-pagination {
	max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
}
body.asr-redesigned-shop .woocommerce > .woocommerce-result-count { margin-top: 22px; display: inline-block; }
body.asr-redesigned-shop form.woocommerce-ordering { display: inline-block; float: right; }
@media (max-width: 600px) {
	body.asr-redesigned-shop form.woocommerce-ordering { float: none; display: block; margin: 10px 20px 0; }
}

/* ---------- Product grid ---------- */
body.asr-redesigned-shop ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 18px;
	list-style: none;
	margin: 26px auto 10px !important;
}
body.asr-redesigned-shop ul.products::before,
body.asr-redesigned-shop ul.products::after { content: none !important; display: none !important; }

@media (min-width: 1400px) { body.asr-redesigned-shop ul.products { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { body.asr-redesigned-shop ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { body.asr-redesigned-shop ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px)  { body.asr-redesigned-shop ul.products { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* ---------- Product card (100% our markup) ---------- */
body.asr-redesigned-shop ul.products li.product {
	background: var(--asr-paper);
	border: 1px solid var(--asr-hairline);
	border-radius: var(--asr-radius-lg);
	padding: 12px;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.asr-redesigned-shop ul.products li.product::before,
body.asr-redesigned-shop ul.products li.product::after { content: none !important; }
body.asr-redesigned-shop ul.products li.product:hover {
	border-color: var(--asr-green);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(33,30,23,0.08);
}

/* Image box — FIXED height (not just aspect-ratio) so it's identical on
   every card regardless of what's below it */
body.asr-redesigned-shop .asr-card-imglink { display: block; text-decoration: none; }
body.asr-redesigned-shop .asr-card-img {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	height: 190px;
	background: var(--asr-tint);
	border-radius: var(--asr-radius);
	overflow: hidden;
	margin-bottom: 10px;
}
body.asr-redesigned-shop .asr-card-img img {
	width: 100%; height: 100%; object-fit: contain; display: block;
}
body.asr-redesigned-shop .asr-card-img-fallback {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	color: var(--asr-ink-faint); text-align: center; width: 100%; height: 100%;
}
body.asr-redesigned-shop .asr-card-img-fallback span { font-size: 11.5px; font-weight: 500; }
body.asr-redesigned-shop .asr-card-sale {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: var(--asr-brick); color: #fff;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	padding: 4px 10px; border-radius: 20px;
}

/* Category eyebrow — fixed single line so it can't wrap and shift things */
body.asr-redesigned-shop .asr-card-cat {
	display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .4px; color: var(--asr-ink-faint); margin-bottom: 3px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Title — pure 2-line clamp. The KEY fix: do NOT set an explicit `height`
   here. A fixed height fights `-webkit-line-clamp` (which requires
   display:-webkit-box) and the clamp loses, letting text spill to a 3rd
   line under the price. min-height reserves 2 lines of space for short
   titles so buttons still align, while the clamp caps long titles at 2. */
body.asr-redesigned-shop .asr-card-title {
	font-family: var(--asr-font-body); font-weight: 600; font-size: 13.5px; line-height: 1.35;
	margin: 0 0 6px;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.asr-redesigned-shop .asr-card-title a { color: var(--asr-ink); text-decoration: none; }
body.asr-redesigned-shop ul.products li.product:hover .asr-card-title a { color: var(--asr-green); }

/* Rating */
body.asr-redesigned-shop .asr-card-rating {
	display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
body.asr-redesigned-shop .asr-card-rating .star-rating { color: var(--asr-ochre); font-size: 12px; margin: 0; }
body.asr-redesigned-shop .asr-card-rating .star-rating::before { color: var(--asr-hairline); }
body.asr-redesigned-shop .asr-card-rating .star-rating span::before { color: var(--asr-ochre); }
body.asr-redesigned-shop .asr-card-rating-count { font-size: 11.5px; color: var(--asr-ink-faint); }

/* Price — fixed line so single vs. range prices don't shift card height */
body.asr-redesigned-shop .asr-card-price {
	font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--asr-green);
	margin: 0 0 12px; min-height: 1.4em; line-height: 1.4;
}
body.asr-redesigned-shop .asr-card-price del {
	color: var(--asr-brick); text-decoration: line-through; font-weight: 400; font-size: 13px; opacity: 1; margin-right: 6px;
}
body.asr-redesigned-shop .asr-card-price ins { text-decoration: none; }

/* Actions — pinned to the bottom so all cards align */
body.asr-redesigned-shop .asr-card-actions {
	display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
body.asr-redesigned-shop .asr-card-actions a {
	display: flex; align-items: center; justify-content: center;
	font-family: var(--asr-font-body); font-size: 12.5px; font-weight: 600;
	padding: 9px 14px; border-radius: 6px; text-align: center; text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	line-height: 1.3;
}
/* Primary — WooCommerce's own add-to-cart / select-options button */
body.asr-redesigned-shop .asr-card-actions a.button,
body.asr-redesigned-shop .asr-card-actions a.add_to_cart_button,
body.asr-redesigned-shop .asr-card-actions a.product_type_variable,
body.asr-redesigned-shop .asr-card-actions a.added_to_cart {
	border: 1.5px solid var(--asr-green); background: var(--asr-green); color: #fff !important;
}
body.asr-redesigned-shop .asr-card-actions a.button:hover,
body.asr-redesigned-shop .asr-card-actions a.add_to_cart_button:hover,
body.asr-redesigned-shop .asr-card-actions a.product_type_variable:hover,
body.asr-redesigned-shop .asr-card-actions a.added_to_cart:hover {
	background: var(--asr-green-dark); border-color: var(--asr-green-dark);
}
/* Outline secondary — View details */
body.asr-redesigned-shop .asr-card-actions a.asr-card-details {
	border: 1.5px solid var(--asr-green); background: transparent; color: var(--asr-green) !important;
}
body.asr-redesigned-shop .asr-card-actions a.asr-card-details:hover { background: var(--asr-tint); }

/* Kill WooCommerce's "loading"/tick pseudo-elements on the ajax button */
body.asr-redesigned-shop .asr-card-actions a.button::before,
body.asr-redesigned-shop .asr-card-actions a.button::after { display: none !important; }

/* ---------- Pagination ---------- */
body.asr-redesigned-shop nav.woocommerce-pagination { margin: 30px auto 50px; }
body.asr-redesigned-shop nav.woocommerce-pagination ul {
	display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; border: none;
}
body.asr-redesigned-shop nav.woocommerce-pagination ul li { border: none !important; margin: 0 !important; }
body.asr-redesigned-shop nav.woocommerce-pagination ul li a,
body.asr-redesigned-shop nav.woocommerce-pagination ul li span {
	display: flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 10px;
	font-family: var(--asr-font-body); font-size: 13.5px; font-weight: 600; color: var(--asr-ink-soft);
	background: var(--asr-paper); border: 1px solid var(--asr-hairline); border-radius: var(--asr-radius);
	text-decoration: none;
}
body.asr-redesigned-shop nav.woocommerce-pagination ul li a:hover { border-color: var(--asr-green); color: var(--asr-green); }
body.asr-redesigned-shop nav.woocommerce-pagination ul li span.current {
	background: var(--asr-green); border-color: var(--asr-green); color: #fff;
}