/* ==========================================================================
   Svenska Barr — temats stilmall (etapp 2)
   Läser ENDAST tokens (var(--*)) — aldrig råa värden (regel 3, 01-DESIGNSYSTEM).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Temats tilläggstoken — värden som specas i 01-DESIGNSYSTEM (header/footer)
   men saknas i barr-tokens.css. Tokenfilen kopieras oförändrad ur handoff-
   paketet, därför bor tilläggen här. Flyttas in i barr-tokens.css den dag
   designsystemet uppdateras.
   -------------------------------------------------------------------------- */
:root {
	--barr-topbar-text:  #e5e2d6;  /* 01 §Topbar */
	--barr-footer-text:  #c4c9bd;  /* 01 §Footer */
	--barr-footer-head:  #f0ece0;  /* 01 §Footer, kolumnrubriker */
	--barr-footer-line:  rgba(238, 234, 224, 0.14);
	--barr-header-line:  rgba(43, 58, 46, 0.07);
	--barr-footer-pad-y: 56px;
}

/* --------------------------------------------------------------------------
   Bas
   -------------------------------------------------------------------------- */
body {
	background: var(--color-bg);
	color: var(--color-text-body);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

/* Footern låst mot botten: sidans stomme fyller alltid hela höjden och
   main tar upp överskottet. .wp-site-blocks är blocktemats rotcontainer. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
	color: var(--color-text);
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--lh-head);
}

h1 { font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.01em; }
h4 { font-size: var(--text-h4); font-weight: 500; }

a { color: var(--color-action-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection {
	background: var(--color-action-tint);
	color: var(--barr-ochre-800);
}

.has-label-font-size {
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Knappar (01 §Knappar). Registreras som blockstilar på core/button.
   Radie --radius-md. Text aldrig centrerad i blockknapp — vänsterställd.
   -------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

/* Primär (ockra) — standard */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-barr-primar .wp-block-button__link {
	background: var(--color-action);
	color: var(--color-action-text);
	border: none;
	padding: 15px 28px;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-barr-primar .wp-block-button__link:hover {
	background: var(--color-action-hover);
	text-decoration: none;
}

/* Sekundär */
.wp-block-button.is-style-barr-sekundar .wp-block-button__link {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1.5px solid var(--color-border);
	padding: 13px 24px;
}
.wp-block-button.is-style-barr-sekundar .wp-block-button__link:hover {
	background: var(--color-surface);
	border-color: var(--color-action-hover);
	color: var(--color-action-hover);
}

/* Varumärke (mörk grön) */
.wp-block-button.is-style-barr-varumarke .wp-block-button__link {
	background: var(--color-brand);
	color: var(--color-text-invert);
	border: none;
	padding: 15px 26px;
}
.wp-block-button.is-style-barr-varumarke .wp-block-button__link:hover {
	background: var(--barr-green-900);
}

/* Ghost */
.wp-block-button.is-style-barr-ghost .wp-block-button__link {
	background: transparent;
	color: var(--color-action-hover);
	border: none;
	padding: 13px 6px;
}
.wp-block-button.is-style-barr-ghost .wp-block-button__link:hover {
	text-decoration: underline;
}

/* På mörk grön yta: primär byter ALDRIG färg; sekundär blir genomskinlig. */
.barr-dark .wp-block-button.is-style-barr-sekundar .wp-block-button__link {
	background: rgba(255, 253, 249, 0.09);
	border-color: rgba(244, 241, 232, 0.34);
	color: var(--color-text-invert);
}

/* --------------------------------------------------------------------------
   Sektionsvarianter (02 nivå 1). Blockstilar på core/group.
   -------------------------------------------------------------------------- */
.is-style-sektion-ljus  { background: var(--color-surface); }
.is-style-sektion-sand  { background: var(--color-surface-tint); }
.is-style-sektion-mork,
.barr-dark {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
}
.is-style-sektion-mork h1, .is-style-sektion-mork h2, .is-style-sektion-mork h3,
.is-style-sektion-mork h4, .is-style-sektion-mork h5, .is-style-sektion-mork h6,
.barr-dark h1, .barr-dark h2, .barr-dark h3, .barr-dark h4, .barr-dark h5, .barr-dark h6 {
	color: var(--color-text-invert);
}
.is-style-sektion-ockra { background: var(--color-action-tint); }

/* --------------------------------------------------------------------------
   Taggar och statusmärken (01 §Taggar). Pill, 11px, 700, 0.06em, versaler.
   -------------------------------------------------------------------------- */
.barr-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border-radius: var(--radius-pill);
	padding: 6px 12px;
	font-size: var(--text-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}
.barr-tag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--radius-pill);
	background: currentColor;
}
.barr-tag--i-lager    { background: var(--color-instock-tint); color: var(--color-instock-text); }
.barr-tag--i-lager::before { background: var(--color-instock); }
.barr-tag--mattsytt   { background: var(--barr-sand-200); color: var(--color-text-body); }
.barr-tag--mattsytt::before { background: var(--barr-ink-300); }
.barr-tag--spara      { background: var(--color-action); color: var(--color-action-text); }
.barr-tag--nyhet      { background: var(--color-surface-dark); color: var(--barr-green-100); }
.barr-tag--fa-kvar    { background: var(--barr-ochre-100); color: var(--barr-ochre-800); }
.barr-tag--spara::before,
.barr-tag--nyhet::before,
.barr-tag--fa-kvar::before { display: none; }

