/**
 * Si Artes — component styles (Button, Card, Badge, Tag, Product, Forms, etc.)
 * Ported from Design System interactions + component conventions.
 */

/* ---- Buttons ---- */
.sa-btn,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sa-space-2);
	min-height: var(--sa-control-md);
	padding: 0 20px;
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-md);
	font-weight: var(--sa-fw-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	border-radius: var(--sa-radius-pill);
	border: var(--sa-border-width) solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition:
		background var(--sa-dur-fast) var(--sa-ease-out),
		color var(--sa-dur-fast) var(--sa-ease-out),
		border-color var(--sa-dur-fast) var(--sa-ease-out),
		transform var(--sa-dur-fast) var(--sa-ease-out),
		box-shadow var(--sa-dur-fast) var(--sa-ease-out);
	white-space: nowrap;
	box-sizing: border-box;
}

.sa-btn:disabled,
.sa-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.sa-btn--sm { min-height: var(--sa-control-sm); padding: 0 14px; font-size: var(--sa-text-sm); }
.sa-btn--md { min-height: var(--sa-control-md); padding: 0 20px; font-size: var(--sa-text-md); }
.sa-btn--lg,
.wp-block-button.is-style-sa-lg .wp-block-button__link {
	min-height: var(--sa-control-lg);
	padding: 0 28px;
	font-size: var(--sa-text-lg);
}

.sa-btn--primary,
.wp-block-button:not(.is-style-outline):not(.is-style-sa-secondary):not(.is-style-sa-ghost) .wp-block-button__link {
	background: var(--sa-brand);
	color: var(--sa-text-inverse) !important;
	box-shadow: var(--sa-shadow-brand);
}

.sa-btn--primary:hover:not(:disabled),
.wp-block-button:not(.is-style-outline):not(.is-style-sa-secondary):not(.is-style-sa-ghost) .wp-block-button__link:hover {
	background: var(--sa-brand-hover);
	color: var(--sa-text-inverse) !important;
}

.sa-btn--primary:active:not(:disabled) {
	background: var(--sa-brand-press);
	transform: translateY(1px);
}

.sa-btn--secondary,
.wp-block-button.is-style-sa-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--sa-surface-brand-soft);
	color: var(--sa-plum-800) !important;
	border-color: var(--sa-border-brand);
	box-shadow: none;
}

.sa-btn--secondary:hover:not(:disabled),
.wp-block-button.is-style-sa-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--sa-lilac-200);
	color: var(--sa-plum-800) !important;
}

.sa-btn--ghost,
.wp-block-button.is-style-sa-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sa-purple-600) !important;
	box-shadow: none;
}

.sa-btn--ghost:hover:not(:disabled),
.wp-block-button.is-style-sa-ghost .wp-block-button__link:hover {
	background: var(--sa-pink-100);
}

.sa-btn--link {
	background: transparent;
	color: var(--sa-text-link);
	min-height: auto;
	padding: 0;
	border-radius: 0;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	box-shadow: none;
}

.sa-btn--link:hover:not(:disabled) {
	color: var(--sa-text-link-hover);
}

.sa-btn:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--sa-focus-ring);
	outline-offset: 2px;
}

/* Icon button */
.sa-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: var(--sa-radius-pill);
	background: transparent;
	color: var(--sa-purple-600);
	cursor: pointer;
	transition:
		background var(--sa-dur-fast) var(--sa-ease-out),
		color var(--sa-dur-fast) var(--sa-ease-out),
		transform var(--sa-dur-fast) var(--sa-ease-out);
}

.sa-iconbtn:hover:not(:disabled) {
	background: var(--sa-pink-100);
	color: var(--sa-plum-800);
}

.sa-iconbtn:active:not(:disabled) {
	background: var(--sa-lilac-200);
	transform: translateY(1px);
}

.sa-iconbtn:focus-visible {
	outline: 3px solid var(--sa-focus-ring);
	outline-offset: 2px;
}

/* ---- Card ---- */
.sa-card {
	background: var(--sa-surface-card);
	border: var(--sa-border-width) solid var(--sa-border);
	border-radius: var(--sa-radius-lg);
	box-shadow: var(--sa-shadow-sm);
	overflow: hidden;
}

