/**
 * gp/product-card
 *
 * Every value references a theme.json token. No literal colours here — the
 * palette is the theme's to change.
 */

/* Card geometry is the live site's: a 1px 20%-opacity rule, a 10px radius,
   12px of padding and a 6px rhythm between rows. */
.gp-product-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	/* Stated because the card now has padding and fills its grid item: without
	   it the padding is added to the 100% and the card overflows the row,
	   which the rail then clips top and bottom. */
	box-sizing: border-box;
	/* Fill the track. Left at auto the card is sized by its content, and a
	   product that renders no price — an external type — collapses to ~46px. */
	flex: 1 1 auto;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 12px;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(4, 4, 4, 0.2);
	border-radius: 10px;
	transition: box-shadow 150ms ease;
}

/* Measured off the live card: hovering raises a two-tint shadow and changes
   nothing else. The lift we had moved the row under the pointer, and the
   preset shadow it used resolves to a single soft tint, not live's pair. */
.gp-product-card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.gp-product-card { transition: none; }
}

.gp-product-card.is-out-of-stock .gp-product-card__image { opacity: 0.55; }

/* Book covers are portrait. Fixing the ratio here keeps the grid even no
   matter what the source images are, and reserves the space so the row does
   not shift when images load.

   Grid rather than block: the image is stretched by grid placement instead of
   height:100%. A percentage height on a replaced element inside an
   aspect-ratio box does not resolve reliably — the image keeps its own
   intrinsic ratio and letterboxes against the box's background. */
.gp-product-card__media {
	position: relative;
	display: grid;
	grid-template: 1fr / 1fr;
	/* Bleed out through the card padding, which is what the live card does:
	   the tinted panel runs to the card edge and only the cover inside it is
	   inset. The radius rounds the two corners the card no longer clips. */
	margin: -12px -12px 0;
	border-radius: 9px 9px 0 0;
	padding: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-muted);
}

/* The ratio is set on the image itself, not left to a percentage height.
   WordPress emits width/height attributes, which give the img an intrinsic
   aspect-ratio (here 300/300); against that, `height: 100%` inside an
   aspect-ratio box resolves to the intrinsic height and the image letterboxes.
   Stating the display ratio makes width:100% produce the right height
   directly, with no percentage resolution involved. */
