/* ====================================================================
 * product-card.css — DET kanoniske produktkort-stylesheetet.
 *
 * Eier ALLE .ec-prod-card*-regler (spec: shop-catalog-enterprise-spec §1.4).
 * Enqueues på alle overflater som kan rendre kort (forside, shop/kategori/
 * merke-arkiv, søk, PDP related/sist-sett) via inc/enqueue.php.
 *
 * Flyttet hit fra:
 *   - home-shop.css (basen — tidligere KUN lastet på forsiden → root cause
 *     for "polert forside, ustylede arkiver")
 *   - category-shop.css (list-variant + skeleton + mobile-tweaks)
 *
 * Avhenger av tokens-base/tokens-shop (CSS-variabler) og shop.css
 * (.ec-btn / .ec-badge / .ec-prod-card-compare / .ec-shop-wish-btn).
 * Grid-CONTAINERNE (.ec-shop-prod-grid / .ec-shop-catalog-grid) eies
 * fortsatt av sine surface-stylesheets — dette arket eier kortet.
 * ==================================================================== */

/* ----- Kort-chrome ----- */
.ec-prod-card {
	background: #FFFFFF;
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
	display: flex;
	flex-direction: column;
}
.ec-prod-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
	border-color: var(--shop-navy, #1E3A5F);
}
.ec-prod-card:hover .ec-prod-card-img-wrap img {
	transform: scale(1.03);
}

