/* =========================================================
   SHOP HOME  ·  forsidekomponenter
   Hero, perks, kategoriraster, produktstrip, promo, brands,
   editorial-strip. Scoped med ec-shop-* så ingen kollisjon med
   bridge sin legacy storefront-CSS.
   ========================================================= */

/* ----- Section base ----- */
.ec-shop-section {
	padding: 56px 0;
}
.ec-shop-section--muted { background: var(--shop-surface); }
.ec-shop-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}
.ec-shop-eyebrow {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-mute);
	margin: 0;
}
.ec-shop-h2 {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: -0.01em;
	margin: 4px 0 0;
	color: var(--ec-ink);
	line-height: 1.15;
}
.ec-shop-section-link {
	font-size: 13px;
	color: var(--ec-ink);
	text-decoration: none;
	font-weight: 500;
	transition: color .15s;
}
.ec-shop-section-link:hover { color: var(--shop-navy); }

/* ----- Hero ----- */
.ec-shop-hero {
	background: linear-gradient(180deg, var(--shop-surface) 0%, #FFFFFF 100%);
	padding: 56px 0 64px;
	border-bottom: 1px solid var(--shop-line);
}
.ec-shop-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
}
.ec-shop-hero-eyebrow {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-red);
	margin: 0 0 12px;
}
.ec-shop-hero-title {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	color: var(--ec-ink);
}
.ec-shop-hero-lead {
	font-size: 16px;
	color: var(--ec-mute);
	max-width: 460px;
	line-height: 1.6;
	margin: 0 0 24px;
}
.ec-shop-hero-ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ec-shop-hero-vis {
	aspect-ratio: 5 / 4;
	background: var(--shop-surface-2);
	border-radius: var(--r-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ec-mute-2);
	font-family: var(--font-mono);
	font-size: 12px;
	position: relative;
	overflow: hidden;
}
.ec-shop-hero-vis-ring {
	position: absolute;
	right: -60px;
	top: -60px;
	width: 240px;
	height: 240px;
	border: 2px solid var(--ec-red);
	border-radius: 50%;
	opacity: 0.5;
}
.ec-shop-hero-vis-placeholder { position: relative; z-index: 1; }
.ec-shop-hero-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	padding: 24px;
	position: relative;
	z-index: 1;
}
.ec-shop-hero-img-link {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	transition: transform .2s;
}
.ec-shop-hero-img-link:hover { transform: scale(1.02); }

/* ----- Perks-strip ----- */
.ec-shop-perks {
	padding: 22px 0;
	border-bottom: 1px solid var(--shop-line);
}
.ec-shop-perks-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.ec-shop-perk {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.ec-shop-perk-ico {
	font-size: 22px;
	flex-shrink: 0;
	line-height: 1;
}
.ec-shop-perk-ttl {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
	color: var(--ec-ink);
}
.ec-shop-perk-sub {
	font-size: 12px;
	color: var(--ec-mute);
	margin-top: 2px;
	line-height: 1.4;
}
.ec-shop-perks-foot {
	margin: 0 auto 14px;
	font-size: 11px;
	color: var(--ec-mute);
	line-height: 1.4;
	text-align: center;
	max-width: 100%;
}

/* ----- Category grid ----- */
.ec-shop-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}
.ec-shop-cat-tile {
	background: var(--shop-surface);
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	padding: 18px 14px;
	text-align: center;
	text-decoration: none;
	color: var(--ec-ink);
	transition: background .15s, border-color .15s, transform .15s;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.ec-shop-cat-tile:hover {
	background: #FFFFFF;
	border-color: var(--ec-ink);
	transform: translateY(-1px);
}
.ec-shop-cat-tile-name {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
}
.ec-shop-cat-tile-ct {
	font-size: 11px;
	color: var(--ec-mute);
	font-family: var(--font-mono);
}

/* ----- Product grid ----- */
.ec-shop-prod-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

/* ----- Promo banner ----- */
.ec-shop-promo {
	background: var(--shop-navy);
	color: #FFFFFF;
	border-radius: var(--r-lg);
	padding: 40px 48px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.ec-shop-promo::after {
	content: '';
	position: absolute;
	right: -120px;
	top: -120px;
	width: 360px;
	height: 360px;
	border: 1.5px solid rgba(233,40,40,0.4);
	border-radius: 50%;
	pointer-events: none;
}
.ec-shop-promo-eb {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ec-red);
	margin: 0 0 8px;
}
.ec-shop-promo h2 {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	margin: 0 0 12px;
	color: #FFFFFF;
}
.ec-shop-promo p {
	color: rgba(255,255,255,0.78);
	font-size: 14px;
	margin: 0 0 18px;
	max-width: 520px;
}
.ec-shop-promo-stats {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	z-index: 1;
}
.ec-shop-promo-stat {
	padding: 14px 18px;
	background: rgba(255,255,255,0.08);
	border-radius: var(--r-md);
}
.ec-shop-promo-stat-v {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 22px;
	color: #FFFFFF;
}
.ec-shop-promo-stat-k {
	font-size: 11px;
	color: rgba(255,255,255,0.65);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-family: var(--font-ui);
	margin-top: 2px;
}

/* ----- Brands strip ----- */
.ec-shop-brands {
	background: var(--shop-surface);
	padding: 32px 0;
	border-top: 1px solid var(--shop-line);
	border-bottom: 1px solid var(--shop-line);
}
.ec-shop-brands-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}
.ec-shop-brands-eb {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-mute);
}
.ec-shop-brands-list {
	flex: 1;
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.ec-shop-brand-name {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 16px;
	color: var(--ec-mute);
	letter-spacing: 0.04em;
	transition: color .15s;
}
.ec-shop-brand-name:hover { color: var(--ec-ink); }

/* ----- Editorial strip ----- */
.ec-shop-ed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ec-shop-ed-card {
	background: #FFFFFF;
	border: 1px solid var(--shop-line);
	border-radius: var(--r-lg);
	padding: 22px;
	text-decoration: none;
	color: var(--ec-ink);
	transition: border-color .15s, transform .15s, box-shadow .15s;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ec-shop-ed-card:hover {
	border-color: var(--ec-ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.ec-shop-ed-card-eb {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ec-red);
}
.ec-shop-ed-card h3 {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.005em;
	margin: 0;
	line-height: 1.25;
	color: var(--ec-ink);
}
.ec-shop-ed-card p {
	margin: 0;
	color: var(--ec-mute);
	font-size: 13px;
	line-height: 1.55;
}
.ec-shop-ed-card-cta {
	margin-top: auto;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 12px;
	color: var(--shop-navy);
}

/* ----- Product card ----- */
.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);
}
.ec-prod-card-img-wrap img {
	transition: transform .25s ease;
}
.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;
}
.ec-prod-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}
.ec-prod-card-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.ec-prod-card-brand {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ec-mute);
	font-weight: 600;
}
.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; }