.gp-product-card__media > .gp-product-card__image {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.gp-product-card__badges {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.gp-product-card__badge {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	padding: 5px 10px;
	border-radius: 9990px;
	color: var(--wp--preset--color--surface);
}

.gp-product-card__badge--sale { background: var(--wp--preset--color--sale-red); }
.gp-product-card__badge--new  { background: var(--wp--preset--color--brand-green); }

.gp-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	/* Whether both buy labels fit is a question about the card's width, not
	   the viewport's: the same card is 200px wide in a mobile rail and 250px
	   in a desktop one. Containment sits here rather than on the card itself,
	   where containing the inline size also contains the layout and collapses
	   the rail's stretch chain — and here the buy row is a descendant, so the
	   query can change its columns too. */
	container-type: inline-size;
}

/* Bengali book titles run long. Two lines, clamped, so the grid stays even. */
.gp-product-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gp-product-card__title a {
	color: var(--wp--preset--color--ink-heading);
	text-decoration: none;
}

/* Live's title does not react to the pointer at all — not a colour, not a
   rule. The card's shadow is the whole hover. Stated rather than left out,
   because theme.json underlines every link on hover. */
.gp-product-card__title a:hover {
	color: var(--wp--preset--color--ink-heading);
	text-decoration: none;
}

.gp-product-card__publisher {
	display: block;
	font-size: 13.6px;
	color: var(--wp--preset--color--ink);
	/* Live's vendor line carries a dotted rule at rest at 70% — the underline
	   is not something the pointer brings, and hovering changes nothing. */
	opacity: 0.7;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gp-product-card__publisher:hover { text-decoration: underline dotted; }

.gp-product-card__author {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Rating and stock share one line, as on the live card. */
.gp-product-card__meta {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.gp-product-card__stock {
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}

.gp-product-card__stock--in { color: #3ed660; }
.gp-product-card__stock--out { color: var(--wp--preset--color--sale-red); }

.gp-product-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--sm);
}

.gp-star {
	inline-size: 16px;
	block-size: 16px;
	background: currentColor;
	color: var(--wp--preset--color--ink);
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}

.gp-product-card__rating-value { color: var(--wp--preset--color--ink); }

.gp-product-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--wp--preset--font-size--base);
}

.gp-product-card__price-sale {
	font-weight: 600;
	color: var(--wp--preset--color--brand-green);
}

.gp-product-card__price-regular {
	font-size: 14.4px;
	color: var(--wp--preset--color--ink);
	text-decoration: line-through;
}

/* WooCommerce wraps prices in <bdi>; keep its own del/ins neutral so the
   card's own sale styling is the only thing speaking. */
.gp-product-card__price del,
.gp-product-card__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Pins the buy controls to the bottom so every card in a row lines up. */
.gp-product-card__buy-row {
	margin-block-start: auto;
	padding-block-start: 6px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

.gp-product-card__buy,
.gp-product-card__buy-now { margin: 0; min-inline-size: 0; }

.gp-product-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	inline-size: 100%;
	/* The button is sometimes the grid item itself and sometimes wrapped in a
	   form; either way its padding has to come out of the 100%, not be added
	   to it, or the pair overflows the card. */
	box-sizing: border-box;
	min-inline-size: 0;
	min-block-size: 38px;
	text-align: center;
	padding: 6px 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

/* Both buttons carry the same 2px green rule on the live site; only the fill
   tells them apart. */
.gp-product-card__button--secondary {
	border: 2px solid var(--wp--preset--color--brand-green);
	background: var(--wp--preset--color--surface);
	/* Live's outline button reads #002c22, a shade deeper than body ink. */
	color: var(--wp--preset--color--brand-deep);
}

/* Live's outline button goes to ink under the pointer and lifts its label to
   the card wash: #121212 ground, #e3f0e9 label, black rule. Measured on the
   live button, and it matches the theme's own
   --color-secondary-button-hover-* trio exactly. */
.gp-product-card__button--secondary:hover {
	background: #121212;
	color: #e3f0e9;
	border-color: #000;
}

.gp-product-card__button-icon {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>') center / contain no-repeat;
}

.gp-product-card__button--primary {
	border: 2px solid var(--wp--preset--color--brand-green);
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
}

/* Live's solid button drops from the green to near-black: #040404 ground,
   white label, #121212 rule — the theme's --color-primary-button-hover-*
   trio. */
.gp-product-card__button--primary:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	border-color: #121212;
}


/* Out of stock the pair goes inert rather than disappearing, as on the live
   card — the row keeps its shape either way. */
.gp-product-card__button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Live's keyboard ring is a doubled shadow, not an outline: a band of page
   ground first so the ring never touches the button, then the ink line. */
.gp-product-card__button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--wp--preset--color--surface),
		0 0 0 4px var(--wp--preset--color--ink);
}

.gp-product-card__button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- wishlist ---------- */

/* Sits in the media's top-right corner, as on the live card. The card is the
   positioning context rather than the media, so the button stays clear of the
   media's inset padding. */
.gp-wishlist-button {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.gp-product-card { position: relative; }

/* Live's wishlist control fills with the brand green under the pointer. */
.gp-wishlist-button:hover {
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
}

/* The media link is a picture, not prose: theme.json's blanket underline on
   link hover would otherwise draw a rule under the whole tile. */
.gp-product-card__media:hover { text-decoration: none; }

.gp-wishlist-button__icon {
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center / contain no-repeat;
}

/* Once listed the heart fills, which is the only state change the live card
   makes. */
.gp-wishlist-button[aria-pressed="true"] {
	color: var(--wp--preset--color--sale-red);
}

.gp-wishlist-button[aria-pressed="true"] .gp-wishlist-button__icon {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

.gp-wishlist-button[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* The live card shows the basket and the words together from 750px up, and
   the basket alone below that. This block hid the glyph on desktop, measured
   from a stale reading of the live card; live prints an 18.56px basket beside
   "Add to cart" at every desktop width.

   The row is flex rather than two equal columns for the same reason: live
   lets "Add to cart" take what is left after "Buy now" has its own width. */
.gp-product-card__buy-row {
	display: flex;
}

.gp-product-card__buy { flex: 1 1 auto; }
.gp-product-card__buy-now { flex: 0 1 auto; }

.gp-product-card__button-icon {
	inline-size: 18.56px;
	block-size: 18.56px;
}

@media (max-width: 749px) {
	.gp-product-card__button--secondary { padding-inline: 10px; }

	/* Below 750 the basket stands in for the words. */
	.gp-product-card__button--secondary > span:not(.gp-product-card__button-icon) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}