/**
 * PS Design System — components (gated: body.ps-ds).
 * One button system, one card language, plate-sequence step chips,
 * quiet accordions, focused forms.
 */

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

.ps-ds .haru-button {
	border-radius: var(--ps-r-pill);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition-property: transform, box-shadow, background-color, color, border-color;
	transition-duration: 0.18s;
	transition-timing-function: var(--ps-ease);
}

.ps-ds .haru-button:active {
	transform: scale(0.96);
}

/* A button label never wraps — a two-line button is a defect at any width;
   the button may grow instead on small screens. */
.ps-ds .haru-button,
.ps-ds .elementor-button,
.ps-ds a.button,
.ps-ds button.button,
.ps-ds .wpcf7-submit {
	white-space: nowrap;
}

/* Primary (the theme's default cyan) — unify on process cyan. */
.ps-ds .haru-button:not(.haru-button--bg-black):not(.haru-button--bg-white):not(.haru-button--text-black):not(.haru-button--outline) {
	background-color: var(--ps-cyan);
	color: #fff;
}

.ps-ds .haru-button:not(.haru-button--bg-black):not(.haru-button--bg-white):not(.haru-button--text-black):not(.haru-button--outline):hover {
	background-color: var(--ps-cyan-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--ps-shadow-btn);
}

/* Ink secondary. */
.ps-ds .haru-button--bg-black {
	background-color: var(--ps-ink);
	color: #fff;
}

.ps-ds .haru-button--bg-black:hover {
	background-color: var(--ps-ink-soft);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -12px rgba(var(--ps-ink-rgb), 0.5);
}

/* Paper button (on cards). */
.ps-ds .haru-button--bg-white {
	background-color: var(--ps-surface);
	color: var(--ps-heading);
	box-shadow: 0 0 0 1px var(--ps-line-strong);
}

.ps-ds .haru-button--bg-white:hover {
	color: var(--ps-cyan-deep);
	box-shadow: 0 0 0 1px var(--ps-cyan), 0 10px 22px -12px rgba(var(--ps-cyan-rgb), 0.35);
	transform: translateY(-1px);
}

/* Text buttons ("Shop now", step links, See all). */
.ps-ds .haru-button--text-black {
	color: var(--ps-heading);
}

.ps-ds .haru-button--text-black:hover {
	color: var(--ps-cyan-deep);
}

/* Arrow icons nudge with intent. */
.ps-ds .haru-button .haru-icon,
.ps-ds .haru-button svg,
.ps-ds .haru-button i {
	transition: transform 0.18s var(--ps-ease);
}

.ps-ds .haru-button:hover .haru-icon,
.ps-ds .haru-button:hover svg,
.ps-ds .haru-button:hover i {
	transform: translateX(3px);
}

/* ---- cards (banners) ------------------------------------------------ */

.ps-ds .haru-banner--style-5,
.ps-ds .haru-banner--style-8,
.ps-ds .haru-banner--style-12 {
	background-color: var(--ps-surface);
	border-radius: var(--ps-r-lg);
	box-shadow: var(--ps-shadow-card);
	transition-property: transform, box-shadow;
	transition-duration: 0.25s;
	transition-timing-function: var(--ps-ease);
	overflow: hidden;
}

.ps-ds .haru-banner--style-5:hover,
.ps-ds .haru-banner--style-8:hover,
.ps-ds .haru-banner--style-12:hover {
	transform: translateY(-4px);
	box-shadow: var(--ps-shadow-card-hover);
}

.ps-ds .haru-banner__image img {
	border-radius: calc(var(--ps-r-lg) - 6px);
	outline: 1px solid rgba(0, 0, 0, 0.06);
	outline-offset: -1px;
}

