/**
 * Zestino designsystem – komponenter.
 * Knapper, kort, merker, skjemaer, hero og funksjonsrader.
 */

/* ============================================================
   1. Knapper
   ============================================================ */

.z-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-element-button {
	--btn-bg: var(--z-red);
	--btn-bg-hover: var(--z-red-hover);
	--btn-fg: var(--z-text-on-red);
	--btn-border: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--z-space-2xs);
	padding: 0.9375rem 2rem;
	min-height: 52px;
	border: 2px solid var(--btn-border);
	border-radius: var(--z-radius-xs);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--z-font-body);
	font-size: var(--z-fs-small);
	font-weight: var(--z-fw-bold);
	letter-spacing: var(--z-ls-label);
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition:
		background-color var(--z-dur) var(--z-ease),
		color var(--z-dur) var(--z-ease),
		border-color var(--z-dur) var(--z-ease),
		transform var(--z-dur-fast) var(--z-ease),
		box-shadow var(--z-dur) var(--z-ease);
}

.z-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--btn-bg-hover);
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: var(--z-shadow-red);
}

.z-btn:active {
	transform: translateY(0);
}

.z-btn[disabled],
.z-btn.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Varianter */
.z-btn--outline {
	--btn-bg: transparent;
	--btn-bg-hover: #fff;
	--btn-fg: #fff;
	--btn-border: #fff;
}

.z-btn--outline:hover {
	--btn-fg: var(--z-black);
	border-color: #fff;
}

.z-btn--outline-red {
	--btn-bg: transparent;
	--btn-bg-hover: var(--z-red);
	--btn-fg: var(--z-red);
	--btn-border: var(--z-red);
}

.z-btn--outline-red:hover {
	--btn-fg: #fff;
}

.z-btn--ghost {
	--btn-bg: transparent;
	--btn-bg-hover: rgba(255, 255, 255, 0.08);
	--btn-fg: var(--z-text);
	--btn-border: transparent;
	padding-inline: var(--z-space-sm);
}

.z-btn--ghost:hover {
	box-shadow: none;
}

.z-btn--sm {
	min-height: 42px;
	padding: 0.625rem 1.25rem;
	font-size: var(--z-fs-tiny);
}

.z-btn--lg {
	min-height: 60px;
	padding: 1.125rem 2.75rem;
	font-size: 1rem;
}

.z-btn--block {
	display: flex;
	width: 100%;
}

/* Elementor-kittet fargelegger alle lenker rødt med høyere spesifisitet enn
   .z-btn. Uten denne blokken blir knappetekst rød på rød bakgrunn. */
.z-theme a.z-btn,
.z-theme button.z-btn,
.z-theme a.z-btn:visited {
	color: var(--btn-fg);
	text-decoration: none;
}

.z-theme a.z-btn:hover,
.z-theme a.z-btn:focus,
.z-theme button.z-btn:hover,
.z-theme button.z-btn:focus {
	color: var(--btn-fg);
}

.z-theme a.z-btn--outline,
.z-theme a.z-btn--outline:visited {
	color: #fff;
}

.z-theme a.z-btn--outline:hover,
.z-theme a.z-btn--outline:focus {
	color: var(--z-black);
}

.z-theme a.z-link-arrow,
.z-theme a.z-link-arrow:visited {
	color: var(--z-red);
	text-decoration: none;
}

/* Pil som skyves ut ved hover. */
.z-btn__arrow {
	display: inline-block;
	transition: transform var(--z-dur) var(--z-ease);
}

.z-btn:hover .z-btn__arrow {
	transform: translateX(4px);
}

/* Lenke som ser ut som en lenke, men oppfører seg som CTA. */
.z-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--z-space-2xs);
	font-size: var(--z-fs-small);
	font-weight: var(--z-fw-bold);
	letter-spacing: var(--z-ls-nav);
	text-transform: uppercase;
	color: var(--z-red);
}

.z-link-arrow:hover .z-btn__arrow {
	transform: translateX(4px);
}

/* ============================================================
   2. Merker / badges
   ============================================================ */

