/*
 * Product collection design.
 *
 * Supports the `fashionxpart/product-collection-grid` section and the
 * `fashionxpart/product-card` / `fashionxpart/product-custom-line-cta` components.
 * Loaded on the front end only when WooCommerce is active, and in the editor
 * through add_editor_style() so the Site Editor preview matches.
 *
 * Colours come from theme.json presets (sand, stone, bronze, line, dark-gray).
 * Selectors are kept specific enough to win against the core layout rules
 * (`.is-layout-flow > *`, `.is-layout-flex`) without needing !important.
 */

/* Section eyebrow ------------------------------------------------------- */

.fxp-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	margin-inline-end: 0.65rem;
	vertical-align: 0.35em;
	background-color: var(--wp--preset--color--bronze);
}

/* Product grid ------------------------------------------------------------

   Four products on desktop, two on tablet, one on mobile.

   The design is a four column composition: four products on row one, then three
   products plus the "custom line" callout filling the empty fourth cell of row
   two. Each row is its own Query Loop spanning all four columns, so the two rows
   always share the same card width, and the callout is pinned into row two's
   last cell with the core Grid controls rather than overlapping a card.

   The column count is not set here. Each Post Template carries the core
   `@tablet` / `@mobile` layout overrides, so 4 / 2 / 1 is editable in the Site
   Editor and matches the responsive grids already used elsewhere on the site.

   All that is left is releasing the explicit placement on small screens, where
   the callout becomes a full width panel under the products instead of sitting
   in a fourth cell that no longer exists. */

.fxp-product-grid .wp-block-post-template > li {
	display: flex;
}

@media (max-width: 782px) {

	.fxp-product-grid > * {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}
}

/* Product card ---------------------------------------------------------- */

.fxp-product-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wp--preset--color--stone);
}

.fxp-product-card__media {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--stone);
}

.fxp-product-card__image {
	margin: 0;
}

.fxp-product-card__image img {
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {

	.fxp-product-card__image img {
		transition: transform 0.4s ease;
	}

	.fxp-product-card:hover .fxp-product-card__image img,
	.fxp-product-card:focus-within .fxp-product-card__image img {
		transform: scale(1.03);
	}
}

/* Category chip over the image. Position and truncation need CSS; the surface
   itself (background, border, padding, type) is set with core block controls. */
.wp-block-group.fxp-product-card__media > .fxp-product-card__badge {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.625rem;
	inset-inline-start: 0.625rem;
	width: fit-content;
	max-width: calc(100% - 1.25rem);
	margin: 0;
	color: var(--wp--preset--color--dark-gray);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The leading rule in the chip. */
.fxp-product-card__badge::before {
	content: "";
	display: inline-block;
	width: 0.6rem;
	height: 1px;
	margin-inline-end: 0.4rem;
	vertical-align: middle;
	background-color: currentColor;
}

.fxp-product-card__title {
	overflow-wrap: anywhere;
}

.fxp-product-card__rule {
	border-width: 0 0 1px;
}

/* Spec rows: label column + value column. */
.wp-block-group.fxp-product-card__row {
	align-items: baseline;
}

.fxp-product-card__label {
	flex: 0 0 3.4em;
	color: var(--wp--preset--color--dark-gray);
}

.fxp-product-card__value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--wp--preset--color--charcoal);
	overflow-wrap: anywhere;
}

/* Card action. */
.wp-block-buttons.fxp-product-card__actions {
	width: 100%;
}

.fxp-product-card__actions .wp-block-button {
	width: 100%;
}

.fxp-product-card__actions .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.6875rem 1rem;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
	font-size: 0.75rem;
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {

	.fxp-product-card__actions .wp-block-button__link {
		transition: background-color 0.2s ease, color 0.2s ease;
	}
}

.fxp-product-card__actions .wp-block-button__link:hover,
.fxp-product-card__actions .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--base);
}

/* Custom line callout ---------------------------------------------------- */

/* Border, background and padding come from core block controls so the callout
   can be restyled in the Site Editor. Only the type treatment lives here. */

.fxp-product-cta h3,
.fxp-product-cta p {
	overflow-wrap: anywhere;
}

.fxp-product-cta__actions .wp-block-button {
	width: 100%;
}

.fxp-product-cta__actions .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.8125rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
}

/* ==========================================================================
   Single product
   ========================================================================== */

.fxp-single__back {
	margin-bottom: var(--wp--preset--spacing--50);
}

.fxp-single__back .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	background-color: transparent;
	color: var(--wp--preset--color--dark-gray);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.fxp-single__back .wp-block-button__link:hover,
.fxp-single__back .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--black);
}

.fxp-single__media {
	overflow: hidden;
}

.fxp-single__image {
	margin: 0;
}

.fxp-single__badge {
	display: inline-block;
	margin: 0;
	padding: 0.3rem 0.6rem;
	background-color: var(--wp--preset--color--stone);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--dark-gray);
	line-height: 1.2;
}

.fxp-single__title {
	overflow-wrap: anywhere;
}

.fxp-single__description > p {
	margin-block: 0;
	color: var(--wp--preset--color--dark-gray);
}

.fxp-single__description > p + p {
	margin-block-start: 0.75rem;
}

/* Gallery thumbnails ----------------------------------------------------- */

.fxp-product-thumbs {
	display: grid;
	grid-template-columns: repeat(var(--fxp-thumb-columns, 4), minmax(0, 1fr));
	gap: 0.75rem;
}

.fxp-product-thumbs__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--stone);
	border: 1px solid transparent;
}

.fxp-product-thumbs__item.is-active {
	border-color: var(--wp--preset--color--black);
}

.fxp-product-thumbs__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fxp-product-thumbs__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-gray);
}

/* Specification table ---------------------------------------------------- */

.fxp-spec__table {
	width: 100%;
	background-color: var(--wp--preset--color--stone);
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: collapse;
}

.fxp-spec__table th,
.fxp-spec__table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.0625rem 1.5625rem;
	text-align: start;
	vertical-align: top;
}

.fxp-spec__table tr:last-child th,
.fxp-spec__table tr:last-child td {
	border-bottom: 0;
}

.fxp-spec__heading {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
}

.fxp-spec__heading + * {
	border-top: 0;
}

.fxp-spec__label {
	width: 30%;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-gray);
}

.fxp-spec__value {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--black);
	overflow-wrap: anywhere;
}

/* Actions ---------------------------------------------------------------- */

.fxp-single__actions .wp-block-button {
	flex: 1 1 0;
}

.fxp-single__actions .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
}