/* Cedra component styles.
   Logical properties throughout — see docs/website-v3/17_INTERNATIONALIZATION.md.
   A system built on physical properties needs a second stylesheet per RTL locale
   and will drift. Do not introduce margin-left / padding-right here. */

.cedra-chips .wp-block-button__link {
	border-radius: 20px;
	padding-block: 0.5rem;
	padding-inline: 0.875rem;
	font-size: var(--wp--preset--font-size--small);
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}

.cedra-chips.wp-block-buttons {
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Product cards: fixed aspect ratio prevents layout shift. AC-2.3 */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	inline-size: 100%;
	border-radius: 8px;
}

.wp-block-post-title a,
.wc-block-components-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cedra-memory-steps {
	gap: 0.5rem;
}

/* Every interactive target meets the 44px minimum. AC-1.6 */
a,
button,
.wp-block-button__link {
	min-block-size: 44px;
}

.wp-block-navigation a {
	min-block-size: auto;
	padding-block: 0.5rem;
}

/* Visible focus. AC-2.5 */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--cedra-onyx);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media (min-width: 600px) {
	.cedra-memory-steps {
		gap: 1rem;
	}
}