.z-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.625rem;
	border-radius: var(--z-radius-xs);
	background: var(--z-surface-3);
	color: var(--z-text);
	font-size: var(--z-fs-tiny);
	font-weight: var(--z-fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.z-badge--red {
	background: var(--z-red);
	color: #fff;
}

.z-badge--outline {
	background: transparent;
	border: 1px solid var(--z-line);
	color: var(--z-text-muted);
}

.z-badge--no {
	background: rgba(34, 197, 94, 0.14);
	color: var(--z-stock-no);
}

.z-badge--eu {
	background: rgba(245, 158, 11, 0.14);
	color: var(--z-stock-eu);
}

.z-badge--out {
	background: rgba(255, 255, 255, 0.06);
	color: var(--z-stock-out);
}

.z-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ============================================================
   3. Kort
   ============================================================ */

.z-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--z-surface);
	border: var(--z-border);
	border-radius: var(--z-radius-sm);
	overflow: hidden;
	transition:
		border-color var(--z-dur) var(--z-ease),
		transform var(--z-dur) var(--z-ease),
		box-shadow var(--z-dur) var(--z-ease);
}

.z-card:hover {
	border-color: var(--z-red);
	transform: translateY(-4px);
	box-shadow: var(--z-shadow-md);
}

.z-card__body {
	padding: var(--z-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--z-space-2xs);
	flex: 1;
}

.z-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--z-surface-2);
	overflow: hidden;
}

.z-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--z-dur-slow) var(--z-ease);
}

.z-card:hover .z-card__media img {
	transform: scale(1.05);
}

/* ============================================================
   4. Funksjonsrad (de 8 Total Care-fordelene)
   ============================================================ */

/* Fire per rad – åtte fordeler blir to jevne rader. */
.z-features {
	background: var(--z-surface);
	border: var(--z-border);
	border-radius: var(--z-radius-sm);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
}

@media (max-width: 900px) {
	.z-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.z-features {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fjern kantlinjene som ellers henger igjen ytterst i rutenettet. */
.z-features > .z-feature:nth-child(4n) {
	border-right: 0;
}

@media (max-width: 900px) {
	.z-features > .z-feature:nth-child(4n) {
		border-right: var(--z-border);
	}

	.z-features > .z-feature:nth-child(2n) {
		border-right: 0;
	}
}

@media (max-width: 460px) {
	.z-features > .z-feature {
		border-right: 0;
	}
}

.z-feature {
	position: relative;
	padding: var(--z-space-lg) var(--z-space-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--z-space-2xs);
	border-right: var(--z-border);
	border-bottom: var(--z-border);
}

.z-feature__icon {
	width: 56px;
	height: 56px;
	margin-bottom: var(--z-space-2xs);
	color: var(--z-text);
}

.z-feature__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

.z-feature__title {
	font-family: var(--z-font-display);
	font-size: 1.0625rem;
	font-weight: var(--z-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0;
}

.z-feature__num {
	color: var(--z-red);
	margin-right: 0.25em;
}

.z-feature__text {
	font-size: var(--z-fs-small);
	color: var(--z-text-muted);
	line-height: 1.45;
	margin: 0;
}

/* ============================================================
   5. Hero
   ============================================================ */

.z-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 82vh, 860px);
	padding-block: var(--z-space-3xl) var(--z-space-2xl);
	background: var(--z-black);
	overflow: hidden;
	isolation: isolate;
}

.z-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.z-hero__media img,
.z-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.z-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.25) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 40%);
}

.z-hero__inner {
	position: relative;
	max-width: 46rem;
}

.z-hero__title {
	margin-bottom: var(--z-space-sm);
}

.z-hero__tagline {
	font-family: var(--z-font-display);
	font-size: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
	font-weight: var(--z-fw-bold);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-bottom: var(--z-space-md);
}

.z-hero__text {
	max-width: 34rem;
	margin-bottom: var(--z-space-lg);
	color: var(--z-text-muted);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
}

.z-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--z-space-sm);
}

/* Sirkelstempelet oppe til høyre («Protected by Zestino Total Care»). */
.z-hero__stamp {
	position: absolute;
	top: clamp(1rem, 6vh, 4rem);
	right: var(--z-gutter);
	width: clamp(120px, 16vw, 220px);
	z-index: 2;
	animation: z-stamp-spin 40s linear infinite;
}

@keyframes z-stamp-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 780px) {
	.z-hero__stamp {
		display: none;
	}
}

/* ============================================================
   6. Skjemaer
   ============================================================ */

.z-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: var(--z-space-sm);
}

.z-label,
.woocommerce form .form-row label,
.z-field > label {
	font-size: var(--z-fs-tiny);
	font-weight: var(--z-fw-bold);
	letter-spacing: var(--z-ls-label);
	text-transform: uppercase;
	color: var(--z-text-muted);
}