/* --------------------------------------------------------------------------
   Topbar (01 §Topbar)
   -------------------------------------------------------------------------- */
.barr-topbar {
	background: var(--color-surface-dark);
	color: var(--barr-topbar-text);
	font-size: var(--text-xs);
	padding: 11px var(--page-pad);
}
.barr-topbar a { color: var(--barr-topbar-text); }
.barr-topbar__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-8);
}
.barr-topbar__points { display: flex; gap: 34px; flex-wrap: wrap; }
.barr-topbar__points span::before {
	content: "✓ ";
	color: var(--color-instock);
}

/* --------------------------------------------------------------------------
   Header (01 §Header)
   -------------------------------------------------------------------------- */
.barr-header {
	background: var(--color-surface);
	position: sticky;
	top: 0;
	z-index: 40;
	padding: 18px var(--page-pad);
	box-shadow: 0 1px 0 var(--barr-header-line);
	white-space: nowrap; /* navigationen får aldrig radbrytas */
}
.barr-header__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.barr-header .barr-logo { width: 200px; color: var(--color-brand); flex: none; }
.barr-header .wp-block-navigation { flex: 1; }
.barr-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 9px 14px;
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: 500;
}
.barr-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--barr-sand-200);
	text-decoration: none;
}

/* Skickas idag-pillen i navigationen */
.barr-pill-instock,
.barr-header .wp-block-navigation-item.barr-pill-instock .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-instock-tint);
	color: var(--color-instock-text);
	border-radius: var(--radius-pill);
	font-weight: 700;
}
.barr-pill-instock .wp-block-navigation-item__content::before,
a.barr-pill-instock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--radius-pill);
	background: var(--color-instock);
	display: inline-block;
	margin-right: var(--space-2);
}
.barr-header .wp-block-navigation-item.barr-pill-instock .wp-block-navigation-item__content:hover {
	background: var(--color-instock-tint);
}

