/* Shop Card widget — separate namespace (.ppl-shop-*) so nothing here can
   ever affect the original Product Loop / Catalog Grid widget's markup. */

.ppl-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.ppl-shop-card {
	background: #f2f3f5;
	border-radius: 18px;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.ppl-shop-card * {
	box-sizing: border-box;
}

.ppl-shop-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.ppl-shop-sku {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5a7ba6;
	padding-top: 6px;
}

.ppl-shop-card-title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #0b1220;
	margin: 0;
}

.ppl-shop-card-price {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-style: normal;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #0b1220;
}
.ppl-shop-card-price .woocommerce-Price-amount {
	font-weight: 500;
}
/* Force every nested price element (amount, <bdi>, <ins>/<del> on sale
   items, currency symbol spans, etc.) to use this same color, so a theme's
   own WooCommerce price styling can never leak through — including right
   after a variation swap, since it's the same container being re-filled. */
.ppl-shop-card-price * {
	color: inherit !important;
}

/* ---------- Variation pills ---------- */
.ppl-shop-variations {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ppl-variation-pill {
	--ppl-pill-active-bg: #0b2e59;
	font-family: inherit;
	border: 1px solid #d8dce3;
	background: #ffffff;
	color: #0b2e59;
	border-radius: 30px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ppl-variation-pill:hover {
	border-color: var(--ppl-pill-active-bg);
}
.ppl-variation-pill.is-active {
	background: var(--ppl-pill-active-bg);
	border-color: var(--ppl-pill-active-bg);
	color: #ffffff;
}
.ppl-variation-pill[data-in-stock="0"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Action buttons ---------- */
.ppl-shop-card-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}
.ppl-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 1 1 0;
	min-width: 0;
	border: none;
	text-decoration: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	padding: 9px 10px;
	border-radius: 30px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.ppl-shop-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.ppl-shop-btn svg {
	flex-shrink: 0;
}
.ppl-shop-btn-primary {
	flex: 0.85 1 0;
	background: #0b2e59;
	color: #ffffff;
}
.ppl-shop-btn-primary:hover {
	background: #123b73;
	color: #ffffff;
}
.ppl-shop-btn-secondary {
	/* "Quick checkout · <variation>" tends to run longer than "Learn More",
	   so it gets a bit more of the row before either label has to truncate. */
	flex: 1.15 1 0;
	background: #ffffff;
	color: #0b2e59;
	border: 1px solid #d8dce3;
}
.ppl-shop-btn-secondary:hover {
	background: #eef1f5;
}
.ppl-shop-btn-secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.ppl-shop-btn.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* Buttons stay on one line at every width — they shrink and the label
   truncates instead of wrapping to a second row (removed the previous
   mobile "stack vertically" rule; the user wants one line always). */
/* ---------- Product image panel ---------- */
/* Reuses .ppl-card-image from the original stylesheet (so the hover-cancel
   trick above keeps working) but overrides it here, scoped to this widget
   only:
   - no boxed background any more — the image sits directly on the card's
     own background, matching the reference design, instead of floating in
     a separate white panel
   - a fixed height instead of flex-grow, so every card's photo panel is
     exactly the same size and the vials line up row to row regardless of
     how much text sits above them (title length, SKU, variations, etc.)
   - larger than before so the vial fills more of the card, again matching
     the reference */
.ppl-shop-card .ppl-card-image {
	background: transparent !important;
	padding: 0;
	flex: 0 0 auto;
	min-height: 0;
	height: 260px;
	width: 100%;
	margin-top: auto;
	text-decoration: none;
	cursor: pointer;
}
.ppl-shop-card .ppl-card-image img {
	/* width/height auto (not 100%) so the <img> element's own box shrink-wraps
	   the actual rendered photo — with object-fit:contain + a stretched box,
	   the photo sits letterboxed in the middle and never touches the box's
	   corners, so border-radius on the box had no visible effect. This way
	   the radius clips the photo's real edges, and it's driven by a variable
	   so it's adjustable from the widget's Style tab (Image section). */
	max-width: 100%;
	max-height: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var( --ppl-shop-image-radius, 10px );
}

/* ---------- Toolbar: category tabs + search box ---------- */
.ppl-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.ppl-shop-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ppl-shop-tab {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	background: var( --ppl-shop-tab-bg, #ffffff );
	color: var( --ppl-shop-tab-text, #0b2e59 );
	border: var( --ppl-shop-tab-border-width, 1px ) solid var( --ppl-shop-tab-border-color, #d8dce3 );
	border-radius: var( --ppl-shop-tab-radius, 30px );
	padding: 8px 16px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ppl-shop-tab:hover {
	border-color: var( --ppl-shop-tab-active-bg, #0b2e59 );
}
.ppl-shop-tab.is-active {
	background: var( --ppl-shop-tab-active-bg, #0b2e59 );
	border-color: var( --ppl-shop-tab-active-bg, #0b2e59 );
	color: var( --ppl-shop-tab-active-text, #ffffff );
}

.ppl-shop-search-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var( --ppl-shop-search-bg, #ffffff );
	border: 1px solid var( --ppl-shop-search-border, #d8dce3 );
	border-radius: var( --ppl-shop-search-radius, 30px );
	padding: 9px 16px;
	min-width: 220px;
	max-width: 100%;
	flex: 0 1 320px;
}
.ppl-shop-search-icon {
	color: var( --ppl-shop-search-icon, #5a7ba6 );
	flex-shrink: 0;
}
.ppl-shop-search-input {
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	color: var( --ppl-shop-search-text, #0b2e59 );
	flex: 1;
	min-width: 0;
}
.ppl-shop-search-input::placeholder {
	color: #94a3b8;
}

.ppl-shop-empty-msg {
	text-align: center;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	color: #5a7ba6;
	padding: 24px 0;
}

/* ---------- Mobile: category tabs scroll horizontally instead of
   wrapping onto multiple lines ---------- */
@media (max-width: 767px) {
	.ppl-shop-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 2px;
		/* let it use the full toolbar row on mobile even next to the
		   search box, so there's real room to scroll */
		flex: 1 1 100%;
	}
	.ppl-shop-tabs::-webkit-scrollbar {
		display: none;
	}
	.ppl-shop-tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}


/* ---------- Pagination (numbered / load more / infinite scroll) ---------- */
.ppl-shop-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 28px;
}
.ppl-shop-pagination[hidden],
.ppl-shop-pagination [hidden] {
	display: none;
}
.ppl-shop-load-more,
.ppl-shop-page-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	background: var( --ppl-pg-bg, #ffffff );
	color: var( --ppl-pg-text, #0b2e59 );
	border: 1px solid #d8dce3;
	border-radius: var( --ppl-pg-radius, 30px );
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ppl-shop-load-more {
	padding: 14px 32px;
}
.ppl-shop-load-more:hover,
.ppl-shop-page-btn:hover:not( :disabled ),
.ppl-shop-page-btn.is-active {
	background: var( --ppl-pg-active-bg, #0b2e59 );
	border-color: var( --ppl-pg-active-bg, #0b2e59 );
	color: var( --ppl-pg-active-text, #ffffff );
}
.ppl-shop-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.ppl-shop-page-btn {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
}
.ppl-shop-page-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.ppl-shop-page-dots {
	color: var( --ppl-pg-text, #0b2e59 );
	padding: 0 2px;
}
.ppl-shop-infinite-sentinel {
	display: block;
	width: 100%;
	height: 1px;
}