.sa-card--interactive {
	transition:
		box-shadow var(--sa-dur-med) var(--sa-ease-out),
		transform var(--sa-dur-med) var(--sa-ease-out);
}

.sa-card--interactive:hover {
	box-shadow: var(--sa-shadow-lg);
	transform: translateY(-3px);
}

/* ---- Badge ---- */
.sa-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--sa-radius-pill);
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	font-weight: var(--sa-fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sa-badge--brand.sa-badge--solid {
	background: var(--sa-purple-600);
	color: var(--sa-white);
}

.sa-badge--brand {
	background: var(--sa-pink-100);
	color: var(--sa-purple-600);
}

.sa-badge--soft {
	background: var(--sa-pink-100);
	color: var(--sa-plum-800);
}

/* ---- Tag / filter pill ---- */
.sa-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--sa-radius-pill);
	border: 1px solid var(--sa-border-strong);
	background: var(--sa-white);
	color: var(--sa-ink-soft);
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-sm);
	font-weight: var(--sa-fw-semibold);
	cursor: pointer;
	transition:
		background var(--sa-dur-fast) var(--sa-ease-out),
		border-color var(--sa-dur-fast) var(--sa-ease-out),
		color var(--sa-dur-fast) var(--sa-ease-out);
}

.sa-tag:hover {
	background: var(--sa-pink-100);
	border-color: var(--sa-border-brand);
}

.sa-tag.is-active,
.sa-tag[aria-pressed="true"] {
	background: var(--sa-purple-600);
	border-color: var(--sa-purple-600);
	color: var(--sa-white);
}

/* ---- Product card ---- */
.sa-product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sa-product__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sa-pink-100);
}

.sa-product__img,
.sa-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--sa-dur-slow) var(--sa-ease-out);
}

.sa-product:hover .sa-product__img,
.sa-product:hover .sa-product__media img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.04);
}

.sa-product__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 42%, var(--sa-white), var(--sa-lilac-200));
	color: var(--sa-orchid-300);
	font-family: var(--sa-font-serif);
	font-size: 40px;
}

.sa-product__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

.sa-product__body {
	padding: var(--sa-space-4) var(--sa-space-5) var(--sa-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--sa-space-1);
	flex: 1;
}

.sa-product__category {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	font-weight: var(--sa-fw-semibold);
	letter-spacing: var(--sa-ls-wide);
	text-transform: uppercase;
	color: var(--sa-magenta-400);
}

.sa-product__title {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: var(--sa-text-xl);
	font-weight: var(--sa-fw-medium);
	color: var(--sa-text-heading);
	line-height: var(--sa-lh-snug);
}

.sa-product__title a {
	color: inherit;
	text-decoration: none;
}

.sa-product__title a:hover {
	color: var(--sa-purple-600);
}

.sa-product__price {
	margin-top: var(--sa-space-2);
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-lg);
	font-weight: var(--sa-fw-bold);
	color: var(--sa-purple-600);
}

/* ---- Forms ---- */
.sa-field-group {
	display: flex;
	flex-direction: column;
	gap: var(--sa-space-2);
}

.sa-field-label,
.wp-block-post-comments-form label,
.woocommerce form .form-row label {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-sm);
	font-weight: var(--sa-fw-semibold);
	color: var(--sa-plum-800);
}

.sa-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.woocommerce form .input-text,
.woocommerce form select,
.wp-block-search__input {
	width: 100%;
	min-height: var(--sa-control-md);
	padding: 0 14px;
	font-family: var(--sa-font-body);
	font-size: var(--sa-text-md);
	color: var(--sa-text-body);
	background: var(--sa-white);
	border: var(--sa-border-width) solid var(--sa-border-strong);
	border-radius: var(--sa-radius-md);
	outline: none;
	box-sizing: border-box;
	transition:
		border-color var(--sa-dur-fast) var(--sa-ease-out),
		box-shadow var(--sa-dur-fast) var(--sa-ease-out);
}

textarea.sa-field,
textarea {
	min-height: 120px;
	padding: 12px 14px;
	resize: vertical;
	line-height: var(--sa-lh-relaxed);
}