/* ----- Bilde: fast 1:1-boks, object-fit contain, subtil bakgrunn ----- */
.ec-prod-card-link { text-decoration: none; color: inherit; display: block; }
.ec-prod-card-img-wrap {
	aspect-ratio: 1 / 1;
	background: var(--shop-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.ec-prod-card-img-wrap img,
.ec-prod-card-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .25s ease;
}
.ec-prod-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

/* ----- Body ----- */
.ec-prod-card-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

/* Brand-rad — kollapser når produktet mangler merke (ingen tom slot). */
.ec-prod-card-brand {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ec-mute);
	font-weight: 600;
	line-height: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ec-prod-card-brand a {
	color: inherit;
	text-decoration: none;
}
.ec-prod-card-brand a:hover {
	color: var(--shop-navy, #1E3A5F);
	text-decoration: underline;
}

/* Tittel — 2-linjers clamp med reservert høyde (uniform grid-rytme). */
.ec-prod-card-name {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ec-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em; /* fast plass uansett om tittel er 1 eller 2 linjer */
}
.ec-prod-card-name a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Rating — rendres KUN når produktet faktisk har anmeldelser. */
.ec-prod-card-rating {
	height: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0;
}
.ec-prod-card-stars {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 14'><g fill='%23D1D5DB'><polygon points='7,0 8.6,4.8 13.7,4.8 9.6,7.8 11.2,12.6 7,9.6 2.8,12.6 4.4,7.8 0.3,4.8 5.4,4.8'/><polygon points='21,0 22.6,4.8 27.7,4.8 23.6,7.8 25.2,12.6 21,9.6 16.8,12.6 18.4,7.8 14.3,4.8 19.4,4.8'/><polygon points='35,0 36.6,4.8 41.7,4.8 37.6,7.8 39.2,12.6 35,9.6 30.8,12.6 32.4,7.8 28.3,4.8 33.4,4.8'/><polygon points='49,0 50.6,4.8 55.7,4.8 51.6,7.8 53.2,12.6 49,9.6 44.8,12.6 46.4,7.8 42.3,4.8 47.4,4.8'/><polygon points='63,0 64.6,4.8 69.7,4.8 65.6,7.8 67.2,12.6 63,9.6 58.8,12.6 60.4,7.8 56.3,4.8 61.4,4.8'/></g></svg>");
	background-repeat: no-repeat;
}
.ec-prod-card-stars-fill {
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 14'><g fill='%23F59E0B'><polygon points='7,0 8.6,4.8 13.7,4.8 9.6,7.8 11.2,12.6 7,9.6 2.8,12.6 4.4,7.8 0.3,4.8 5.4,4.8'/><polygon points='21,0 22.6,4.8 27.7,4.8 23.6,7.8 25.2,12.6 21,9.6 16.8,12.6 18.4,7.8 14.3,4.8 19.4,4.8'/><polygon points='35,0 36.6,4.8 41.7,4.8 37.6,7.8 39.2,12.6 35,9.6 30.8,12.6 32.4,7.8 28.3,4.8 33.4,4.8'/><polygon points='49,0 50.6,4.8 55.7,4.8 51.6,7.8 53.2,12.6 49,9.6 44.8,12.6 46.4,7.8 42.3,4.8 47.4,4.8'/><polygon points='63,0 64.6,4.8 69.7,4.8 65.6,7.8 67.2,12.6 63,9.6 58.8,12.6 60.4,7.8 56.3,4.8 61.4,4.8'/></g></svg>");
	background-repeat: no-repeat;
}
.ec-prod-card-rating-count { font-size: 11.5px; color: var(--ec-mute); }

/* SKU — dempet monolinje. Rendres kun når SKU finnes. */
.ec-prod-card-meta {
	font-size: 11px;
	color: var(--ec-mute);
	font-family: var(--font-mono);
	line-height: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Key specs — maks 3 linjer; raden skjules helt (ikke reservert-tom)
   når produktet mangler spec-data. Kort-justering håndteres av
   margin-top:auto på CTA-raden. */
.ec-prod-card-specs {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 3px;
}
.ec-prod-card-spec {
	display: flex; align-items: baseline; gap: 8px;
	font-size: 11.5px; line-height: 1.3;
	color: var(--ec-ink, #0F172A);
}
.ec-prod-card-spec-label {
	flex-shrink: 0;
	min-width: 48px;
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ec-mute, #64748B);
}
.ec-prod-card-spec-text {
	font-weight: 600;
	color: var(--ec-ink, #0F172A);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----- Pris / gating-rad -----
   Flex-column så primær-pris + tax-note stables stabilt. Fast min-height
   som rommer primær + sekundær på alle kort. */
.ec-prod-card-price {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 18px;
	color: var(--ec-ink);
	min-height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	line-height: 1.2;
}
.ec-prod-card-price > .woocommerce-Price-amount,
.ec-prod-card-price > ins,
.ec-prod-card-price > del,
.ec-prod-card-price > bdi { font-size: inherit; }
.ec-prod-card-price .ec-price-tax-label {
	font-size: 10.5px;
	font-weight: 400;
	color: var(--ec-mute);
	margin: 0;
}
.ec-prod-card-price .ec-price-tax-note {
	font-size: 10.5px;
	font-weight: 400;
	color: var(--ec-mute-2, #94A3B8);
	display: block;
	margin: 0;
}
.ec-prod-card-price del { font-weight: 400; font-size: 12px; color: var(--ec-mute); }
/* Gjest: server-gated pris-label får samme høyde som vanlig pris */
.ec-prod-card-price .easycorp-price-gated,
.ec-prod-card-price .easycorp-login-prompt { font-size: 13px; font-weight: 500; color: var(--shop-navy, #1e3a5f); }

/* ----- Lager-badge ----- */
.ec-prod-card-stock { height: 22px; display: flex; align-items: center; }
/* Bestillingsvare — navy-soft (vokabular fra easycorp_stock_state()) */
.ec-badge--backorder { background: var(--shop-navy-soft, #E8EEF5); color: var(--shop-navy, #1E3A5F); }

/* ----- CTA-rad ----- */
.ec-prod-card-cta {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-height: 44px;
}
/* WC AJAX add-to-cart-tilstander (core add-to-cart.js setter klassene) */
.ec-prod-card-add.loading {
	opacity: 0.65;
	pointer-events: none;
	position: relative;
}
.ec-prod-card-add.loading::after {
	content: '';
	display: inline-block;
	width: 12px; height: 12px;
	margin-left: 7px;
	vertical-align: -1px;
	border: 2px solid rgba(255,255,255,0.45);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: ec-card-add-spin 0.6s linear infinite;
}
.ec-prod-card-add.added::after { content: ' ✓'; }
@keyframes ec-card-add-spin { to { transform: rotate(360deg); } }
/* WC appender en «Vis handlekurv»-lenke etter AJAX-add — mini-cart-draweren
   ER feedbacken vår, så lenken skjules (samme filosofi som cart-notices.php). */
.ec-prod-card-cta .added_to_cart { display: none; }

/* ====================================================================
 * List-variant — aktiv via container [data-ec-catalog-view="list"]
 * (katalog-toggle) eller .ec-prod-card--list (render-arg).
 * ==================================================================== */
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card,
.ec-prod-card--list {
	display: grid;
	grid-template-columns: 180px 1fr 200px;
	gap: 20px;
	padding: 0;
	align-items: stretch;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-link,
.ec-prod-card--list .ec-prod-card-link {
	display: block;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-img-wrap,
.ec-prod-card--list .ec-prod-card-img-wrap {
	aspect-ratio: 1 / 1;
	min-height: 180px;
	border-right: 1px solid var(--shop-line);
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-body,
.ec-prod-card--list .ec-prod-card-body {
	padding: 18px 0;
	gap: 6px;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-name,
.ec-prod-card--list .ec-prod-card-name {
	font-size: 16px;
	min-height: 0; /* override 2-line clamp i list-view (mer plass tilgjengelig) */
	-webkit-line-clamp: 1;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-specs,
.ec-prod-card--list .ec-prod-card-specs {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-spec,
.ec-prod-card--list .ec-prod-card-spec {
	background: var(--shop-surface-2);
	padding: 3px 9px;
	border-radius: 4px;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-cta,
.ec-prod-card--list .ec-prod-card-cta {
	padding: 18px 18px 18px 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	border-left: 1px solid var(--shop-line);
	padding-left: 18px;
	min-height: 100%;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-price,
.ec-prod-card--list .ec-prod-card-price {
	font-size: 20px;
	min-height: 0;
	margin-bottom: 8px;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-stock,
.ec-prod-card--list .ec-prod-card-stock {
	margin-bottom: 8px;
}
.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-brand,
.ec-prod-card--list .ec-prod-card-brand {
	font-size: 11px;
	margin-bottom: 2px;
}

/* List-view: pakk sammen på smale viewports — fold CTA under body */
@media (max-width: 700px) {
	.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card,
	.ec-prod-card--list {
		grid-template-columns: 120px 1fr;
		gap: 12px;
	}
	.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-img-wrap,
	.ec-prod-card--list .ec-prod-card-img-wrap {
		min-height: 120px;
	}
	.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-cta,
	.ec-prod-card--list .ec-prod-card-cta {
		grid-column: 1 / -1;
		padding: 0 14px 14px;
		border-left: 0;
		border-top: 1px solid var(--shop-line);
		padding-top: 12px;
		flex-direction: row;
		flex-wrap: wrap;
		min-height: 0;
	}
	.ec-shop-catalog-grid[data-ec-catalog-view="list"] .ec-prod-card-price,
	.ec-prod-card--list .ec-prod-card-price {
		font-size: 17px;
	}
}

/* ====================================================================
 * Skeleton-kort under AJAX-fetch (bygges av ajax-filter.js).
 * ==================================================================== */
.ec-prod-card-skeleton {
	background: #FFFFFF;
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex; flex-direction: column;
	min-height: 380px;
}
.ec-prod-card-skeleton-img {
	aspect-ratio: 1 / 1;
	background: linear-gradient(90deg, var(--shop-surface-2, #F1F5F9) 0%, #E5EAF0 50%, var(--shop-surface-2, #F1F5F9) 100%);
	background-size: 200% 100%;
	animation: ec-skel-shimmer 1.6s linear infinite;
}
.ec-prod-card-skeleton-body {
	padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.ec-prod-card-skeleton-line {
	height: 10px;
	background: linear-gradient(90deg, #E5EAF0 0%, #F1F5F9 50%, #E5EAF0 100%);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: ec-skel-shimmer 1.6s linear infinite;
}
.ec-prod-card-skeleton-line--brand  { width: 32%; height: 8px; }
.ec-prod-card-skeleton-line--title  { width: 88%; height: 12px; margin-top: 2px; }
.ec-prod-card-skeleton-line--title2 { width: 64%; height: 12px; margin-top: 2px; }
.ec-prod-card-skeleton-line--meta   { width: 48%; height: 8px; }
.ec-prod-card-skeleton-line--spec   { width: 72%; height: 8px; }
.ec-prod-card-skeleton-line--spec2  { width: 56%; height: 8px; }
.ec-prod-card-skeleton-line--spec3  { width: 64%; height: 8px; }
.ec-prod-card-skeleton-line--price  { width: 38%; height: 18px; margin-top: auto; }
.ec-prod-card-skeleton-line--cta    { width: 100%; height: 36px; border-radius: 6px; margin-top: 6px; }

@keyframes ec-skel-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ====================================================================
 * Responsivt — kort-interne tweaks (grid-containere eies av surfacene).
 * ==================================================================== */

/* Touch-target minimum 44px på kortets interaktive elementer */
@media (max-width: 800px) {
	.ec-prod-card-cta .ec-btn,
	.ec-prod-card-cta button { min-height: 44px; }
}

/* Smale skjermer: krymp indre paddings/typografi */
@media (max-width: 500px) {
	.ec-prod-card-body { padding: 12px; gap: 5px; }
	.ec-prod-card-name { font-size: 13px; }
	.ec-prod-card-price { font-size: 16px; min-height: 38px; }
	.ec-prod-card-cta { padding-top: 8px; gap: 4px; }
	.ec-prod-card-meta { font-size: 10px; }
	.ec-prod-card-spec { font-size: 10.5px; }
	.ec-prod-card-spec-label { min-width: 36px; font-size: 9px; }
}