/* Rating-stjerner — CSS-mask som filler i prosent. Ingen avhengighet av
   bilde-asset; bruker SVG-mask for crisp rendering på alle skjermer. */
.ec-prod-card-rating {
	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%;
	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); }

/* Brand + rating + meta har faste høyder så kort linjer opp uavhengig
   av om enkelt-produkt mangler en av disse. Resultat: rene rader når
   man scroller. Slots rendres alltid i markup; bare innholdet varierer. */
.ec-prod-card-brand {
	height: 14px;
	line-height: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ec-prod-card-rating {
	height: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Tom rating-slot: ingen synlige stjerner, men slot beholdes for justering */
.ec-prod-card-rating--empty .ec-prod-card-stars,
.ec-prod-card-rating--empty .ec-prod-card-stars-fill { visibility: hidden; }
.ec-prod-card-meta {
	font-size: 11px;
	color: var(--ec-mute);
	font-family: var(--font-mono);
	height: 14px;
	line-height: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Key specs — opp til 3 sentrale produktdata-punkter per kort.
 * Reservert min-høyde tilsvarende 3 linjer pluss gaps, slik at kort
 * med 0/1/2/3 specs alle får samme totalhøyde. Forhindrer "et kort
 * blir kortere"-effekten på grid-rader hvor noen produkter mangler
 * spec-data fra Bridge/Icecat.
 *
 * 3 × 18px line-height + 2 × 3px gap = 60px.
 */
.ec-prod-card-specs {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 3px;
	min-height: 60px;
}
.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;
}
/* Tom specs-slot — usynlig men beholder plassen for grid-justering */
.ec-prod-card-specs--empty { visibility: hidden; }

/* Pris-blokken — flex-column (NOT row) så primær-pris og tax-note stables
   stabilt. Fast min-height som rommer primær + sekundær på alle kort,
   uavhengig av om produkter har tax-display på/av. */
.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); }
.ec-prod-card-stock { height: 22px; display: flex; align-items: center; }
.ec-prod-card-cta {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	min-height: 44px;
}
/* "Logg inn for pris"-rad 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); }

/* ----- Responsiv ----- */
@media (max-width: 1100px) {
	.ec-shop-cat-grid { grid-template-columns: repeat(4, 1fr); }
	.ec-shop-prod-grid { grid-template-columns: repeat(3, 1fr); }
	.ec-shop-ed-grid { grid-template-columns: 1fr; }
	.ec-shop-promo { grid-template-columns: 1fr; padding: 32px 28px; }
	.ec-shop-perks-inner { grid-template-columns: repeat(2, 1fr); }
}
/* Mellomstore vinduer — gå tidlig ned til 2 kolonner produkter
   slik at kortene ikke klemmes til ulesbart format. */
@media (max-width: 960px) {
	.ec-shop-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.ec-shop-prod-grid { grid-template-columns: repeat(2, 1fr); }
	.ec-shop-section { padding: 44px 0; }
	.ec-shop-hero-inner { gap: 20px; }
}
@media (max-width: 720px) {
	.ec-shop-section { padding: 36px 0; }
	.ec-shop-hero { padding: 36px 0; }
	.ec-shop-hero-inner { grid-template-columns: 1fr; gap: 24px; }
	.ec-shop-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.ec-shop-prod-grid { grid-template-columns: repeat(2, 1fr); }
	.ec-shop-section-head { flex-direction: column; align-items: flex-start; }
	.ec-shop-promo h2 { font-size: 24px; }
}