.sa-field:focus,
input:focus,
select:focus,
textarea:focus,
.woocommerce form .input-text:focus,
.wp-block-search__input:focus {
	border-color: var(--sa-purple-500);
	box-shadow: 0 0 0 3px var(--sa-focus-ring);
}

.sa-field::placeholder,
input::placeholder,
textarea::placeholder {
	color: var(--sa-mute-500);
}

.sa-field-helper {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	color: var(--sa-text-muted);
}

.sa-field-error {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	color: var(--sa-danger);
}

/* Checkbox */
.sa-check {
	width: 18px;
	height: 18px;
	accent-color: var(--sa-purple-600);
	border-radius: 4px;
}

.sa-check:focus-visible {
	outline: 3px solid var(--sa-focus-ring);
	outline-offset: 2px;
}

/* ---- Section title ---- */
.sa-section-title {
	display: flex;
	flex-direction: column;
	gap: var(--sa-space-3);
}

.sa-section-title--center {
	align-items: center;
	text-align: center;
}

.sa-eyebrow {
	font-family: var(--sa-font-ui);
	font-size: var(--sa-text-xs);
	font-weight: var(--sa-fw-bold);
	letter-spacing: var(--sa-ls-caps);
	text-transform: uppercase;
	color: var(--sa-magenta-400);
	margin: 0;
}

.sa-section-title__heading {
	margin: 0;
	font-family: var(--sa-font-serif);
	font-size: clamp(1.75rem, 4vw, 2.875rem);
	font-weight: var(--sa-fw-medium);
	color: var(--sa-text-heading);
	line-height: var(--sa-lh-snug);
}

.sa-section-title__heading.is-script {
	font-family: var(--sa-font-display);
	/* Titulo is inherently italic — never add font-style: italic */
	font-style: normal;
	color: var(--sa-purple-600);
}

.sa-section-title__lead {
	margin: 0;
	max-width: 54ch;
	font-family: var(--sa-font-body);
	font-size: var(--sa-text-lg);
	line-height: var(--sa-lh-relaxed);
	color: var(--sa-ink-soft);
}

/* ---- Floral divider ---- */
.sa-floral-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	color: var(--sa-orchid-300);
}

.sa-floral-divider::before,
.sa-floral-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sa-orchid-300), transparent);
}

.sa-floral-divider__mark {
	font-family: var(--sa-font-serif);
	font-size: 18px;
	line-height: 1;
	opacity: 0.9;
	user-select: none;
}

.sa-floral-divider--plain::before,
.sa-floral-divider--plain::after {
	background: var(--sa-orchid-300);
	opacity: 0.45;
}

/* ---- Hero ---- */
.sa-hero {
	background: var(--sa-grad-wash);
}

.sa-hero__inner {
	max-width: var(--sa-width-content);
	margin: 0 auto;
	padding: var(--sa-space-20) var(--sa-space-10) calc(var(--sa-space-20) + 4px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.sa-hero__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-style: normal;
	font-size: clamp(2.75rem, 8vw, 5.25rem);
	line-height: 1.02;
	color: var(--sa-purple-600);
	font-weight: 400;
}

.sa-hero__text {
	margin: 0;
	max-width: 54ch;
	font-family: var(--sa-font-body);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.7;
	color: var(--sa-ink-soft);
}

.sa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 6px;
}

.sa-hero__divider {
	width: min(260px, 80%);
	margin-top: 16px;
}

/* ---- Stats ---- */
.sa-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.sa-stat__value {
	font-family: var(--sa-font-serif);
	font-size: 38px;
	font-weight: 600;
	color: var(--sa-purple-600);
	line-height: 1;
}

.sa-stat__label {
	font-family: var(--sa-font-ui);
	font-size: 13px;
	color: var(--sa-mute-700);
	margin-top: 4px;
}

/* ---- Empty state ---- */
.sa-empty {
	text-align: center;
	color: var(--sa-text-muted);
	font-family: var(--sa-font-body);
	padding: 40px 20px;
}

.sa-empty__mark {
	font-size: 34px;
	color: var(--sa-orchid-300);
	margin-bottom: 8px;
}