/* =========================================================
   SHOP COMPONENTS  ·  Easycorp Shop Child
   Komponentbiblioteket vokser fasevis. Fase 1 = kun grunnlag
   (knapper, badges, kort, input, logo). Senere faser legger til
   header, megameny, produktkort, PDP, kurv, kasse, min konto.
   ========================================================= */

/* Reset light-touch — ikke et fullt CSS-reset; lar parent håndtere
   det. Vi normaliserer kun box-sizing og margins for body/html. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ----- Logo lockup (delt med corp-flaten) ----- */
.ec-logo {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--font-logo);
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1;
	user-select: none;
	color: var(--text, var(--ec-ink));
}
.ec-logo .ec-logo-text { color: inherit; font-size: inherit; }
.ec-logo.on-dark, .ec-logo.on-dark .ec-logo-text { color: #FFFFFF; }
.ec-logo .ec-logo-o {
	display: inline-block;
	width: 0.9em; height: 0.9em;
	border: 0.07em solid var(--ec-red);
	border-radius: 50%;
	margin: 0 0.02em;
	position: relative;
	top: 0.02em;
	box-sizing: border-box;
}

/* ----- Knapper ----- */
.ec-btn {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 14px;
	border: 1px solid transparent;
	cursor: pointer;
	padding: 11px 20px;
	border-radius: var(--btn-radius);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
}
.ec-btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.ec-btn-primary:hover { background: var(--shop-navy-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ec-btn-outline {
	background: transparent;
	color: var(--text);
	border-color: var(--line);
}
.ec-btn-outline:hover { border-color: var(--text); }
.ec-btn-ghost { background: transparent; color: var(--text); }
.ec-btn-ghost:hover { background: var(--accent-soft); }
.ec-btn-sm { padding: 7px 14px; font-size: 13px; }
.ec-btn-lg { padding: 14px 24px; font-size: 15px; }
.ec-btn-block { width: 100%; }

/* ----- Kort ----- */
.ec-card {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.ec-card--pad { padding: 20px; }

/* ----- Badges ----- */
.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--r-sm);
	letter-spacing: 0.02em;
}
.ec-badge--sale  { background: var(--shop-sale-soft);    color: var(--shop-sale); }
.ec-badge--new   { background: var(--shop-navy-soft);    color: var(--shop-navy); }
.ec-badge--stock { background: var(--shop-success-soft); color: var(--shop-success); }
.ec-badge--low   { background: var(--shop-warn-soft);    color: var(--shop-warn); }
.ec-badge--mute  { background: var(--shop-line-2);       color: var(--ec-mute); }

/* ----- Skjema ----- */
.ec-input, .ec-select, .ec-textarea {
	font-family: var(--font-ui);
	font-size: 14px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #FFFFFF;
	color: var(--ec-ink);
	width: 100%;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.ec-input:focus, .ec-select:focus, .ec-textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.ec-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--ec-mute);
	margin-bottom: 6px;
}

/* Util */
.ec-muted { color: var(--ec-mute); }
.ec-small { font-size: 12px; }
.ec-tiny  { font-size: 11px; }
.ec-shell { max-width: var(--container); margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); }