/* Headerns CTA — exakt en ockra knapp ovanför mitten: det är den här. */
.barr-header__cta {
	background: var(--color-action);
	color: var(--color-action-text);
	border-radius: var(--radius-md);
	padding: 12px 20px;
	font-size: var(--text-sm);
	font-weight: 700;
	flex: none;
}
.barr-header__cta:hover {
	background: var(--color-action-hover);
	color: var(--color-action-text);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Footer (01 §Footer)
   -------------------------------------------------------------------------- */
.barr-footer {
	background: var(--color-surface-dark);
	color: var(--barr-footer-text);
	padding: var(--barr-footer-pad-y) var(--page-pad) var(--space-7);
	font-size: var(--text-sm);
}
.barr-footer a { color: var(--barr-footer-text); }
.barr-footer a:hover { color: var(--color-text-invert); }
.barr-footer__inner { max-width: var(--page-max); margin: 0 auto; }
.barr-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
	gap: var(--space-10);
}
.barr-footer__head {
	color: var(--barr-footer-head);
	font-size: var(--text-label);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 var(--space-4);
}
.barr-footer ul { list-style: none; margin: 0; padding: 0; }
.barr-footer li { margin-bottom: var(--space-3); }
.barr-footer .barr-logo { width: 180px; color: var(--color-text-invert); margin-bottom: var(--space-4); }
.barr-footer__seal { width: 96px; color: var(--barr-ochre-200); }
.barr-footer__bottom {
	border-top: 1px solid var(--barr-footer-line);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	display: flex;
	justify-content: space-between;
	gap: var(--space-6);
	font-size: var(--text-xs);
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Produktkort (01 §Produktkort). En mall för hela butiken —
   måttsytt och lagervara skiljs BARA på taggen.
   -------------------------------------------------------------------------- */
.barr-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* ALDRIG 1fr utan minmax */
	gap: var(--gutter);
}
.barr-card { position: relative; }
.barr-card__media {
	position: relative;
	border-radius: var(--radius-lg);
	height: 196px;
	overflow: hidden;
	background: var(--barr-sand-200);
	margin-bottom: var(--space-3);
}
.barr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.barr-card__media .barr-tag { position: absolute; top: 11px; left: 11px; }
.barr-card__name {
	font-size: var(--text-body);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
}
.barr-card__name a { color: var(--color-text); }
.barr-card__note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 2px 0 var(--space-2);
}
.barr-card__price {
	font-size: var(--text-body);
	font-weight: 700; /* priser i DM Sans 700 — läsas snabbt, inte vackert */
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Tillitsblock (01 §Tillitsblock). Obligatoriskt på måttsydda produktsidor,
   i mätflödet och i kassan.
   -------------------------------------------------------------------------- */
.barr-trust { display: grid; gap: var(--space-4); }
.barr-trust__item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-size: var(--text-sm);
}
.barr-trust__item::before {
	content: "✓";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	background: var(--color-instock-tint);
	color: var(--color-instock-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	font-weight: 700;
}
.barr-trust__item strong { color: var(--color-text); }
.barr-dark .barr-trust__item strong { color: var(--color-text-invert); }

/* --------------------------------------------------------------------------
   CTA-band — mörk grön sektion med rubrik + primärknapp.
   -------------------------------------------------------------------------- */
.barr-cta-band {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
	border-radius: var(--radius-2xl);
	padding: var(--space-12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	flex-wrap: wrap;
}
.barr-cta-band h2, .barr-cta-band h3 { color: var(--color-text-invert); margin: 0; }
.barr-cta-band p { color: var(--barr-footer-text); margin: var(--space-2) 0 0; }

/* --------------------------------------------------------------------------
   Brödsmulor
   -------------------------------------------------------------------------- */
.barr-crumbs {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding: var(--space-4) 0;
}
.barr-crumbs a { color: var(--color-text-muted); }
.barr-crumbs a:hover { color: var(--color-action-hover); }

/* --------------------------------------------------------------------------
   Märkta undantagsklasser — HELA listan (02-TEMA-REGLER, nivå 3).
   -------------------------------------------------------------------------- */
.barr-tone-ochre {
	--color-brand: var(--barr-ochre-500);
	--color-instock-tint: var(--barr-ochre-100);
	--color-instock-text: var(--barr-ochre-800);
}
.barr-flush {
	padding-left: 0;
	padding-right: 0;
	margin-left: calc(-1 * var(--page-pad));
	margin-right: calc(-1 * var(--page-pad));
}
.barr-tight {
	--section-gap: var(--space-12);
	--gutter: var(--space-4);
}

/* --------------------------------------------------------------------------
   Responsivt (01 §Responsivt)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.barr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.barr-topbar__points span:nth-child(n+3) { display: none; }
}
@media (max-width: 899px) {
	.barr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.barr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.barr-topbar { display: none; }
	.barr-header { white-space: normal; }
}
@media (max-width: 599px) {
	.barr-grid { grid-template-columns: minmax(0, 1fr); }
	.barr-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.barr-header .barr-logo { width: 160px; } /* minsta tillåtna bredd */
	.barr-header__cta { display: none; } /* CTA fästs i botten på produktsidor, etapp 5 */
}