/**
 * Buttons, badges, cards, forms.
 */

/* ---- buttons ---- */

.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.25rem;
	border-radius: var(--pl-radius-full);
	font-size: var(--pl-fs-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition:
		background-color var(--pl-dur) var(--pl-ease),
		border-color var(--pl-dur) var(--pl-ease),
		color var(--pl-dur) var(--pl-ease),
		transform var(--pl-dur-fast) var(--pl-ease);
}

.pl-btn:active { transform: translateY(1px); }

/* Dark label, not white: white on the brand gold is 2.71:1 and fails AA,
   whereas this reads at 6.60:1. */
.pl-btn--primary {
	background: var(--pl-primary);
	color: var(--pl-on-primary);
}

.pl-btn--primary:hover {
	background: var(--pl-primary-hover);
	color: var(--pl-on-primary);
}

.pl-btn--dark {
	background: var(--pl-bg-dark);
	color: #fff;
	border-color: rgb(255 255 255 / 0.18);
}

.pl-btn--dark:hover { background: #1e293b; color: #fff; }

.pl-btn--outline {
	background: transparent;
	border-color: var(--pl-border-mid);
	color: var(--pl-text-primary);
}

.pl-btn--outline:hover {
	border-color: var(--pl-primary-ink);
	color: var(--pl-primary-ink);
}

.pl-btn--ghost { background: transparent; color: var(--pl-text-secondary); }
.pl-btn--ghost:hover { color: var(--pl-primary-ink); }

.pl-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--pl-fs-xs); }
.pl-btn--lg { padding: 0.875rem 1.75rem; font-size: var(--pl-fs-body); }
.pl-btn--block { width: 100%; }

/* ---- badges ---- */

.pl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--pl-radius-sm);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.pl-badge--sale { background: var(--pl-sale); color: #fff; }
.pl-badge--limited { background: var(--pl-lime-brand); color: #fff; }
.pl-badge--soft {
	background: rgb(255 255 255 / 0.14);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.22);
	letter-spacing: var(--pl-track-eyebrow);
}

/* ---- rating ---- */

.pl-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.1875rem;
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	color: var(--pl-text-secondary);
}

.pl-rating__star { color: var(--pl-star); flex: none; }

/* ---- product card ---- */

.pl-card {
	display: flex;
	flex-direction: column;
	background: var(--pl-bg-white);
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	transition:
		border-color var(--pl-dur) var(--pl-ease),
		box-shadow var(--pl-dur) var(--pl-ease),
		transform var(--pl-dur) var(--pl-ease);
}

.pl-card:hover {
	border-color: var(--pl-border-mid);
	box-shadow: var(--pl-shadow-md);
	transform: translateY(-2px);
}

.pl-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--pl-bg-alt);
	overflow: hidden;
}

.pl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pl-dur-slow) var(--pl-ease);
}

/* Hover zoom, only where a real pointer exists. */
@media (hover: hover) {
	.pl-card:hover .pl-card__media img { transform: scale(1.05); }
}

.pl-card__flags {
	position: absolute;
	inset-inline-start: 0.625rem;
	inset-block-start: 0.625rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	z-index: 2;
}

.pl-card__wishlist {
	position: absolute;
	inset-inline-end: 0.625rem;
	inset-block-start: 0.625rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--pl-radius-full);
	background: rgb(255 255 255 / 0.92);
	color: var(--pl-text-secondary);
	box-shadow: var(--pl-shadow-sm);
	transition: color var(--pl-dur-fast) var(--pl-ease), background-color var(--pl-dur-fast) var(--pl-ease);
}

.pl-card__wishlist:hover,
.pl-card__wishlist[aria-pressed="true"] {
	color: var(--pl-sale);
	background: #fff;
}

.pl-card__wishlist[aria-pressed="true"] .pl-icon { fill: currentColor; }

.pl-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.75rem;
	flex: 1;
}

.pl-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
}

.pl-card__title {
	font-size: var(--pl-fs-card);
	font-weight: 700;
	line-height: var(--pl-lh-snug);
}

.pl-card__title a:hover { color: var(--pl-primary-ink); }