.z-required,
.woocommerce form .form-row .required {
	color: var(--z-red);
	text-decoration: none;
	border: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select,
.z-input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	width: 100%;
	min-height: 52px;
	padding: 0.8125rem 1rem;
	background: var(--z-surface-3);
	border: 1px solid var(--z-line);
	border-radius: var(--z-radius-xs);
	color: var(--z-text);
	font-family: var(--z-font-body);
	font-size: 1rem;
	line-height: 1.4;
	transition:
		border-color var(--z-dur-fast) var(--z-ease),
		background-color var(--z-dur-fast) var(--z-ease);
	appearance: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--z-text-dim);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--z-red);
	background: var(--z-surface-2);
	outline: none;
	box-shadow: 0 0 0 3px rgba(226, 14, 23, 0.18);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b6b6bf' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Avkryssing og radio. */
.z-check {
	display: flex;
	align-items: flex-start;
	gap: var(--z-space-2xs);
	cursor: pointer;
	font-size: var(--z-fs-small);
	color: var(--z-text-muted);
}

input[type="checkbox"],
input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	background: var(--z-surface-3);
	border: 1px solid var(--z-line);
	border-radius: var(--z-radius-xs);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--z-dur-fast) var(--z-ease);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--z-red);
	border-color: var(--z-red);
}

input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.5 5 10.5 13 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
}

input[type="radio"]:checked {
	box-shadow: inset 0 0 0 4px var(--z-surface-3);
}

/* ============================================================
   7. Varsler
   ============================================================ */

.z-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--z-space-2xs);
	padding: var(--z-space-sm) var(--z-space-md);
	border-left: 3px solid var(--z-red);
	border-radius: var(--z-radius-xs);
	background: var(--z-surface-2);
	font-size: var(--z-fs-small);
	margin-bottom: var(--z-space-sm);
}

.z-notice--success {
	border-left-color: var(--z-success);
}

.z-notice--warning {
	border-left-color: var(--z-warning);
}

.z-notice--info {
	border-left-color: var(--z-info);
}

/* ============================================================
   8. Trekkspill (FAQ)
   ============================================================ */

.z-accordion {
	border-top: var(--z-border);
}

.z-accordion__item {
	border-bottom: var(--z-border);
}

.z-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--z-space-sm);
	width: 100%;
	padding: var(--z-space-md) 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--z-font-display);
	font-size: var(--z-fs-h4);
	font-weight: var(--z-fw-bold);
	text-transform: uppercase;
	color: var(--z-text);
	transition: color var(--z-dur-fast) var(--z-ease);
}

.z-accordion__trigger:hover,
.z-accordion__trigger[aria-expanded="true"] {
	color: var(--z-red);
}

.z-accordion__icon {
	flex: none;
	width: 20px;
	height: 20px;
	position: relative;
}

.z-accordion__icon::before,
.z-accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: currentColor;
	transition: transform var(--z-dur) var(--z-ease);
}

.z-accordion__icon::after {
	transform: rotate(90deg);
}

.z-accordion__trigger[aria-expanded="true"] .z-accordion__icon::after {
	transform: rotate(0deg);
}

.z-accordion__panel {
	overflow: hidden;
	color: var(--z-text-muted);
}

.z-accordion__panel[hidden] {
	display: none;
}

.z-accordion__panel > div {
	padding-bottom: var(--z-space-md);
	max-width: 70ch;
}

/* ============================================================
   9. Brødsmuler
   ============================================================ */

.z-breadcrumbs {
	padding-block: var(--z-space-sm);
	font-size: var(--z-fs-tiny);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--z-text-dim);
	border-bottom: var(--z-border-soft);
}

.z-breadcrumbs a {
	color: var(--z-text-muted);
}

.z-breadcrumbs a:hover {
	color: var(--z-red);
}

.z-breadcrumbs .separator {
	margin-inline: 0.5em;
	color: var(--z-line);
}

/* ============================================================
   10. Paginering
   ============================================================ */

.z-pagination {
	display: flex;
	justify-content: center;
	gap: var(--z-space-3xs);
	margin-top: var(--z-space-xl);
	list-style: none;
	padding: 0;
}

.z-pagination a,
.z-pagination span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding-inline: 0.75rem;
	background: var(--z-surface);
	border: var(--z-border);
	border-radius: var(--z-radius-xs);
	font-weight: var(--z-fw-bold);
	color: var(--z-text-muted);
	transition: all var(--z-dur-fast) var(--z-ease);
}

.z-pagination a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--z-red);
	color: #fff;
}

.z-pagination .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--z-red);
	border-color: var(--z-red);
	color: #fff;
}