.ps-ds .haru-banner__sub-title {
	color: var(--ps-cyan-deep);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.ps-ds .haru-banner__description {
	color: var(--ps-text);
}

/* ---- steps: the plate sequence C → M → Y ---------------------------- */

.ps-ds .haru-steps__sub-title-content {
	background-color: var(--ps-cyan) !important;
	color: #fff !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 6px 16px -8px rgba(var(--ps-cyan-rgb), 0.6);
}

.ps-ds .haru-steps__item:nth-child(2) .haru-steps__sub-title-content {
	background-color: var(--ps-magenta) !important;
	box-shadow: 0 6px 16px -8px rgba(var(--ps-magenta-rgb), 0.55);
}

.ps-ds .haru-steps__item:nth-child(3) .haru-steps__sub-title-content {
	background-color: var(--ps-yellow) !important;
	color: var(--ps-ink) !important;
	box-shadow: 0 6px 16px -8px rgba(var(--ps-yellow-rgb), 0.65);
}

.ps-ds .haru-steps__title {
	color: var(--ps-heading);
}

.ps-ds .haru-steps__description {
	color: var(--ps-text);
}

/* ---- icon boxes ------------------------------------------------------ */

.ps-ds .haru-icon-box__icon {
	transition: transform 0.2s var(--ps-ease);
}

.ps-ds .haru-icon-box:hover .haru-icon-box__icon {
	transform: translateY(-2px);
}

.ps-ds .haru-icon-box__content h6,
.ps-ds .haru-icon-box__content .haru-icon-box__title {
	color: var(--ps-heading);
}

.ps-ds .haru-icon-box__content p {
	color: var(--ps-text);
}

/* ---- accordion ------------------------------------------------------- */

.ps-ds .haru-accordion-item {
	border-color: var(--ps-line);
}

.ps-ds .haru-accordion-item .haru-accordion-title {
	color: var(--ps-heading);
	transition: color 0.15s var(--ps-ease);
}

.ps-ds .haru-accordion-item .haru-accordion-title:hover,
.ps-ds .haru-accordion-item.active .haru-accordion-title {
	color: var(--ps-cyan-deep);
}

.ps-ds .haru-accordion-item.active {
	border-color: var(--ps-cyan);
}

.ps-ds .haru-accordion-content,
.ps-ds .haru-accordion-content p {
	color: var(--ps-text);
}

/* ---- forms (CF7 + theme) --------------------------------------------- */

.ps-ds .wpcf7 input[type="text"],
.ps-ds .wpcf7 input[type="email"],
.ps-ds .wpcf7 input[type="tel"],
.ps-ds .wpcf7 input[type="number"],
.ps-ds .wpcf7 select,
.ps-ds .wpcf7 textarea,
.ps-ds input.haru-input,
.ps-ds .comment-form input[type="text"],
.ps-ds .comment-form input[type="email"],
.ps-ds .comment-form textarea {
	background-color: var(--ps-surface);
	border: 1px solid var(--ps-line-strong);
	border-radius: 12px;
	color: var(--ps-heading);
	transition-property: border-color, box-shadow;
	transition-duration: 0.15s;
	transition-timing-function: var(--ps-ease);
}

.ps-ds .wpcf7 input:focus,
.ps-ds .wpcf7 select:focus,
.ps-ds .wpcf7 textarea:focus,
.ps-ds .comment-form input:focus,
.ps-ds .comment-form textarea:focus {
	border-color: var(--ps-cyan);
	box-shadow: 0 0 0 3px rgba(var(--ps-cyan-rgb), 0.15);
	outline: none;
}

.ps-ds .wpcf7 input::placeholder,
.ps-ds .wpcf7 textarea::placeholder {
	color: var(--ps-text-soft);
}

.ps-ds .wpcf7-submit {
	background-color: var(--ps-cyan);
	color: #fff;
	border: 0;
	border-radius: var(--ps-r-pill);
	font-weight: 600;
	transition-property: transform, box-shadow, background-color;
	transition-duration: 0.18s;
	transition-timing-function: var(--ps-ease);
}

.ps-ds .wpcf7-submit:hover {
	background-color: var(--ps-cyan-deep);
	transform: translateY(-1px);
	box-shadow: var(--ps-shadow-btn);
}

.ps-ds .wpcf7-submit:active {
	transform: scale(0.96);
}

/* ---- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ps-ds .haru-button,
	.ps-ds .haru-banner--style-5,
	.ps-ds .haru-banner--style-8,
	.ps-ds .haru-banner--style-12,
	.ps-ds .haru-icon-box__icon,
	.ps-ds .haru-button .haru-icon,
	.ps-ds .haru-button svg,
	.ps-ds .haru-button i {
		transition: none;
	}

	.ps-ds .haru-button:hover,
	.ps-ds .haru-banner--style-5:hover,
	.ps-ds .haru-banner--style-8:hover,
	.ps-ds .haru-banner--style-12:hover {
		transform: none;
	}
}