.pl-card__excerpt {
	font-size: var(--pl-fs-xs);
	line-height: 1.5;
	color: var(--pl-text-muted);
}

.pl-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

/* WooCommerce injects an unstyled "View cart" link next to the button after an
   AJAX add. Dress it as a small outline pill so it matches the Add button. */
.pl-card__foot .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--pl-border-mid);
	border-radius: var(--pl-radius-full);
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	color: var(--pl-text-primary);
	text-decoration: none;
	transition:
		border-color var(--pl-dur) var(--pl-ease),
		color var(--pl-dur) var(--pl-ease);
}

.pl-card__foot .added_to_cart:hover {
	border-color: var(--pl-primary-ink);
	color: var(--pl-primary-ink);
}

.pl-price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.pl-price__now {
	font-size: var(--pl-fs-card);
	font-weight: 800;
	color: var(--pl-text-primary);
}

.pl-price__was {
	font-size: var(--pl-fs-xs);
	color: var(--pl-text-muted);
	text-decoration: line-through;
}

.pl-price__off {
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	color: var(--pl-lime-brand);
}

/* Catalogue cards run a notch smaller than homepage cards. */
.pl-card--sm .pl-card__title { font-size: var(--pl-fs-card-sm); }
.pl-card--sm .pl-card__body { padding: 0.625rem; }

/* ---- category tile ---- */

.pl-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	background: var(--pl-bg-dark);
	isolation: isolate;
}

.pl-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pl-dur-slow) var(--pl-ease);
}

@media (hover: hover) {
	.pl-tile:hover img { transform: scale(1.06); }
}

.pl-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Warm near-black rather than the old teal, so it sits under the gold brand. */
	background: linear-gradient(to top, rgb(26 18 6 / 0.92) 0%, rgb(26 18 6 / 0.45) 45%, rgb(26 18 6 / 0.05) 100%);
}

.pl-tile__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	padding: 1rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pl-tile__eyebrow {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--pl-track-eyebrow);
	text-transform: uppercase;
	color: var(--pl-lime-bright);
}

.pl-tile__title { font-size: var(--pl-fs-h3); color: #fff; }

.pl-tile__desc {
	font-size: var(--pl-fs-xs);
	color: rgb(255 255 255 / 0.78);
	line-height: 1.45;
}

.pl-tile__cta {
	margin-top: 0.25rem;
	font-size: var(--pl-fs-xs);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

/* ---- forms ---- */

.pl-field { display: flex; flex-direction: column; gap: 0.375rem; }

.pl-label {
	font-size: var(--pl-fs-sm);
	font-weight: 600;
	color: var(--pl-text-secondary);
}

.pl-input,
.pl-textarea,
.pl-select {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	background: #fff;
	border: 1px solid var(--pl-border-light);
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-body);
	transition: border-color var(--pl-dur-fast) var(--pl-ease), box-shadow var(--pl-dur-fast) var(--pl-ease);
}

.pl-input:focus,
.pl-textarea:focus,
.pl-select:focus {
	outline: none;
	border-color: var(--pl-primary-ink);
	box-shadow: 0 0 0 3px rgb(216 27 96 / 0.30);
}

.pl-input[aria-invalid="true"],
.pl-textarea[aria-invalid="true"] {
	border-color: var(--pl-sale);
	box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1);
}

.pl-textarea { min-height: 8rem; resize: vertical; }

.pl-error {
	font-size: var(--pl-fs-xs);
	font-weight: 600;
	color: var(--pl-sale);
}

.pl-form-status {
	padding: 0.75rem 1rem;
	border-radius: var(--pl-radius);
	font-size: var(--pl-fs-sm);
	font-weight: 600;
}

.pl-form-status--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pl-form-status--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---- scroll reveal (progressive enhancement) ---- */

.pl-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--pl-dur-slow) var(--pl-ease), transform var(--pl-dur-slow) var(--pl-ease);
	will-change: opacity, transform;
}

.pl-reveal.is-visible { opacity: 1; transform: none; }

/* No JS, or reduced motion: show everything immediately. */
.no-js .pl-reveal,
html:not(.js) .pl-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pl-reveal { opacity: 1; transform: none; transition: none; }
}